This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a "write less, do more" Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the details of the CSS.

Note: the version used in this article is jQuery 1.2.3

View jQuery Demos

Download Demo ZIP

How jQuery works?

First you need to download a copy of jQuery and insert it in your html page (preferably within the <head> tag). Then you need to write functions to tell jQuery what to do. The diagram below explains the detail how jQuery work:

how jquery works

How to get the element?

Writing jQuery function is relatively easy (thanks to the wonderful documentation). The key point you have to learn is how to get the exact element that you want to apply the effects.

  • $("#header") = get the element with id="header"
  • $("h3") = get all <h3> element
  • $("div#content .photo") = get all element with class="photo" nested in the <div id="content">
  • $("ul li") = get all <li> element nested in all <ul>
  • $("ul li:first") = get only the first <li> element of the <ul>

1. Simple slide panel

Let’s start by doing a simple slide panel. You’ve probably seen a lot of this, where you click on a link and a panel slide up/down. (view demo)

sample

When an elment with class="btn-slide" is clicked, it will slideToggle (up/down) the <div id="panel"> element and then toggle a CSS class="active" to the <a class="btn-slide"> element. The .active class will toggle the background position of the arrow image (by CSS).

$(document).ready(function(){

	$(".btn-slide").click(function(){
	  $("#panel").slideToggle("slow");
	  $(this).toggleClass("active");
	});
	
});

2. Simple disappearing effect

This sample will show you how to make something disappear when an image button is clicked. (view demo)

sample

When the <img class="delete"> is clicked, it will find its parent element <div class="pane"> and animate its opacity=hide with slow speed.

$(document).ready(function(){

	$(".pane .delete").click(function(){
	  $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
	});
	
});

3 Chain-able transition effects

Now let’s see the power of jQuery’s chainability. With just several lines of code, I can make the box fly around with scaling and fading transition. (view demo)

sample

Line 1: when the <a class="run"> is clicked
Line 2: animate the <div id="box"> opacity=0.1, left property until it reaches 400px, with speed 1200 (milliseconds)
Line 3: then opacity=0.4, top=160px, height=20, width=20, with speed "slow"
Line 4: then opacity=1, left=0, height=100, width=100, with speed "slow"
Line 5: then opacity=1, left=0, height=100, width=100, with speed "slow"
Line 6: then top=0, with speed "fast"
Line 7: then slideUp (default speed = "normal")
Line 8: then slideDown, with speed "slow"
Line 9: return false will prevent the browser jump to the link anchor

$(document).ready(function(){

	$(".run").click(function(){
	
	  $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
	  .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
	  .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
	  .animate({top: "0"}, "fast")
	  .slideUp()
	  .slideDown("slow")
	  return false;
	
	});
	
});

4a. Accordion #1

Here is a sample of accordion. (view demo)

sample

The first line will add a CSS class "active" to the first <H3> element within the <div class="accordion"> (the "active" class will shift the background position of the arrow icon). The second line will hide all the <p> element that is not the first within the <div class="accordion">.

When the <h3> element is clicked, it will slideToggle the next <p> and slideUp all its siblings, then toggle the class="active".

$(document).ready(function(){

	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();


	$(".accordion h3").click(function(){
	
	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");
	
	});

});

4b. Accordion #2

This example is very similar to accordion#1, but it will let you specify which panel to open as default. (view demo)

In the CSS stylesheet, set .accordion p to display:none. Now suppose you want to open the third panel as default. You can write as $(".accordion2 p").eq(2).show(); (eq = equal). Note that the indexing starts at zero.

$(document).ready(function(){

	$(".accordion2 h3").eq(2).addClass("active");
	$(".accordion2 p").eq(2).show();

	$(".accordion2 h3").click(function(){
	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");
	});
	
});

5a. Animated hover effect #1

This example will create a nice animated hover effect with fade in/out. (view demo)

sample

When the menu link is mouseovered, it will find the next <em> and animate its opacity and top position.

$(document).ready(function(){

	$(".menu a").hover(function() {
	  $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
	}, function() {
	  $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
	});
	
});

5b. Animated hover effect #2

This example will get the menu linktitle attribute, store it in a variable, and then append to the <em> tag. (view demo)

sample

The first line will append an empty <em> to the menu <a> element.

When the link is mouseovered, it will get thetitle attribute, store it in a variable "hoverText", and then set the <em> text content with the hoverText’s value.

$(document).ready(function(){

	$(".menu2 a").append("<em></em>");
	
	$(".menu2 a").hover(function() {
	  $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
	  var hoverText = $(this).attr("title");
	  $(this).find("em").text(hoverText);
	}, function() {
	  $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
	});
	
});

6. Entire block clickable

This example will show you how to make the entire block element clickable as seen on my Best Web Gallery‘s sidebar tabs. (view demo)

sample

Suppose you have a <ul> list with class="pane-list" and you want to make the nested <li> clickable (entire block). You can assign the click function to ".pane-list li"; and when it is clicked, the function will find the <a> element and redirect the browser location to its href attribute value.

$(document).ready(function(){

	$(".pane-list li").click(function(){
	  window.location=$(this).find("a").attr("href"); return false;
	});
	
});

7. Collapsible panels

Let’s combine the techniques from the previous examples and create a serie of collapsible panels (similar to the Gmail inbox panels). Notice I also used the same technique on Web Designer Wall comment list and Next2Friends message inbox? (view demo)

sample

First line: hide all <div class="message_body"> after the first one.
Second line: hide all <li> element after the 5th
Third part: when the <p class="message_head"> is clicked, slideToggle the next <div class="message_body">
Fourth part: when the <a class="collpase_all_message"> button is clicked, slideUp all <div class="message_body">
Fifth part: when the <a class="show_all_message"> is clicked, hide this, show <a class="show_recent_only">, and slideDown all <li> after the fifth one.
Sixth part: when the <a class="show_recent_only"> is clicked, hide this, show <a class="show_all_message">, and slideUp all <li> after the 5th.

$(document).ready(function(){

	//hide message_body after the first one
	$(".message_list .message_body:gt(0)").hide();
	
	//hide message li after the 5th
	$(".message_list li:gt(4)").hide();

	
	//toggle message_body
	$(".message_head").click(function(){
	  $(this).next(".message_body").slideToggle(500)
	  return false;
	});

	//collapse all messages
	$(".collpase_all_message").click(function(){
	  $(".message_body").slideUp(500)
	  return false;
	});

	//show all messages
	$(".show_all_message").click(function(){
	  $(this).hide()
	  $(".show_recent_only").show()
	  $(".message_list li:gt(4)").slideDown()
	  return false;
	});

	//show recent messages only
	$(".show_recent_only").click(function(){
	  $(this).hide()
	  $(".show_all_message").show()
	  $(".message_list li:gt(4)").slideUp()
	  return false;
	});
	
});

8. Imitating the WordPress Comment Backend

I think most of you have probably seen the WordPress Ajax comment management backend. Well, let’s imitate it with jQuery. In order to animate the background color, you need include the Color Animations plugin. (view demo)

sample

First line: will add "alt" class to even <div class="pane"> (to assign the grey background on every other <div >)
Second part: when <a class="btn-delete"> is clicked, alert a message, and then animate the backgroundColor and opacity of <div class="pane">
Third part: when <a class="btn-unapprove"> is clicked, first animate the backgroundColor of <div class="pane"> to yellow, then white, and addClass "spam"
Fourth part: when <a class="btn-approve"> is clicked, first animate the backgroundColor of <div class="pane"> to green, then white, and removeClass "spam"
Fifth part: when <a class="btn-spam"> is clicked, animate the backgroundColor to red and opacity ="hide"

//don't forget to include the Color Animations plugin 
//<script type="text/javascript" src="jquery.color.js"></script>

$(document).ready(function(){
	
	$(".pane:even").addClass("alt");

	$(".pane .btn-delete").click(function(){
	  alert("This comment will be deleted!");
		
	  $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
	  .animate({ opacity: "hide" }, "slow")
	  return false;
	});

	$(".pane .btn-unapprove").click(function(){
	  $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")
	  .animate({ backgroundColor: "#ffffff" }, "slow")
	  .addClass("spam")
	  return false;
	});

	$(".pane .btn-approve").click(function(){
	  $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
	  .animate({ backgroundColor: "#ffffff" }, "slow")
	  .removeClass("spam")
	  return false;
	});

	$(".pane .btn-spam").click(function(){		
	  $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
	  .animate({ opacity: "hide" }, "slow")
	  return false;
	});
	
});

9. Image replacement gallery

Suppose you have a portfolio where you want to showcase multi images without jumping to another page, you can load the JPG into the target element. (view demo)

sample

First append an empty <em> to H2.

When a link within the <p class=thumbs> is clicked:
– store its href attribute into a variable "largePath"
– store its title attribute into a variable "largeAlt"
– replace the <img id="largeImg"> scr attribute with the variable "largePath" and replace the alt attribute with the variable "largeAlt"
– Set the em content (within the h2) with the variable largeAlt (plus the brackets)

$(document).ready(function(){

	$("h2").append('<em></em>')

	$(".thumbs a").click(function(){
	
	  var largePath = $(this).attr("href");
	  var largeAlt = $(this).attr("title");
		
	  $("#largeImg").attr({ src: largePath, alt: largeAlt });
		
	  $("h2 em").html(" (" + largeAlt + ")"); return false;
	});
	
});

10. Styling different link types

With most modern browsers, styling the link selector is very easy. For example, to style the link to .pdf file, you can simply use the following CSS rule: a[href $='.pdf'] { ... }. Unfortunately, IE 6 doesn’t support this (this is another reason why we hate IE!). To get around this, you can do it with jQuery. (view demo)

sample

The first three lines should be very straight foward. They just a CSS class to the <a> element according to their href attribute.

The second part will get all <a> element that does not have "http://www.webdesignerwall.com" and/or does not start with "#" in the href attribute, then addClass "external" and set target= "_blank".

$(document).ready(function(){

	$("a[@href$=pdf]").addClass("pdf");

	$("a[@href$=zip]").addClass("zip");

	$("a[@href$=psd]").addClass("psd");
	
	$("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]")
	  .addClass("external")
	  .attr({ target: "_blank" });
	
});

1,124 Comments

Spencer
Feb 29, 2008 at 7:37 am

Wow. Thanks a lot :) I can’t wait to make some sweet effects. :D

Ian Stewart
Feb 29, 2008 at 7:40 am

Awesome tutorial! Thanks so much for this.

David
Feb 29, 2008 at 7:47 am

point 9:

this is nice and a long time i search for a good tut for this.

thanks!

Bernd
Feb 29, 2008 at 8:05 am

Yeah. Big thank You ! I always wanted to look at jQuery, but you gave me the Kick. Great article !

Rob
Feb 29, 2008 at 8:07 am

Viva la jQuery!

bluEyez
Feb 29, 2008 at 8:17 am

w0w so nice :x
nice tutorials

Piotr
Feb 29, 2008 at 8:26 am

This is just brilliant. Thank you!

Gabe
Feb 29, 2008 at 8:31 am

Love me some jQuery. I use it all the time on “side jobs”, personal projects, and even at work at my “real job”. Truly is “write less, do more”. Your explanations are clear and concise, hopefully it will get more designers into using it!

Junio Vitorino
Feb 29, 2008 at 8:35 am

Cool, Is really fantastic, but we have than use with moderation, how beer. :-D

Dominic Leonard
Feb 29, 2008 at 8:44 am

Fantastic article! Encouraged me to finally venture into the world of jQuery

Tom
Feb 29, 2008 at 8:50 am

Really useful summary of jQuery essentials.
Keep up the good work!

Salman
Feb 29, 2008 at 9:32 am

I have been looking for designer focused jQuery tutorials, and this tutorial is probably the best one around, even the ones on http://docs.jquery.com/Tutorials don’t help, but this one is excellent.

Thanks a lot Nick!

Race
Feb 29, 2008 at 9:40 am

woah thats awesome, but could you
make a tutorial how to make a guestbook

Jacob
Feb 29, 2008 at 9:44 am

Thanks! ..this is exactly what I’ve been looking for, great for beginners too.
Keep the good work!

max
Feb 29, 2008 at 9:44 am

yeah, great tutorial!

Marcus Blättermann
Feb 29, 2008 at 9:52 am

There is a little problem with the things that slide up/down (examples 4a, 4b, 7) These things jump a little bit when you open and close them. They start to slide about half the way down (or up) and then open up immediately, making the animation jumpy.
To solve this problem you must give the content that slides open (for example the ) a width via css. This width must be the same or smaller like the surrounding box.

The problem is, jquery seems to calculate the height of the surrounding box for the animaton wrong. It doesn’t use the width of the surrounding box for the content. It just uses the width of the content and if that is not given it assumes it to be width:100% which causes the problem in a with more then one line of text.

benjamin
Feb 29, 2008 at 9:56 am

This has become my favorite site ever. Thanks for putting your time and skills into this site Nick. I can’t wait to burn through these tutorials. Peace.

Marcus Blättermann
Feb 29, 2008 at 9:56 am

The problem can also occur when you use a margin-top margin-bottom. I think it’s better to use a padding.

Chris Laskey
Feb 29, 2008 at 10:03 am

Great mind’s think alike? I’m currently working on a simple introduction to jQuery for my blog. Glad to see others out there doing the same, getting the word out on jQuery!

Cheers

Figueiredo
Feb 29, 2008 at 10:07 am

AWESOME!

Thanks for all man! jQuery is fantastic and this tutorial too…
explanation perfect, go direct the point! =D

Anonym Web
Feb 29, 2008 at 10:14 am

I love easy scripts! ready to use.

Robbi
Feb 29, 2008 at 10:30 am

Thank you so much for these tutorials!!

Kyle Meyer
Feb 29, 2008 at 10:35 am

Now if we can just teach people when to use these things and when not to… :)

Great tutorial Nick.

Reinier Kuipers
Feb 29, 2008 at 10:46 am

Great stuff! Thanks so much.

Milan
Feb 29, 2008 at 10:51 am

Hi thanks a lot for this tutorial!! It is very helpfull an one of the best JQuery tutorial i ever read.

Marc Grabanski
Feb 29, 2008 at 11:20 am

Very nice explanation of jQuery from a perspective that designers care about. A++ tutorial.

Jean-Michel
Feb 29, 2008 at 11:34 am

Thank you again, Nick !

Ben
Feb 29, 2008 at 11:34 am

