szaboz.com
programming languages
jq example PDF Print E-mail
Written by zadminz   
Wednesday, 02 September 2009 01:06

Handle 1

ConfigureHandle 2

Handle 3

Handle 4

Handle 5
Last Updated on Sunday, 06 September 2009 21:39
 
jQuery menu tooltip PDF Print E-mail
Written by zadminz   
Friday, 28 August 2009 02:18

Now, if you’re still with me, let’s take a walk through the code. This tutorial assumes that you have a basic knowledge of html, css and jquery.


The markup

This is pretty straight, just an unordered list with three items and each item has a link.

view source
print?
01.<ul id="iconbar">
02.<li><a href="#">
03.<img src="key.gif" alt="" />
04.<span>Change your password</span>
05.</a></li>
06.<li><a href="http://feeds.feedburner.com/ilovecolors" target="_blank">
07.<img src="rss.gif" alt="" />
08.<span>Suscribe to our RSS!</span>
09.</a></li>
10.<li><a href="#">
11.<img src="sel.gif" alt="" />
12.<span>Choose your options!</span>
13.</a></li>
14.</ul>

However, inside each link we have two important blocks: the icon image and a span. On the img tag, we’ll be changing its src attribute.  The span tag is what we will be using for the tooltip. Initially the img tag has a default src value and the span is hidden, when the time comes and the hover event is triggered, the img src attribute is redirected to a different location (another image) and the span is displayed showing the text you defined.

The styling

The style is a bit longer to read but we’re only styling two items: the li containter and the span block.

view source
print?
01.#iconbar li {
02.float:left; position:relative; margin-right:20px;
03.}
04.#iconbar span {
05.position: absolute;
06.top: -50px;
07.left: -80px;
08.display: none;
09.background: url(ttbg.jpg) no-repeat;
10.width: 110px;
11.height: 35px;
12.text-align: center;
13.padding: 5px;
14.line-height:110%;
15.color:#000000;
16.}

We’re defining an absolute position inside the relative position of our li element. Now we can assign some top and left values to position it. The values will be modified by our jQuery script later. The display is set to none, since we don’t want the span to be visible when we first open the page. The icons doesn’t require styling since we’re changing only the src attribute through jQuery.

The jQuery code

jQuery is truly amazing, with only a few lines of code we can have our icon rollover and tooltip ready. So, let’s get to it. When the DOM is ready, we’re launching a function based on the hover state of the li element within our iconbar. When it’s launched, it will get the src attribute of the image within li and it will store the name without the extension in a variable named origen.

view source
print?
1.jQuery(document).ready(function(){
2.$("#iconbar li").hover(
3.function(){
4.var iconName = $(this).find("img").attr("src");
5.var origen = iconName.split(".")[0];

Next, we assign a new path to the src attribute of img, appending “o” to the name, and the corresponding extension, in this case, “.gif”. The tooltip section begins animating its opacity to fade in and the top position (remember the values on the style sheet?).

view source
print?
1.$(this).find("img").attr({src: "" + origen + "o.gif"});
2.$(this).find("span").animate({opacity: "show", top: "-60"}, "normal");
3.},

Please, notice the comma separating the two functions. The hover event in jQuery takes two parameters: one for the mouse rollover state and one for the mouse rollout state. Now we get to the rollout state, this is what happens when the mouse rolls out of the li area. We take the image src attribute again and we split at the “o.”, the string we added on the hover event, and we redirect the src attribute to the original image path. The tooltip is animated towards a zero opacity, and we position it at the same top value that is defined in the stylesheet, in this case, 50. Notice that I haven’t added the “px” values. Don’t be as lazy as me and add them, but you can see that it still works without the “px” dimensions. We hide it fast to prevent any conflicts with any other thing. You know, when something can go wrong, it will, so don’t give it a chance.

view source
print?
1.function(){
2.var iconName = $(this).find("img").attr("src");
3.var origen = iconName.split("o.")[0];
4.$(this).find("img").attr({src: "" + origen + ".gif"});
5.$(this).find("span").animate({opacity: "hide", top: "-50"}, "fast");
6.});
7.});

Of course, some of you might be thinking that you can place anything inside that little cute span and indeed, it’s possible. For example, an icon.

view source
print?
1.<li><a href="#">
2.<img src="sel.gif" alt="" />
3.<span>Choose your options!<img src="sel.gif" alt="" /></span>
4.</a></li>

Next time we will be learning to do some sliding tooltips triggering the same hover event. Take for example an iconbar. When you hover the li items the li expands and the tooltip is revealed.
Last Updated on Sunday, 06 September 2009 21:39
 
jquery input masking PDF Print E-mail
Written by zadminz   
Friday, 28 August 2009 02:17

