Category Archives: Javascript

Floated User List with jQuery

Here I giving a tutorial for floated list of users expand and collapse with animation using jQuery. Here I display list expanded by default. See the html code below.

HTML

<div class="lggedUsr expanded">
  <div class="shwHdeBx">
   <a href="#" class="trgrShwHde"><span></span></a><span>Collapse</span>
  </div>
 <div class="lggedUsrCntnr">
  <ul>
   <li>
    <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
    <span>Binoy. P.M</span>
   </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Jos Mathew</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Jose Tharayil</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Melvin Peter</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Sebastin. S</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Susha Pillai</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Parvathi S</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Arun Varma</span>
  </li>
 </ul>
</div>
</div>

See the CSS code below

  body{
	background-image:url(../images/bg.jpg);
	background-size:cover;
	margin:0;
	font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
	}
.userData {
	background:;
	width:99%;
	border-collapse:collapse;
	border: 0px solid black;
	}
h4{
	font-size:19px;
	color:#222;
	margin-bottom:10px;
	padding: 4px 0;
	}

.userData thead{
	background:#f4f3f3;
	border:1px solid #cfcfcf;
	line-height:35px;
	text-align:left;
}
.userData thead th, .userData tbody td{
	padding-left:5px;
}
.userData tbody td{
	border-bottom:1px solid #cfcfcf;
	line-height:45px;
}
.count {
	background:rgb(45, 127, 192);
	color:#fff;
	border-radius:20px;
	display:inline-block;
	padding:4px;
	border:2px solid #fff;
	box-shadow:0 0 4px rgba(000,000,000,0.4);
	}
.blocks {
	float:left;
	width:45%;
	border-right:1px dotted #dadada;
	margin-right:20px;
	margin-bottom: 50px;
	padding-right:10px;
	}
.usrAccssBtns {
	float:right;
	padding-right: 6px;
	position:relative;
	}
.flt {float:left;}
.usrAccssBtns a {
	background:#f5f5f5;
	text-decoration:none;
	color:#333;
	border:1px solid #dedede;
	border-radius:20px;
	display:inline-block;
	padding:5px 10px;
	font-size:13px;
	margin-left:4px;
	box-shadow:0 1px 2px rgba(000,000,000,0.2);
	margin-top:5px;
	}
.usrAccssBtns a.active , .usrAccssBtns a:hover{
	border-color:#696969;
	box-shadow:none;
	font-weight:bold;
	color:rgb(45, 127, 192);
	}
 .usrAccssBtns a:hover{
	 font-weight:normal;
	 color:#333;
	 }
.usrAccssBtns a.active:hover {
	font-weight:bold;
	color:rgb(45, 127, 192);

	}
.dateRngBx {
	display:none;
	float:right;
	clear:both;
	border: 1px solid rgba(000,000,000,0.3);
	position:relative;
	right:10px;
	top:-10px;
	padding: 4px 20px 17px 20px;
	height:20px;
	width:470px;
	background:#f5f5f5;
	border-radius:3px;
	box-shadow:0 1px 8px rgba(000,000,000,0.3);
	}
.dateRngBx input[type=text]{
	border:1px solid #dedede;
	background: #fff;
	border-radius:15px;
	padding:5px 12px;
	font-size:15px;
	font-family: Helvetica, Arial, sans-serif;
	font-size:15px;
	box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
	color:#333;
	width:80px;
	margin-left:5px;
	margin-right:5px;
	}