Brilliant tutorial. Just what I’ve been looking for. As a designer, JQuery has been my library of choice for interaction. May I also suggest the excellent tutorial on zebra striping on the JQuery website? Although it’s written for tables, the format can easily be repurposed for ordered and unordered lists. I’ve used it on countless websites to get that odd even striped look without any fuss. No fuss, no muss.

Deny Sri Supriyono
Feb 29, 2008 at 11:57 am

greaaaaat!
thanks for sharing, nick.

Will Wilkins
Feb 29, 2008 at 12:31 pm

This is great. Thanks so much for your time in putting this together!

Ken
Feb 29, 2008 at 12:33 pm

You rock. Thank you!

Amanda Robbins
Feb 29, 2008 at 1:25 pm

This is one of the most useful tutorials yet! I am going to design my portfolio site this weekend and I plan on using several techniques here. Thank you!!

jQuery Designer
Feb 29, 2008 at 1:49 pm

This is a great tutorial about a great Javascript framework. I recently started writing mini tutorials about jQuery for designers also. I just glad to see others in the community committed to helping others like themselves.

Awesome tutorial I’ll keep up the great work.

Andrei Gonzales
Feb 29, 2008 at 1:52 pm

Good stuff. It’s always good to learn JS/AJAX, but Jquery is admittedly, one of the easiest frameworks to pick up.

Mohammed
Feb 29, 2008 at 2:25 pm

Thank you so much for valuable tutorial.

Danny
Feb 29, 2008 at 3:20 pm

Great tutorial…only thing I seem to be pondering is how to get all of these ideas/scripts to function with each other. If you want to implement one jQuery script for your nav and another for portfolio purposes, in my experience, typically I can only get one to work and the other will break. And forget about implementing mootools. Maybe I just need to read more on this stuff to find out how to make them all play happy with each other. Again, great tutorial!

Iraê
Feb 29, 2008 at 4:05 pm

Very, very nice tutorial!

But in one of the first exemples I would clarify the $(“ul li:first”) exemple.

In CSS the selector ‘ul li:first’ would select all the first <li>s of all the <ul>s in the page. But jQuery select as folows:
$(“ul li:first”) = get the first <li> of the first <ul> in the page.

To select with jQuery the seme elements as the CSS would select you can do:
$(“ul”).find(‘li:first’) = gets all the first <li>s of all the <ul>s in the page.

john herr
Feb 29, 2008 at 4:07 pm

@Danny — try building your cases (search patterns and their associated actions/behaviors) into JSON objects. Then build some general purpose functions and do all of your customization within the JSON blocks.

Ivan
Feb 29, 2008 at 4:35 pm

I noticed the tiniest odd glitches here and there for IE7. Are these supposed to be completely prod-ready?

bweb
Feb 29, 2008 at 4:44 pm

Highly useful tut. Thanks a lot.

[n0M3n]
Feb 29, 2008 at 6:02 pm

Didn’t know this library XD
I love u, I’m gonna use it on my website :P

kevadamson
Feb 29, 2008 at 7:42 pm

Nick, as per usual, you are a legend. I’m gonna sit down with a nice cup’a tea tomorrow and go through your tutorial thoroughly.

I’ve been trawling jquery forums recently to learn more, but they are seem to be from a perspective of the reader having a decent knowledge of JS – which I don’t! Cheers for this (”,)

Ben
Feb 29, 2008 at 7:54 pm

Thanks for the great tutorial. You made it so clear, I finally get it. I have been trying jquery, but I was missing something. This really helps.

Mitchell
Feb 29, 2008 at 8:04 pm

Thanks for this! It must have taken me all day to get a simple accordion working on an old site, I’m glad I can always come back to this when I need javascript to do sexy things ;)

Markov
Feb 29, 2008 at 8:06 pm

Thankyou very much!
This will really help me in making my websites!

:twothumbsup:

Aileen Feng
Feb 29, 2008 at 9:36 pm

me again

Fredrik
Mar 1, 2008 at 4:35 am

Thank you, thank you, thank you. Been tryin’ figure out JQuery, looking for easy-to -use examples. So this article is spot on. :)

Fabio Sasso
Mar 1, 2008 at 5:09 am

Thanks a lot… it’s gonna be very useful.

Amrit Hallan
Mar 1, 2008 at 5:33 am

Hello Nick.

This is a great start with jQuery for me, but how do I send these functions dynamically generated divs? Suppose there are product IDs, and when you click them, the rest of the information is animated into visibility. Right now I’m using Prototype for this, but it is simple show and hide, no animation.

Thanks.

SeeN
Mar 1, 2008 at 6:01 am

great tutorial!

ashvin
Mar 1, 2008 at 6:34 am

tHaNx! for the help…

Amanda Fazani
Mar 1, 2008 at 11:55 am

This is a great introduction to jQuery! Thanks for posting all these examples. Now I have a much better idea of how jQuery works and what can be achieved with this.

toan
Mar 1, 2008 at 12:38 pm

it’s just great

martijn
Mar 1, 2008 at 12:45 pm

All libraries suck! Why don’t make it yourself?

bali web designer
Mar 1, 2008 at 12:55 pm

Thanks you (again) for sharing these nick, excellent, vote for button hover effects but accordion run unsmoothly :)

Dejan Cancarevic
Mar 1, 2008 at 2:12 pm

very good thank you

gokudb
Mar 1, 2008 at 2:19 pm

hi, can i do this for a wordpress blog¿?

Angelfire
Mar 1, 2008 at 2:44 pm

OMG, Just I need for begin to learn about AJAX :D
I everything say you’re a master of design

So much thanks :D

Vins
Mar 1, 2008 at 3:30 pm

OMG, this is amazing job you’re doing here !

Amanda Robbins
Mar 1, 2008 at 11:02 pm

Is there a way to add a text description to the image replacement (# 9)?

Cacao
Mar 2, 2008 at 1:52 pm

Hey Nick, this is great, I have been looking for some designer oriented jquery tutorial like this. Thank you for all the time you put in this.

Marianne
Mar 2, 2008 at 7:47 pm

Thanks a lot for this brilliant tutorial. So far I stayed away from anything Javascript. But this looks all so great! And so simple! I really need to have a play with it!

Michael
Mar 2, 2008 at 8:52 pm

Wow !
It’s amazing, I really like this kind of effects, thanks for this splendid tutorial.
Michael.

AndyBr
Mar 3, 2008 at 2:39 am

thank you for sharing it

mynicksucks
Mar 3, 2008 at 2:59 am

Thank you a lot for sharing!!!

Milinda Lakmal
Mar 3, 2008 at 7:45 am

Really Cool.

mike
Mar 3, 2008 at 9:40 am

That’s really great, I’d love something on degradation where the user has javascript turned off.

Nathan
Mar 3, 2008 at 7:02 pm

I am having some trouble viewing some of these in Fire Fox?

Is that normal?

Andrew
Mar 4, 2008 at 4:25 am

Very good tutorial! :)
Always have been a “fan” of Mootools — now i´m getting slowly into jQuery.

Foxinni - Wordpress Designer
Mar 4, 2008 at 4:26 am

HARDCORE!!! Perfect post. Ah man you did it again! Will be reading this post thoroughly through

Saso
Mar 4, 2008 at 11:52 am

Great tutorial. I hope we will see more about jQuery.
Thanks

Richard
Mar 4, 2008 at 3:52 pm

Man, this page is one of the best! Anyways, this is Richard from Hedge Against Speculation.

I have a contest going on for free ad space on my blog. Seeing as how your blog is so active I would appreciate it if you participated.

The rules are on my website:
http://hedgeagainstspeculation.blogspot.com

Thanks

Anton Shevchuk
Mar 4, 2008 at 5:08 pm

Nice tutorial. I translate it on Russian. Again … ;)

Jamie Lottering
Mar 4, 2008 at 7:28 pm

Great tutorial, great explanations and it’s easy to follow. I prefer Mootools myself as I like the modular structure and a lot of scripts I use are based off of the framework but you’ve got me interested in checking out jQuery ( I am aware mootools can do mostly the same things )

chazzuka
Mar 4, 2008 at 10:27 pm

Cool stuffs thanks nick, and i am going to use some of this in my site :)

coyr
Mar 5, 2008 at 2:39 pm

Thanks for share. It’s a good tutorial. The examples are the best. Thanks! ;)

Michael Jenkins
Mar 5, 2008 at 4:37 pm

I love you. That is all.

Jared Ramirez
Mar 5, 2008 at 5:43 pm

QUESTION: in the Entire block clickable. can someone tell me how to make that link to open a new window? The equivalent of target=”_blank” in html.

Diijon
Mar 5, 2008 at 6:10 pm

Great Tutorial. I will be printing, saving, and sending this to friends.

dee
Mar 5, 2008 at 7:00 pm

thanks for this tutorial, I’ve been nagging my brains on how I’ll be able to use the jQuery and come up with a design for my personal site. I can only learn so much.

jdns
Mar 5, 2008 at 11:34 pm

Hi, first I want to say thank you for this great tutorial. I was playing around with
the Image replacement gallery code and I was able to make the images fadeIn and out, when you click on a thumbnail. And I thought I would post it back for anyone to use. But I guess it will not let me. Is there anyway I can give it to you? Otherwise thanks for a great site, and the tutorials.

Ben
Mar 6, 2008 at 4:14 am

Wow, thanks for this nice tutorial! will be handy for future work. keep up your awesome stuff. :)

leveille
Mar 6, 2008 at 10:18 am

Great stuff Nick. Just a suggestion. For your accordion menu, or even your collapsible panels stuff, removing the padding from the item that will collapse, and adding it to a nested element, should remove the herky jerky movement and make things a bit smoother. For example, in your accordion:

<p style="display: block;">Lorem ipsum ....</p>

change to

<p><span style="display: block; padding: 10px;">Lorem ipsum ....</span></p>

and remove the padding associated with the accordion paragraph(s) from your styles. Also, a paragraph is a block level element, therefore it isn’t necessary to define the display as block.

Again, great stuff. Your work (and your commitment to your work) is truly amazing.

Cher
Mar 6, 2008 at 10:21 am

Thank you very much for this page, it was good to see some JQuery in action and understand what you can do with it, it was really helpful and refreshing!

Thanks!

Luke Robinson
Mar 6, 2008 at 11:24 am

Thank you for sharing! This jQuery tutorial is just the ticket. Kudos!

Dan Cole
Mar 6, 2008 at 11:49 am

I just started learning and using jQuery. It’s a lot of fun. I’m using it to create a WordPress theme now. It’s going to be great.

CristianR
Mar 6, 2008 at 11:55 am

Great tutorial, thanks !

Luis Cameroon
Mar 6, 2008 at 12:19 pm

Thanks for this great tutorial! It can be handy for my future works.

Cheers from Brazil!

Ollie Kavanagh
Mar 6, 2008 at 1:14 pm

Really good tutorial, thanks! I am just moving across from Prototype to JQuery and this is going to be very useful! ;-)

paulgiacherio
Mar 6, 2008 at 1:41 pm

Fantastic tutorial- thanks for taking the time to make it clear and concise.

alyssa
Mar 6, 2008 at 7:52 pm

thanks for the overview, but how do i make the slide panel slide horizontally (say from left to right)?

calvin
Mar 7, 2008 at 1:50 am

amazing stuff! thanks so much!

Stefan Vervoort
Mar 7, 2008 at 12:28 pm

Bookmarked this great guide.

Felipe Ramos
Mar 7, 2008 at 3:11 pm

Great tutorial as usual… really awesome work… Too bad I live in a place where IE6 still greatly used if not IE5 -.- so some of the effect don’t work quite well…

gleam
Mar 7, 2008 at 3:56 pm

Another great turorial. Thanks for sharing.

JaNN
Mar 8, 2008 at 10:16 am

thanks a lot ^^

Fabian
Mar 8, 2008 at 10:35 am

Very nice tutorial :D

Nacho
Mar 10, 2008 at 1:19 pm

Very helpful :]

mark
Mar 11, 2008 at 6:28 am

Excellent tute!

A couple of awesome examples there that a tech-retard like me can implement.

Thanks!

Benjamin
Mar 11, 2008 at 10:12 am

Very nice tutorial and insight to jQuery.
Thanks for sharing!

Allahverdi
Mar 11, 2008 at 10:54 am

Hi. I have a question. I know the question doesn’t match to this post.
In which software you draw web designs?

Eric Rasmussen
Mar 11, 2008 at 1:19 pm

Wow, what a great website! Just stumbled across your site and what an awesome resource! Thanks,

Luca
Mar 11, 2008 at 4:16 pm

Very Nice!

Manuel Vidarte
Mar 11, 2008 at 8:29 pm

i am a fan of your website, its really cool and important tool for my life, thank you very much for your time and your talent :)

LOLO
Mar 12, 2008 at 4:15 am

Great work!

Milinda Lakmal
Mar 12, 2008 at 6:02 am

Nice tutorial. I learn lot from reading this tutorial. It’s better if you can provide more tutorials relevant to CSS. Thanks!

Milinda Lakmal
Mar 12, 2008 at 6:09 am

I forgot to tell in previous comment that animated hover, clickable blocks and link types snippets are very useful and I hope to use those things in my future project.

Josh
Mar 12, 2008 at 7:11 am

Great Tutorials! I’ve been looking for something like this. Would you know how to achieve ( or where to find) an effect like the one mint.com displays on their home page?( “why will you love mint”) It’s the animated sub nav at the bottom of the page, where the copy fades in with each section?

Thanks again for the great tutorial.

Christina
Mar 12, 2008 at 6:11 pm

Thanks for these great tips!!

ridhoyp
Mar 12, 2008 at 8:44 pm

waw, thats so cool!! thanx for tutorials. :)

Matt Halliday
Mar 13, 2008 at 12:10 am

Wow, awesome tutorials/resources. These look easy to implement and can make any website stand out.

Also, great work on the site, love the whole hand-crafted style of it. Keep the awesome resources coming.

imaginepaolo
Mar 13, 2008 at 3:44 am

Nice tutorial. Great tutorial. I links this at imaginepaolo

Nastya Manno
Mar 13, 2008 at 2:16 pm

Thank you very much for a very interesting tutorial! You have a beautiful site just perfect! I have found for themselves and for my ideas a lot of new and interesting

rruben
Mar 13, 2008 at 5:13 pm

wow this is really awesome. Thank you very much for sharing your knowledge with us.

Joefrey Mahusay
Mar 13, 2008 at 8:59 pm

Really nice tut. Thanks for sharing. Surely, I will use this techniques in my future projects.

Chris Johnson
Mar 14, 2008 at 9:11 am