Sometimes you need user to input data in a particular format like a credit card number or Social Security Number or a standard US phone number. By masking input of a particular textbox, you can change its behavior so that it accepts input only according to specified format, e.g. an input masked credit card number input box will only allow 16 digits of credit card number to pass through and won’t accept any other input.

Here’s how to do just that with jQuery.

Grab the Masked Input Plugin by digitalBush and add a reference to it in head section of your page.

Now let us say you want to mask an input textbox so that it accepts only Tax ID numbers in the format 99-9999999. Firstly add a text input box to your page with say id as ‘taxid’. Now to mask the input for taxid, add this line to your jquery document ready function.

view plaincopy to clipboardprint?
  1. $('#date').mask("99-9999999"); 
$('#date').mask("99-9999999");

In the above code, we passed a parameter to mask function to mask the input. Here 9 stands for an integer between 0-9. You can use a to denote alphabet(A-Z, a-z) and * to denote alphabets and numerals(A-Z, a-z, 0-9).

And if you need to define your own set of input symbols, you can define that too. Let us say you want to define a mask with character # that will let user input any number from 1-4. Add the following definition in the jquery ready function before you use this mask.

view plaincopy to clipboardprint?
  1. $.mask.definitions['#']='[1234]'; 
$.mask.definitions['#']='[1234]';

By default the mask function uses underscore to denote input points in text box. If you want to customize it to say dash ‘-‘ for a particular text box, you can pass an optional parameter to mask function.

view plaincopy to clipboardprint?
  1. $('#date').mask("99/99/9999",{placeholder:"-"}); 
$('#date').mask("99/99/9999",{placeholder:"-"});

With this masked input plugin, you can make your form inputs more user friendly and less error prone as it won’t allow any other input except those defined by the mask.
 
jquery tabs tutorial PDF Print E-mail
Written by zadminz   
Friday, 28 August 2009 02:14

For this tutorial, you’ll need jQuery UI version 1.5.3. I usually use Google AJAX libraries to load jQuery and jQuery UI files as it acts as a CDN for your JavaScript files.

view plaincopy to clipboardprint?
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>

The Featured Content Structure

Now create a div with its contents as the tabs structured as a list and content corresponding to each tab within a separate div.

view plaincopy to clipboardprint?
  1. <div id="featured" >
  2. <ul class="ui-tabs-nav">
  3. <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
  4. <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
  5. <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
  6. <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
  7. </ul>
  8. <!-- First Content -->
  9. <div id="fragment-1" class="ui-tabs-panel" style="">
  10. <img src="images/image1.jpg" alt="" />
  11. <div class="info" >
  12. <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
  13. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
  14. </div>
  15. </div>
  16. <!-- Second Content -->
  17. <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
  18. <img src="images/image2.jpg" alt="" />
  19. <div class="info" >
  20. <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
  21. <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
  22. </div>
  23. </div>
  24. <!-- Third Content -->
  25. <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
  26. <img src="images/image3.jpg" alt="" />
  27. <div class="info" >
  28. <h2><a href="#" >35 Amazing Logo Designs</a></h2>
  29. <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
  30. </div>
  31. </div>
  32. <!-- Fourth Content -->
  33. <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
  34. <img src="images/image4.jpg" alt="" />
  35. <div class="info" >
  36. <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
  37. <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
  38. </div>
  39. </div>
  40. </div> 
<div id="featured" >
	<ul>
	    <li id="nav-fragment-1"><a href="#fragment-1"><img src="/images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
	    <li id="nav-fragment-2"><a href="#fragment-2"><img src="/images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
	    <li id="nav-fragment-3"><a href="#fragment-3"><img src="/images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
	    <li id="nav-fragment-4"><a href="#fragment-4"><img src="/images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
	</ul>
	<!-- First Content -->
	<div id="fragment-1" style="">
		<img src="/images/image1.jpg" alt="" />
		<div >
		<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
		</div>
	</div>
	<!-- Second Content -->
	<div id="fragment-2" style="">
		<img src="/images/image2.jpg" alt="" />
		<div >
		<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
		<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
		</div>
	</div>
    <!-- Third Content -->
    <div id="fragment-3" style="">
		<img src="/images/image3.jpg" alt="" />
		<div >
		<h2><a href="#" >35 Amazing Logo Designs</a></h2>
		<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
	    </div>
	</div>
    <!-- Fourth Content -->
    <div id="fragment-4" style="">
		<img src="/images/image4.jpg" alt="" />
		<div >
		<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
		<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
	    </div>
	</div>
</div>

The class names ui-tabs-selected and ui-tabs-hide should not be changed, you can change other class names to your own.

The CSS Styles