.dateRngBx input[type=submit], .dateRngBx input[type=button] {
	border: 1px solid #2c79a4;
	background: #489ccb;
	background: -moz-linear-gradient(top, #489ccb 0%, #3684b1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#489ccb), color-stop(100%,#3684b1));
	background: -webkit-linear-gradient(top, #489ccb 0%,#3684b1 100%);
	background: -o-linear-gradient(top, #489ccb 0%,#3684b1 100%);
	background: -ms-linear-gradient(top, #489ccb 0%,#3684b1 100%);
	background: linear-gradient(to bottom, #489ccb 0%,#3684b1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489ccb', endColorstr='#3684b1',GradientType=0 );
	border-radius: 15px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	color: #fff;
	padding: 5px 16px;
}
.lggedUsr {
	background: #fff;
	position: fixed;
	right: 0;
	top: 48px;
	bottom: 0;
	width: 248px;
	z-index: 100;
	border-left: 1px solid #dadada;
	box-shadow: -2px 0 24px rgba(000,000,000,0.2);
	}
.usrAvthr {
	width:32px;
	height:32px;
	vertical-align:middle;
	margin-right:10px;
	border:2px solid #fff;
	box-shadow:0px 0px 5px rgba(000,000,000,0.5);
	}
.lggedUsrCntnr {
	padding:10px;
	height:100%;
	position:absolute;
	overflow:auto;
	}
.shwHdeBx {
	height:20px;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
	border-bottom:1px solid #dadada;
	}
.trgrShwHde {
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
	border-bottom:1px solid #dadada;
	display:inline-block;
	border-right:1px solid #dadada;
	width:20px;
	height:20px;
	vertical-align:middle;
	margin-right:7px;
	}
.trgrShwHde span{
	background:url(../images/arrow.png) no-repeat center center;
	display:block;
	height:20px;
	width:20px;
	}
.collapsed .trgrShwHde span{
	background: #b5db26;
	background: -moz-linear-gradient(top,  #b5db26 0%, #7ea119 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5db26), color-stop(100%,#7ea119));
	background: -webkit-linear-gradient(top,  #b5db26 0%,#7ea119 100%);
	background: -o-linear-gradient(top,  #b5db26 0%,#7ea119 100%);
	background: -ms-linear-gradient(top,  #b5db26 0%,#7ea119 100%);
	background: linear-gradient(to bottom,  #b5db26 0%,#7ea119 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5db26', endColorstr='#7ea119',GradientType=0 );
	border-radius:10px ;
	height:10px;
	width:10px;
	margin-top:4px;
	margin-left:4px;
	border:1px solid #4e9a1b;

	}
.trgrShwHde + span {
	font-size:12px;
	color:#333;
	height:20px;
	width:20px;
	}
.lggedUsrCntnr li {
	border-bottom:1px solid rgba(000,000,000,0.1);
	padding:10px 0;
	width:242px;
	}
.lggedUsrCntnr li:hover {
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
	cursor:pointer;
	}

See the jQuery code below

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js" ></script>
<script>
	$(document).ready(function(e) {
		var lggedWndwHeight = $('.lggedUsr.expanded').height();

		$('.expanded .trgrShwHde').live('click' ,function(){
				$('.lggedUsrCntnr').animate({
					opacity:'0',
					}, function(){
						$('.lggedUsr').animate({
						width:'20px',

						height:'20px'
						},
						function(){
						$('.trgrShwHde').next('span').css('display','none');
						$('.trgrShwHde').parent().parent().removeClass('expanded');
						$('.trgrShwHde').parent().parent().addClass('collapsed');
							}
						);
						}
					)
				})
		$('.collapsed .trgrShwHde').live('click' ,function(){
			$('.lggedUsr').animate({
					width:'248px',
						height:lggedWndwHeight
					}, function(){
						$('.lggedUsrCntnr').animate({
						opacity:'1'
						},
						function(){
						$('.trgrShwHde').next('span').css('display','inline-block');
						$('.trgrShwHde').parent().parent().removeClass('collapsed');
						$('.trgrShwHde').parent().parent().addClass('expanded');
							}
						);
						}

					)
			});
	});

</script>

See the Demo below or Download

Floated User List with jQuery
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Show/ hide a div element at a time with jQuery

Here I would like to give a tutorial that if you have few div elements which you like to show/hide at a time with jQuery while clicking on a button. Its need a simple line of code for running through jQuery. First just call the jquery file from jquery website or download your server and call from it self.
show-hide-div-with-jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

HTML part

<div class="btnCntnr">
	<input class="btns" type="button" value="cbox1" id="b1" />
	<input class="btns" type="button" value="cbox2" id="b2" />
	<input class="btns" type="button" value="cbox3" id="b3" />
</div>
<div>
	<div id="cbox1" style="display:block;"></div>
	<div id="cbox2" style="display:none;"></div>
	<div id="cbox3" style="display:none;"></div>
</div>

Here what we are going to do is, getting the value and assign to a variable. That value should be match with div ids. While clicking on each buttons it will set the set the css style property display to block and other div elements to display none. See the jQuery code below.

jQuery Part

<script>
	$(document).ready(function(){
		$('.btns').click(function(){
		var btnv = this.value;
			$('#'+btnv).show('slideUp').siblings().hide('slideDown');
		})
	})
</script>

This css part is for just styling my demo only. So you should create your own styles.

<style>
	.btns{
		width:36px;
		height:32px;
		text-indent:-2000px;
		border:none;
	}
	.btnCntnr{padding-left:28px;}
	.btns#b1{
	background:url(images/buttons_bg.jpg) no-repeat 0 0;
	}
	.btns#b2{
	background:url(images/buttons_bg.jpg) no-repeat -46px 0;
	}
	.btns#b3{
	background:url(images/buttons_bg.jpg) no-repeat -92px 0;
	}
	#cbox1, #cbox2, #cbox3 {width:364px; height:140px;}
	#cbox1{
		background:url(images/div_bgs.jpg) no-repeat;
	}
	#cbox2{
		background:url(images/div_bgs.jpg) no-repeat 0 -142px;
	}
	#cbox3{
		background:url(images/div_bgs.jpg) no-repeat 0 -283px;
	}
</style>
Show/ hide a div element at a time with jQuery (581)
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Create a Simple Accordion with jQuery and CSS

As per the project I have to build a simple accordion and would like to share with you. So here I’m explaining how to build an accordion with jQuery and css. A plus and minus and a small gray gradient images are used in accordion. You can download and use for personal or commercial works but forbidden to redistribute other than bijusubhash.com. If you like this then please spread or back link from your website.The steps are explaining below. You can see a demo and download too.
Simple Accordion Example

Step 1: The jQuery Code

<script type="text/javascript" src="../js/jquery.js" ></script>
<script  type="text/javascript" language="javascript">
$(document).ready(function(){
$('.adCntnr div.acco2:eq(0)').find('div.expand:eq(0)').addClass('openAd').end() /*find the first child and opended by default, and add class openAd*/
.find('div.collapse:gt(0)').hide().end()
.find('div.expand').click(function() {
$(this).toggleClass('openAd').siblings().removeClass('openAd').end()
.next('div.collapse').slideToggle().siblings('div.collapse:visible').slideUp();
return false;
});
})
</script>

Step 2 : CSS Markup

/* Accordion Styles starts */
.adqstdts {
min-height:75px;
background:#f0f0f1;
border:1px solid #dbdbdc;
border-left:none;
border-right:none;
margin-top:7px;
padding:7px;
}
.asdDts {
color:#737374;
font-size:12px;
font-weight:normal;
line-height:25px;
}
.printAd {
background:url(../images/printer.png) no-repeat ;
padding-left:25px;
padding-bottom:2px;
padding-top:2px;
color:#737374;
}
.exportAd {
background:url(../images/document-export.png) no-repeat ;
padding-bottom:2px;
padding-left:25px;
padding-top:2px;
color:#737374;
}
.adCntnr .acco2 .expand {
background:url(../images/title_bar_bg.gif) repeat-x ;
line-height:28px;
border-left:1px solid #cfcece;
border-right:1px solid #cfcece;
padding-left:5px;
}
.adCntnr .acco2 .expand a{
background:url(../images/rnd_plus_icon.png) no-repeat 0 4px;
padding-left:25px;
text-decoration:none;
}
.adCntnr .acco2 .openAd a{
background:url(../images/rnd_minus_icon.png) no-repeat 0 4px ;
padding-left:25px;
color:#333 !important;
text-decoration:none;
}

.adCntnr .acco2 .openAd {
background:url(../images/title_bar_bg.gif) repeat-x ;
line-height:27px;
border-left:1px solid #cfcece;
border-right:1px solid #cfcece;
padding-left:5px;
}

.adCntnr .acco2 .expand a{
color:#676f72;
}

.adCntnr  .accCntnt {
border:1px solid #cfcece;
border-top:none;
padding:10px;
background:#f1f1f1;
}
/* Accordion Styles starts */

Step 3 : HTML Markup

<div class="adCntnr" >
<div class="acco2">
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the First Heading</a></div>
<div class="collapse">
<div class="accCntnt">
<div class="titlebarLeftc" style="height:25px; border-bottom:1px solid #dadada;">
<div class="titlebarRightc" style="height:25px;">
<div class="titlebar" style="height:25px;">
<table class="dataGridHdr" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="dataGridHdr_boder" style="padding-left:0;";>Label One</td>
<td width="210" class="dataGridHdr_boder2">Label Two</td>
<td width="45" class="dataGridHdr_boder2">Label</td>
<td width="40" class="dataGridHdr_boder3">Label</td>
</tr>
</table>
</div>
</div>
</div>
<div class="dataGrid_container">
<table class="dataGrid" width="100%" cellpadding="0" cellspacing="0">
<tr class="dataAlterRw1">
<td class="dataGridHdr_boder">Lorem ipsum dolor sit amet, consectetur</td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">60%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
<tr class="dataAlterRw2">
<td class="dataGridHdr_boder">Lorem ipsum dolor sit amet</td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">10%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
<tr class="dataAlterRw1">
<td class="dataGridHdr_boder">Lorem ipsum dolor sit </td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">20%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
<tr class="dataAlterRw2">
<td class="dataGridHdr_boder" >Lorem ipsum dolor sit amet, consectetur</td>
<td  width="210" class="dataGridHdr_boder" style="padding:0 7px;">Lorem ipsum</td>
<td  width="45" class="dataGridHdr_boder" style="padding:0 7px;">30%</td>
<td  width="47" class="dataGridHdr_boder3" style="padding:0 7px;">17</td>
</tr>
</table>
</div>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the Second Heading</a></div>
<div class="collapse">
<div class="accCntnt">
<p style="font-weight:normal; color:#333;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Title for the Third Heading</a></div>
<div class="collapse">
<div class="accCntnt">
<p style="font-weight:normal; color:#333;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div style="height:5px;"></div>
<div class="expand"><a title="expand/collapse" href="#" style="display: block;">Back to Tutorial</a></div>
<div class="collapse">
<div class="accCntnt">
<p style="font-weight:normal; color:#333;">
<div style="text-align:center;"><a href="#">Back to the Tutorial</a></div>
</p>
</div>
</div>
</div>
</div>
Simple Accordion with jQuery (2744)
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Simple Popup using CSS and jQuery

In this post I’m explaining, how to create a simple popup using CSS and jQuery. There is a lot of popup script available over the net like, lightbox, tinybox etc. As per the part of my project I want to create a simple popup without any animation and it should be automatically aligned center vertical and horizontal. For this popup, here I’m explaining each code html, css and jquery. Ok lets start with html first.
Simple Popup Box using CSS and jQuery

Step One HTML

<div class="QTPopup">
    	<div class="popupGrayBg"></div>
    	<div class="QTPopupCntnr">
        	<div class="gpBdrLeftTop"></div>
            <div class="gpBdrRightTop"></div>
            <div class="gpBdrTop"></div>
            <div class="gpBdrLeft">
            	<div class="gpBdrRight">
                	<div class="caption">
                    	Send Your Messages
                    </div>
                    <a href="#" class="closeBtn" title="Close"></a>
                    
                    <div class="content">
                    	<table width="100%" cellpadding="0" cellspacing="0">
                        	<tr>
                            	<td>Name</td>
                            	<td width="260">
                                    <div class="titlebarLeftc">
                                    <div class="titlebarRightc">
                                    <div class="titlebar" style="width:250px;"><input type="text" value=""  style="border:0px;  background:none; margin-top:5px; width:245px;"/>
                                    </div>
                                    </div>
                                    </div> 
                                </td>
                            </tr>
                            <tr>
                            	<td colspan="2">&nbsp;</td>
                            </tr>
                        	<tr>
                            	<td>Email</td>
                            	<td width="260">
                                    <div class="titlebarLeftc">
                                    <div class="titlebarRightc">
                                    <div class="titlebar" style="width:250px;"><input type="text" value=""  style="border:0px;  background:none; margin-top:5px; width:245px;"/>
                                    </div>
                                    </div>
                                    </div> 
                                </td>
                            </tr>
                        </table><br />
                       
                        <table>
                            <tr>
                            	<td>&nbsp;</td>
                            </tr>
                        	<tr>
                            	<td>
                                	Subject
                                </td>
                            </tr>
                            <tr>
                            	<td style="height:5px;"></td>
                            </tr>
                        	<tr>
                            	<td>
                                	<div class="titlebarLeftc">
                                    <div class="titlebarRightc">
                                    <div class="titlebar" style="width:414px;"><input type="text" value=""  style="border:0px;  background:none; margin-top:5px; width:405px;"/>
                                    </div>
                                    </div>
                                    </div> 
                                </td>
                            </tr>
                            <tr>
                            	<td>&nbsp;</td>
                            </tr>
                        	<tr>
                            	<td>
                                	Message
                                </td>
                            </tr>
                             <tr>
                            	<td style="height:5px;"></td>
                            </tr>

                            <tr>
                            	<td>
									<textarea class="textareagradiant" style="width:428px; height:116px; border:1px solid #CFCECE;"> </textarea> 

                                </td>
                            
                            </tr>
                            <tr>
	                            <td style="height:5px;"></td>
                            </tr>
                            <tr>
	                            <td style="height:10px;"></td>
                            </tr>
                            <tr>
                            	<td>
                                <input type="button" value="Submit" class="gbtn_s"  />
                                <input type="button" value="Reset" class="gbtn_s"  />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="gpBdrLeftBottom"></div>
            <div class="gpBdrRightBottom"></div>
            <div class="gpBdrBottom"></div>
    </div>
    </div>

Step Two CSS

Here we are using only three images for popup. One is for the curve of the popup, its using a master image for curves. And the another two are for close bottons which for normal and mouse over buttons.

/*---popup styles starts here ----- */
	.popupGrayBg {
		position:fixed; 
		width:100%; 
		height:100%; 
		background:black; 
		z-index:1001; 
		left:0; 
		top:0; 
		opacity:.5;
		filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
		}
	.QTPopupCntnr {
		width:487px; 
		position:fixed; 
		z-index:1200; 
		background:gray; 
		left:50%; 
		top:50%; 
		margin-left:-244px; 
		margin-top:-276px;
		}
	.gpBdrLeftTop {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) left top no-repeat;
		float:left;
		}
	.gpBdrRightTop {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) right top no-repeat;
		float:right;
		}
	.gpBdrTop {
		height:3px;
		background:#a9b6e1;
		border-top:3px solid #3b4f91;
		margin-left:6px;
		margin-right:6px;
		}
	.gpBdrLeft {
		border-left:3px solid #3b4f91;
		background:#fff;
		}
	.gpBdrRight {
		border-right:3px solid #3b4f91;
		background:#fff;
		min-height:400px;
		position:relative;
	}
	.gpBdrLeftBottom {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) left bottom no-repeat;
		float:left;
		}
	.gpBdrRightBottom {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) right bottom no-repeat;
		float:right;
		}
	.gpBdrBottom {
		height:3px;
		background:#fff;
		border-bottom:3px solid #3b4f91;
		margin-left:6px;
		margin-right:6px;
		}
	.gpBdrRight .caption {
		background:#a9b6e1;
		line-height:38px;
		padding-left:10px;
		font-family:Arial, Helvetica, sans-serif;
		font-size:15px;
		font-weight:bold;
		color:#3b4f91;
		}
	.gpBdrRight .closeBtn {
		background:red;
		width:31px;
		height:31px;
		position:absolute;
		right:-15px;
		top:-15px;
		background:url(../images/grn_pp_cls_btn_normal.png) no-repeat;
		
		}
	.gpBdrRight .closeBtn:hover {
		background:url(../images/grn_pp_cls_btn_over.png) no-repeat;
		}
		
	.gpBdrRight .content {
		padding:25px;
		font-weight:normal;
		}
	
/*---popup styles ends here ----- */

Step Three jQuery

<script type="text/javascript" src="js/jquery.js" ></script>
<script  type="text/javascript" language="javascript">
$(document).ready(function(){
	$(".QTPopup").css('display','none') // set the popup display none default
	$(".lnchPopop").click(function(){ // launch the popup
		$(".QTPopup").animate({width: 'show'}, 'slow');})
		$(".closeBtn").click(function(){ // close the popup			
			$(".QTPopup").css('display', 'none');
		})
})
</script>

You can download the popup script and see the demo too.

Simple Popup using CSS and jQuery (12996)
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

jFormer – A jQuery Form Framework

jFormer - A jQuery Form Framework
jFormer is a form framework. Its allows you to quickly create beautiful, standards compliant forms. Leveraging the latest techniques in web design. Its helop to create web forms like validate client-side, validate server-side, process without changing the page (using AJAX). At 18K gzipped, jFormer is one of the first frameworks that comes Closure Compiled with Google’s latest JavaScript compression technology. You may use any jFormer project under the terms of either the MIT License or the GNU General Public License (GPL) Version 2.
website url

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]