Grow your CSS skills. Land your dream job.

Any way to stop the “skip up”??

  • # January 23, 2011 at 2:16 pm

    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!

    # January 23, 2011 at 3:30 pm

    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...
    # January 23, 2011 at 4:14 pm

    Sweet man thanks so much :)

    Rob
    # January 23, 2011 at 5:34 pm

    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

    # January 24, 2011 at 1:06 am

    Yes it sure does. I’m actually in the process of studying jQuery, so you can see my code is pretty elementary :) I like what you’ve done there, but when I look at it I’m not sure what each thing means. So I think it’ll be down my education path that I fully understand what you’ve written.

    Thanks a ton for the input – this is one area I wish I had more practice in :)

    Rob
    # January 24, 2011 at 4:31 am

    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/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".