Great tutorials! I’ll be looking into implementing some of these functions in sites to come!

Almog
Mar 14, 2008 at 10:38 pm

Great tutorials! These look good I well try them out , I have been using Adobe ajax spry which I would recommend to any.
Thanks

web design , almog
Mar 14, 2008 at 10:40 pm

Great tutorials! These look good I well try them out , I have been using Adobe Ajax spry which I would recommend to any. Also there is moo.fx and scriptoluse
Thanks

Miami Web Design
Mar 14, 2008 at 11:51 pm

Thank you so much for the awesome tutorials! I’ve got a question for you.

In the clickable block tutorial, is there any way to include/incorporate that behavior from the :hover pseudo class into the js? I’m trying to make the effect compatible with IE6 (I know, shoot me LOL.)

Thanks in advance :)

mark
Mar 16, 2008 at 2:46 am

EXCELLENT tips. Thanks so much!

Brandon Kaylor
Mar 17, 2008 at 7:22 am

Very Nice!

Im going to try and use the Gallery one i believe its #9.
For my portfolio.

Jonny Rash
Mar 17, 2008 at 11:40 am

Hey Nick La your website looks awesome. Its my personal favorite right now. The jQuery tutorials were real helpful, it was about time I got up on this stuff. I’m already a jQuery’in fool, it’s so easy if you already know Javascript/CSS, I had no idea.

To answer Miami Web Design’s question, you can attach the hover stuff in jQuery with .hover(). This would be called in the same way as .click(), for example:

$(“label”).hover(function() {
$(this).addClass(“hoverClass”)
});

This works just fine in IE 6.

http://www.jonraasch.com

Dizinya
Mar 17, 2008 at 2:09 pm

thank you this a very goog post…

5ivedance
Mar 18, 2008 at 11:39 am

Nice tips, ありがとうぐざいます

Joy
Mar 18, 2008 at 6:14 pm

Awesome post as always, but this is definitely your best yet!
=D

Ian
Mar 18, 2008 at 10:20 pm

How would you save the state of the accordion as you change from page to page? I know it would involve some hard work, but I have no idea where to begin.

Anuja
Mar 18, 2008 at 11:37 pm

Hi. Thank you so much for this tutorial. you have given all the details in a manner to understand easily. Thanks again.

Omkar
Mar 19, 2008 at 10:02 am

Wow thanks for the great tutorial. Its relly wonderful. Keep up the good work.

Katalog Stron
Mar 19, 2008 at 11:32 am

Wow it seems to be very powerful tool.

Allen
Mar 20, 2008 at 4:15 am

Fantastic!I love it man.

Tim
Mar 20, 2008 at 9:47 am

Are there any SEO issues that are raised by using JQuery? Hiding text off page etc? I’m interested in the sliding panel, but have concerns over whether or not it might be deemed ‘Blackhat’?

Soz if this is beyond the remit of this page.

Sue
Mar 20, 2008 at 1:04 pm

This is amazing. The tutorial is nice visually, and it’s pretty detailed and helpful. It’s easy to understand. I’m using the sliding panel one now as well as a different one for scrolling back to the top of the page. I was wondering though, if there’s a way to put that code in a js file instead of directly in the header.

Richard Shields
Mar 20, 2008 at 5:33 pm

Great tutorial! The image replacement script can be further customized to have the thumbs to the left or right or above the large image by changing the location of the … to various parts relative to the large image. Good work! Look forward to seeing some more!!

Juan Josè Chirino
Mar 20, 2008 at 11:57 pm

Estupendos ejemplo y de gran ayuda para todo tipo de aprendizaje. Felicitaciones.

Soy Juanjo desde Argentina. Hasta pronto.

lukxiufung
Mar 21, 2008 at 12:21 am

Wow… what an awesome tutorials and resources for the web designer. However, my company is using SAVVY.UI as it is develop by our programmer. So, I don’t think I can learn this one. But still want to say thank you as you give me a clear concept about it.

Austin
Mar 22, 2008 at 3:30 pm

Thats awesome! Thanks!

Hilder Santos
Mar 22, 2008 at 7:16 pm

Wow!!! Absolutely awesome! Thank you very much for the tutorial. I’m going to implant this on my next website upgrade, indeed!

Thank you!

Jonathan
Mar 22, 2008 at 10:54 pm

This is great. I found it very helpful thank you.

san
Mar 23, 2008 at 2:30 pm

awesome tutorial! thank you!!

Maveric
Mar 24, 2008 at 1:04 am

This is a great stuff. Thanks for the demos and downloads, this stuff is looking really amazing and is easy to implement in a html page, thanks a lot. :)

pab
Mar 24, 2008 at 2:59 pm

how can I apply two of these rules together, let’s say i want to use the accordion effect on one part of the page and i want to use the Simple slide panel on the same page but on different elements.

great tutorial.

Jenn
Mar 24, 2008 at 6:09 pm

Great tutorial. Unfortunately, I put a table inside of the accordion, it works in explorer but does not work in Firefox, Safari, or SeaMonkey. Is there something that I can do to make it work?

pab
Mar 25, 2008 at 2:04 am

i figured it out…

now i need to figure this out…

what if i have 2 paragraphs in the first pane, how can I make that work? since the second paragraph disappear once the panel has been clicked.

Egypt Web Design Company
Mar 27, 2008 at 7:16 pm

Woww How come i haven’t see this tutorial before i’ve been looking for Javascripts for designers since long time thank you sooo much

Andreas
Mar 28, 2008 at 5:40 pm

Great samples, thank you. Very nice and easy to understand.

Matthew
Mar 31, 2008 at 12:28 pm

You can have a live example of accordion in my generator: http://www.mycoolbutton.com.

Thanks to this great tutorial.

Bye, M.

Cloud9 Design
Apr 1, 2008 at 9:11 am

Thanks for the great samples!

EpiPaul
Apr 1, 2008 at 5:54 pm

Great artical
Really some things I can use in my websites

Aditi
Apr 2, 2008 at 12:47 am

awesome article,thanx

Rob
Apr 4, 2008 at 8:58 am

Excellent article as usual. I’m a bit of a MooTools fan myself, but I have been meaning to have a bit more of a play with jQuery.

Thanks

Joe
Apr 7, 2008 at 4:46 pm

Great job. I have added the animated hover to my website and it works well. However, I can’t get it to work on a page that I have either a lightbox image script or a mootools image script. Anyone know what the possible fix would be?

all the best,
Joe

Miron
Apr 8, 2008 at 2:53 pm

I think I will try this examples. THX for it!
& I hate IE, too :)

William Gates the 3rd
Apr 12, 2008 at 3:10 pm

GREAT !!!

David Miller
Apr 14, 2008 at 11:29 am

Nice set of tutorials. I’m fairly new to jQuery, but making entire panes viewable was something I was meaning to figure out how to do. Cheers.

Bhargav
Apr 15, 2008 at 4:16 am

This is really one of the Gretest articals which i have refered.
I would like to use these examples in my current project. If u have any more example… please share with me.

Thanks & Regards

Bhargav

georgeM
Apr 15, 2008 at 9:37 am

Great tut Nick, I have just recently been diving into jQuery as a design extension, and some of these effects are the exact ones I was wishing to use. Thanks for the help!

adil
Apr 15, 2008 at 8:08 pm

you make greath job thank you for help devellopers

Fotograf
Apr 17, 2008 at 3:28 pm

thx 4 good tutorial

Damien Buckley
Apr 17, 2008 at 9:41 pm

Thanks for the tutorial – just saved my bacon. I was having trouble with the jQuery accordion plugin and it turns out the simple script up top works a treat. Thanks again,

ed
Apr 18, 2008 at 3:32 am

excellent tutorial!… nice work!.. bravo!…

Autor
Apr 18, 2008 at 7:15 am

Thanks for these nice tutorials. First time I am really thinking about using JavaScript for Design…

fgzerg
Apr 18, 2008 at 8:40 am

hgsert yi_çà-è zehbh'” rtyy(u ssdahujy ju

dedek
Apr 19, 2008 at 9:26 am

xdcfvg

jezal
Apr 20, 2008 at 5:36 am

Thx very much for this site.I learned the jquery here.And I am a css and javascripts fans.You kown,my English is poor,as I’m a chinese.I have a site about css and javascrpits,it’s named http://www.csseye.cn.Let's do css forever….

DIno
Apr 20, 2008 at 9:10 pm

Hi Nick. Really nice tutorials. Before I stumbled into this post, I was choosing between mootools and jquery but when I saw this, I know what I have to use now. Jquery is so much easier to use for designers who isn’t really much into backend coding. I mean mootools is lighter but mootools is far too advanced for me. Thanks so much. I appreciate this effort of sharing your knowledge to other designers out there. Long live Nick La.

ST
Apr 21, 2008 at 11:10 pm

excellent tutorial. nice and smooth

Dharam
Apr 25, 2008 at 1:50 am

Hi Nick, it’s realllllllllllllllllyyyyyyyyyy nice work, this is the best work forever which i have seen in JS. Thanks to show the power of JS (jquery)

vishal rathod
Apr 25, 2008 at 4:15 am

very good tutorial….Helped me a lot thanks…

Onyeka
Apr 25, 2008 at 8:19 am

OMG, awesome work, will try!!! Thanks!

Thastrom
Apr 26, 2008 at 11:08 am

I can’t get number 1 “Simple slide panel” to work. Where should I put all the files? Can someone help me via aim ? my screenname is andreeblixt.

Thanks!

Connor
Apr 27, 2008 at 5:48 pm

From my blog.

Eighth – Probably the best JQuery tutorial I’ve seen on the internet. Not only does it simply explain how JQuery works (thank god!), but it provides 10 useful examples that are easy to implement in any web site.

I’ve said this once and I’ll say it again – Nick La is an absolute gem.

firman
Apr 29, 2008 at 4:30 am

Thanks you so much nick! You’re absolutely a real webmaster..

Ty (tzmedia)
Apr 30, 2008 at 8:34 am

Great stuff, Nick. It would just be awesome if these were in the plugin repository over at jquery. All of these are just excellent work. Your visual stylings are “World class”!

Deku Link
May 1, 2008 at 4:39 am

Very nice and helpful! I’m totally using these! But I have 1 question: In the Simple slide panel, is there a way to have the panel out by default when the page loads? Instead of starting out collapsed, can I make it start out expanded? Thanks! C ya later.

Cara Jo
May 1, 2008 at 5:59 pm

Thank you for posting this – I’ve been trying to find a simple tutorial for a long time, and this makes everything ‘click’!

PRATHAP
May 2, 2008 at 5:19 am

excellent tutorials

james
May 3, 2008 at 4:55 am

Thank you for these wonderful tutorials. I just discovered jQuery and I must say it’s apsolutely amazing. It’s actually FUN to code in because it’s sooooo easy!

Thanks again,

Regards,
James

maxix
May 3, 2008 at 1:21 pm

omg nice tutorial i used in wordprees and work very good

xaer8
May 5, 2008 at 11:06 am

Hey, i’ve been your website die hard fan since your first post. However, there is something i would like to know. How did you put those right or left image (125x125px size) on each of your post (homepage), while on each post (single post) the image does not exist? Do you use any special plugins? Love that feature!

nik
May 6, 2008 at 2:03 pm

good

Bruja
May 8, 2008 at 4:02 pm

Hi,

I’m trying to get the Animated hover effect #2, but I can’t.

See the code of my menu-list (here).

Can you please help me?

philfreelanceweb
May 9, 2008 at 12:35 am

Wow what a great tutorial for jquery, i used to learn for mootools hopefully you can share for mootools as well. Anyway this is very useful for most designer and web developers, applying this new way concept.

mike
May 13, 2008 at 1:08 pm

Just started getting into jquery and this excellent tutorial is a great find. Only problem I am having is with the 2nd animated menu hover – by using the “title” tag you are invoking a tooltip which then displays as well as the animation. Is there a workaround?

mike
May 13, 2008 at 1:47 pm

Never mind. Fixed it. Switching title to id works but doesn’t validate. Class does ;-)

template
May 16, 2008 at 6:04 am

this tutorial is amazing.i tryed this example.and really beautiful.thanks for share.

danny
May 16, 2008 at 6:53 am

pure greateness – thanks

CSS experts
May 16, 2008 at 11:43 pm

Hi All,

I would like to invite all CSS expert on my site and leave there comments regarding HTML/CSS code.

http://www.gigaturn.com

R a b i D
May 18, 2008 at 10:56 pm

very very good ! Thanks you very much !

Jason Marsh - Web Site Designer
May 20, 2008 at 10:45 am

Aw man so many cool tricks, awesome!

Jayme
May 21, 2008 at 9:22 am

Nick – love all of the how-tos. I would love to see different ways of styling menu navigation. How do you suggest?

araba ilanı
May 21, 2008 at 7:17 pm

very very good ! Thanks you very much !

Rahul Joshi
May 22, 2008 at 7:41 am

hi,
i was using the hover effect explained here for my wordpress navigation. But i cannot see any effect. IE7 shows it as – “object expected error”.
Please help me out…
thanks in advance

debi
May 22, 2008 at 10:52 am

I am so glad I found your site. I’m just learning and was frustrated with jquery but your tuts are great and now I’m going to have fun with designing my website. Have a great day!

Felix Jie Rong
May 22, 2008 at 8:03 pm

That’s a fantastic.

illu
May 24, 2008 at 3:03 am

I really like the Simple slide panel. But I want to use it more than 1 time on my page. How can i make this work?

mf rahman
May 24, 2008 at 10:01 pm

super-cool! Brilliantly done.

david
May 27, 2008 at 1:02 am

thank you for the awesome tutorials, I love the cross-browser functionality of jQuery, all the available effects are sick if used in the right way.

:)

David

kasonde
May 28, 2008 at 6:07 pm

You are an inspiration..im grateful i found this site!

APM Solutions
May 29, 2008 at 12:02 pm

This is great. Lots of valuable articles here. Definitely will be bookmarking this one.

wack
Jun 4, 2008 at 8:33 am

Pretty funny… This “tutorial” is pretty much a copy+paste of the jQuery documentation page… Pretty shameless rip off…

The author’s got talents, the blog design’s fun… it’s too bad so much stuff on this blog is recycled from other places with added drop shadows, it stinks of adsense speculation a lot more than it feels like the author’s genuine desire to spread knowledge and help people.

It’s become all too common on the web… remember the “information super highway”? ha ha… it’s been replaced by money, money, money, everything, everywhere.

