jQuery Tutorials

jQuery Dropdown User Menu

Monday, December 19th, 2011

In this tutorial we explain how to make a dropdown menu to display a username and allow the user to access their settings, history and sign out button. We started using the reinventing a dropdown with css and jquery tutorial and modified it to our needs and to improve the overall look and feel by using CSS3 shadows and gradients.

View the Demo »

First the HTML markup:

<dl class="dropdown">
	<dt><a href=""><span>johndoe<img src="images/user.png" alt="" /></span></a></dt>
	<dd>
	    <ul>
		<li><a href="">Edit Profile<img src="images/profile.png" alt="" /></a></li>
		<li><a href="">Settings<img src="images/settings.png" alt="" /></a></li>
		<li><a href="">History<img src="images/history.png" alt="" /></a></li>
		<li><a href="">Sign Out<img src="images/signout.png" alt="" /></a></li>
	    </ul>
	</dd>
</dl>

Next the CSS styles:

.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; z-index: 1; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#fff; text-decoration:none; outline:none;}
.dropdown a:hover { color: #fff;}
.dropdown dt a:hover { color: #fff; border: 1px solid #444; }
.dropdown dt a {
    border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333)); /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(top, #666, #333); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(top, #666, #333); /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(top, #666, #333); /* IE 10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666', endColorstr='#333',GradientType=0 ); /* M$ */
    background-image: -o-linear-gradient(top, #666, #333); /* Opera 11.10+ */
    display: block;
    padding-right: 20px;
    border: 1px solid #444;
    width: 150px;
}
.dropdown dt a:active,
.dropdown dt a.active {
    border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666)); /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(top, #444, #666); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(top, #444, #666); /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(top, #444, #666); /* IE 10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#666',GradientType=0 ); /* M$ */
    background-image: -o-linear-gradient(top, #444, #666); /* Opera 11.10+ */
}
.dropdown dt a span {
    background: transparent url(../images/arrow.png) no-repeat scroll 150px 5px;
    cursor: pointer;
    display: block;
    padding: 4px;
    width: 160px;
    line-height: 18px;
}
.dropdown dt a.active span {
    background: transparent url(../images/arrow.png) no-repeat scroll 150px -12px;
}
.dropdown dd ul {
    border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background: #333 none repeat scroll 0 0;
    border: 1px solid #666;
    color: #fff;
    display: none;
    left: 0px;
    padding: 0 0 4px;
    position: absolute;
    top: 1px;
    width: auto;
    min-width: 170px;
    list-style:none;
}
.dropdown span.value { display:none; }
.dropdown dd ul li a { padding:5px; display:block; border-bottom: 1px solid #444; }
.dropdown dd ul li a:hover {
    background-color: #444;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666)); /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-linear-gradient(top, #444, #666); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(top, #444, #666); /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(top, #444, #666); /* IE 10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#666',GradientType=0 ); /* M$ */
    background-image: -o-linear-gradient(top, #444, #666); /* Opera 11.10+ */
}
.dropdown img { border:none; vertical-align:middle; margin-right: 10px; float: left; }

And finally, the jQuery script:

$(document).ready(function() {
        $(".dropdown dt a").click(
	    function(e) {
		$(".dropdown dd ul").toggle();
		$(".dropdown dt a").toggleClass('active');
		e.preventDefault();
	    }
	);
        $(".dropdown dd ul li a").click(function() {
            $(".dropdown dd ul").hide();
        });
        $(document).bind('click', function(e) {
            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("dropdown")) {
                $(".dropdown dd ul").hide();
	        $(".dropdown dt a").removeClass('active');
	    }
        });
});

Download as a Zip file »

Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | No Comments »

jQuery iTunes-like Content Slider w/ Looping

Sunday, July 24th, 2011

In our previous tutorials we showed you how to create a content slider similar to the one found in the iTunes program. Some readers requested the content slider loop continuously instead of rewinding back to the first thumbnail. We have modified the content slider to add this new feature.

View the Demo »

We start with the following HTML markup:

<div id="gallery">
	<img src="images/slider/1.jpg" alt="" />
	<img src="images/slider/2.jpg" alt="" />
	<img src="images/slider/3.jpg" alt="" />
	<img src="images/slider/4.jpg" alt="" />
	<img src="images/slider/5.jpg" alt="" />
	<img src="images/slider/6.jpg" alt="" />
</div>
<div id="thumbs">
	<ul>
		<li><a href="#" onclick="return false;" class="5" class="thumblink"><img src="images/slider/1.jpg" alt="" /></a></li>
		<li><a href="#" onclick="return false;" class="4" class="thumblink"><img src="images/slider/2.jpg" alt="" /></a></li>
		<li><a href="#" onclick="return false;" class="3" class="thumblink"><img src="images/slider/3.jpg" alt="" /></a></li>
		<li><a href="#" onclick="return false;" class="2" class="thumblink"><img src="images/slider/4.jpg" alt="" /></a></li>
		<li><a href="#" onclick="return false;" class="1" class="thumblink"><img src="images/slider/5.jpg" alt="" /></a></li>
		<li><a href="#" onclick="return false;" class="0" class="thumblink"><img src="images/slider/6.jpg" alt="" /></a></li>
	</ul>
</div>

And here’s the CSS:

#gallery, #thumbs {
	float: left;
}
#gallery {
	width: 600px;
	height: 300px;
	overflow: hidden;
	z-index: 2000;
	border: hidden;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
#gallery img {
	position: absolute;
	width: 600px;
	height: 300px;
	display: block;
	overflow: hidden;
	z-index: 0;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
	border-right: none;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
#thumbs {
	height: 300px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	border-top: none;
	border-left: none;
	-webkit-border-top-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	-moz-border-radius-bottomright: 6px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}
#thumbs ul {
    margin:0;
    padding:0;
    list-style:none;
}
#thumbs li {
	float: left;
	clear: both;
	width: 200px !important;
	height: 100px !important;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
}
#thumbs img {
	width: 200px !important;
	height: 100px !important;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	z-index: 0;
}
.clear {
	clear: both;
}
img {
	border: 0;
}

