bijusubhash.com » Javascript

Show/ hide a div element at a time with jQuery

Biju Subhash — Mon, 08 Aug 2011 21:28:09 +0000

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.

HTML part

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

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

Create a Simple Accordion with jQuery and CSS

Biju Subhash — Wed, 08 Jun 2011 16:14:53 +0000

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.

Step 1: The jQuery Code

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



Title for the First Heading







Label One
Label Two
Label
Label








Lorem ipsum dolor sit amet, consectetur
Lorem ipsum
60%
17


Lorem ipsum dolor sit amet
Lorem ipsum
10%
17


Lorem ipsum dolor sit 
Lorem ipsum
20%
17


Lorem ipsum dolor sit amet, consectetur
Lorem ipsum
30%
17






Title for the Second Heading



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.




Title for the Third Heading



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.




Back to Tutorial



Back to the Tutorial

Label One	Label Two	Label	Label

Lorem ipsum dolor sit amet, consectetur	Lorem ipsum	60%	17
Lorem ipsum dolor sit amet	Lorem ipsum	10%	17
Lorem ipsum dolor sit	Lorem ipsum	20%	17
Lorem ipsum dolor sit amet, consectetur	Lorem ipsum	30%	17

Simple Popup using CSS and jQuery

Biju Subhash — Sun, 24 Apr 2011 13:30:32 +0000

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.

Step One HTML


    	
    	
        	
            
            
            
            	
                	
                    	Send Your Messages
                    
                    
                    
                    	
                        	
                            	Name
                            	
                                    
                                    
                                    
                                    
                                    
                                    
                                
                            
                            
                            	 
                            
                        	
                            	Email
                            	
                                    
                                    
                                    
                                    
                                    
                                    
                                
                            
                        


                        
                            
                            	 
                            
                        	
                            	
                                	Subject
                                
                            
                            
                            	
                            
                        	
                            	
                                	
                                    
                                    
                                    
                                    
                                    
                                
                            
                            
                            	 
                            
                        	
                            	
                                	Message

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

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

popup simple-popup jQuery-popup css-popup

jFormer – A jQuery Form Framework

Biju Subhash — Fri, 11 Mar 2011 03:15:56 +0000

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.

jQuery jFormer

A Signature Pad for Your HTML Forms

Biju Subhash — Fri, 21 Jan 2011 14:50:13 +0000

The Signature Pad jQuery plugin will transform an HTML form into a signature pad. The Signature Pad has two modes: TypeIt and DrawIt. In TypeIt mode the user’s signature is automatically generated as HTML text, styled with @font-face, from the input field where they type their name. In DrawIt mode the user is able to draw their signature on the canvas element.

The drawn signature is written out to a hidden input field as a JSON array using JSON.strinify(). Since the signature is saved as JSON it can be submitted as part of the form and kept on file. Using the JSON array, the signature can then be regenerated into the canvas element for display. Signature Pad works with both mouse and touch devices.

jQuery-Signature-pad Signature-Pad JavaScript

jQuery E-Help Embedded Help System for Web Apps

Biju Subhash — Wed, 19 Jan 2011 18:24:30 +0000

Embedded Help System is “providing help where help is needed” concept that can be easily integrated into web interface. The point is to offer help to user in their working interface and actual situation.

Jquery E-Help is plugin for procedural(“How to …”) web user interface help and it’s easy to integrate into any web interface that supports Jquery. Useful for all web applications, CMS and E-commerce systems.

javascript jQuery

SlideNote- A jQuery plugin for Notifications

Biju Subhash — Mon, 06 Dec 2010 19:01:22 +0000

SlideNote is lightweight, customizable and flexible jQuery plugin. You can makes easly sliding notification on your website or application. This plugin also available for wordpress too.

notes jQuery JavaScript Plugin WordPress-Plugin

A jQuery Slideshow Plugin – Slides

Biju Subhash — Fri, 03 Dec 2010 16:27:06 +0000