Now for the CSS part, I fixed the width and height of the outer container div with id #featured and added a right padding of 250px to make space for the absolutely positioned navigation tabs for our featured content slider. Also, i set its position attribute to relative so that i can absolutely position elements inside #featured div relative to it.

view plaincopy to clipboardprint?
  1. #featured{
  2. width:400px;
  3. padding-right:250px;
  4. position:relative;
  5. height:250px;
  6. background:#fff;
  7. border:5px solid #ccc;
  8. } 
#featured{
	width:400px;
	padding-right:250px;
	position:relative;
	height:250px;
	background:#fff;
	border:5px solid #ccc;
}

The navigation tabs are absolutely positioned to the right with following styles:

view plaincopy to clipboardprint?
  1. #featured ul.ui-tabs-nav{
  2. position:absolute;
  3. top:0; left:400px;
  4. list-style:none;
  5. padding:0; margin:0;
  6. width:250px;
  7. }
  8. #featured ul.ui-tabs-nav li{
  9. padding:1px 0; padding-left:13px;
  10. font-size:12px;
  11. color:#666;
  12. }
  13. #featured ul.ui-tabs-nav li span{
  14. font-size:11px; font-family:Verdana;
  15. line-height:18px;
  16. } 
#featured ul.ui-tabs-nav{
	position:absolute;
	top:0; left:400px;
	list-style:none;
	padding:0; margin:0;
	width:250px;
}
#featured ul.ui-tabs-nav li{
	padding:1px 0; padding-left:13px;
	font-size:12px;
	color:#666;
}
#featured ul.ui-tabs-nav li span{
	font-size:11px; font-family:Verdana;
	line-height:18px;
}

The content panels are given following styles so as to fit them inside featured div container. The ui-tabs-hide class is essential to working of this script as it decides which content panels are hidden and which is displayed.

view plaincopy to clipboardprint?
  1. #featured .ui-tabs-panel{
  2. width:400px; height:250px;
  3. background:#999; position:relative;
  4. overflow:hidden;
  5. }
  6. #featured .ui-tabs-hide{
  7. display:none;
  8. } 
#featured .ui-tabs-panel{
	width:400px; height:250px;
	background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
	display:none;
}

And the selected tab is given a background image with a left arrow. Here are the styles for selected tab.

view plaincopy to clipboardprint?
  1. #featured li.ui-tabs-nav-item a{/*On Hover Style*/
  2. display:block;
  3. height:60px;
  4. color:#333; background:#fff;
  5. line-height:20px;
  6. outline:none;
  7. }
  8. #featured li.ui-tabs-nav-item a:hover{
  9. background:#f2f2f2;
  10. }
  11. #featured li.ui-tabs-selected{ /*Selected tab style*/
  12. background:url('images/selected-item.gif') top left no-repeat;
  13. }
  14. #featured ul.ui-tabs-nav li.ui-tabs-selected a{
  15. background:#ccc;
  16. } 
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
	display:block;
	height:60px;
	color:#333;  background:#fff;
	line-height:20px;
	outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
	background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
	background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
	background:#ccc;
}

Since i used small thumbnail images in the navigation tabs, i applied following styles to them.

view plaincopy to clipboardprint?
  1. #featured ul.ui-tabs-nav li img{
  2. float:left; margin:2px 5px;
  3. background:#fff;
  4. padding:2px;
  5. border:1px solid #eee;
  6. } 
#featured ul.ui-tabs-nav li img{
	float:left; margin:2px 5px;
	background:#fff;
	padding:2px;
	border:1px solid #eee;
}

Also, in the content panel which is displayed, it has one image of size 400px x 250px and some relavent title and description inside the div with class info. To display .info div over the image i absolutely positioned it over the image with a transparent background to add some eye-candy.

view plaincopy to clipboardprint?
  1. #featured .ui-tabs-panel .info{
  2. position:absolute;
  3. top:180px; left:0;
  4. height:70px; width: 400px;
  5. background: url('images/transparent-bg.png');
  6. }
  7. #featured .info h2{
  8. font-size:18px; font-family:Georgia, serif;
  9. color:#fff; padding:5px; margin:0;
  10. overflow:hidden;
  11. }
  12. #featured .info p{
  13. margin:0 5px;
  14. font-family:Verdana; font-size:11px;
  15. line-height:15px; color:#f0f0f0;
  16. }
  17. #featured .info a{
  18. text-decoration:none;
  19. color:#fff;
  20. }
  21. #featured .info a:hover{
  22. text-decoration:underline;
  23. } 
#featured .ui-tabs-panel .info{
	position:absolute;
	top:180px; left:0;
	height:70px; width: 400px;
	background: url('images/transparent-bg.png');
}
#featured .info h2{
	font-size:18px; font-family:Georgia, serif;
	color:#fff; padding:5px; margin:0;
	overflow:hidden;
}
#featured .info p{
	margin:0 5px;
	font-family:Verdana; font-size:11px;
	line-height:15px; color:#f0f0f0;
}
#featured .info a{
	text-decoration:none;
	color:#fff;
}
#featured .info a:hover{
	text-decoration:underline;
}

