Implementation of Text Chat Using JaxterChat Control in ASP.NET

JaxterChat is an effective tool for nurturing online communities within your website. By combining the rapid response of ajax with the power and flexibility of ASP.NET, 

JaxterChat supports a rich designer interface for previewing the appearance of the control at design time. Display properties can be adjusted and the effects of these changes are reflected instantly in the Visual Studio designer view.

Now We are going to implement Text Chat using Jaxter Chat control in ASP.NET.

Textchat.aspx

1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  

1.   

1.     <%@ Register assembly="JaxterChat" namespace="WebFurbish" tagprefix="cc1" %>  

1.   

1.         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

1.   

1.         <html xmlns="http://www.w3.org/1999/xhtml">  

1.   

1.         <head runat="server">  

1.   

1.             <title></title>  

1.   

1.         </head>  

1.   

1.         <body style="height: 316px">  

1.   

1.             <form id="form1" runat="server">  

1.   

1.                 <div>  

1.   

1.   

1.                     <cc1:JaxterChat ID="JaxterChat1" runat="server" BackColor="#A0AB9D" BackImageUrl="JaxterChat/Themes/Googleish/back_strip_4.jpg" ClearPageButtonImageUrl="JaxterChat/Images/clear_page.gif" EmoticonsButtonImageUrl="JaxterChat/Images/emoticons.gif" FontColor="MidnightBlue" FontFace="Arial, Verdana" FontSizePixels="12" FooterPanelHeightPixels="0" HeaderPanelHeightPixels="23" Height="300px" MessageInputBackColor="White" MessageInputBorderColor="DarkGray" MessageInputBorderWidthPixels="1" MessageInputFontColor="Black" MessageInputFontFace="Arial, Verdana" MessageInputFontSizePixels="12" MessageInputHeightPixels="38" MessageInputPaddingBottomPixels="1" MessageInputPaddingLeftPixels="1" MessageInputPaddingRightPixels="1" MessageInputPaddingTopPixels="1" MessageOutputBackColor="White" MessageOutputBorderColor="DarkGray" MessageOutputBorderWidthPixels="1" MessageOutputFontColor="Black" MessageOutputFontFace="Arial, Verdana" MessageOutputFontSizePixels="12" MessageOutputLinkColor="90, 128, 198" MessageOutputPaddingBottomPixels="1" MessageOutputPaddingLeftPixels="8" MessageOutputPaddingRightPixels="1" MessageOutputPaddingTopPixels="2" MessageOutputPostIconUrl="JaxterChat/Themes/Googleish/icon.gif" MessageOutputUserNameFontColor="Black" PaddingBottomPixels="5" PaddingLeftPixels="4" PaddingRightPixels="4" PaddingTopPixels="3" PopupCloseButtonImageUrl="JaxterChat/Images/popup_close.gif" PopupWindowBackColor="Gainsboro" PopupWindowContentFontColor="Black" PopupWindowContentFontFace="Arial, Verdana" PopupWindowContentFontSizePixels="10" PopupWindowTitleFontColor="Black" PopupWindowTitleFontFace="Arial, Verdana" PopupWindowTitleFontSizePixels="12" ScrollBarIE3DLightColor="White" ScrollBarIEArrowColor="LightGray" ScrollBarIEBaseColor="Silver" ScrollBarIEDarkShadowColor="Silver" ScrollBarIEFaceColor="White" ScrollBarIEHighlightColor="AliceBlue" ScrollBarIEShadowColor="Silver" ScrollBarIETrackColor="Gainsboro" SendButtonImageUrl="JaxterChat/Images/send_button.gif" ShowSendButton="False" ToggleSoundOffButtonImageUrl="JaxterChat/Images/sound_off.gif" ToggleSoundOnButtonImageUrl="JaxterChat/Images/sound_on.gif" ToolbarPanelHeightPixels="21" UserListButtonImageUrl="JaxterChat/Images/users.gif" Width="359px">  

1.   

1.                     </cc1:JaxterChat>  

1.   

1.                     <br />  

1.   

1.                     <br />  

1.   

1.   

1.                 </div>  

1.   

1.             </form>  

1.   

1.         </body>  

1.   

1.         </html>  

Guys, I have attached source code with JaxterChat Package. Keep exploring. If you have any doubt, please feel free to ask me.

Source Code

Set Background Image throughout Webpage Using HTML5 and CSS3

In HTML,

Let me explain the steps first:

• Create a container such as <Div> tag.
• Take an <img> tag in Div (Specify appropriate 'src' attribute of <img> tag).
• Take another <Div> tag inside the outer container.
• Close the outer container.
  
  So, your code will look like the following code snippet:
  

