Grow your CSS skills. Land your dream job.

Jquery focus and now Toggle

  • # February 1, 2009 at 8:56 am

    Hi everybody,

    I’ve some trouble with the framework jQuery
    Indeed, when a display a div with the function "slidedown" the page goes up !
    Let me show you : http://www.notebookcom.fr/site/page/pro … bles.html#
    When i click on "Plus d’info" wich means " More information"
    It’s like i had a anchor a the top of my page, thus, eachtime i click on "plus d’info" the page ride up to the top

    PS : i tried to put an anchor on the none display div, but, it still acts odd

    Maybe there is a function who permit to avoid all these trouble

    Sorry for my english, I’m a French guy :) From Paris

    Here is my js file :

    // JavaScript Document

    $(function(){
    $(‘.disp1′).click(function() {
    $(‘.more1′).slideDown(’3000′);
    $(‘.more1′).css(‘display’,'yes’)
    });
    });

    $(function() {
    $(‘.hid1′).click(function() {
    $(‘.more1′).hide(’3000′);
    });
    });

    and my css file :

    .more1{
    display: none;
    }

    # February 1, 2009 at 8:57 am

    Can anyone help me please !
    Merci :)

    Rob
    # February 1, 2009 at 11:44 am

    firstly your "display", "yes" is not going to work – css dosnt have a "yes" option.

    have a look http://w3schools.com/css/pr_class_display.asp

    Your page, which I cant access, probably slides up because the element you are hiding is hidden. When you hide an element its like it never existed – so the rest of your page will move in to fill the space left behind.

    If you want the space to be kept, best wrap your element in a div and specify a height or min-height…

    PS: I cant get on your page – probably because my connection is limited atm… its probably me not you. lol

    # February 1, 2009 at 10:37 pm

    Looks like you may have gotten it fixed. Seems alright to me. This line, as rob suggested, is incorrect:

    Code:
    $(‘.more1′).css(‘display’,'yes’)

    But, you don’t need it anyway, slidedown will take care of that display value by itself.

    # February 9, 2009 at 10:55 am

    thanks to everyone, but it still doesn’t work ^^

    # February 9, 2009 at 11:08 am

    Hi every one,
    I have a new Trouble,
    instead of using " slideDown" and " SlideUp"
    I use the function "toggle"
    but the page still goes at the top, once a click on "Plus d’info"

    By the way, how can I change the sentence " Plus d’info" to " Moins D’info "
    when i click on " Plus d’info"

    cheers
    Regards !

    # February 9, 2009 at 6:58 pm
    Code:
    $(function(){
    $(‘.disp1′).click(function() {
    $(‘.more1′).slideDown(’3000′);
    $(‘.more1′).css(‘display’,'yes’)

    return false;

    });

    add return false;

    that should stop the page jumping to the top (i think)

    # February 10, 2009 at 5:04 am

    wow Chazzwick ! You rocks !!!!!
    It works, yes, you’re my man :)
    I’m so gratefull
    May peace be upon you
    Godspeed

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

You must be logged in to reply to this topic.

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