Slides is a crazy simple slideshow plugin for jQuery. It is verry easy to customize, implement and style. Its have auto play, fade or slide transition effects, crossfading, image preloading, auto generated pagination etc… Its work with all modern browsers including IE7,8,9 and Firefox3+, Chrome and Safari, mobile Safari and also working with old IE6.

jQuery Slider Photo-Slider

RedBrown Drop Down Menu-Using jQuery and CSS

Biju Subhash — Wed, 01 Dec 2010 15:52:47 +0000

As part of my project I have to build a drop down menu with animation. Actually its need some fade in animation effects when user clicks on the main tab and some more effects for sub navigation too. There are lot of navigation menu scripts available over the internet (I had listed some of them in my past blog) but I would like to create my own and would like to share with you. Here I’m using some simple jQuery scripts for animating the menu.

Step 1

We are going to build the list first.

<ul id="menu">
<li><a href="#">Categories</a>
<ul class="submenu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul class="submenu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li><a href="#">Categories</a></li>
</ul>

Step 2

Now we have to apply a skin to the list. Add some styles.

body {
background:url(images/m_bg.gif) repeat-x #b29668;
margin:70px;
}
.red {
color:red;
}
.brown {
color:brown;
}
h2 {
font-family:"Courier New", Courier, monospace;
font-size:19px;
font-weight:normal;
margin-left:39px;
color:#333333;
}
#menu {
background:url(images/menu_bg.gif) no-repeat 0 -1px;
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:1000px;
padding:0;
}
#menu li {
background:url(images/menu_bg.gif) no-repeat 0 -1px;
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}
#menu li a{
color:#bfbfbf;
text-decoration:none;
padding-left:15px;
padding-right:40px;
background:url(images/menu_bg.gif) no-repeat left bottom;
display:block;
float:left;
}
#menu li  span{
background:url(images/arrow.png) no-repeat 0 12px ;
width:20px;
height:35px;
/*display:inline-block;*/
float:left;
/*top:-35px;*/
/*position:relative;*/
cursor:pointer;
}
#menu li ul{
background:url(images/submenu_bg.gif) no-repeat right bottom;
padding:0;
font-size:15px;
display:none;
width:250px;
z-index:5;
position:absolute;
margin:0;
float:left;
left:0;
top:36px;
}
#menu li ul li{
background:none;
width:250px;
overflow:hidden;
line-height:25px;
}
#menu li ul a{
background-image:none;
border-bottom:1px solid #171717;
border-top:1px solid #545454;
border-left:1px solid #171717;
width:237px;
}
#menu li:hover ul{
}
a:active, a:visited {
outline:none;
}
.overRed {
background:url(images/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;
}

I have explained about some css rules above. Just take a look on it.

Step 3

Now the final step, we are going to add some animation effects for the menu with jQuery. First we need to call the jquery.js. It should be like this.

<script src="js/jquery.js" type="text/javascript"></script>

Now the animation jquery code which you have to put inside the head tag.

<script>
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul#menu li a, ul#menu li span").click(function(){
$(this).parent().find("ul.submenu").animate({height: 'show', opacity: 'show'}, 'slow');
})
$("ul#menu li").not("ul#menu li ul li").hover(function(){
}, function(){
$(".submenu").animate({height: 'hide', opacity: 'hide'}, 'slow');
})
$(".submenu li a").hover(function(){
$(this).animate({paddingLeft: "30px"}, 'fast') ;
$(this).addClass("overRed") ;
},
function(){
$(this).animate({paddingLeft: "15px"}, 'fast') ;
$(this).removeClass("overRed") ;
}
)
})
</script>

jQuery-Menu CSS-Menu DropDown-Menu

Head JS Speeds Up, Simplifies & Modernizes Your Site

Biju Subhash — Wed, 01 Dec 2010 14:40:57 +0000

The HEAD section is the worst place to load scripts. It’s painfully slow. The more and the bigger the worse it gets. Move scrips to the bottom and you run into dependency issues and you cannot safely use HTML5 and CSS3. Enter Head JS. A compact solution to these universal issues.

head-js jQuery JavaScript speed-site