And finally, the jQuery script:

// document ready
$(document).ready(function() {
	// user settings
	siftSpeed = 3800; // how often to switch slides
	actionPause = 8800; // how long to pause if action
 
	// internal script settings
	// (do not change below here unless you know what you're doing)
	var images = $("#gallery img");
	var thumbs = $("#thumbs");
	var thumbimages = $("#thumbs img");
	var thumblinks = $("#thumbs a");
	var thumbslist = $("#thumbs ul");
	var thumbitems = $("#thumbs li");
	var index = thumbitems.length-1;
	var thumbsHeight = 100;
	var areaHeight = 300;
 
	// clone markup for thumbs to create thumbs above the last thumb
	thumbitems.slice(0, 1).clone().attr('rel', '2').appendTo(thumbslist);
	thumbitems.slice(1, 2).clone().attr('rel', '2').appendTo(thumbslist);
	thumbitems.slice(2, 3).clone().attr('rel', '2').appendTo(thumbslist);
 
	// assign css classes to images and thumbs
	for (i=0; i<thumbimages.length; i++) {
		var tdiff = (images.length - i - 1);
		//$(thumbimages[i]).addClass("thumb-"+tdiff);
		$(images[i]).addClass("image-"+tdiff);
	}
 
	// reverse the order of the thumbs
	thumbslist.children().each(function(i,li){thumbslist.prepend(li)});
 
	// run the show function to show the first image
	show(index);
 
	// run the sift function every so often
	var $timer = setInterval(function() { sift(); }, siftSpeed);
 
	function sift(num) {
		if(num) { index = num; }
		if ( index < thumbimages.length && index > 0) {index -= 1 ; }
		else { index = thumbimages.length-1 }
		show ( index );
	}
	function show(num) {
		images.fadeOut(200);
		$("img.image-"+num).stop().fadeIn(200);
		var scrollPos = (num * thumbsHeight) - areaHeight;
		if(scrollPos < 400) scrollPos = scrollPos + areaHeight;
		if (num == thumbitems.length-1 || num > thumbitems.length-4) {
		    thumbs.stop().animate({scrollTop: scrollPos+thumbsHeight}, -1).animate({scrollTop: scrollPos}, 200);
		    // console.log("number: "+num, ", scrollPos: "+scrollPos+"+"+thumbsHeight, ", duration: -1");
		} else {
		    thumbs.stop().animate({scrollTop: scrollPos}, 200);
		}
		// console.log("number: "+num, ", scrollPos: "+scrollPos, ", duration: 200");
	}
 
	// after the actionPause takes place start the timer again
	function resetTimer() {
	    clearInterval($timer);
	    $timer = setInterval(function() { sift(); }, siftSpeed);
	}
 
	// add onclick function to thumb links
	thumbslist.find('a').each(function(){
		$(this).click(function() {
		    var showid = $(this).attr("class");
		    // console.log("showid: "+showid, ", timer: "+$timer);
		    show(showid);
		    index = showid;
		    clearInterval($timer);
		    var $timer = setTimeout(resetTimer, actionPause);
		    return false;
		});
	});
});

