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
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 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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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 "https://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*=https://webdesignerwall.com])").not("[href^=#]")
.addClass("external")
.attr({ target: "_blank" });
});
Spencer
Wow. Thanks a lot :) I can’t wait to make some sweet effects. :D
Ian Stewart
Awesome tutorial! Thanks so much for this.
David
point 9:
this is nice and a long time i search for a good tut for this.
thanks!
Bernd
Yeah. Big thank You ! I always wanted to look at jQuery, but you gave me the Kick. Great article !
Rob
Viva la jQuery!
bluEyez
w0w so nice :x
nice tutorials
Piotr
This is just brilliant. Thank you!
Gabe
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
Cool, Is really fantastic, but we have than use with moderation, how beer. :-D
Dominic Leonard
Fantastic article! Encouraged me to finally venture into the world of jQuery
Tom
Really useful summary of jQuery essentials.
Keep up the good work!
Salman
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
woah thats awesome, but could you
make a tutorial how to make a guestbook
Jacob
Thanks! ..this is exactly what I’ve been looking for, great for beginners too.
Keep the good work!
max
yeah, great tutorial!
Marcus Blättermann
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
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
The problem can also occur when you use a margin-top margin-bottom. I think it’s better to use a padding.
Chris Laskey
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
AWESOME!
Thanks for all man! jQuery is fantastic and this tutorial too…
explanation perfect, go direct the point! =D
Anonym Web
I love easy scripts! ready to use.
Robbi
Thank you so much for these tutorials!!
Kyle Meyer
Now if we can just teach people when to use these things and when not to… :)
Great tutorial Nick.
Reinier Kuipers
Great stuff! Thanks so much.
Milan
Hi thanks a lot for this tutorial!! It is very helpfull an one of the best JQuery tutorial i ever read.
Marc Grabanski
Very nice explanation of jQuery from a perspective that designers care about. A++ tutorial.
Jean-Michel
Thank you again, Nick !
Ben
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
greaaaaat!
thanks for sharing, nick.
Will Wilkins
This is great. Thanks so much for your time in putting this together!
Ken
You rock. Thank you!
Amanda Robbins
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
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
Good stuff. It’s always good to learn JS/AJAX, but Jquery is admittedly, one of the easiest frameworks to pick up.
Mohammed
Thank you so much for valuable tutorial.
Danny
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ê
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
@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
I noticed the tiniest odd glitches here and there for IE7. Are these supposed to be completely prod-ready?
bweb
Highly useful tut. Thanks a lot.
[n0M3n]
Didn’t know this library XD
I love u, I’m gonna use it on my website :P
kevadamson
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
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
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
Thankyou very much!
This will really help me in making my websites!
:twothumbsup:
Aileen Feng
me again
Fredrik
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
Thanks a lot… it’s gonna be very useful.
Amrit Hallan
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
great tutorial!
ashvin
tHaNx! for the help…
Amanda Fazani
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
it’s just great
martijn
All libraries suck! Why don’t make it yourself?
bali web designer
Thanks you (again) for sharing these nick, excellent, vote for button hover effects but accordion run unsmoothly :)
Dejan Cancarevic
very good thank you
gokudb
hi, can i do this for a wordpress blog¿?
Angelfire
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
OMG, this is amazing job you’re doing here !
Amanda Robbins
Is there a way to add a text description to the image replacement (# 9)?
Cacao
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
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
Wow !
It’s amazing, I really like this kind of effects, thanks for this splendid tutorial.
Michael.
AndyBr
thank you for sharing it
mynicksucks
Thank you a lot for sharing!!!
Milinda Lakmal
Really Cool.
mike
That’s really great, I’d love something on degradation where the user has javascript turned off.
Nathan
I am having some trouble viewing some of these in Fire Fox?
Is that normal?
Andrew
Very good tutorial! :)
Always have been a “fan” of Mootools — now i´m getting slowly into jQuery.
Foxinni - Wordpress Designer
HARDCORE!!! Perfect post. Ah man you did it again! Will be reading this post thoroughly through
Saso
Great tutorial. I hope we will see more about jQuery.
Thanks
Richard
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
Nice tutorial. I translate it on Russian. Again … ;)
Jamie Lottering
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
Cool stuffs thanks nick, and i am going to use some of this in my site :)
coyr
Thanks for share. It’s a good tutorial. The examples are the best. Thanks! ;)
Michael Jenkins
I love you. That is all.
Jared Ramirez
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
Great Tutorial. I will be printing, saving, and sending this to friends.
dee
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
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
Wow, thanks for this nice tutorial! will be handy for future work. keep up your awesome stuff. :)
leveille
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
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
Thank you for sharing! This jQuery tutorial is just the ticket. Kudos!
Dan Cole
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
Great tutorial, thanks !
Luis Cameroon
Thanks for this great tutorial! It can be handy for my future works.
Cheers from Brazil!
Ollie Kavanagh
Really good tutorial, thanks! I am just moving across from Prototype to JQuery and this is going to be very useful! ;-)
paulgiacherio
Fantastic tutorial- thanks for taking the time to make it clear and concise.
alyssa
thanks for the overview, but how do i make the slide panel slide horizontally (say from left to right)?
calvin
amazing stuff! thanks so much!
Stefan Vervoort
Bookmarked this great guide.
Felipe Ramos
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
Another great turorial. Thanks for sharing.
JaNN
thanks a lot ^^
Fabian
Very nice tutorial :D
Nacho
Very helpful :]
mark
Excellent tute!
A couple of awesome examples there that a tech-retard like me can implement.
Thanks!
Benjamin
Very nice tutorial and insight to jQuery.
Thanks for sharing!
Allahverdi
Hi. I have a question. I know the question doesn’t match to this post.
In which software you draw web designs?
Eric Rasmussen
Wow, what a great website! Just stumbled across your site and what an awesome resource! Thanks,
Luca
Very Nice!
Manuel Vidarte
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
Great work!
Milinda Lakmal
Nice tutorial. I learn lot from reading this tutorial. It’s better if you can provide more tutorials relevant to CSS. Thanks!
Milinda Lakmal
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
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
Thanks for these great tips!!
ridhoyp
waw, thats so cool!! thanx for tutorials. :)
Matt Halliday
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
Nice tutorial. Great tutorial. I links this at imaginepaolo
Nastya Manno
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
wow this is really awesome. Thank you very much for sharing your knowledge with us.
Joefrey Mahusay
Really nice tut. Thanks for sharing. Surely, I will use this techniques in my future projects.
Chris Johnson
Great tutorials! I’ll be looking into implementing some of these functions in sites to come!
Almog
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
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
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
EXCELLENT tips. Thanks so much!
Brandon Kaylor
Very Nice!
Im going to try and use the Gallery one i believe its #9.
For my portfolio.
Jonny Rash
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
thank you this a very goog post…
5ivedance
Nice tips, ありがとうぐざいます
Joy
Awesome post as always, but this is definitely your best yet!
=D
Ian
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
Hi. Thank you so much for this tutorial. you have given all the details in a manner to understand easily. Thanks again.
Omkar
Wow thanks for the great tutorial. Its relly wonderful. Keep up the good work.
Katalog Stron
Wow it seems to be very powerful tool.
Allen
Fantastic！I love it man.
Tim
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
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
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
Estupendos ejemplo y de gran ayuda para todo tipo de aprendizaje. Felicitaciones.
Soy Juanjo desde Argentina. Hasta pronto.
lukxiufung
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
Thats awesome! Thanks!
Hilder Santos
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
This is great. I found it very helpful thank you.
san
awesome tutorial! thank you!!
Maveric
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
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
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
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
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
Great samples, thank you. Very nice and easy to understand.
Matthew
You can have a live example of accordion in my generator: http://www.mycoolbutton.com.
Thanks to this great tutorial.
Bye, M.
Cloud9 Design
Thanks for the great samples!
EpiPaul
Great artical
Really some things I can use in my websites
Aditi
awesome article,thanx
Rob
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
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
I think I will try this examples. THX for it!
& I hate IE, too :)
William Gates the 3rd
GREAT !!!
David Miller
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
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
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
you make greath job thank you for help devellopers
Fotograf
thx 4 good tutorial
Damien Buckley
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
excellent tutorial!… nice work!.. bravo!…
Autor
Thanks for these nice tutorials. First time I am really thinking about using JavaScript for Design…
fgzerg
hgsert yi_çà-è zehbh'” rtyy(u ssdahujy ju
dedek
xdcfvg
jezal
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
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
excellent tutorial. nice and smooth
Dharam
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
very good tutorial….Helped me a lot thanks…
Onyeka
OMG, awesome work, will try!!! Thanks!
Thastrom
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
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
Thanks you so much nick! You’re absolutely a real webmaster..
Ty (tzmedia)
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
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
Thank you for posting this – I’ve been trying to find a simple tutorial for a long time, and this makes everything ‘click’!
PRATHAP
excellent tutorials
james
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
omg nice tutorial i used in wordprees and work very good
xaer8
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
good
Bruja
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
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
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
Never mind. Fixed it. Switching title to id works but doesn’t validate. Class does ;-)
template
this tutorial is amazing.i tryed this example.and really beautiful.thanks for share.
danny
pure greateness – thanks
CSS experts
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
very very good ! Thanks you very much !
Jason Marsh - Web Site Designer
Aw man so many cool tricks, awesome!
Jayme
Nick – love all of the how-tos. I would love to see different ways of styling menu navigation. How do you suggest?
araba ilanı
very very good ! Thanks you very much !
Rahul Joshi
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
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
That’s a fantastic.
illu
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
super-cool! Brilliantly done.
david
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
You are an inspiration..im grateful i found this site!
APM Solutions
This is great. Lots of valuable articles here. Definitely will be bookmarking this one.
wack
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
nice tutorial, thanks a lot!
rwin
really cool, thanks alot
daniel
@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
Love the tutorial, but does anybody know how to get the div to overlap content, and not push it down?
Stan
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
Great stuff! I will be experimenting with jQuery after reading this. Excellent
CSS 2.0
CSS is very powerful with jQuery, this is nice article..
Matthew 'Web Design' Adams
Cool post. I’ve added a ton of your pages to my favs!
shweta
its great thanx
bas
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
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
Seth, the Scriptaculous and Prototype javascript libraries don’t play well with Jquery so you can’t use them together.
Darryl
Why does the Hover effect only work if the link is inside a list?
Ryan
Straight to my favorites, great stuff. I will be testing it tonight and report back if I see any problem. thanks
Brandon Wolvin
Great Stuff! I saw that the accordion technique does not work in IE 6 though. Anyway around this. The arrows are not clickable.
teng
I will learn with you guys.
Laura
Hello, this web is genial!
I need the same code that example 9, but with videos?
Could you help me, please?
Sam
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
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
Thanks Sam, but I removed the padding and the arrows still are not clickable in IE 6.
Sulcalibur
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
The image replacement gallery is exactly what I was looking for, for an upcoming project. To delicious this page goes! Thanks! :D
Web Development
Good menu source code for my next web development work.
bluevn
Wow, thanks so much, that r what i need now
Rac
The vertical https://webdesignerwall.mystagingwebsite.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
Its a great place to learn how professionals think,..thank you very much :-)
Christian
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
One of the best jquery tutorials I’ve seen yet… thanks for the tips!
Janice
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
Thanks for what you do!
It will help bring our profession along.
corey
anyone have any ideas on the best way to add a preloader animated gif to “image replacement gallery”?
reliable IT Solution
Amazing post, we can use this in our next work…Thanks!
real estate postcards dude
Good one!… Now I don’t have to depend on programs so much.
Free Article Directory
Thanks for the great tutorials. Just what i was looking for.
Bob
#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
It will be helpful to add some good features for my Joomla sites…Thanks!
ss
Great jQuery tutorial. thanks a lot :)
lime
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
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
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
Great things & Keep up the good work!
Tin nguyen
Great! Thanks a lot!
Designer's best friend
Thanks for your efforts, realy beautiful and neat tutorial. I guess I’ll start to learn jQuery from this article.
Gazok
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
hey dam gud work . i wana see ur all of creativity work .i like ur work .it;s imazing
mel
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
Good Read, I have implemented some of these on my site, looking for some cool animation for .addClass feature.
Posicionamiento Valencia
Very useful list. Many thanks. I put some collapsible panels on my wedding site.
murtaza
it is very helpful
u should give more examples which would be helpful to us
Alex
I agree.
It’s very nice :) Good work. Thanks.
~Unkn0wN~
Amazing tutorials mate…especially of me who is a newbie in JQuery :P
Thanks a lot… : )
Tareq
Cool and nice for new developer like me….:)
Zeytin
I don’t understand why you would use jQuery or javascript to link block elements. ?
juiCZe
Thanks for helpful article !
Arush
Fantastic ! loved it.
delcious !
Kila Morton
What a great tutorial Nick!
José Mota
Brilliant post. This is great for user interface design and accessibility, i recall the title attribute ones. Thanks!
Nev
This is a fantastic website. Keep up the good work.
bharathiraja
Hi, It was very useful for me.Thanks
lee
On the Animated hover effect #1 Is there anyway I can add different images to each menu button?
Tjorriemorrie
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
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
thanks, i’m looking for this tutorial… very interest!!
Cristina
Your tutorial is great!
coving
VERY INTERESTING ARTICLE, SO MANY USEFUL INFORMATIONS, REALLY HELPED ME, THX SO MUTCH
I THINK IS THE BEST ITEM!!!!!
THX :)
F. Yang
Another great post from webdesignerwall, thank you!
James Durrant
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
Beatiful css….mast article…Namastey India
si
thanks! I’ve returned to this page a number of times now
kamal
thank you very much for the tutorial
MustafaKamal.biz
yasin
very good… Thanks you very much !
Dwayne from Probably Sucks Blog
NOW, this list does not suck. Thanks a lot for the useful resources for jQuery.
Tom
keep searching the web for solutions, keep ending up on your site, keep solving my problems. Thanks again :) !
Alanya Haber
Thank you so much for this free menu
Alanya
Another great post from this page, thank you!
balaji
really helped me a lot!!!!!!
Thank you!
chris
Any way to make that accordian run more smoothly? Seems jumpy when you close a panel.
chris
Nevermind. Got it working. :)
Great article, btw!
Junaid
Great article, helped me a lot
Waseem
thank you a lot !
very cool stuff. :)
Chua Wen Ching
Good for beginners. Thanks. It helped me :)
Yasar
This is absolutely nice. Good examples and explanation. if you add more, it will be very useful
bit_kevin
so cool.
Shelley
Wow, this is sooooooo good. Thanks for the brilliant tutorials. I’m so excited to try them for myself.
Doug
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
i just found out how easy it is to integrate jquery-effects in my site, thx for the tutorial!
yo man
man… i cannot find how to integrated css to this… please write down full tutorial to integrate css to jquery thx…:( please
tupac
yo dawg gud stuff keep it up
peace out
silent
Thanks
Greg
You have amazing web design skills. I love the website too.
Null-11
For “6. Entire block clickable”: Is there any way to make the link open in a new window?
Thanks in advance. :)
misterjuls
Very nice, very good explanation, thank you! :)
vectorskin
Thanks a lot ! Great tutorial for Webdesigners, this is a good start to learn jquery.
JSHAW
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
Wonderful tutorial. Great writing, great explanations, and great screenshots/demos. Very, very helpful!
Finau
Thank you for sharing your work, it’s very helpful and easy to use. A+
Giuseppe
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
Excellent. Very informative.
Thanks a lot..
Duncan
Amazing stuff. Very Handy. thanks
sambeet
Nice examples.Thanx a lot :)
Varun SHeth
awesome stuff but you shud keep adding
argus
hi dear
how i can use collapsible-panels in wordpress to show my post ?
help me please
Deniz
Thanks a lot. Great article and very helpful!
Naresh
very good stuff dude…
amit
well great stuff mate!! excellent work which will surely help new comers like me
Tina
Very helpful site for jquery
Ramesh
Thanks a lot buddy, you made me switch to jQuery ;)
Carlos Hermoso
Great JQuery tutorials for designers. Thanks man and keep up the good work
Semir
great tutorial really helped me with crossing to jQuery
mahen
REALLY great best tutorial, i have been strangling to understand the jq concepts, but this the best one ever i read …
Rahul Ranjan
Really awesome collection of stuffs
Chee Wee Chong
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
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
Very informative intro on jQuery. The design of this blog is also awesome.
sekar.j
hi , those information and scripts are simply superb, really useful
vishalhd
these are some tips for us (web designers) thanks a lot man! :)
elvis
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
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
Great tutorial !!
沿阶草
thank you very much!
Greg
This is the best tutoial I’ve seen. Thanks
erhan
10 tutorials are very good point for beginers
sandeep
thanx for this nice tutorial
By
SAndeep.R.k
Tommi
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
Hi,
These are nice tutorials
Thanks
Omair Rais
http://www.omairarts.com
Dharampal
awesome tutorials :)
(and an awesome site design too :) )
Webagentur
Thank you … this tutorial has me very helped.
steve
Great Tutorial!!!
Sarin
Good
dselva
Thanks a lot for useful tutorial!!!
By dselva
http://www.dsignzmedia.com
Marius
I was looking for “Image replacement gallery” example for a long time, thank you for those examples.
Mobde3
This is great and helpful tutorial for beginners in jQuery Framework.
I was impressed by the easy manner and clear explanation ..
Thanks! :-)
Suat ATAN
Thanks for tutorial.
It’s a very quick start guide for jqueryframework.I will begin using jquery with your tutorial
Faithfully
Rahul B
quite well explained here… this tutorial has me very helped.
manS
Great Tutorial… TQ..
Frank
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
Thanks for tutorial !!! Your examples are very practical.
sanat
thanks admin
AntonMur
Big thanx!
It’s very interest material.
Sean
Thanks for this tutorial, we need designers to understand everything we “web developers” are fully capable of.
jagadishwor
Nice Article will help to do the work very well and having good example with. thanks for tutorial.
JChu
4a doesn’t work in IE6…
Rodney
This is one of the clearest tutorials on jQuery I’ve read, thank you.
Luis Henrique
wonderfull!
niladri
awesome
Mike
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
thanks from uzbekistan :)
you are posts the best of the best
my english bad
sorry
Patrick
very good example for the beginners ! cheers ….
Alicia
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
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
Please tell chain rule in jQuery as i am beginer
TheFrosty @WPCult
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
Wonderful tutorials about jQuery thx and greetings from de!
Pradeep
hmmmm really good yaar……
Web design Yorkshire
Found this site and have already implemented the simple slide panel.
Cheers!
Angel
I`m trying to use this w joomla & i need to call jQuery.noConflict();
how to use it then ?
Andrew
These are very good tutorials. Has helped me a lot in my job.
jul
Nosebleeed! wew!
Vimal.S
Very nice information about JQuery. Now I am learning JQuery very easily.
Thanks for information.
Sig
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
Your tutorial is very nice and Examples are very understandable…….
Thanks for your representation
codepiX
thank you very much for this exellent examples!!
website design
Website design will never be the same without jQuery! Great tutorials .
Scogle
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
wow, amazing tutorial, you have a lot of comment guys
Vince
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
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
Excellent tutorials. Maximum impact with minimal effort, just what jQuery is about!
ghprod
it’s really great article!!!!
thnx u so much :D
Sudhir Jeevan
Thank you very much for your tutorials…
Jess Marlow
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
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
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
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
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
Good Posting, Thanks for sharing it is very helpful for me, because i am a newbie
simmi
Thank you very much for a great tutorial
Nguyen Tien Si
Useful tutorials, thanks for share your mind
Fernan
Awesome tutorial. Thanks so much, very appreciated!
Rajesh
Thank you very much about this tutorials.
AYDINISI
wonderful blog,
AYDINISI
thanks
gulshan
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
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
Good Work done……. the way you have presented the work flow of jQuery is really great…..
Keith D
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
Great tutorial series thanks
Adam Winogrodzki
Great & Useful Thanks Writer !
Muskan
This is really amazing n very very helpful.Thanx a lot.
Keith D
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
thx a lot! It is very useful^^
jQuery Tutorials
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
you know your giving away gold.
Butch Decossas
Thanks… great work and a great resource!
iRINA
excelente el diseño de página. Les felicito…
my congratulations
Jan
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
Web Designer Wall is always clear, thorough, and relevant. It has really helped me develop my style and skills.
Bravo!
nstefan
Thanks so much, your clean tuts helped a lot !~
dileep
wonderfull work…..
it’s nice
ash
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
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
Its so cool.
Great Work
Dinesh
Hi nice tutorials, It was very helpful for me to get some knowledge in jquery
thanks
Nidhi
Really very nice tutorial :)
HydGirl
Very Nice tutorial.Pls add some more features..
jenny
hola me parese asombroso lo que uno puede hacer con ajax los felicito el tuturial es de grana ayuda
Lenton
Its really cools.
Damith
Very Nice tutorial.
Great Work !!!!!
Swapnil
Thanks for dat but cant download the zipped files, if possible pls mail me,
Thank you for the wonderful stuff!
aloy
Great tutorial. If I want to fade out any element, do I need to include the effects UI?
Thanks for your nice tutorial
Saranya
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
How I add, in the example 9: image replacement, an specific link from each image?
Thanks for this great tutorial :D
imran
very easy and effective tutorial to know something about jquery ……
Deelow
very very useful :)
thanks for all the great work :D
bob
Excellent tutorial. Really enjoyed it and leaned a lot. Thanks.
kilinkis
ayy mi novia tambien se llama jenny =)
Fretsnkeys
Wonderful tuts. I am loving it. Thanks!
baljit singh
Awesome tutorials for beginers indeed. Very useful..
Thank you
Nestor Sulu
As usual, a great tutorial and resources for all of us, I start loving JQuery! Thanks!
flashfs
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
thanks for great help
hussain
very very help full spacialy for the web developers thanks
for giving step by step guideline.
Regards,
Muhammad Hussain
Maverick
thanks a lot for this tut. very nicely presented. much appreciated.
Web developer
Excellent tutorial on excellent site. BTW: your theme is amazing… Congratulation !
sky
wow..this is so great..
chirag
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
you have done a great work
fransis
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
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
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
artical is very nice it conteny good info for new bee help full for new devloper..
widi mawardi
helpfull tutorial with step by step guideline, it sure help.. im a designer and I love jQuery for work..
widi mawardi
nice shared, thank you
Amit
very helpful article for a developer who want is curious about designing
Rk Yadav
Nice It will help who are beginers in designing website with Jquery
Robin van Baalen
Great post. Thisone is on top of my fav’s
kapi
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
Artical is very nice , thank you
Dainis Graveris
beautiful tutorials, I am big fan of jquery already, nice to get well explained new tutorials :)
Parker
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
oh i really like this clearly explained tutorial.
would love to see such tutorial on ajax.
thx for sharing.
Eric Perdue
Awesome tutorials. They’ve helped me out design and code wise.
sinop ilçeleri
Artical is very nice , Artical is very nice , thank you
thank you
Kim
very nice tutorial. I have used this page alot as a reference when building JQuerystuff , keep up the good work m8 :)
Computer User
Thank you very much for this article.
jk webDev
ThanX to jQuery Team. It really superab and simplified everything as much as easy & use.
You have done good JOB!
davelf
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
@Parker — try this jquery for beginners tutorial:
http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/
Ícaro Pablo
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
good work.I really didnt see anything better than this on jQuery
michaelmesh
Dude! Best site I have found in AGES! Great work, pure brilliance.
Thang Pham
Cool I love you. Jquery.
Deepinder Singh
All the articals are very nice.definiltly it will help to use jquery more easy.Thank you.Good work.
[email protected]
Jquery the best….! u rok
IMran
Nice tutorial i can easily use jquery now thanks
asim
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
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
That was really nice!!! thanks for that.. nicely presented :)
Liam Serrant
Nice tutorial. Was looking for a great way of learning some JQuery.
Nice work as always.
Thanks
A.Jendrysik
very good side!!! wonderfull effects
Greetings from de
Daniel Winnard
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
Excellent tutorials.. very cool effects..
ashutosh mishra
i love this tutorial as a beginner….but can we do som data base related functionality using jquery?
senthil kumar
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
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
good keep it up
AbrahamBoray
Really Nice Tuts, All this stuff r very usefull in real life designin’ & programming with JQUERY
Thx Dude
Abraham
tnc
its very.. nice i can use this on mysite :D god bless and more power
stylelead
active class will toggle the background position of the arrow image
Manimaran Ramaraj
Superb & Fabulous creation………….. Thanx 4 giving ur wonderful guidelines here.
~ Maran
mohit jain
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
Brilliant tuturials. Just awesome.
Its more than what i expected. And a lovely website as well.
LazyAndroid
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
I like these tutorials. Especially # 10
Leonardo
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
its very.. nice and more All this stuff r very useful in real life design
Flo
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
The link styling i like, very nice
Aoobi
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
ดูหนังออนไลน์
Thanks I like your blog it’s helpful.
Bob
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
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
I like these tutorials. Especially # 10, can you write more
freshwebservices
Excellent tutorial – much appreciated.
Lee
Excellent selection of jQuery effects there. Top stuff, cheers.
Rajamohamed
hey…u given something what i look for…i become audit for this site..Thanks a LOT
Alfonso
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
#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
Just what I need, one of the most comprehensive jquery tutorial around.
Paul Seys
Great post, specially the styling of different link types. Very helpful, thank you!
sreejesh
Thanks for introducing JQURY . Very useful help
Waheed Akhtar
Excellent explanation with detail. Thanks for sharing
tintin
thanks for sharing…
Shahriar Hyder
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
Cool!. Awesome effects and stuff. Love it!..! :)
jsoe
muy bueno los ejemplos jquery, (very good examples jquery)
AnnC
thank you so much for amazing tutorials ! I must use it ;)
shashank
i m feeling a great joy and also my interest has been increased …….. thank u so much
Naveen
I like the jquery tutorial, I need some sample query like this
David Huter
Good ideas! it looks simple even for me to use.
Girlfriend Dating
tasarimatik
It is an amazing tutorial! thank u very much…
Shawn
Thanks for this great tutorial. I used a lot of these guides while building my landscaping website. Check out Bay County Landscaping
Karl
How can I transform the Simple slide panel to slide down/up on mouseover/mouseout ?????
tasarimatik
All the examples are so helpfull and seems easy thank u so much. i will try all of them !!! tasarimatik
Federica S
helpful, clear and simple: thank you very much for sharing!
Rajiv
Thank you very much for simplify the jQuery Understanding!
Css Ajax galleries
Hey this article is very good and i have learnt start learning from them thanks man
Srinivasan G
Way the concepts has been explained/introduced is great ……. Thank you very much…….
Hosting Murah
Confusing… ;)
Robin
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
Cool Post… very nicely expained
Joel
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
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
Once again you have written an excellent tutorial.
Andrew Potter
Awesome, thanks for the demos!!!
Daddy37
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
Its great source of knowledge for any JQuery newbie.
Thanks a lot man!
Bob41
The reason two and two were not put together were because there is no reason for them to be. ,
Mark20
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
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
good idea for design website. thankyou
Eshwar
Thanks for providing these samples. It’s really helpful for new JQuery developers.
Mike
Very helpful tutorial. It made me much easier to add effects for my web applications to make much more attractive.
Jon Williams Design
Really helpfull to getting started. Thank you.
Leonieke
Thanks for these examples – great choices to try out!
emi
Very helpful tutorial. Thankss
Pri
Hey, thanks….This is good stuff!….And cool website too…
Rajasekar
thanks a lot… its very helpful to me..
Margaret
Thanks for making it so easy to understand :)
Dinesh G
For Beginners especially , this is brilliant…
khaleda bhuiyan
Thank you for such an excellent tutorial.It really helped me a lot in jquery.
Cameron Sweeney
This is a great introduction into jquery with simple but useful demos. Thanks for sharing it!
pjjun
It is very useful!thanks
rainweb
Good job ! nice~
NeOren
Very nice tutorials, easy to understand and so revealing. Good Job!
Elidjon
A very good introduction to jQuery features.
great job!
Skidoosh
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
Awesome tutorial… thanks a lot
kinza
hey
very very useful and informative post for jquery, i have learn by this post thanks
sarah
Edwin
Thank for posting this. This is exactly what I’m looking for.
Onche
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
this is very good man. help me a lot as I’m beginner
Ehetesham
This is very good for beginner
I like very much
James
Very useful breakdown of useful techniques – cheers
Nivedita
Very nice and useful tutorials to web designers but i have one question are these worked in all browsers specially in internet explorer.
Null
Excelentes ejemplos de Jquery, me gusto mucho tu post, ya está en mis favoritos.
Saludos.
Adreqi
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
谢谢，灰常感谢，哈哈
Krithika
Hi,
The tutorials given here are very useful and simple to understand. Have learnt from your post.
Keep posting.
Thanks.
– Krithika
Kavita Shah
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
Parabéns !!
adorei, aprendi muito com esses tutoriais.
Satish Shastry
Hi,
This is Great website.
This article is very useful for designers.
I like very much….
Annie
It’s hard to find an accordion tutorial that doesn’t use a ul – your’s was just what I needed. Thanks!
PSD Penguin
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
Thank you, thank you, thank you!
Awesome tutorial… and what an amazing website! Beautiful!!! Thank you for posting such relevant information.
Diotrik
Großartig!
sehr interessant Tutorenkurs =)
balaswamy vaddeman
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
Hi…
Tutorial was easy to understand and very interested to learn that much simple…
Site design also very nice….
Thx..
nadia
interesting and can get lots of info from here..
nadia
very nice tutorial.thanks so much
aidan
Keep the good work coming.
Thanks.
Aidan
FreeWebsiteDesign
oto kiralama
Großartig!
sehr interessant Tutorenkurs =)
Patrik
Excellent! Thank you!
Archana
Good it’s very useful and easy to understand….
aseem
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
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
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
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
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
Very nice! Tuts are great…
Greetings from de
Brian
that’s a very good info, thanks!
Peiman
awesome, Thanks
Sei
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
Thank you so much!
That stuff really saved my day!
Wimp
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
This is really a good stuf.
Obiez Devil
Really great post from the master…keep post another great tutorial and share everything with others…Two thumbs up for you man….!
Noob
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
The designs showed here show what simple and tasteful design is all about. Another one to consider
Sean Cameron
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
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
hi
u really provide nice tutorials..
thnx
for more jquery tutorials please visit arvind-07.blogspot.com
Alexa Dagostino
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
How do i add this animated hover effect into my design layout?
Ravi shinde
It’s really nice
James
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
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
Hi
you really provide nice tutorials..
your tutorials are very useful…
shoaib
This was so simple and yet so powerful ,gulped it all at once.thnx
Sean
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
Really really good tutorial .. with all the explanation n diagrams :)
Thank u so much – it help me lots
Abbas
Very nice tutorial, continue sending this type of tutorials to my emailid
Suzette
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
thanks .. as a beginner ..your article ‘ve saved me a lot of time …
김재승
Wonderful!! Thank you.
Bert
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
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
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
A great collection of samples. This is what I can use as a cheat-sheet reference. Thanks for the post!
Benschi Aadalen
hey! this tut is very nice! .. Thank you a lot!
DAVID SMITH
bEST JQUERY TUTORIAL ON THE NET.
CLEAR, PRECISE AND IMMEDIATELY USEABLE.
THANX FOR SHARING.
PART 2 SOON PLEASE.
utpal
wat a cul tutorial!
Piyush Gupta
Nice Tutorial
Gopinath
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
I was looking for jquery tutorial and found this.
Nicely written tutorial, thanks for sharing nick :)!
Thomas
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
Very Nice Tutorial with good explanation. Thanks a lot.
Fab
Pretty organized fashion in which tutorials are presented. Very nicely done, right to the point with specific examples. Way to go!
Alessio
How do you get the slide panel to begin closed? Mine always begins open for some reason.
maskem
dvdrip türkçe dublaj film
Daniel Winnard
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
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
Great collection !
zhouq
thanks for your tutorial….
flash
Very well presented, will incorporate a few. Thanks
fred
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
heavy laglo
Manjunatha
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
Hey!! Thanks. Your site rocks. This was an awesome tut.
Vertex Web Space
Hello,
That’s good. Thank you so much for this tutorial.
Vertex Web Space Web Hosting Company
Rob Cubbon
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
Hi,
Great tuts, but the links to the demos are broken.
Regards,
CZ
Steve Nony
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
Your Site is really great! Thanks for the tutorials! :D It gives me inspiration.
vimal
this tutorial very useful for begineers .
Thomas
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
thank you so much for this concise lesson – appreciated this
why.itgo.com
thanks a lot :)
brad
Thanks these are some helpful tips :D
Mimi Doggett Romberger
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
Hey Man!!! Great Job!! thanx 4 beautyfull demos and scripts!!!
sbobet
very useful and informative post for jquery
Fernando
Amazing stuff!
Thank you very much. I will take a look a all of them.
fernando
YEah, Thanks buddy
Alessandra
Great article! Now I it’s much easier to use jquery, thanks!
Vanessa
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
Amazing stuff!
Thank you very much!
Aswin
wow great …
kathangisip
Thanks for this awesome tutorial, I’ve added the same collapsible panels from this tutorial. :)
leo
Amazing blog
congrats
baskaran
superb boss..
useful to beginners.
thanks
Hong DUc
I’m getting started with jQuery and find this site from jQuery’s official site. Very helpful and easy to follow
jack of spades
thanks man – simple stuff – but very clever and looks nice, gives that professional look, thank you very much, good man!
jack of spades
Simple slide panel
DOESNT WORK with opera (10)
jack of spades
it actually works perfectly on all browsers, my bad, delete those comments if you want please
Sumit
Nice details to work with jquery thanks.
Disain
thx..useful information
abdul
thanks
Patrick-Agadir
Thanks for this information its very good .
Roberto
Great Ideas
I really enjoed this… Congratulation
Nikolaev
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
龙儿
谢谢你了！！不错
Abraham C. C.
Thanks, I’m actually learning more about jQuery :D
Great tutorial n_n
Abraham C. C.
and… yeah! i hate IE too xD
Andy
Fantastic – one thing though. I am using the ‘simple slide panel’ – but how do I change it so that when the email is submitted, it goes back to the original page so the reader can keep on reading?
Any ideas would be gratefully received!
Thanks!
Andy
Tony
Nice info for jquery beginners there. I like the easy to follow style.
Antonis
Hello,
Is there any way of hiding alt description popup boxes that appear after some seconds if you hover on a link in IE?
I have found ways of hiding these boxes in images but not in links so far.
Thanks :-)
God save us from IE…
ftpdiva
Wow., this is really great. Im diving into the jQuery pool and this stuff is actually easy. I dont know why i waited so long to learn it. Thank you for the tutorials.
Greya
Hi! Your tutorials and different design tips are really great and helpful! Thanks a lot! I’m a returning reader and learning : )
I’m a newbie in WP and jQuery and I already have a wordpress template with jQuery and its different functions implemented. The only thing which is not implemented nor customized is the [gallery].
I’d like to post images into my posts just like you showed in the “Image replacement gallery” example, but… (being a wp newbie) I don’t understand how to implement the code you proposed into my template in order to make wordpress show this simple and beautiful gallery (large image + thumbs) instead the default [gallery].
Would you be so kind to help me out to do this?
Thank you very much in advance for your attention!
J Stern
Nice Tutorial / examples. I have something similar to #9 image replacement that I’m working on. Only difference is, I need a border around the thumb image that is currently being viewed. (Indicator of which image is in view). Any tips?
Sara
Awsome…
teste
test alert(‘lol’);
Raul Navas
Hi… i have a problem with “6. Entire block clickable” How I can make the link open “_blank”?
Thanks… great tutos!
tomying
good article. helpful for me.thank you very much!
Muse4PMI
Wooow… Succulent piece of cake, Nick!
An goldmine of jQuery tips for great Web Designer… like me :)
but not so savvy JS developer.
Bookmarked at “1st Place Resources”.
Thank you!
tim keffer
I’m so glad I bought web designer mag app for my i pad. The first issue I purchased was about jquery!! I’m so hyped about you guys !!
Love, love the flying box!! How do I purchase or ask questions?
John Doesky
great tuts
vathsan
superb ..need some more effects..
i can throw out my flash now.
Omer
Thank you so much, just what i was looking for.
Is it ok for me to post this on my website, with credit of course.
my website is:
http://www.guideme.co.il
Master
great work
Also try this
http://www.tutorials99.com
Nader Minaie
tnx for your great work ! very very usefull
3 hole punch
FANTASTIC TUTORIAL!
indra
Nice tutorial, tq, im a nubi in jquery framewok
gclub
Explained details. Simplify up then I will try to do more.
waro
You made it looks so simple. And with CSS3, you won’t need Flash, at least for “simple” animation.
Guadalupe Aguilera
En verdad eres una chulada, no cualquiera comparte de esa forma lo que aprendio. Mil gracias
Dropship UK
Never knew how simple JQuery is to implement! Great tutorial thanx
HoTMetal
Awasome site! Thanks for the tutorial!
[ ]’s
Web Design
Awesome
nice tutorial
Web Design
great tutorials I love this site
thanks again for your great stuff
builder
Great tutorial. Thanks!
Web Design
thanks for sharing this…just what i was looking for!!
Juega Poker
Hi,
Your blog has very useful information, do you have any material to share for Jugar Poker and Juega Poker web?
Thank you
Natasha
Madrid Spain
Kit Ng
lots of good effects and nice way of presenting tutorials on how to do jQuery animations! Thanks!
Saira
Thanks for this tutorials but there is another one site having top page rank professional jQuery Tutorials
see link below
http://www.tutorials99.com
Rizwan
Thanks for this tutorials but there is another one site having top page rank professional jQuery Tutorials
see link below
http://www.tutorials99.com
Mike Sylvia
Very well done! Thank you.
http://cayugadogrescue.org/who.php
Josefin
Great tutorials. Or Super Great tutorial. This exemple was just what i was looking for! Super!! Thanks for the great tutorials! =)
amil dar
i like ur way of teaching and telling about how to use j query
Viqar Amjad
Top class tutorial of JQuery. I really appreciate efforts for giving such kind of tutorials. Thanks!
webaxes
grt info
Mariana Mota
Thank you! It’s much easier for me to understand now! Cheers!
sue
cooollll!!!!
jamie
nice tutorial.
you just wrapping all common design…
it’s really save my day.
arieono
Thanks for your explanation……this is so great tutorial about JQuery
Craig
Great information, this tutorial has helped me big time.
Thanks very much :)
Web Design Philippines
Wow superb… Very useful and one of the best tutorials I’ve seen… Thanks
Nilanjan Maity
This is really awesome……
msjulz
Thank you SOOO much for simplifying and demystifying the world of JQuery for us designers.
Paloma Seiffe
hi, my name is Paloma and i´m a designer just trying jquerys for the first time, i loved you examples, but i had some troubles with de simple slide panel, because i don´t want it in the top of mi site, i want it in a specific div, and it seems it doesn´t work there, is there any sliding panel that you can use without an absolute position?
thanks.
perplex
straight to the point. thanks so much!
Buntu
Whooa great stuff, thanks and keep it up
Vimala
It is extremely easy to understand what you have written. Thank you for providing such wonderful information.
Mangy
it realy helpfull for me ……thnks……
Borja
Muchas gracias, la verdad es que es muy util!! pero me gustaria saber como hacer para mostrar una busqueda que hacemos en una web en diferentes secciones del acordeon.Ayuda??? please
Muchas gracias y buen aporte!!!
Bill
Can someone please tell me how to delete a file from jquery? It seems to be a secret. I have a browser that I have built with jquery and I cant save files, open files or delete files. I have looked everywhere for the code to do it.
ADHIE MEMPAWAH
tanks, i’m a newblogger. this tutorials is excellent
Eko SW
I have a little knowledge of Dojo. Somehow, I think JQuery simpler, yet more entertaining.
casf
fdasfasd
backfolder
Thanks so much for help us, designers, to understand a little of JQuery!
Great!!!
kolachi
Simple slide panel
This jQuery Panel open when user first click on it, can you tell me how can i reverse the function, i want when my site open in browser, by default slide panel must should be closed (Big) with full height and when user click it than it should be close (Small).
I hope you can understand me and reply to solve my issue.
Thanks
Kolachi
Hi,
Please anybody javascript guru answer my previous comment, i am waiting and :(
Tri Mandir Prajapati
It is really helpful..
very nice look and feel.
loved it..
Hope for more ….
manoj dhamal
its very helpful, and fantastic..
Blake
very beautiful, useful a site….
Adeel
Thank you.
Very beautifully explained
Cledson
Muito legal esse efeito..
Very very good !!! :)
I go to user in my script.
Mike Heath
I am planning to use this great accordion effect in a website I am developing, but I get the effect I notice you seem to get as well – which is that the slideDown effect starts off running at the speed set in the code but always snaps open rapidly at the end. It gives a rather unpleasant jerky effect whereas I want it to be silk smooth. I’ve tried using the easing plugin but the last bit of the slideDown still jerks.
Is there a fix?
Mike
faintlet
I’m so happy that you have posted this here. I’ve been looking for some references for quite a long time already. And every time I try to learn jQuery it just makes me feel sleepy. A blogger recommended this post. 5 hours ago I was trying to learn jQuery overnight. And now, I just made it! I full understood how jQuery works! The only thing left to do now is to explore the jQuery documentation, all the FX and stuff. Thanks so much!
Walter Yu
Like the tutorial and awesome looking website, keep up the great work!
Line Marie
Hi
Are there a funksjon to get a button disabled with addClass and removeClass.
input id=”” class=”” value=”” disabled=”disabled”
Problem: The disabled funksjon with css does not work fine in IE
Thanks
Prabu Ramasamy
The tutorial is so nice to learn. Is it possible to get the full sources of these examples? It will help me learn more things.
plm
if you dont show also the html this cant be called a tutorial but a example. u should submit also the html code
Khadafi
thanks you very much for your share
sahibinden
I love great ..
sabiha paktuna keskin
was a very nice expression :)
prasanna
great article …. thanks
Joel
Great tutorials,
Thanks so mufch….
Patricia Quintanilla
thank you for those tutorials…
Lisa
The slide panel is not working for me . I am using jquery-1.3.2.min.js
طراحی وب سایت
interesting great totorials
طراحی وب سایت
interesting totourials tnx
pradeep
thanks for sharing these important things. I m sure every one will get the help. Thank again.
Anton
How would you specify the first H3 to start hidden instead of it showing the p tag
عمار السليماني
Thanks for your effort i appreciate that…
j
* HTML
* CSS
* PHP
* Javascript
… Oh yea, PHP is more important and is used more often than even Javascript!
Thanks for stopping by,
Stefan Mischook
What makes our video courses stand out?
Rather than trying to teach you every nerd detail about PHP right from the start, we jump into practical and useable PHP as quickly as possible.
Check out our growing collection of PHP video tutorials that includes courses on the basics to more advanced topics like e-commerce and PHP, object oriented PHP, MySQL and much more. * HTML
* CSS
* PHP
* Javascript
… Oh yea, PHP is more important and is used more often than even Javascript!
Thanks for stopping by,
Stefan Mischook
What makes our video courses stand out?
Rather than trying to teach you every nerd detail about PHP right from the start, we jump into practical and useable PHP as quickly as possible.
Check out our growing collection of PHP video tutorials that includes courses on the basics to more advanced topics like e-commerce and PHP, object oriented PHP, MySQL and much more.
roen
interesting!^_^
awesome!….
ilithya
Thank you so much for this great tutorial!
I’ve read it long time ago when you post it, but so far haven’t started using much jquery on my sites.
Now that I’ve started to use it together with javascript, it gives so much more to the designs.
I just implemented the “Simple slide panel” jquery tutorial on a site I’m developing and looks great.
Happy coding!!
Henri
I have a slidepanel sliding above an existing page.
To do this I have defined the DIV as absolute position with a z of 10. Unfortunately, when I do so the links which are “below” the slide panel do not work anymore, even when the panel is out of sight.
Someone with a solution for this ?
Thanks
Henri
TV apps
Thanks for a very useful tips!!
Jacob
If using the “simple slide panel” effect is it possible to have the panel extended when the page loads, then click the button to slide it out of the way? Any help with this would be much appreciated!
Thanks,
Jacob
Courtney
Nice tuts. i searched endlessly for an example like 5b, very simple n to the point. thanks
bali wedding photography
wooww. . .
great. .
salmon
I would absolutely love to see more of these tutorials. This showed me how easy jquery really is to use!
rock0rose
Thank U!! I have been looking 4 this type of Tutorials.
®
Ben Borja
Hi Henri,
Can you post the code? Maybe I can help. The position should be relative and not fixed for the sliding panel to work.
window in provo
I would absolutely love to see more of these tutorials. Wow this is great.
Ben
Love the slide Panel (transition is sweet) and have been playing with it.
I was wondering if you can set up multiple slide panels that detect each others state; so if a panel is open and a different panel is selected it would detect this and close the opened panel before open the new panel? maybe a function that calls for all states to be set to hidden before opening a new panel? (new to JQuery so not too sure how to go about this)
Any help would be much appreciated.
Cheers
aiva
Very useful reading. Thanks for great tutorial..
blogregator
Great article! Thank you!
Alok Das
It is really help full to me.thanx a lot.
srinivas
Great work.
I tried this in my code and it works fine. But while testing, I see that in ‘Safari’ the collapsible panels (#7) aren’t working (I didn’t try other examples). Can you please tell me how to make example 7 work in Safari as well.
Thanks!
srinivas
Please discard my previous comment – I see that it’s also working in ‘Safari’.
Thanks
Nirmala
its really awesome article! Thank you!
Francisco
In collapsible panels, if I have say 5 panels and I want to show only the 3rd one hiding all others, how can I achieve this?
kesha watson
This site always includes the best tutorials ever for designers! It gets straight to the things that a visual audience looks for! Thanks so much!
Farshad
i wan’t this site
Nur
Hi,
I like your panel. It is very nice. But, how can change default position(up to down) on Simple Slide Panel?
Thanks,
Randy Palmer
Always helpful!! Starting to get into this..
browse tutorials
Submit your tutorials to that listing or just find what you need.
http://www.browse-tutorials.net/tutorials/javascript/libraries-frameworks/jquery/1
Roberto
Congratulations, I really liked it. I think it will be very helpfull for many webdesigners and developers.
Thank you, go on like this.
my3uka
O thanks, really great and I especially liked Animated hover effect # 1
Santiago
Great tutorial!
Please, upgrade the code. The @name selector is deprected in jQuery, removed in jQuery 1.3. For example something that looks like $(“a[@href$=pdf]”).addClass(“pdf”);
must be changed to
$(“a[href$=pdf]”).addClass(“pdf”);
That is all.
ben
noticed the _blank rewite of links dosent work with newer versions of jquery. Can you offer a re-write?
Great tutorials
Its a Great tutorials of JQuery. Thank you, Thanx a lot.
Godly Mathew
Its Great!. really amazing. good work.
Malena Andrade
Thanks a lot! This post is awesome and really useful for a beginner :)
tausiah
thanks…………….tausiah
Ian
These are all really awesome tips. Really appreciate the info.
One question though. Is it possible to make the slide panel slide out from the side, traveling left to right or vice versa?
Ranjit & Rahul
Its very wonderful collections and useful for my future projects. Simply awesome.. Love it.. Thanks for sharing…
Merand
Hi,
thanks for your tuto ! Is it possible in number 9 to have a “sixth” photo (that will be replaced on clik by one (enlarged) of the small ones below) ?
thanks
Theo
Your tutorials rock!
Chris Bracco
This is exactly the kind of tutorial I was looking for, and couldn’t come at a better time, thank you!
chevyarif
great post, I’m waiting for this such tutorial for long time untilI found this, very usefull. two thumb up
Jane Jakeman
Your tutorial has been the clearest information I have found so far… just to say thank you for your time and effort
kush
Its awsome…. its very easy to learn specially for designer who does not have much scripting knowledge..
kamesh
hai very nice
Seth
great tutorial, mate! thanks!
Amit
simply awesome……
rednex
nice tutorials,
just wonder if tut # 10 (10. Styling different link types) could be modified like showing a “youtube” icon for every link to youtube-link?
Help is apriciated!
Mohammad
in the name of god
hello and i hope you are OK
thank you for your tutorials
i know a web site full of jquery
http://www.dynamicdrive.com/
its wonderful
i hope you will use its tutorial as well
by every body
keith
hey, thanks for the cool tutorial.
baterie słoneczne
This is what I was looking for! Many many thanks.
Great work! Thanks for guys like you – this is very very nice to have everyging in one place!
TK
Very Clear. Good job.
nate
Quick question: for the first tutorial how can I have the default position for the expanding panel closed? I know in your example it is but the panel always starts out as open in my site.
Thanks
nate
nevermind I solved it
Naresh
Thanks for sharing these important things. I m sure every one will get the help. Thank again.
Saudi Jobs
Thanks for giving this tutorial because i am searching for this.
Igor
thanks, nice one
rai
sweet. ive been looking for something like this. ill surely get my hands on these ones. thanks for sharing.
Pixels Design
Wow, thanks for the tutorials. Doesn’t look too hard to do. Now i can try to customise my own effects.
cihip
jQuery Tutorials for Designers post for thanx.
steve
This is exactly what I’m looking for! Well done! It’s nice to see people sharing these important things – which makes this look alot easier than I first though!
zerox
Great tutorial and hope will better for me.
Praveen
Excellent tutorial about Jquery.
Please Keep adding more..
Mike
Very nice list that you have here! I definitely found some of the effects I’d like to use on my own site. Thanks!
paslanmaz yaka
thanks, nice one
srinivas
excellent tutorial explaining the real use of jquery in real world applications.i would like to suggest you to add more jquery functions so that would be very useful .
Praveen
Hi,
Thanks for the nice script. I was wondering how we can change the position of mouse-over image to left or right.
Thanks,
Praveen
Okeowo Aderemi
Wow Superb neat Animations and Best of all little lines of code…Nice Article
Chandara
Thanks very much. This is a good jQuery for me.
Chet Sapovadia
Great tutorials. Simple changes and it works great for what I need for!!
ajay
it is very good site for beginners how i can get jquery file which i have to download
Venkat
A very good tutorial….well documented…
move online
Thanks for these nice tutorials. so impressed . well done
ايفون
i have a problem with this :(
if you can help me and give me a good source for j query beginner ?
Logo Design
The slide panel looks so nice and is so useful too, I´m going to try that out to see how it works for my site, thanks a lot.
Barry F
Excellent tutorial. I really like the “How jQuery works” diagram. Can I suggest you make up some more showing how some of the other jQuery commands/syntax work?
Thanks
Barry
rachid
nice tutorial
very useful
thanks a loooooooooot
Alex
hi!very cool examples!
but I have a question: I’m using the example n.1 (simpy slide panel) but I have multiple panels to open/close in the same page; how can I configure the Jquery code for that? at the moment with multiple panels, the buttons opens always only the first panel.
Thanks,
Alex
dubai jobs
Grate work. I am searching for this jquery. Finlay i find it hear. Thanks
Borj
I got so many interesting ideas concerning your tutorials…
Thank you so much! :)
hellosze
I just came across your informative jQuery article. is there a better way of adding “return false” before the close of each function?
Ger
I’ve been messing with creating my own carousel which displays in an image viewer onpage but was unsuccesful until now thanks to you.
aaa
test
Vince Kurzawa
I just figured out how to do this and I thought some others might be looking as well.
To make the results of the example “Entire Block Clickable” launch in a new window you can assign the href attribute to a variable instead of the “window.location” like this:
$(“.pane-list li”).click(function(){
var fbLink=$(this).find(“a”).attr(“href”);
window.open(fbLink);
return false;
});
mens ties
I found your blogs after read topic’s related post now I feel my research is almost completed.Thanks to share this nice information.
PeacefulParadox
This is an amazingly well done tutorial. Very colorful pictures and cool working demos. A tweet is definitely called for and was tweeted. I liked how you style this site with the alternating colored comment headers too. Oh, and a comment preview as I’m typing this. Too cool.
rob
Verry nice blogpost! i love it and helped me alot!
benson
I hope you will keep updating your content constantly as you have one dedicated reader here.
arief kurniawan
NICE..!! Thank you very much. I hope you always update your tutorial. and last but not least….Good luck….i am very hapy
Sajeer Muhammad
JQuery is rocking!! Thank you very much for the detailed help file.
Greetings
Sajeer Muhammad