@author: spend less time looking at your stats and come up with ORIGINAL content. You can do it…

Renan Hagiwara
Jun 4, 2008 at 10:04 pm

nice tutorial, thanks a lot!

rwin
Jun 5, 2008 at 3:45 am

really cool, thanks alot

daniel
Jun 5, 2008 at 5:16 am

@wack – get over yourself you idiot. I visit this page as a quick reference far more often than the jQuery doc site. Take your blog envy elsewhere.

Carly
Jun 5, 2008 at 8:03 am

Love the tutorial, but does anybody know how to get the div to overlap content, and not push it down?

Stan
Jun 5, 2008 at 8:44 am

Just want to add praises for this great introduction to jquery. It helped me to make that 1 step and it is very rewarding.

Thank you

Colin Miller - Freelance web designer
Jun 5, 2008 at 1:46 pm

Great stuff! I will be experimenting with jQuery after reading this. Excellent

CSS 2.0
Jun 6, 2008 at 12:24 pm

CSS is very powerful with jQuery, this is nice article..

Matthew 'Web Design' Adams
Jun 9, 2008 at 5:14 am

Cool post. I’ve added a ton of your pages to my favs!

shweta
Jun 10, 2008 at 8:05 am

its great thanx

bas
Jun 11, 2008 at 4:05 am

this is great help for me, thanks..

in the case of the slide panel, is it also possible to get it to slide by simply hovering the button?

Seth
Jun 13, 2008 at 10:11 pm

jQuery interferes with the lightbox script. Any ideas how I can fix this? I really need this drop-down menu (slide panel menu). Please, it’s urgent.

Alex
Jun 15, 2008 at 12:12 pm

Seth, the Scriptaculous and Prototype javascript libraries don’t play well with Jquery so you can’t use them together.

Darryl
Jun 18, 2008 at 4:45 am

Why does the Hover effect only work if the link is inside a list?

Ryan
Jun 18, 2008 at 7:39 am

Straight to my favorites, great stuff. I will be testing it tonight and report back if I see any problem. thanks

Brandon Wolvin
Jun 19, 2008 at 2:46 pm

Great Stuff! I saw that the accordion technique does not work in IE 6 though. Anyway around this. The arrows are not clickable.

teng
Jun 20, 2008 at 1:38 am

I will learn with you guys.

Laura
Jun 20, 2008 at 2:56 am

Hello, this web is genial!
I need the same code that example 9, but with videos?
Could you help me, please?

Sam
Jun 20, 2008 at 6:05 am

Cool! Just so you know with your accordion demo, the reason it’s buggy is because you are using padding. The accordion effect hates padding and gets all buggy around it.

Just use margins instead.

Andris
Jun 20, 2008 at 6:45 am

Hey there,

Is it possible to combine the two demos: chain-able transition effects and Image Replacement? I would like to build something like that: Pretty much that what you built in the Image Replacement Demo. But I want some animations. The Images should fade out then change the largePath and the fade in again. I tried to chain those three arguments but it doesn’t work. the Image changes before it fades out. Could you explain me how to build it? Thanx.

Brandon Wolvin
Jun 24, 2008 at 12:37 pm

Thanks Sam, but I removed the padding and the arrows still are not clickable in IE 6.

Sulcalibur
Jun 25, 2008 at 3:34 pm

With the menu and the hover over animated things in 5b. Is there anyway to have them centered rather than having padding. The reason being is that if used on a buttons with different width, it looks all screwed up :(

Many Thanks Nick

David
Jun 26, 2008 at 3:49 pm

The image replacement gallery is exactly what I was looking for, for an upcoming project. To delicious this page goes! Thanks! :D

Web Development
Jun 28, 2008 at 9:31 am

Good menu source code for my next web development work.

bluevn
Jun 30, 2008 at 12:18 pm

Wow, thanks so much, that r what i need now

Rac
Jul 1, 2008 at 3:57 pm

The vertical http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
slider is pretty. How hard is it to implement the Horizontal slider? Can you provide the direction?
Thanks.

Jith
Jul 1, 2008 at 10:57 pm

Its a great place to learn how professionals think,..thank you very much :-)

Christian
Jul 2, 2008 at 1:49 pm

thanks for this cools stuff. i’m a complete newbee. is it possible to “grap” foreign content (e.g. google spreadsheet pages) an replace the css use there?

Rob
Jul 3, 2008 at 11:22 am

One of the best jquery tutorials I’ve seen yet… thanks for the tips!

Janice
Jul 4, 2008 at 12:28 pm

Hi,

In the animated hover examples the transparency doesn’t work immediately in IE7.
A black outline surrounds the png’s when first rolled over…is there a fix for this?

PervasivePersuasion.com
Jul 13, 2008 at 3:20 pm

Thanks for what you do!

It will help bring our profession along.

corey
Jul 15, 2008 at 10:01 pm

anyone have any ideas on the best way to add a preloader animated gif to “image replacement gallery”?

reliable IT Solution
Jul 16, 2008 at 6:38 am

Amazing post, we can use this in our next work…Thanks!

real estate postcards dude
Jul 17, 2008 at 2:22 pm

Good one!… Now I don’t have to depend on programs so much.

Free Article Directory
Jul 18, 2008 at 11:16 pm

Thanks for the great tutorials. Just what i was looking for.

Bob
Jul 22, 2008 at 8:36 am

#230 – Hi Janice
GIFs and JPGs work, but the graphic might require some adjustment if you wish to retain the drop shadow effect. If your ’em’ hovers over a solid colour (white in the example), setting the matte of the graphic to it should do the trick. Bear in mind that IE6 for example ‘doesn’t like’ PNGs so one should make available an alternative graphic anyway.

Joomla Development
Jul 22, 2008 at 10:01 am

It will be helpful to add some good features for my Joomla sites…Thanks!

ss
Jul 24, 2008 at 8:41 am

Great jQuery tutorial. thanks a lot :)

lime
Jul 27, 2008 at 12:59 pm

i cant seem to download jquery right. i downloaded into my computer but it won’t open it keeps saying ” ‘window’ is undefined “. so im really confused.

Kunal Mukherjee
Aug 2, 2008 at 7:50 am

Hi I am using “Collapsible panels” code with Asp.net 3.5. When I am placing the ol inside a “Updatepanel” the jquery functions are not working at all. Could you please tell me what is the problem?

Gayatri
Aug 5, 2008 at 11:34 pm

Mind blowing, excellent….worked with jQuery for some time but never ever thought of doing anything so wonderful with it…thank you for expanding my options.

Keep up the good work and your service to the tech community

Yours gratefully,

Joey
Aug 6, 2008 at 11:11 am

Great things & Keep up the good work!

Tin nguyen
Aug 7, 2008 at 11:06 pm

Great! Thanks a lot!

Designer's best friend
Aug 10, 2008 at 6:01 am

Thanks for your efforts, realy beautiful and neat tutorial. I guess I’ll start to learn jQuery from this article.

Gazok
Aug 10, 2008 at 9:26 am

I don’t understand why you would use jQuery or javascript to link block elements. It’s much simpler to use CSS to set the child anchors to block with 100% widths and heights, and then the browser can open them in new tabs.

shanky sharma
Aug 14, 2008 at 7:47 am

hey dam gud work . i wana see ur all of creativity work .i like ur work .it;s imazing

mel
Aug 15, 2008 at 3:43 pm

Hi there,

Awesome Tut! I’m having a bit of problem when I insert flash content within one of the collapsible panels of the accordion, it is embedded within the tag. Anyway, it seems to work flawlessly in safari, but not in FF – the flash content is within a simple tag.

any ideas of what I can do to fix this?

CSS:Jockey
Aug 17, 2008 at 2:03 pm

Good Read, I have implemented some of these on my site, looking for some cool animation for .addClass feature.

Posicionamiento Valencia
Aug 19, 2008 at 11:55 am

Very useful list. Many thanks. I put some collapsible panels on my wedding site.

murtaza
Aug 22, 2008 at 6:01 am

it is very helpful
u should give more examples which would be helpful to us

Alex
Aug 22, 2008 at 7:41 am

I agree.
It’s very nice :) Good work. Thanks.

~Unkn0wN~
Aug 26, 2008 at 2:08 pm

Amazing tutorials mate…especially of me who is a newbie in JQuery :P
Thanks a lot… : )

Tareq
Aug 27, 2008 at 4:04 am

Cool and nice for new developer like me….:)

Zeytin
Aug 30, 2008 at 11:29 am

I don’t understand why you would use jQuery or javascript to link block elements. ?

juiCZe
Aug 31, 2008 at 4:17 pm

Thanks for helpful article !

Arush
Sep 2, 2008 at 1:20 pm

Fantastic ! loved it.
delcious !

Kila Morton
Sep 4, 2008 at 11:18 am

What a great tutorial Nick!

José Mota
Sep 6, 2008 at 4:58 pm

Brilliant post. This is great for user interface design and accessibility, i recall the title attribute ones. Thanks!

Nev
Sep 12, 2008 at 12:21 pm

This is a fantastic website. Keep up the good work.

bharathiraja
Sep 14, 2008 at 9:18 am

Hi, It was very useful for me.Thanks

lee
Sep 15, 2008 at 6:26 am

On the Animated hover effect #1 Is there anyway I can add different images to each menu button?

Tjorriemorrie
Sep 16, 2008 at 3:54 am

Amazing post! I really needed something like this!

I’ve been having trouble for a whole day now on accordion, and you’re example is so easy to implement, thanks again!

Please make more of these jquery posts!

Joseph
Sep 17, 2008 at 11:07 am

I’m using the Collapsible Panels example (no. 7) for implementation. But if there is a normal link in the head then this won’t work and it will just expand the item as if clicking elsewhere in the head.

You can see a demo here:
http://www.werebunny.com/aa/?page_id=5

Any ideas how to implement links in the head? Tried display:block on the link with no luck.

HidupTreda
Sep 21, 2008 at 7:56 am

thanks, i’m looking for this tutorial… very interest!!

Cristina
Sep 23, 2008 at 10:43 am

Your tutorial is great!

coving
Sep 26, 2008 at 6:44 am

VERY INTERESTING ARTICLE, SO MANY USEFUL INFORMATIONS, REALLY HELPED ME, THX SO MUTCH
I THINK IS THE BEST ITEM!!!!!
THX :)

F. Yang
Sep 28, 2008 at 1:21 pm

Another great post from webdesignerwall, thank you!

James Durrant
Sep 29, 2008 at 9:06 am

Having problems some problems with the ‘Simple Slide Panel” and IE7.
I’m trying to insert a jquery.validate contact form in the slide, but in IE7 the form is displaying the moment you press the slide (before it fully slides) and then stays there when you go to close it untill it’s fully closed.
I’ve added the following lines to the and css file (note-added #form_wrapper to function;
$(document).ready(function(){
$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
$(“#form_wrapper”).slideToggle(“slow”);
$(this).toggleClass(“active”); return false;
});
});

//css
#form_wrapper {
height: 150px;
width: 100%;
margin: 0px;
display: none;
}

As I am a designer and only a developing developer, I humbly request your help!

ArthNikhi
Sep 30, 2008 at 5:08 am

Beatiful css….mast article…Namastey India

si
Oct 1, 2008 at 4:55 pm

thanks! I’ve returned to this page a number of times now

kamal
Oct 4, 2008 at 3:26 am

thank you very much for the tutorial

MustafaKamal.biz

yasin
Oct 7, 2008 at 8:58 am

very good… Thanks you very much !

Dwayne from Probably Sucks Blog
Oct 7, 2008 at 11:44 pm

NOW, this list does not suck. Thanks a lot for the useful resources for jQuery.

Tom
Oct 9, 2008 at 9:29 am

keep searching the web for solutions, keep ending up on your site, keep solving my problems. Thanks again :) !

Alanya Haber
Oct 10, 2008 at 2:27 pm

Thank you so much for this free menu

Alanya
Oct 11, 2008 at 3:11 pm

Another great post from this page, thank you!

balaji
Oct 14, 2008 at 12:29 pm

really helped me a lot!!!!!!
Thank you!

chris
Oct 15, 2008 at 9:40 am

Any way to make that accordian run more smoothly? Seems jumpy when you close a panel.

chris
Oct 15, 2008 at 10:11 am

Nevermind. Got it working. :)
Great article, btw!

Junaid
Oct 15, 2008 at 11:17 pm

Great article, helped me a lot

Waseem
Oct 17, 2008 at 5:25 am

thank you a lot !
very cool stuff. :)

Chua Wen Ching
Oct 20, 2008 at 2:05 am

Good for beginners. Thanks. It helped me :)

Yasar
Oct 20, 2008 at 4:34 am

This is absolutely nice. Good examples and explanation. if you add more, it will be very useful

bit_kevin
Oct 21, 2008 at 9:35 am

so cool.

Shelley
Oct 24, 2008 at 3:56 am

Wow, this is sooooooo good. Thanks for the brilliant tutorials. I’m so excited to try them for myself.

Doug
Oct 26, 2008 at 5:38 pm

Thank you SO much for this! I now understand how jQuery works, and I cannot wait to implement it with my website’s new upgrade. It will be a huge “wow” to our members and guests!

autolux
Oct 27, 2008 at 8:12 pm

i just found out how easy it is to integrate jquery-effects in my site, thx for the tutorial!

yo man
Oct 27, 2008 at 10:20 pm

man… i cannot find how to integrated css to this… please write down full tutorial to integrate css to jquery thx…:( please

tupac
Oct 28, 2008 at 8:40 am

yo dawg gud stuff keep it up
peace out

silent
Oct 30, 2008 at 6:56 pm

Thanks

Greg
Nov 1, 2008 at 11:50 am

You have amazing web design skills. I love the website too.

Null-11
Nov 1, 2008 at 3:52 pm

For “6. Entire block clickable”: Is there any way to make the link open in a new window?

Thanks in advance. :)

misterjuls
Nov 4, 2008 at 3:40 am

Very nice, very good explanation, thank you! :)

vectorskin
Nov 5, 2008 at 9:54 am

Thanks a lot ! Great tutorial for Webdesigners, this is a good start to learn jquery.

JSHAW
Nov 5, 2008 at 12:23 pm

a great post for a basic intro to jquery… helped me out a lot and was a bit better in the example department than the jquery tutorials haha ye great!

Danny Tatom
Nov 5, 2008 at 4:59 pm

Wonderful tutorial. Great writing, great explanations, and great screenshots/demos. Very, very helpful!

Finau
Nov 6, 2008 at 4:53 pm

