Hi All,

     Here you can get the idea about the expanding of div inside an master page or any other pages. This has some animation. That is if you click on the Login Link then the below login tab will be open with some animation.
    Here you may find the style used for this sample in style tag. Please have a look at the following coding,

This should be inside the head tag.

<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#expand
{
display: none;
background-color: Transparent;
position: absolute;
z-index: 100; /* padding: 16px;
background-color: Blue;
z-index: 1000;
width:350px; */
}

.expandInfo
{
background-color: Transparent;
margin: 0;
padding: 0px;
}
</style>
 

<script type="text/javascript">
<!--
$(function () {
$('.expandInfo a').click(function () {
$('#expand').slideToggle(1500);
return false;
});
})
//-->
</script>

<script type="text/javascript">
<!--
$(function () {
$('.expandInfoClose a').click(function () {
$('#expand').slideToggle(1500);
return false;
});
})
//-->
</script>
 
Then the body content may be as follows,
 
<div class="bg">
<p class="expandInfo">
<a href="#home" title="Login" class="login" style="width: 100px; height: 100px;">Login</a>
</p><br />
<br />
<div id="expand"><table cellpadding="0" cellspacing="0" class="loginbg">
<tr>
<td valign="top" style="padding-left: 30px">
<div style="float: right; padding-right: 10px">
<p class="expandInfoClose">
<a href="#home" title="Close">
<asp:Image runat="server" ID="imgcloselog" SkinID="imgLoginBoxClose" />
</a>
</p>
</div>
<asp:Panel runat="server" ID="pnlLoginMaster" DefaultButton="btnLogin">
<table cellpadding="4" cellspacing="4" align="left" style="margin-top: 60px;">
<tr>
<td align="left" valign="top">
<%--// CONTENTS--%>
cellspacingcellspacingcellsp acingcellspacing cellspacing cellspacingcells pacingcellspacingcellspacing
cellspacing cellsp acing cellspa cingcellspa cingcel lspacingce llsp acing
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</div>
</div>

You can download the jquery here
If you have any questions please feel free to post comments....
Suggessions always welcome ..........Happy coding!!!!!!!

Meet you again!!!!!!!!

Here is the coding for Watermark inside a textbox. That is initially the message will show inside the textbox. Once you click on the textbox it will disappear. This is used by jquery.

CSS:

<style type="text/css" media="screen">
.water
{
font-family: Tahoma, Arial, sans-serif;
color: blue;
}
</style>

 
SCRIPT:
 
        <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
 
DESIGN:
  <div>


<h2>

Watermarked TextBox </h2>

<br />
<asp:TextBox ID="txtFirstName" class="water" Text="Enter First Name" ToolTip="Enter First Name" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtLastName" class="water" Text="Enter Last Name" ToolTip="Enter Last Name" runat="server"></asp:TextBox> <br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="vgNews" /></div>



 
Please give your comments if you need any clarification.... Also I will post watermark using ajax in the next post... Happy Coding!!!

If you need this Jquery please click here to download