In CSS,

Let me explain some steps:

• Define Position, Height and Width of Outer Container.
• Define Background Position, Background Repeat, Background Size, Height and Width of <img> tag.
• Define Position, Top, Left, Width, Z-Index for inner <div> tag. (Define Color, Font-family, Font-size, Text-align for displaying textual information if require.).

So, your CSS file will look like the following code snippet:

Key Points:

• Always define Height and Width of Container and Image in Percentage (%) rather than defining in Pixels. It really decreases your efforts for making your site responsive.
• Two important properties of <img> tag which you have to specify such as Background-Position and Background-Size.
• Background Position specifies at which position image should display.
• Background Size: Cover specified image should display throughout the page means it covers a particular area of a page. Image scales according to page size changes.

So, at last, you will get one page having a background image which can be automatically resized according to resolution (Responsive Web Design comes in the picture).

This type of solution is helpful when you make your page for various Mobile (320,360,480,640), I phone(375/376,667), I pad (1024) as well as Desktop (1024,1366,1600) Resolutions.

Demo Example (Source Code)

JSON (JavaScript Object Notation) HTTP Request by Ajax to Show Data on Webpage

First,We create one .Txt file which contains names of different countries.

Country.txt File: 

1. [  
2.     {  
3.         "display": "India",  
4.     },   
5.     {  
6.         "display": "China",  
7.     },   
8.     {  
9.         "display": "USA",  
10.     },   
11.     {  
12.         "display": "UK",  
13.     },   
14.     {  
15.         "display": "Canada",  
16.     },   
17.     {  
18.         "display": "Japan",  
19.     },   
20.     {  
21.         "display": "Russia",  
22.     },   
23. ]  

In the second step, Reads the data from file and display it to the webpage. Use XMLHttpRequest to read the text file, and use fetchData () to display the array.

JsonHttpXmlReqbyAjax.html  

1. <!DOCTYPE html>  
2. <html>  
3. <body>  
4. <div id="maindiv"></div>  
5. <script>  
6. var xmlhttp = new XMLHttpRequest();  
7. var url = "Country.txt";  
8. xmlhttp.onreadystatechange = function()  
9. {  
10.    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)  
11.    {  
12.          var myarray = JSON.parse(xmlhttp.responseText);  
13.          fetchData(myarray);  
14.    }  
15. }  
16. xmlhttp.open("GET", url, true);  
17. xmlhttp.send();  
18. function fetchData(arr)  
19. {  
20.          var out = "";  
21.          var i;  
22.           for(i = 0; i < arr.length; i++)  
23.          {  
24.                out += arr[i].display + '<br>';  
25.          }  
26.          document.getElementById("maindiv").innerHTML = out;  
27. }  
28. </script>  
29. </body>  
30. </html>  

After completing all these steps, you will get following output.

India

China

USA

UK

Canada

Japan

Russia 

Enjoy Coding...!!!

Play With Sass Using Compass - An Opensource CSS Authoring Framework

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your style sheets easier to organize and maintain. Compass uses Sass. Compass is a Sass framework, designed to make the work of styling the web smooth and efficient. Much like Rails as a web application framework for Ruby, Compass is a collection of helpful tools and tested best practices for Sass. 

Once you finished with the installation of Ruby Germs and Sass on your system, install compass in the next step. If you've not yet installed Ruby Germs and Sass on your system, please refer my following blog for installation:

Install SASS on Windows Using Ruby Gems

Now we are going to install Compass.

Open command prompt (CMD) and type the following command.

It will install Compass on your system. You will get the following message after installation of Compass.

Next we are going to install css parser. 

It gives a count of the Sass rules, properties, mixins defined and mixins used as well as the CSS rules and properties that get output from your Sass-style sheets.   

After installation, it will give you the following message:

Now we are going to create one sample project. 

You can create project using the following command:

 

After creation of project, you will get the following message.

In the next step, you have to compile Sass to css. So for that purpose, you have to add watch as in the following screenshot:

Once the watch is started, you will get the following message.

 

This kind of folder Structure is created once you create project.

Now, we are writing some Sass code and will send its impact on css file using Compass. 

I use Atom Editor (Open Source) for making this project. You can even use Notepad++, Sublime Text, etc for developing project.

You will see config.rb file in your project.

   

You can see all the references to the different directories Compass will need in order to compile your CSS. 

Now I am going to write some Sass code in screen.scss file.

 

After saving the complete code, changes will be reflected to css file as well as on command prompt. This could happen because of Compass.

style.css looks like the following:

I hope this quick tutorial made your Compass working environment possible.

Demo Example