Download as a Zip file »

Tags: apple, content slider, itunes, jQuery, Macintosh, web design
Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | 6 Comments »

jQuery iTunes-like Content Slider Revisited

Monday, July 26th, 2010

Update: Also check out the updated version of this script: Clickable jQuery iTunes-like Content Slider w/ Looping.

In our previous tutorial, we showed you how to create an iTunes-like content slider. Today we will show you how to modify the content slider so clicking on one of the thumbnails loads the image in the main area.

View The Demo

We start with the following HTML markup:

<div id="gallery">
	<img src="images/slider/1.jpg" alt="" />
	<img src="images/slider/2.jpg" alt="" />
	<img src="images/slider/3.jpg" alt="" />
	<img src="images/slider/4.jpg" alt="" />
	<img src="images/slider/5.jpg" alt="" />
	<img src="images/slider/6.jpg" alt="" />
</div>
<div id="thumbs">
	<a id="1" class="thumblink" onclick="return false;" href="#"><img src="images/slider/1.jpg" alt="" /></a>
	<a id="2" class="thumblink" onclick="return false;" href="#"><img src="images/slider/2.jpg" alt="" /></a>
	<a id="3" class="thumblink" onclick="return false;" href="#"><img src="images/slider/3.jpg" alt="" /></a>
	<a id="4" class="thumblink" onclick="return false;" href="#"><img src="images/slider/4.jpg" alt="" /></a>
	<a id="5" class="thumblink" onclick="return false;" href="#"><img src="images/slider/5.jpg" alt="" /></a>
	<a id="6" class="thumblink" onclick="return false;" href="#"><img src="images/slider/6.jpg" alt="" /></a>
</div>

And here’s the CSS styles:

#gallery, #thumbs {
	float: left;
}
#gallery-overlay {
	background: transparent url('../images/home-slider-overlay.png');
	position: absolute;
	display: block;
	width: 800px;
	height: 300px;
	z-index: 200;
}
#gallery {
	width: 600px;
	height: 300px;
	overflow: hidden;
}
#gallery img {
	position: absolute;
	display: block;
}
#thumbs {
	width: 200px;
	height: 300px;
	overflow: hidden;
}
#thumbs img {
	width: 200px;
	height: 100px;
}
.clear {
	clear: both;
}

The jQuery script:

