Any way to stop the “skip up”??

[JoshWhite]

Hi all, I’m putting together a little wedding website for a good friend. I’m just using a little jQuery powered content switcher instead of a bunch of pages. One thing that’s just a little annoying is that every time you click on one of the options, it skips to the top of the page to display the new content. Is there any way to stop that from happening?

http://www.dashheartsmorgan.com is the website. Thanks in advance!

[jamygolden]

You need to add ‘return false;’ to all your click functions, for example:

$(function() {

$('a.first').click(function() {

$('#box1').fadeIn();

$('#box2').fadeOut(000);

$('#box3').fadeOut(000);

$('#box4').fadeOut(000);

return false;

});

$('a.second').click(function() {

$('#box1').fadeOut(000);

$('#box2').fadeIn();

$('#box3').fadeOut(000);

$('#box4').fadeOut(000);

return false;

});

etc...

[Rob MacKay]

Just to give you some food for thought too :)

instead of all that code you could bring it down to finding a class. If you give your boxes a class that matched the clicked element and the wrapping div around the boxes (has align centre in it at the mo) an ID of boxes, you could do something like:

$('div.infobutton a').live('click', function() {



var box = $(this).attr('class');



//given the div that wraps the boxes an ID of boxes :)



$('div#boxes').find('.open').fadeOut(000).removeClass('open').find('.'+box).fadeIn().addClass('open');

return false;



});

Dunno if this works but you can see how it removes lots of lines :D

[Rob MacKay]

quick rundown:

starts with watching the links in the div.infobutton (that might have to be #infobutton – I think it was an ID can’t remember lol).

live is just something I love these days, basically it enables content to work even if it has changed on the page. Sometimes if a link is added or something changes it won’t work as an interactive item because of the way the jQuery loads (best to have a look at the live() help)

Then we make a variable that has the current clicked a’s class, so we know which a has been clicked.

next we need to find where the boxes are, then use .find() to find the box with the class ‘open’, the open class flags which box is open. We then fade this box out, because it’s not the one we want and remove the class, because it’s not open anymore. Then we find the box with the class that matches the link, fade it in and give it the class open.

Then the next link you click will do the whole find the open box first and close it, then open the clicked one – and add a class of open :)

useful links:

http://api.jquery.com/live/
http://api.jquery.com/find/
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/

[Author]

Posts