treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Jquery focus and now Toggle

  • 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;
    }
  • Can anyone help me please !
    Merci :)
  • 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
  • Looks like you may have gotten it fixed. Seems alright to me. This line, as rob suggested, is incorrect:

     $('.more1').css('display','yes')


    But, you don't need it anyway, slidedown will take care of that display value by itself.
  • thanks to everyone, but it still doesn't work ^^
  • 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 !
  • $(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)
  • wow Chazzwick ! You rocks !!!!!
    It works, yes, you're my man :)
    I'm so gratefull
    May peace be upon you
    Godspeed