$(document).ready(function() {
	$("a#1").click(function() { show(0); return false; });
	$("a#2").click(function() { show(1); return false; });
	$("a#3").click(function() { show(2); return false; });
	$("a#4").click(function() { show(3); return false; });
	$("a#5").click(function() { show(4); return false; });
	$("a#6").click(function() { show(5); return false; });
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var thumblinks = $("#thumbs a");
	var index = thumbs.length-1;
	var thumbsHeight = 100;
	thumblinks.slice(thumblinks.length-3,thumblinks.length).clone().attr('id', function() { var id = $(this).id; return 'b' + this.id}).prependTo("#thumbs");
	$("a#b4").click(function() { show(3); return false; });
	$("a#b5").click(function() { show(4); return false; });
	$("a#b6").click(function() { show(5); return false; });
	for (i=0; i
 0) {index -= 1 ; }
		else { index = thumbs.length-1 }
		show ( index );
	}
	function show(num) {
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = ( (num-1) * thumbsHeight ) + 100;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}
});

Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | 14 Comments »

Table Sorting with jQuery tablesorter

Thursday, June 24th, 2010

jQuery tablersorter is a jQuery plugin that allows sorting columns in a table by their header.
(more…)

Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | No Comments »

jQuery iTunes-like Content Slider

Wednesday, June 23rd, 2010

Update: Also check out the updated version of this script: Clickable jQuery iTunes-like Content Slider w/ Looping.

NetTuts has a great iTunes-like Content Slider tutorial that explains how to make a content slider in jQuery.

We’ve made a few modifications to their example:

Thumbnails are made by showing a smaller version of the same image using CSS, so an additional thumbnail graphic does not need to be created and so the user only has to load the graphic once.
Rounded corners were added using a PNG graphic overlay on top of the content slider.
We made a second version of the jQuery code to reverse the order of the content in the slider.

First we added the rounded corners and left the order in which it displays the content alone:
View The Demo

Then we created another version with the order in which it displays the content reversed:
View The Demo

Both examples use the following HTML markup & CSS:

<div id="gallery">
	<img src="images/slider/1.jpg" alt="" />
	<img src="images/slider/2.jpg" alt="" />
	<img src="images/slider/3.jpg" alt="" />
	<img src="images/slider/4.jpg" alt="" />
	<img src="images/slider/5.jpg" alt="" />
	<img src="images/slider/6.jpg" alt="" /></div>
 
 
<div id="thumbs">
	<img src="images/slider/1.jpg" alt="" />
	<img src="images/slider/2.jpg" alt="" />
	<img src="images/slider/3.jpg" alt="" />
	<img src="images/slider/4.jpg" alt="" />
	<img src="images/slider/5.jpg" alt="" />
	<img src="images/slider/6.jpg" alt="" /></div>

#gallery, #thumbs {
	float: left;
}
#gallery-overlay {
	background: transparent url('../images/home-slider-overlay.png');
	position: absolute;
	display: block;
	width: 800px;
	height: 300px;
	z-index: 200;
}
#gallery {
	width: 600px;
	height: 300px;
	overflow: hidden;
}
#gallery img {
	position: absolute;
	display: block;
}
#thumbs {
	width: 200px;
	height: 300px;
	overflow: hidden;
}
#thumbs img {
	width: 200px;
	height: 100px;
}
.clear {
	clear: both;
}

The upwards moving thumbnails example uses the following jQuery script:

$(document).ready(function() {
	var index = 0;
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var thumbsHeight = 100;
	thumbs.slice(0,3).clone().appendTo("#thumbs");
	for (i=0; i
&lt;(thumbs.length-1)){index+=1 ; }
		else {index=0}
		show (index);
	}
	function show(num) {
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = (num+1)*thumbsHeight;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}
});

The downwards moving thumbnails example uses the following jQuery script:

$(document).ready(function() {
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var index = thumbs.length-1;
	var thumbsHeight = 100;
	thumbs.slice(thumbs.length-3,thumbs.length).clone().prependTo("#thumbs");
	for (i=0; i
&lt; thumbs.length &amp;&amp; index &gt; 0) {index -= 1 ; }
		else { index = thumbs.length-1 }
		show ( index );
	}
	function show(num) {
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = ( (num-1) * thumbsHeight ) + 100;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}
});

Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | 9 Comments »