Thank you for sharing your work, it’s very helpful and easy to use. A+

Giuseppe
Nov 7, 2008 at 4:31 am

Hi! I congratulations for the wonderfull tutorial!
Sorry for my english, it is not so good…
I need help for a problem using jquery.

I create 2 different effects in the same page: sliding panel and a windows with a show/hide effect.

So, in the first script I have not the problem of the browser jump, becouse I used “return false;”.

In the second script, I used the same word (“return false;”) but it doesn’t works!

You can see it in thi page of my site (under costruction) http://ivanisevic82.netsons.org/pages/per-le-imprese/per-trovare-nuovi-clienti.php#

You can see that the link “Approfondimento” (in the line “Ricerche Telemarketing”) works goos, even if I scrool to the end of the page.
If you do the same with “Apri” you can see a windows opening, you can close it by clicking on (chiudi, on top-left) but you have the problem of the browser jump!

How can I resolve this problem?

Thank you!

Bye!

selva
Nov 7, 2008 at 7:36 pm

Excellent. Very informative.
Thanks a lot..

Duncan
Nov 11, 2008 at 9:24 pm

Amazing stuff. Very Handy. thanks

sambeet
Nov 15, 2008 at 7:32 am

Nice examples.Thanx a lot :)

Varun SHeth
Nov 22, 2008 at 12:27 am

awesome stuff but you shud keep adding

argus
Nov 22, 2008 at 9:37 am

hi dear
how i can use collapsible-panels in wordpress to show my post ?
help me please

Deniz
Nov 23, 2008 at 7:25 pm

Thanks a lot. Great article and very helpful!

Naresh
Nov 24, 2008 at 12:08 am

very good stuff dude…

amit
Nov 25, 2008 at 12:13 pm

well great stuff mate!! excellent work which will surely help new comers like me

Tina
Dec 2, 2008 at 3:28 am

Very helpful site for jquery

Ramesh
Dec 2, 2008 at 9:23 pm

Thanks a lot buddy, you made me switch to jQuery ;)

Carlos Hermoso
Dec 4, 2008 at 5:23 am

Great JQuery tutorials for designers. Thanks man and keep up the good work

Semir
Dec 5, 2008 at 6:04 pm

great tutorial really helped me with crossing to jQuery

mahen
Dec 6, 2008 at 6:44 am

REALLY great best tutorial, i have been strangling to understand the jq concepts, but this the best one ever i read …

Rahul Ranjan
Dec 6, 2008 at 8:37 am

Really awesome collection of stuffs

Chee Wee Chong
Dec 8, 2008 at 11:38 pm

What an excellent examples you have here. Bravo! I noticed that on Apple Start page “iTunes this week” section http://www.apple.com/startpage, it has a fade in and fade out effect over the anchor link. I wonder is that done with jquery? I like to do something like that.

Elizabeth Kaylene
Dec 10, 2008 at 10:32 am

jQuery always seemed so intimidating, until now. Now I can accomplish a new project at work, thanks to this article. Thank you so much for sharing this. I’m overflowing with ideas now!

Tom Sawyer
Dec 10, 2008 at 9:59 pm

Very informative intro on jQuery. The design of this blog is also awesome.

sekar.j
Dec 12, 2008 at 2:14 am

hi , those information and scripts are simply superb, really useful

vishalhd
Dec 14, 2008 at 7:46 am

these are some tips for us (web designers) thanks a lot man! :)

elvis
Dec 14, 2008 at 1:23 pm

Question about Animated hover effect #1 and #2.

When I hover many times it continues to fade in and out.
So I put stop (), just in front of .animate to stop it.
But it does not work. After hovering many times, nothing will come out.

Can anyone tell me how to solve this problem?

Thanks for the great demos. I love them.

Stewie
Dec 14, 2008 at 6:02 pm

I’m not realy good in english, but wanted to show you that

http://www.ajaxonomy.com/2008/web-design/jquery-tutorials-for-designers

Nice tutorials thx for your work.

Lucky
Dec 15, 2008 at 10:27 am

Great tutorial !!

沿阶草
Dec 18, 2008 at 2:52 am

thank you very much!

Greg
Dec 19, 2008 at 1:07 pm

This is the best tutoial I’ve seen. Thanks

erhan
Dec 21, 2008 at 3:58 pm

10 tutorials are very good point for beginers

sandeep
Dec 21, 2008 at 11:27 pm

thanx for this nice tutorial

By
SAndeep.R.k

Tommi
Dec 27, 2008 at 9:13 am

Hi!
Can I somehow set sliding panel to come over existing text, or what ever?
I am working with this contact form:
http://www.tommikappi.com/index2.php

sry my english.

Omair
Dec 29, 2008 at 2:57 pm

Hi,

These are nice tutorials

Thanks
Omair Rais
http://www.omairarts.com

Dharampal
Dec 30, 2008 at 1:52 pm

awesome tutorials :)
(and an awesome site design too :) )

Webagentur
Jan 2, 2009 at 10:48 am

Thank you … this tutorial has me very helped.

steve
Jan 6, 2009 at 4:49 am

Great Tutorial!!!

Sarin
Jan 7, 2009 at 4:44 am

Good

dselva
Jan 9, 2009 at 4:41 am

Thanks a lot for useful tutorial!!!

By dselva
http://www.dsignzmedia.com

Marius
Jan 10, 2009 at 4:21 pm

I was looking for “Image replacement gallery” example for a long time, thank you for those examples.

Mobde3
Jan 14, 2009 at 12:05 pm

This is great and helpful tutorial for beginners in jQuery Framework.

I was impressed by the easy manner and clear explanation ..
Thanks! :-)

Suat ATAN
Jan 14, 2009 at 11:28 pm

Thanks for tutorial.
It’s a very quick start guide for jqueryframework.I will begin using jquery with your tutorial
Faithfully

Rahul B
Jan 15, 2009 at 6:50 pm

quite well explained here… this tutorial has me very helped.

manS
Jan 16, 2009 at 1:49 pm

Great Tutorial… TQ..

Frank
Jan 16, 2009 at 4:02 pm

Awesome tutorial. I’m still a bit of a newbie, but I love jQuery. I just found this awesome jQuery Cheat Sheet for the iPhone today. It’s really great. I’ve only had it for a day and it’s already making my life a lot easier.

http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=302090867&mt=8

Looks like there’s also a CSS Cheat Sheet from the same guys.

http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=301093674&mt=8

vahiny
Jan 21, 2009 at 3:49 am

Thanks for tutorial !!! Your examples are very practical.

sanat
Jan 22, 2009 at 11:16 am

thanks admin

AntonMur
Jan 25, 2009 at 1:55 pm

Big thanx!
It’s very interest material.

Sean
Jan 25, 2009 at 3:52 pm

Thanks for this tutorial, we need designers to understand everything we “web developers” are fully capable of.

jagadishwor
Jan 26, 2009 at 3:28 am

Nice Article will help to do the work very well and having good example with. thanks for tutorial.

JChu
Jan 28, 2009 at 2:33 pm

4a doesn’t work in IE6…

Rodney
Jan 29, 2009 at 10:29 am

This is one of the clearest tutorials on jQuery I’ve read, thank you.

Luis Henrique
Feb 2, 2009 at 9:05 am

wonderfull!

niladri
Feb 7, 2009 at 3:42 am

awesome

Mike
Feb 8, 2009 at 12:53 am

Thank you for posting this! I do have one question though. I tried wrapping the Coda Slider (http://www.ndoherty.com/demos/coda-slider/1.1.1/) script into the Simple Slide Panel div and it didn’t work. I know it’s a lot to ask, but would you please tell me how to get both scripts working simultaneously? The panel div won’t actually *wrap* around coda slider (ie. when you contract the div, it’ll slide up, but the coda slider will still be visible all the way up to the point when the panel div is completely collapsed). The coda slider also doesn’t function when both scripts are called, and I don’t know how to go about recoding that either. Any sage advice is much appreciated!

timur
Feb 8, 2009 at 2:58 pm

thanks from uzbekistan :)
you are posts the best of the best

my english bad
sorry

Patrick
Feb 9, 2009 at 12:42 pm

very good example for the beginners ! cheers ….

Alicia
Feb 10, 2009 at 2:50 pm

Hi,