Note: All the required styles are within style.css file.

The JavaScript Code

Finally the JavaScript code, that’ll make our featured content slider work. I’m using rotating tabs feature of jQuery UI library that makes the content panels rotate automatically after given time interval.

view plaincopy to clipboardprint?
  1. $(document).ready(function(){
  2. $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
  3. }); 
	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});

And there you are with a nice looking featured content slider.
Last Updated on Sunday, 06 September 2009 21:39
 
drag and drop Jquery PDF Print E-mail
Written by zadminz   
Friday, 28 August 2009 02:06

Include The Libraries

We’ll be using the all powerful jQuery library and the jQuery UI libraries, so grab the latest version of both and add it to your page header.

The HTML Structure

We’ll be using two vertical columns defined by div with class="column" in this example that will hold our panels. You can increase the number of panels by adjusting the width in the stylesheet for .column. Each panel is a div with class="dragbox". And the content of each panel resides within div with class="dragbox-content".

Here’s the complete HTML structure for our example, i will be using 5 panels within two columns.

view plaincopy to clipboardprint?
  1. <div class="column" id="column1">
  2. <div class="dragbox" id="item1" >
  3. <h2>Handle 1
    -->
    <script type="text/javascript" src="cms_c-c_1.2/templates/cms_cc_template_1.0/js/ui.js">

    <script type="text/javascript">

    $(document).ready(function(){

    $('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
    })
    .disableSelection();
    $('.dragbox').each(function(){
    $(this).hover(function(){
    $(this).find('h2').addClass('collapse');
    }, function(){
    $(this).find('h2').removeClass('collapse');
    })
    .find('h2').hover(function(){
    $(this).find('.configure').css('visibility', 'visible');
    }, function(){
    $(this).find('.configure').css('visibility', 'hidden');
    })
    //.click(function(){
    //$(this).siblings('.dragbox-content').toggle();
    //})
    .end()
    .find('.configure').css('visibility', 'hidden');
    });

    $('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
    stop: function(event, ui){
    $(ui.item).find('h2').click();
    }
    })
    .disableSelection();
    $('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
    stop: function(event, ui){
    $(ui.item).find('h2').click();
    var sortorder='';
    $('.column').each(function(){
    var itemorder=$(this).sortable('toArray');
    var columnId=$(this).attr('id');
    sortorder+=columnId+'='+itemorder.toString()+'&';
    });
    //alert('SortOrder: '+sortorder);
    /*Pass sortorder variable to server using ajax to save state*/
    }
    })
    })




    <style type="text/css">
    .column{
    width:49%;
    margin-right:.5%;
    min-height:300px;
    background:#fff;
    float:left;
    }
    .column .dragbox{
    margin:5px 2px 20px;
    background:#fff;
    position:relative;
    border:1px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    }
    .column .dragbox h2{
    margin:0;
    font-size:12px;
    padding:5px;
    background:#f0f0f0;
    color:#000;
    border-bottom:1px solid #eee;
    font-family:Verdana;
    cursor:move;
    }
    .dragbox-content{
    background:#fff;
    min-height:100px; margin:5px;
    font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
    }
    .column .placeholder{
    background: #f0f0f0;
    border:1px dashed #ddd;
    }
    .dragbox h2.collapse{
    background:#f0f0f0 url('cms_c-c_1.2/templates/cms_cc_template_1.0/images/download-bg.gif') no-repeat top right;
    }
    .dragbox h2 .configure{
    font-size:11px; font-weight:normal;
    margin-right:30px; float:rightright;
    }


       <title>   
       <body>

    	
    	
    	
    	
     <div class="column" id="column1">
     <div class="dragbox" id="item1" >
     <h2>Handle 1
     <div class="dragbox-content" >
     
     
     
     <div class="dragbox" id="item2" >
     <h2><span class="configure" ><a href="#" >ConfigureHandle 2
     <div class="dragbox-content" >
     
     
     
     <div class="dragbox" id="item3" >
     <h2>Handle 3
     <div class="dragbox-content" >
     
     
     
     
     <div class="column" id="column2" >
     <div class="dragbox" id="item4" >
     <h2>Handle 4
     <div class="dragbox-content" >
     
     
     
     <div class="dragbox" id="item5" >
     <h2>Handle 5
     <div class="dragbox-content" >



Last Updated on Sunday, 20 September 2009 16:15
 
More Articles...


© 2012 szaboz.com
powered by programming tutorials forums szaboz.com