jQuery for Absolute Beginners: Day 6

Derek Reynolds says:

Another good tutorial!

Have you noticed that the toggle effects can sometimes lead to really jumpy animations? What is the best way to go about troubleshooting this? Perhaps applying affects to nested elements as to not mess with the transition from one class to another (or whatever toggle you may be happening to envoke)?

Thanks for the hard work in putting these together!

Tom says:

Good Work Jef!

Suresh says:

Hi Jeff, I am geting curious to know more and more. Keep them posted continuously. Your way of teaching is good and appreciating. Keep it up JEFFREY. Well Done.

Andris says:

Hey Jeff. Thanx for this tutorial.

Can I ask you a question about some code that isn’t working as I like it to?
I got a toggler with an downarrow that is an image. when I click on the div where the downarrowimage is in, the image changes to an uparrow. that’s working but then if I click on it again I want it to change back to the downarrow. But this last part ist working with this code:

[PHP]
$(function(){
$(‘.objektButton’).click(function(){
$(this).next(‘.objektInhalt’).slideToggle(’slow’);
if($(this).children(‘img.mehr’).attr(“src”, “../images/pfeil.gif”))
{$(this).children(‘img.mehr’).attr(“src”, “../images/pfeilUp.gif”);
}else{$(this).children(‘img.mehr’).attr(“src”, “../images/pfeil.gif”);}
});
});
[/PHP]

can you tell me why?

this is my HTML:

[PHP]

some text

some text…
[/PHP]

kailoon says:

I’ve did my first ever jquery slideshow in my blog. but it take some times to load. However, I saw others doesn’t have such problem. Any advice?

Dirk says:

Thanks a lot for this tutorial!

I can’t find out why this won’t work:

script:

$(document).ready(function() {
$(“a.slideUp”).click(function() {
$(“#box”).slideUp(100);
$(this).toggleClass(“slideUp”);
$(this).toggleClass(“slideDown”);
});
$(“a.slideDown”).click(function() {
$(“#box”).slideDown(100);
$(this).toggleClass(“slideUp”);
$(this).toggleClass(“slideDown”);
});
});

css:

#box {
background-color:#ccc;
width:579px;
height:292px;
}

html:

Link

What I want it to do:
The link should make the box slide up, then change his class from “slideUp” to “slide Down”, so it will make the box slide down the next time it is clicked.
The link changes the class just the way it should (as I can see in firebug), but the second move (sliding down) just won’t work. Maybe you can tell me why?

Snookerman says:

Jeff, thanks for everything!

I put this tutorial and the last one together to highlight the list items. I noticed that I cannot highlight an item that was crated by the appendTo function. How can this be solved?

Will Paccione says:

Great tutorial. Love jQuery!

sven says:

thanks for the tutorial.

i got this:

function initMenu() {
$(‘#menu ul’).hide();
$(‘#menu li a’).click(
function() {
$(this).next().slideDown(’slow’);
}
);
}
$(document).ready(function() {initMenu();});

which gives me the accordeon effect in a menu.
problem i have is, if i click an anchor within the ul the links within get hidden again.

any ideas?

cheers

Eric says:

Great tutorials! Thank you so much!

Mickey Hoang says:

great!

Sirpingalot says:

Hi Jeffrey,
Loved the tutorial series.. Still need to check out the rest of the site, but am so far enjoying it. Kudos for doing these. I’ve subscribed, wouldn’t want to miss them.

Thanks again.

julie says:

Wow!!! You are a God send! Thank you so much! I often find programming things daunting but your tutorials have demystified them. Thank you!!!!

Keshav says:

Hey Jeff,
U are Just Mind Blowing Teacher……
U explained each thing so smooth…………………….

Abhijit says:

Hi Jeff,

Simply great tutorials. Simplicity of the teaching process makes it more valuable.

Thanks for the way to did.

Can you do a favor. Please provide the videos so that I can use them offline whenever I need as reference.

Regards

charlie says:

Word up!
This has been cooler then Zak Morris’s cell phone! I look forward to learning more Jquery.

Counter says:

JQuery was a dreaded word for me, this tutorials made a whole lot of difference.

Oz says:

Good tutorials for someone not experienced with javascript of jquery. Ive subscribed to your RSS feed and look forward to more quality content.