I am trying to use multiple instances of the Simple Slide Tutorial on one page. I did this by giving each new slide panel a new id and class (#panel1, .btn-slide1) This worked fine using .click(function(), but when I tried to change it to hover.(function() only the first instance worked. I’m new to Jquery, is there any way to get this working? Any help would be appreciated!

Thanks,
Alicia

mister ijoi
Feb 11, 2009 at 11:10 am

Thanks a lot for this tutorial..

I have i question regarding “Imitating the WordPress Comment Backend” example. From example show for static content so how about dynamic content. That means the comment got from database and the example explained for client side info..

tq

Ramesh
Feb 16, 2009 at 12:40 am

Please tell chain rule in jQuery as i am beginer

TheFrosty @WPCult
Feb 20, 2009 at 1:43 pm

I like this a lot, especially the a:not attribute, I’ve never seen that. This might save me a few lines of code!

Webdesign
Feb 24, 2009 at 2:45 pm

Wonderful tutorials about jQuery thx and greetings from de!

Pradeep
Feb 24, 2009 at 8:12 pm

hmmmm really good yaar……

Web design Yorkshire
Feb 25, 2009 at 6:12 pm

Found this site and have already implemented the simple slide panel.

Cheers!

Angel
Feb 28, 2009 at 3:38 am

I`m trying to use this w joomla & i need to call jQuery.noConflict();
how to use it then ?

Andrew
Mar 6, 2009 at 6:16 am

These are very good tutorials. Has helped me a lot in my job.

jul
Mar 7, 2009 at 11:43 pm

Nosebleeed! wew!

Vimal.S
Mar 8, 2009 at 7:57 am

Very nice information about JQuery. Now I am learning JQuery very easily.
Thanks for information.

Sig
Mar 9, 2009 at 3:25 am

Hello there,
I know it is more a CSS issue than jQuery but is there any way to move the slider (simple slider) to the right instead having it exactly in the middle of the page? I wish to move it 750px from the left border.

THANKS

Sig

Balu
Mar 9, 2009 at 5:43 am

Your tutorial is very nice and Examples are very understandable…….

Thanks for your representation

codepiX
Mar 10, 2009 at 10:43 am

thank you very much for this exellent examples!!

website design
Mar 11, 2009 at 8:26 am

Website design will never be the same without jQuery! Great tutorials .

Scogle
Mar 11, 2009 at 7:41 pm

This is a really good post in generall for people like myself who are just starting out with scripting like this, but I felt I should add that #6 can be achieved MUCH easier by simply wrapping the block element in a link. I do this all the time with basic html only–no javascript required.

mupet
Mar 12, 2009 at 10:17 am

wow, amazing tutorial, you have a lot of comment guys

Vince
Mar 15, 2009 at 10:04 pm

1. Simple Slide Panel

I’m new to jquery and wanted to ask if it is possible to have multiple buttons on the slide panel? Anyone??? :)

Kevin
Mar 16, 2009 at 4:49 pm

I would like to know if it is possible to you the image gallery in example 9 and add a next/previous buttons to scroll through the thumbnails.

teramange
Mar 17, 2009 at 4:24 am

Excellent tutorials. Maximum impact with minimal effort, just what jQuery is about!

ghprod
Mar 18, 2009 at 12:30 am

it’s really great article!!!!

thnx u so much :D

Sudhir Jeevan
Mar 22, 2009 at 7:52 am

Thank you very much for your tutorials…

Jess Marlow
Mar 26, 2009 at 9:11 am

Allow me to be the 363rd person to say thank you. Really a great tutorial, and I appreciate the time it took on your behalf to publish it. Thanks again.

Tyler
Mar 26, 2009 at 12:43 pm

For Example 1, the slide panel, is there a way to have the background of the panel to be semi-transparent when it’s revealed?

That would be KILLER!!

Tyler
Mar 26, 2009 at 1:27 pm

Found a way!!

For those who want to know, add the following to your CSS, under the #panel id.

opacity: .80;
filter: alpha(opacity=80);

Just replace the 80 value with whatever you want… the lower the number, the more transparent it’ll be.

Fritzz
Mar 28, 2009 at 1:42 pm

I want to let the panel close on mouse out instead of clicking button. What do i have to add in the script to fix this?

$(document).ready(function(){

$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
$(this).toggleClass(“active”);
});

});

Martin
Mar 29, 2009 at 6:36 pm

Amazing article. My websites sped up by not having to include all sorts of libraries trying to (9/10 in a VERY complex way) achieve what you guys here can sum up in couple of very SMART lines! Respect ;) And thanks…

faisal
Mar 31, 2009 at 7:53 am

Good Posting, Thanks for sharing it is very helpful for me, because i am a newbie

simmi
Apr 2, 2009 at 4:28 am

Thank you very much for a great tutorial

Nguyen Tien Si
Apr 2, 2009 at 5:53 am

Useful tutorials, thanks for share your mind

Fernan
Apr 12, 2009 at 2:08 am

Awesome tutorial. Thanks so much, very appreciated!

Rajesh
Apr 12, 2009 at 5:15 am

Thank you very much about this tutorials.

AYDINISI
Apr 14, 2009 at 2:29 am

wonderful blog,

AYDINISI
Apr 14, 2009 at 2:31 am

thanks

gulshan
Apr 15, 2009 at 6:03 pm

Hi,

This is cool. Thanks for posting. I was trying to use the 1st interaction but i was not able to move the clickable button “slide panel” to the right corner below the panel. Any help would be greatly appreciated.

Thanks,
Gulshan

Gasim
Apr 16, 2009 at 2:33 pm

hi all i need to add some ajax and jquery effect in ( about us ) page

i want to add effect to ( our history about 30 lines – and our works about 20 lines )

which technique to use

i meat i want to add some good effects to text i dont want it just formatted html

anuja
Apr 17, 2009 at 2:39 am

Good Work done……. the way you have presented the work flow of jQuery is really great…..

Keith D
Apr 17, 2009 at 6:56 am

Best intro to jQuery that I’ve found.

Let me know if you do anything on using “editease” for content management!!!

Thanks for your hard work and a great looking website.

Keith D

CgBaran Tuts
Apr 19, 2009 at 2:00 am

Great tutorial series thanks

Adam Winogrodzki
Apr 19, 2009 at 5:36 pm

Great & Useful Thanks Writer !

Muskan
Apr 20, 2009 at 2:43 am

This is really amazing n very very helpful.Thanx a lot.

Keith D
Apr 22, 2009 at 2:54 am

For the accordian… any idea how to use more than one paragraph in each section.

Say for instance each section had varying numbers of paragraphs.

Thanks
Keith D

麥wing
Apr 23, 2009 at 12:58 am

thx a lot! It is very useful^^

jQuery Tutorials
Apr 23, 2009 at 10:00 am

Great write up. I would also like to share a jQuery resource with nice tutorials there: jQuery HowTo’s & tutorials. I hope you will find it useful !

revned
Apr 27, 2009 at 7:59 am

you know your giving away gold.

Butch Decossas
Apr 27, 2009 at 6:15 pm

Thanks… great work and a great resource!

iRINA
Apr 28, 2009 at 10:22 am

excelente el diseño de página. Les felicito…
my congratulations

Jan
May 2, 2009 at 9:18 am

great tutorials indeed :) i was wondering if it would be possible, to have the “simple slide panel” on the bottom of a page. tried everything, but i cant get the button to show up on the bottom :( help would be appreciated :)

Julia
May 6, 2009 at 1:44 am

Web Designer Wall is always clear, thorough, and relevant. It has really helped me develop my style and skills.
Bravo!

nstefan
May 6, 2009 at 9:16 pm

Thanks so much, your clean tuts helped a lot !~

dileep
May 7, 2009 at 2:44 am

wonderfull work…..
it’s nice

ash
May 8, 2009 at 3:44 am

hi love your tutorials i was wondering is it possible to make the simple slide panel slide up from the bottom of page instead.?

I would really appreciate some help, this would go great in our non-profit website which is being re-created now.
thanks a million

Crafter
May 11, 2009 at 10:33 am

Hi i am a person in constant develop hehe! i hope i can understand all yours tutorials about jquery, i am beging in that world called javascript and web deleveloper, thx for all of thems…

krishna
May 13, 2009 at 4:32 am

Its so cool.
Great Work

Dinesh
May 13, 2009 at 5:59 am

Hi nice tutorials, It was very helpful for me to get some knowledge in jquery
thanks

Nidhi
May 15, 2009 at 7:05 am

Really very nice tutorial :)

HydGirl
May 19, 2009 at 1:55 am

Very Nice tutorial.Pls add some more features..

jenny
May 19, 2009 at 1:23 pm

hola me parese asombroso lo que uno puede hacer con ajax los felicito el tuturial es de grana ayuda

Lenton
May 20, 2009 at 5:26 am

Its really cools.

Damith
May 21, 2009 at 11:28 pm

Very Nice tutorial.
Great Work !!!!!

Swapnil
May 23, 2009 at 7:35 am

Thanks for dat but cant download the zipped files, if possible pls mail me,
Thank you for the wonderful stuff!

aloy
May 25, 2009 at 4:33 am

Great tutorial. If I want to fade out any element, do I need to include the effects UI?
Thanks for your nice tutorial

Saranya
May 26, 2009 at 2:03 am

how do i hide a particular error message of a textbox on click of submit where the other error messages must appear except for 1 textbox??

can u please help me..

thanks in advace

Cristian
May 26, 2009 at 2:25 am

How I add, in the example 9: image replacement, an specific link from each image?
Thanks for this great tutorial :D

imran
May 26, 2009 at 4:03 am

very easy and effective tutorial to know something about jquery ……

Deelow
May 27, 2009 at 6:19 pm

very very useful :)

thanks for all the great work :D

bob
May 27, 2009 at 8:27 pm

Excellent tutorial. Really enjoyed it and leaned a lot. Thanks.

kilinkis
May 29, 2009 at 6:46 am

ayy mi novia tambien se llama jenny =)

Fretsnkeys
Jun 1, 2009 at 1:01 am

Wonderful tuts. I am loving it. Thanks!

baljit singh
Jun 2, 2009 at 2:27 am

Awesome tutorials for beginers indeed. Very useful..
Thank you

Nestor Sulu
Jun 2, 2009 at 5:58 am

As usual, a great tutorial and resources for all of us, I start loving JQuery! Thanks!

flashfs
Jun 2, 2009 at 4:33 pm

I don’t know why “for Designers” but this was such a great tutorial! Thank you very much for this one. I learned a lot about jQuery reading and trying to do the demo without looking what you did. Very nice.

shiv
Jun 3, 2009 at 7:20 am

thanks for great help

hussain
Jun 5, 2009 at 1:54 am

very very help full spacialy for the web developers thanks
for giving step by step guideline.
Regards,
Muhammad Hussain

Maverick
Jun 6, 2009 at 12:31 pm

thanks a lot for this tut. very nicely presented. much appreciated.

Web developer
Jun 7, 2009 at 6:15 pm

Excellent tutorial on excellent site. BTW: your theme is amazing… Congratulation !

sky
Jun 9, 2009 at 12:04 pm

wow..this is so great..

chirag
Jun 9, 2009 at 11:53 pm

hi,
I like your site i m huge fan your article. i like your site very much.

i need some help for in this part
(1) 5a. Animated hover effect #1
(2) 5b. Animated hover effect #2

In FF work amazing but in ie 7 when i do hover stage some “black border” display around the box

can you help me how can i fix that ?

Arun Kumar Roy
Jun 11, 2009 at 1:59 am

you have done a great work

fransis
Jun 15, 2009 at 9:19 pm

Thank you for sharing the tutorials! Awesome.

Been looking around for a simple thumbnail Picture Gallery, none of them are nowhere near SIMPLE as this tutorial. Very very nice.

plus, i got to learn a bit of jQuery. Thanks again. Site Bookmarked.

Erick
Jun 19, 2009 at 3:17 pm

Excellent guide to figuring out how to use jquery! Thanks for the work that went into this and the great downloadable examples. You guys rock!

Claymenia
Jun 20, 2009 at 11:36 am

I’ve a little pb with the animated menu hover 2. I’ve the last version of Jquery, and i’ve read the tutorial but under Safari, it doesn’t work ! I shearch a solution but i don’t find it. I’ve moved javascript code from to but it’s the same thing. Someone have an idea ? (thank by advance)

vivek
Jun 22, 2009 at 5:18 am

artical is very nice it conteny good info for new bee help full for new devloper..

widi mawardi
Jun 23, 2009 at 2:01 am

helpfull tutorial with step by step guideline, it sure help.. im a designer and I love jQuery for work..

widi mawardi
Jun 23, 2009 at 2:08 am

nice shared, thank you

Amit
Jun 23, 2009 at 9:59 am

very helpful article for a developer who want is curious about designing

Rk Yadav
Jun 24, 2009 at 12:35 am

Nice It will help who are beginers in designing website with Jquery

Robin van Baalen
Jun 24, 2009 at 10:41 am

Great post. Thisone is on top of my fav’s

kapi
Jun 25, 2009 at 4:27 am

Thank you, I’m just starting to learn the power of jquery and you have firmly provided a better idea of how I can use it effectively and inspired me to delve further.

Thanks

iş arıyorum
Jun 26, 2009 at 5:21 am

Artical is very nice , thank you

Dainis Graveris
Jun 27, 2009 at 3:05 pm

beautiful tutorials, I am big fan of jquery already, nice to get well explained new tutorials :)

Parker
Jun 29, 2009 at 2:33 pm

Hey everyone, I really appreciate the great tutorials that you put out, but would it be at all possible to get a tutorial for real beginners – Right down to here’s how you generate your script source code or here’s how you append an external style sheet. Something like that would be amazing.

robb
Jun 30, 2009 at 12:22 pm

oh i really like this clearly explained tutorial.
would love to see such tutorial on ajax.
thx for sharing.

Eric Perdue
Jul 4, 2009 at 9:21 pm

Awesome tutorials. They’ve helped me out design and code wise.

sinop ilçeleri
Jul 5, 2009 at 8:32 am

Artical is very nice , Artical is very nice , thank you
thank you

Kim
Jul 6, 2009 at 12:28 pm

very nice tutorial. I have used this page alot as a reference when building JQuerystuff , keep up the good work m8 :)

Computer User
Jul 7, 2009 at 2:54 am

Thank you very much for this article.

jk webDev
Jul 8, 2009 at 10:39 am

ThanX to jQuery Team. It really superab and simplified everything as much as easy & use.

You have done good JOB!

davelf
Jul 9, 2009 at 4:49 am

thanks for the simple slide tutorial, if i want to customize the slide toggle(up/down) into (down/up) what is the code to make that effect? and how to make more that 1 slider in a page without breaking the other slider?

Poster
Jul 9, 2009 at 1:44 pm

@Parker — try this jquery for beginners tutorial:
http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/

Ícaro Pablo
Jul 9, 2009 at 8:25 pm

I have a issue about ‘Entire Block clickable’, when hovered he no show url in status bar, as well as a tag a, have how emulate this?

kaioken
Jul 11, 2009 at 2:51 am

good work.I really didnt see anything better than this on jQuery

michaelmesh
Jul 13, 2009 at 8:46 pm

Dude! Best site I have found in AGES! Great work, pure brilliance.

Thang Pham
Jul 15, 2009 at 5:10 am

Cool I love you. Jquery.

Deepinder Singh
Jul 16, 2009 at 7:54 am

All the articals are very nice.definiltly it will help to use jquery more easy.Thank you.Good work.

nirmalsinghkps@in.com
Jul 17, 2009 at 4:30 am

Jquery the best….! u rok

IMran
Jul 21, 2009 at 1:49 am

Nice tutorial i can easily use jquery now thanks

asim
Jul 21, 2009 at 3:39 am

Fantastic work. I am new to web development in Java using Jquery. This tutorial has helped me alot and hopefully will help me alot in future. Thnkx alot.

Regards,
Asim

Vani
Jul 22, 2009 at 4:33 am

I want to use the JQuery number 5b. Animated hover effect #2
could anyone help me change the code so I can use 7 buttons instead of 3? I’m really new at web designing. Thanks for helping me.

Abhishek Dilliwal
Jul 22, 2009 at 8:35 pm

That was really nice!!! thanks for that.. nicely presented :)

Liam Serrant
Jul 23, 2009 at 11:22 am

Nice tutorial. Was looking for a great way of learning some JQuery.
Nice work as always.

Thanks

A.Jendrysik
Jul 23, 2009 at 2:58 pm

very good side!!! wonderfull effects

Greetings from de

Daniel Winnard
Jul 31, 2009 at 5:07 am

I love these tutorials, and as a beginner there great to get an idea of how jQuery works.

I am new to all web stuff, and was wondering how do you make the block clickable bit horizontal?

Karthik
Jul 31, 2009 at 5:08 am

Excellent tutorials.. very cool effects..

ashutosh mishra
Aug 1, 2009 at 1:31 am

i love this tutorial as a beginner….but can we do som data base related functionality using jquery?

senthil kumar
Aug 3, 2009 at 6:22 am

Nice ..
For better understanding , you can have the explanation for JQuery
Utility methods which can be listed .
so it can be understood easily and try more .
This site would be helpful in building their own applications.

Martin Baillie
Aug 13, 2009 at 4:37 am

By assigning the display:none; attribute in CSS to elements on a page you are preventing this content from being displayed in a browser that has JavaScript disabled and CSS enabled. I would suggest hiding these elements using the jQuery .hide() command instead, so that if JavaScript is disabled the elements will be permanently visible and accessible.

asdf
Aug 16, 2009 at 12:05 pm

good keep it up

AbrahamBoray
Aug 19, 2009 at 6:13 am

Really Nice Tuts, All this stuff r very usefull in real life designin’ & programming with JQUERY
Thx Dude
Abraham

tnc
Aug 21, 2009 at 11:47 am

its very.. nice i can use this on mysite :D god bless and more power

stylelead
Aug 23, 2009 at 12:32 pm

active class will toggle the background position of the arrow image

Manimaran Ramaraj
Aug 26, 2009 at 6:09 am

Superb & Fabulous creation………….. Thanx 4 giving ur wonderful guidelines here.

~ Maran

mohit jain
Aug 26, 2009 at 1:24 pm

its awesome! i m so much thankful to u for this tutorial but i have one prob. i m getting effect to display msg but not colour full graphics so plz tell me how i will get those graphics

ryan sukale
Aug 27, 2009 at 9:09 am

Brilliant tuturials. Just awesome.
Its more than what i expected. And a lovely website as well.

LazyAndroid
Aug 28, 2009 at 5:49 am

I don’t get tutorial 10. You say you HATE ie6, you should trash all ie6 hacks and then you provide a workaround for providing neat but unnecessary functionality for ie6. How about you JUST DON’T?

wrerm
Aug 29, 2009 at 10:22 pm

I like these tutorials. Especially # 10

Leonardo
Aug 30, 2009 at 10:49 pm

Great stuff!! Please consider to include how to do a toggle menu like the one wordpress have in the left of the profile page, that would be just awesome! Cheers!

prashi
Sep 1, 2009 at 8:24 am

its very.. nice and more All this stuff r very useful in real life design

Flo
Sep 1, 2009 at 5:00 pm

Nice tuts. :)

I`m German and I used google for the translation :)
When I am at the numbert 1, with some annotations , #panel slips 10px down from the edge. I user Firefox 3.0.5. Bug?
Please help me!

TheUltimateWebNetwork
Sep 3, 2009 at 9:23 am

The link styling i like, very nice

Aoobi
Sep 4, 2009 at 9:07 pm

its awesome! i m so much thankful to u for this tutorial but i have one prob. i m getting effect to display msg but not colour full graphics so plz tell me how i will get those graphics

ดูหนังออนไลน์
Sep 7, 2009 at 10:05 am

Thanks I like your blog it’s helpful.

Bob
Sep 7, 2009 at 7:16 pm

