Parth H. Dave's Blogger: February 2017

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

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

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

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

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

<head runat="server">

<title></title>

</head>

<body style="height: 316px">

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

<div>

<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">

</cc1:JaxterChat>

<br />

<br />

</div>

</form>

</body>

</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

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)

Parth H. Dave's Blogger

Sunday, February 12, 2017

Implementation of Text Chat Using JaxterChat Control in ASP.NET

Friday, February 3, 2017

Set Background Image throughout Webpage Using HTML5 and CSS3