Hey, with regards to the sliding menu, how do I assign a background image to the entire page because at the moment it isn’t working :(

Thanks.

Alper
Sep 10, 2009 at 9:50 am

Firstly thank you for that amazing post, i want to learn that: is there any way to use Simple disappearing effect for higher level grand-divs E.g:

// For class pane
I mean i want to control outer div of image’s placed.. Thanks right now..

bagsin
Sep 10, 2009 at 7:42 pm

I like these tutorials. Especially # 10, can you write more

freshwebservices
Sep 12, 2009 at 1:27 am

Excellent tutorial – much appreciated.

Lee
Sep 13, 2009 at 4:15 am

Excellent selection of jQuery effects there. Top stuff, cheers.

Rajamohamed
Sep 15, 2009 at 12:09 am

hey…u given something what i look for…i become audit for this site..Thanks a LOT

Alfonso
Sep 16, 2009 at 9:05 am

Thanks a lot, you cover a lot of interesting issues when it comes to give real agility to a site. I think it can be really useful for my job here, in Spain.

Trevor
Sep 17, 2009 at 10:34 pm

#6 “entire box clickable” seems flawed, it uses li:hover.
Assigning psuedo-class of hover to anything other than is unsupported by most browsers. Is there a jquery hover effect?

pelumi
Sep 18, 2009 at 1:32 am

Just what I need, one of the most comprehensive jquery tutorial around.

Paul Seys
Sep 21, 2009 at 5:51 am

Great post, specially the styling of different link types. Very helpful, thank you!

sreejesh
Sep 21, 2009 at 8:45 am

Thanks for introducing JQURY . Very useful help

Waheed Akhtar
Sep 23, 2009 at 2:02 am

Excellent explanation with detail. Thanks for sharing

tintin
Sep 23, 2009 at 10:45 pm

thanks for sharing…

Shahriar Hyder
Sep 24, 2009 at 4:25 am

Nice collection of jQuery tutorials mate. I have also linked to yours from my blog post below where I am trying to collect the most useful and common jQuery code snippets for JavaScript over the web. Here is the title and the link to the jQuery link compilation endeavor:

Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance

http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

Azam M
Sep 25, 2009 at 1:24 am

Cool!. Awesome effects and stuff. Love it!..! :)

jsoe
Sep 26, 2009 at 5:13 pm

muy bueno los ejemplos jquery, (very good examples jquery)

AnnC
Sep 30, 2009 at 2:29 pm

thank you so much for amazing tutorials ! I must use it ;)

shashank
Oct 1, 2009 at 4:17 am

i m feeling a great joy and also my interest has been increased …….. thank u so much

Naveen
Oct 1, 2009 at 5:26 am

I like the jquery tutorial, I need some sample query like this

David Huter
Oct 1, 2009 at 12:10 pm

Good ideas! it looks simple even for me to use.

Girlfriend Dating

tasarimatik
Oct 5, 2009 at 4:30 pm

It is an amazing tutorial! thank u very much…

Shawn
Oct 5, 2009 at 8:50 pm

Thanks for this great tutorial. I used a lot of these guides while building my landscaping website. Check out Bay County Landscaping

Karl
Oct 7, 2009 at 12:17 pm

How can I transform the Simple slide panel to slide down/up on mouseover/mouseout ?????

tasarimatik
Oct 7, 2009 at 5:11 pm

All the examples are so helpfull and seems easy thank u so much. i will try all of them !!! tasarimatik

Federica S
Oct 9, 2009 at 2:32 am

helpful, clear and simple: thank you very much for sharing!

Rajiv
Oct 10, 2009 at 8:02 pm

Thank you very much for simplify the jQuery Understanding!

Css Ajax galleries
Oct 12, 2009 at 6:23 am

Hey this article is very good and i have learnt start learning from them thanks man

Srinivasan G
Oct 12, 2009 at 11:46 pm

Way the concepts has been explained/introduced is great ……. Thank you very much…….

Hosting Murah
Oct 13, 2009 at 5:05 am

Confusing… ;)

Robin
Oct 13, 2009 at 8:12 am

Great post. Especially that litte tiny part about KILL IE6 HACKS!
And while on it, KILL IE!

My god I hate that browser. 80% of my development time is wasted creating hacks for IE.

Ashu
Oct 15, 2009 at 2:58 am

Cool Post… very nicely expained

Joel
Oct 16, 2009 at 1:57 pm

Good day, I tried out the jquery Accordion and it works, however when I click on the same item it bounces.
Here is the snippet of my jquery code:
if($(“#newsAccordion”)) {
//Fix for IE
$(“.newsArticle”).hide();
$(“.newsArticle:first”).show();
}
$(“.newsHeader h3”).click(function() {
$(“.newsArticle:visible”).slideUp(“slow”);
$(this).parent().next().slideToggle(“slow”);
return false;
});

And my HTML for this accordion follows the following hierarchy:
div#newsAccordion > div.newsHeader h3 > div.newsArticle

Any help would be greatly appreciated.

Oliver
Oct 19, 2009 at 1:37 pm

Hi all,
I want to embed cformsII via php insert in a Jquerry accordion, however this breaks the accordion (see point 1. Ersberatung).

Any help appreciated,
TIA
Oliver
URL: http://www.architekturberatung.de/v2/leistungen/
cforms version: 11.0 – accordion out of the box as written in this tutorial
Wordpress version: 2.8.4 DE

Vitullo
Oct 20, 2009 at 12:17 pm

Once again you have written an excellent tutorial.

Andrew Potter
Oct 21, 2009 at 4:22 pm

Awesome, thanks for the demos!!!

Daddy37
Oct 22, 2009 at 7:31 am

The VR evaluation had the whole jury viewing the video projection on a screen while one person, wearing the head-mounted display, did the various maneuvers. ,

abiskar
Oct 22, 2009 at 3:40 pm

Its great source of knowledge for any JQuery newbie.
Thanks a lot man!

Bob41
Oct 22, 2009 at 9:05 pm

The reason two and two were not put together were because there is no reason for them to be. ,

Mark20
Oct 23, 2009 at 6:15 am

Terminology FRBR offers us a fresh perspective on the structure and relationships of bibliographic and authority records, and also a more precise vocabulary to help future cataloging rule makers and system designers in meeting user needs. ,

SASC Subasinghe
Oct 27, 2009 at 3:57 am

Very helpful tutorial. It made me much easier to add effects for my web applications to make much more attractive.

Regards,
SASC Subasinghe (BCSc, SCJP5.0, SCWCD5.0, SCBCD5.0)

chiangmai guide and tour
Oct 29, 2009 at 1:58 am

good idea for design website. thankyou

Eshwar
Oct 30, 2009 at 2:01 pm

Thanks for providing these samples. It’s really helpful for new JQuery developers.

Mike
Oct 31, 2009 at 4:53 am

Very helpful tutorial. It made me much easier to add effects for my web applications to make much more attractive.

Jon Williams Design
Nov 2, 2009 at 12:56 am

Really helpfull to getting started. Thank you.

Leonieke
Nov 3, 2009 at 4:02 pm

Thanks for these examples – great choices to try out!

emi
Nov 5, 2009 at 1:18 am

Very helpful tutorial. Thankss

Pri
Nov 5, 2009 at 10:25 am

Hey, thanks….This is good stuff!….And cool website too…

Rajasekar
Nov 9, 2009 at 7:02 am

thanks a lot… its very helpful to me..

Margaret
Nov 12, 2009 at 11:40 am

Thanks for making it so easy to understand :)

Dinesh G
Nov 13, 2009 at 5:45 am

For Beginners especially , this is brilliant…

khaleda bhuiyan
Nov 15, 2009 at 1:32 am

Thank you for such an excellent tutorial.It really helped me a lot in jquery.

Cameron Sweeney
Nov 15, 2009 at 5:59 am

This is a great introduction into jquery with simple but useful demos. Thanks for sharing it!

pjjun
Nov 16, 2009 at 1:27 am

It is very useful!thanks

rainweb
Nov 17, 2009 at 11:22 pm

Good job ! nice~

NeOren
Nov 18, 2009 at 1:39 am

Very nice tutorials, easy to understand and so revealing. Good Job!

Elidjon
Nov 19, 2009 at 4:38 am

A very good introduction to jQuery features.
great job!

Skidoosh
Nov 19, 2009 at 6:52 pm

For anyone who’s interested I’ve published V2 of my jQuery reference from one of the articles featured on here. I don’t work there any more so it’s not maintained. If you want to have a look at that it’s here: http://www.skidoosh.co.uk/jquery/jquery-selectors-and-attribute-selectors-reference-and-examples-v2/ I’ll be updating it for 1.3 in a few days.

Not the best looking site at the moment but I’m working on it :)

Hassan
Nov 24, 2009 at 6:01 pm

Awesome tutorial… thanks a lot

kinza
Nov 25, 2009 at 9:17 am

hey

very very useful and informative post for jquery, i have learn by this post thanks

sarah

Edwin
Nov 25, 2009 at 3:40 pm

Thank for posting this. This is exactly what I’m looking for.

Onche
Nov 27, 2009 at 8:03 am

Hi, all this is awsome!!!

I have a question, for the Image replacement gallery, can I make it, instead of img for example div with some images and text inside?

Anup
Nov 28, 2009 at 1:58 pm

this is very good man. help me a lot as I’m beginner

Ehetesham
Nov 30, 2009 at 2:32 am

This is very good for beginner

I like very much

James
Dec 1, 2009 at 9:03 am

Very useful breakdown of useful techniques – cheers

Nivedita
Dec 2, 2009 at 12:36 am

Very nice and useful tutorials to web designers but i have one question are these worked in all browsers specially in internet explorer.

Null
Dec 2, 2009 at 1:21 pm

Excelentes ejemplos de Jquery, me gusto mucho tu post, ya está en mis favoritos.
Saludos.

Adreqi
Dec 3, 2009 at 8:32 am

Exactement ce que je cherchais, apprendre JQuery par l’exemple, que du bon !
merci pour ce tuto qui permet vraiment d’y voir plus clair :)

lanxiaoxi
Dec 5, 2009 at 1:57 am

谢谢,灰常感谢,哈哈

Krithika
Dec 7, 2009 at 3:36 am

Hi,

The tutorials given here are very useful and simple to understand. Have learnt from your post.

Keep posting.

Thanks.

– Krithika

Kavita Shah
Dec 7, 2009 at 12:58 pm

Hello Webmaster,

I visited your web site earlier today and firstly wanted to congratulate you on the appearance, excellent content and accessibility I discovered there. It is not often I come across a web site that offers such a positive user experience and great information too.

At this present moment, I am seeking meaningful links from quality websites just like yours, for a current project on behalf of http://www.nextpinnace.com. As you’ll see, this is based upon a similar theme to yours and does in my view, offer added value content for web site visitors.
Now as a part of this promotional activity, I would very much like to have a link featured on your website. Should you be agreeable, please use the following details to add the project site to your links page.
Title: Directory Submission

URL: http://www.nextpinnacle.com/

Description: Nextpinnacle offers Manual Directory Submission Service. All submission are manual with due care to top, SEO friendly; free Directories with Quality submission report!

If you have any questions or concerns, please don’t hesitate in contacting me by replying to this email. I will then get back to you as soon as possible.

Thanks and Regards,
Linking Manager

Larissa Arantes
Dec 8, 2009 at 11:55 pm

Parabéns !!
adorei, aprendi muito com esses tutoriais.

Satish Shastry
Dec 9, 2009 at 12:04 pm

Hi,
This is Great website.
This article is very useful for designers.

I like very much….

Annie
Dec 9, 2009 at 5:29 pm

It’s hard to find an accordion tutorial that doesn’t use a ul – your’s was just what I needed. Thanks!

PSD Penguin
Dec 9, 2009 at 10:34 pm

What an amazing post… It’s like you just pull mad jquery skills out of your ass on cue… I envy you, sir ;-)

m a r c o
Dec 10, 2009 at 9:42 pm

Thank you, thank you, thank you!

Awesome tutorial… and what an amazing website! Beautiful!!! Thank you for posting such relevant information.

Diotrik
Dec 12, 2009 at 12:23 am

Großartig!

sehr interessant Tutorenkurs =)

balaswamy vaddeman
Dec 12, 2009 at 7:16 am

I was looking for one site which can teach jquery for beginners ,finally I found an amazing site and keep posting such great articles.

Rajasekar
Dec 12, 2009 at 8:30 am

Hi…
Tutorial was easy to understand and very interested to learn that much simple…
Site design also very nice….
Thx..

nadia
Dec 14, 2009 at 11:11 pm

interesting and can get lots of info from here..

nadia
Dec 14, 2009 at 11:21 pm

very nice tutorial.thanks so much

aidan
Dec 15, 2009 at 2:53 am

Keep the good work coming.

Thanks.
Aidan
FreeWebsiteDesign

oto kiralama
Dec 16, 2009 at 5:35 am

Großartig!

sehr interessant Tutorenkurs =)

Patrik
Dec 17, 2009 at 2:34 pm

Excellent! Thank you!

Archana
Dec 17, 2009 at 5:28 pm

Good it’s very useful and easy to understand….

aseem
Dec 18, 2009 at 12:30 pm

hii.. i have try this code but it is not working properly can some one help me…

$(document).ready(function(){

$(“#radio”).change(function () {
$(“#table1”).show();
})

$(“#radio1”).change(function () {
$(“#table1”).hide();
})
});

testing for jquery on change

show there filed1

show there filed12

show there filed13

Now place reaming text here

I hope i will get any reply

Elijah
Dec 18, 2009 at 12:39 pm

Such a great set of tutorials – so easy to follow and you explain each step! Thanks so much for your time and hard work on these!

JAMY
Dec 18, 2009 at 4:25 pm

This is a good tutorial.

And, If someone can provide the complete list of JQuery functions, that will be very helpful.

Ryan David M. Pillerin
Dec 21, 2009 at 6:41 am

Wow! it was really a nice visual effects. Maybe you can show me some of those effects implemented in a real application. Sometimes I find it more problematic if you are going to implement it in a full blown application.

It was really nice and thanks for those sample implementation using JQuery. Also, they are releasing the next version of JQuery 1.4. Still not tested yet, but maybe you can show me some of those newly update for JQuery. Thank you very much.

john Clements
Dec 22, 2009 at 8:36 pm

Once again, Nick sets himself apart from the rest. I don’t know why I don’t just start; I end-up here so often. Thanks Nick.

A.Jendrysik
Dec 23, 2009 at 5:20 am

Very nice! Tuts are great…

Greetings from de

Brian
Dec 26, 2009 at 12:33 pm

that’s a very good info, thanks!

Peiman
Dec 28, 2009 at 1:29 am

awesome, Thanks

Sei
Dec 29, 2009 at 5:57 pm

Help. I am a Complete Jquery Novice, and I have never written a single line of code.
But I do want to add 1 thing to a jquery that is in a website that I am trying to modify.
The site has several accoardians within it, and I want to write a simple “ready” function that will CLOSE all of them at load time.
Would someone be kind enough to show me how to do this. Each one of them has a HREF=# associated with them.
Below is my sad, and failing, attempt to code this:
=========================
$(document).ready(function() {
$.each(
[“grid”, “paragraphs”, “blockquote”, “list-items”, “section-menu”, “tables”, “forms”, “login-forms”, “search”, “articles”, “accordion”],
function() {
$(id=”#”: this) );
$(“[id=’toggle-“+this+”‘]”).bind(“ready”,function(e){
$(this.slideUp) ;
};
e.preventDefault();
});

I’m sure that I have something simple (like knowledge) preventing me from getting this right.
Thank you in advance,
Sei

Fna
Dec 29, 2009 at 9:09 pm

Thank you so much!
That stuff really saved my day!

Wimp
Jan 2, 2010 at 12:17 pm

Sei, can’t u just try to run your page with display:hidden for div elements contains content of your accordion? For example:

Show my accordion
Your content

then on:

$(document).ready(function(){

$(‘#clicker’).toggle(function(){
$(‘#showme’).css(‘display’,’block’).animate({ height: 300 },500);
},
funciton(){
$(‘#showme’).animate({ height: 0},500);
setTimeout(function(){
$(‘#showme’).css({ ‘display’,’hidden’}); },500);
});
});

Hope it’ll help, or point you on right way of thinking about your problem :)

Indranil
Jan 4, 2010 at 6:09 am

This is really a good stuf.

Obiez Devil
Jan 5, 2010 at 5:43 am

Really great post from the master…keep post another great tutorial and share everything with others…Two thumbs up for you man….!

Noob
Jan 5, 2010 at 12:52 pm

Is there a way that you can take number 4a or 4b and make it so that the last panel that opens stays open? For example, I have a menu with 12 sub menus and want them to stay open as your browse each section. Anyone know how to fix?

vincentdresses
Jan 5, 2010 at 11:37 pm

The designs showed here show what simple and tasteful design is all about. Another one to consider

Sean Cameron
Jan 6, 2010 at 9:11 am

Excellent, the hover example was incredibly useful in building a small, flexible information popup for a custom gallery that I was building. Thanks for sharing it, along with the other jQuery examples.

James Cazzetta
Jan 6, 2010 at 11:23 am

Hi
Really nice! I’ve got one perfection for point 5.a and 5.b.
If you go over the links many times in a short period of time, it loads every single hover-effect u’ve gone over..

In the CSS: em {opacity: 0;}

$(document).ready(function(){

$(“.menu a”).hover(function() {
$(this).next(“em”).stop().animate({‘opacity’: 1, top: “-75”}, 350);
}, function() {
$(this).next(“em”).stop().animate({‘opacity’: 0, top: “-85”}, 250);
});

I added the “.stop” in front of the “.animate({…)”. Now, this shouldn’t happen anymore.

greez james

Arvind
Jan 6, 2010 at 12:21 pm

hi
u really provide nice tutorials..
thnx
for more jquery tutorials please visit arvind-07.blogspot.com

Alexa Dagostino
Jan 6, 2010 at 6:13 pm

Hi, this is an awesome article. I had a quick question. How would I make that slide box you have in the first example so it will be on top of other items. I don’t want it to move the entire page down. I tried position Absolute, however that didn’t work.

Gretll
Jan 7, 2010 at 6:20 pm

How do i add this animated hover effect into my design layout?

Ravi shinde
Jan 8, 2010 at 1:38 am

It’s really nice

James
Jan 8, 2010 at 7:48 pm

Great set of tutorials. Just a note for people using the tooltips. If you place .stop(true, true) before the animation function it will stop the hover animation from repeating if you roll your mouse over it multiple times.

Ange Chierchia
Jan 12, 2010 at 4:05 am

Hi there! Great list of tips.
I’m actually designing the simple slide panel. All works with Safari and Chrome, but I don’t know why, my code doesn’t work with Firefox. I’m using jQuery 1.3.2, but I don’t think it’s the mistake because it works with Safari and Chrome, so I think it comes from my CSS file, but I don’t know where I mistaken.

Is there someone to help me please ?

The online code : http://www.angechierchia.com/fichiers/slidepanellogin/

Here is my CSS:

#login_panel {
width: 400px;
margin: auto;
padding: 30px;
background: #cccccc;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
display: none;
}

.slide_btn {
text-decoration: none;
color: #ffffff;
width: 140px;
margin: 0 auto;
padding: 10px;
text-align: center;
background: #ff0000;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
display: block;
}

.slide {
margin: 0; /*NO MARGIN*/
padding: 0; /*NO PADDING*/
}

web designing company
Jan 15, 2010 at 2:44 am

Hi
you really provide nice tutorials..

your tutorials are very useful…

shoaib
Jan 15, 2010 at 3:39 pm

This was so simple and yet so powerful ,gulped it all at once.thnx

Sean
Jan 16, 2010 at 7:17 pm

How would you make a panel that slides up from the bottom of a browser window like this one: http://tools.seobook.com/firefox/seo-for-firefox.html

Thanks in advance!

qie
Jan 18, 2010 at 7:35 am

Really really good tutorial .. with all the explanation n diagrams :)
Thank u so much – it help me lots

Abbas
Jan 19, 2010 at 2:21 am

Very nice tutorial, continue sending this type of tutorials to my emailid

Suzette
Jan 19, 2010 at 11:11 am

Thank you for writing this tutorial! I am new to JQuery and I am trying to get a handle on what it is and what it can do, your tutorial is a very nice primer! Thank you again! Very nice little effects!

Huy
Jan 21, 2010 at 2:20 am

thanks .. as a beginner ..your article ‘ve saved me a lot of time …

김재승
Jan 21, 2010 at 7:16 pm

Wonderful!! Thank you.

Bert
Jan 22, 2010 at 7:17 am

Brilliant tutorial. I am as thick as a piece of 4 x 2 wood covered in phlegm, but even I understood most of it. Woo Hoo no more ‘dumb guy’ comments from my Dad…

Bert
Jan 22, 2010 at 7:19 am

Whoa, my father did call me dumb again, but Ill show him! Im gonna JQuery his a*s for that! U wait and see!!

Frank
Jan 22, 2010 at 1:56 pm

Yes thank you so much for writing in plain english. wow some tutorials sites for jquery would drive you to drink. this has everything you’d need for good basic ui control. THANKS

e-sushi
Jan 22, 2010 at 5:17 pm

A great collection of samples. This is what I can use as a cheat-sheet reference. Thanks for the post!

Benschi Aadalen
Jan 26, 2010 at 9:56 am

hey! this tut is very nice! .. Thank you a lot!

DAVID SMITH
Jan 26, 2010 at 10:44 am

bEST JQUERY TUTORIAL ON THE NET.
CLEAR, PRECISE AND IMMEDIATELY USEABLE.
THANX FOR SHARING.
PART 2 SOON PLEASE.

utpal
Jan 26, 2010 at 12:09 pm

wat a cul tutorial!

Piyush Gupta
Jan 27, 2010 at 3:57 am

Nice Tutorial

Gopinath
Jan 29, 2010 at 5:58 am

THOUGHTS HOSTING:- Domain Name Rs.92/-only, 10Gb space, 100 Email id’s, Rs.2600/-only. And for every domain get FREE extras over 7900/-. *Start Your Own Web Hosting Company Only for Rs.4000/-. visit: http://www.thoughtshosting.com, Contact:9059747833

Olivia
Jan 29, 2010 at 10:13 am

I was looking for jquery tutorial and found this.
Nicely written tutorial, thanks for sharing nick :)!

Thomas
Jan 31, 2010 at 3:21 pm

Brilliant, I’ve been looking for a tutorial like this for a while. Will be really helpful for one of my latest projects. Bookmarked :)

Jayanthi
Feb 1, 2010 at 4:29 am

Very Nice Tutorial with good explanation. Thanks a lot.

Fab
Feb 2, 2010 at 5:24 pm

Pretty organized fashion in which tutorials are presented. Very nicely done, right to the point with specific examples. Way to go!

Alessio
Feb 2, 2010 at 5:28 pm

How do you get the slide panel to begin closed? Mine always begins open for some reason.

maskem
Feb 3, 2010 at 6:15 am

dvdrip türkçe dublaj film

Daniel Winnard
Feb 4, 2010 at 9:50 am

Hi (Alessio) have you got (display:none;) set in your #panel div in the css?

My question is how do you get this to appear over the top of content.

For example I would like this to slide down over my header. Is this a Z-Index Job? If so if somebody has done this with this example and has code I could use that would be great.

Cheers

Dan

Alessio
Feb 4, 2010 at 11:22 am

Hi Dan, thank you, I’ll have to try that! I think, in answer to your question, that position:absolute should work, haven’t tried it though. Thanks again!

Anish
Feb 5, 2010 at 11:58 pm

Great collection !

zhouq
Feb 9, 2010 at 4:33 am

thanks for your tutorial….

flash
Feb 9, 2010 at 1:00 pm

Very well presented, will incorporate a few. Thanks

fred
Feb 10, 2010 at 1:54 am

Hi, thanks for the awesome tutorial.
Just a few questions:
I am trying to use multiple instances of the Image ReplacementTutorial on one single page.
I probably have to tweak the javascript because when I click onthe thumbnails of instance 2 or 3 etc; it relaces the large image in instance 1 and NOT instance 2 or3…

what should I do to have several instances to work properly on one singel page??

bonus question for the helpful minds:
i’m trying to reproduce this:
http://www.proudcreative.com/folio/print/penhaligons-elixir-fragrance/
with one large image and three thumbnails.
how do i get the thumbnails to be evenly spaced like in the exemple?

thank you all for your help
fred

arpita
Feb 10, 2010 at 5:43 am

heavy laglo

Manjunatha
Feb 11, 2010 at 8:23 am

Greate tutorial. I was in confusion to learn JQuery(thought its difficult to learn). This tutorial made me to think JQUery is simple but powerfull.

david irvine
Feb 11, 2010 at 10:10 am

Hey!! Thanks. Your site rocks. This was an awesome tut.

Vertex Web Space
Feb 12, 2010 at 7:29 am

Hello,
That’s good. Thank you so much for this tutorial.

Vertex Web Space Web Hosting Company

Rob Cubbon
Feb 12, 2010 at 8:09 am

This is such a great post I have to thank you again. Just used the accordion. I will come back to this again and again.

cakezula
Feb 12, 2010 at 1:21 pm

Hi,

Great tuts, but the links to the demos are broken.

Regards,
CZ

Steve Nony
Feb 15, 2010 at 1:53 pm

websitereckon.com is a free online service where you can gather information about every website currently registered on the internet. Our software compiles data from various sources in real-time and presents you with a comprehensive report. Members have the ability to rate and write reviews, and we also offer a large selection of handy website related tools.

It is our goal to make the internet a better place for webmasters and consumers. We envision a day when you no longer have to deal with online scams or fraud and have all the information you need to make informed decisions about the online businesses and websites. websitereckon.com is intended for every internet user out there, whether you are a webmaster or simply a normal consumer.

free check your website report: websitereckon.com

bernaldez89
Feb 16, 2010 at 7:35 pm

Your Site is really great! Thanks for the tutorials! :D It gives me inspiration.

vimal
Feb 22, 2010 at 3:59 am

this tutorial very useful for begineers .

Thomas
Feb 23, 2010 at 7:42 am

Hi,

thanks for the great tutorials. But I´ve got a little problem with the Animated hover effects. Everytime I hover one of the parent elements the appears. That´s ok. But unfortunately it seems to count how often I hover the parent element. And so after hovering for 5 times the appears 5 times. Is there any chance to get rid of that effect?

Thank you very much.

Cheers
Thomas

suhni california
Feb 25, 2010 at 8:04 pm

thank you so much for this concise lesson – appreciated this

why.itgo.com
Feb 26, 2010 at 10:02 am

thanks a lot :)

brad
Mar 1, 2010 at 3:54 pm

Thanks these are some helpful tips :D

Mimi Doggett Romberger
Mar 1, 2010 at 5:17 pm

Thanks SO much! jQuery is great! I’m now designing it into all my projects! it is so powerful along with php & css. Thank you!!!!!
Mimi :-D

Vishal Lakhani
Mar 2, 2010 at 3:40 am

Hey Man!!! Great Job!! thanx 4 beautyfull demos and scripts!!!

sbobet
Mar 4, 2010 at 3:45 am

very useful and informative post for jquery

Fernando
Mar 5, 2010 at 12:25 am

Amazing stuff!
Thank you very much. I will take a look a all of them.

fernando
Mar 9, 2010 at 1:55 am

YEah, Thanks buddy

Alessandra
Mar 9, 2010 at 9:42 am

Great article! Now I it’s much easier to use jquery, thanks!

Vanessa
Mar 9, 2010 at 7:33 pm

This was my first lesson in jQuery when I was learning ages ago. I found it so simple to understand and I still refer back here all the time. Thanks!

Bhausaheb
Mar 12, 2010 at 3:45 am

Amazing stuff!
Thank you very much!

Aswin
Mar 12, 2010 at 6:27 am

wow great …

kathangisip
Mar 16, 2010 at 5:54 am

Thanks for this awesome tutorial, I’ve added the same collapsible panels from this tutorial. :)

leo
Mar 16, 2010 at 9:21 am

Amazing blog

congrats

baskaran
Mar 16, 2010 at 1:08 pm

superb boss..

useful to beginners.

thanks

Hong DUc
Mar 17, 2010 at 3:39 am

I’m getting started with jQuery and find this site from jQuery’s official site. Very helpful and easy to follow

jack of spades
Mar 17, 2010 at 9:05 am

thanks man – simple stuff – but very clever and looks nice, gives that professional look, thank you very much, good man!

jack of spades
Mar 17, 2010 at 9:33 am

Simple slide panel

DOESNT WORK with opera (10)

jack of spades
Mar 17, 2010 at 10:11 am

it actually works perfectly on all browsers, my bad, delete those comments if you want please

Sumit
Mar 19, 2010 at 6:24 am

Nice details to work with jquery thanks.

Disain
Mar 19, 2010 at 8:15 pm

thx..useful information

abdul
Mar 21, 2010 at 1:29 am

thanks

Patrick-Agadir
Mar 23, 2010 at 6:20 am

Thanks for this information its very good .

Roberto
Mar 23, 2010 at 11:32 pm

Great Ideas
I really enjoed this… Congratulation

Nikolaev
Mar 24, 2010 at 10:45 am

I’m new to jQuery but your tips are very easy to understand. Most of all I’ve enjoyed the part which teaches how to make the entire block clickable. to my opinion it makes it much faster o browse the website, thanks

龙儿
Mar 26, 2010 at 1:33 am

谢谢你了!!不错

Abraham C. C.
Mar 26, 2010 at 4:33 am

Thanks, I’m actually learning more about jQuery :D

Great tutorial n_n