Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

JavaScript onClick Margins

Discussion in 'Website Design Forum:' started by Magma, Jul 29, 2010.

  1. Magma

    Magma Member


    I have a div called pageWrap to wrap my page with the css as
    margin-top: -46px;
    I would like to use Javascript onClick on another div.
    This Div is called loginButton, the onclick should change the the css of pageWrap to 0px and onclick again should change it back.

    If someone could help me with this code, it would be greatly appreciated

    Thanks in advance! [​IMG]
  2. ralphsaunders

    ralphsaunders Senior Member

    $(document).ready(function() {    // When loginbutton is clicked toggle this function    $('#loginButton').toggle(function() {        // Animate #pageWrap's margin-top to 0 px over 1000ms        $('#pageWrap').animate({            margin-top: "0px",        }, 1000, function() {            // Animation Complete        })    // When #pageWrap is clicked again animate its margin-top to -46px over 2000ms    }, function() {        $('#pageWrap').animate({            margin-top: "-46px",        }, 2000, function() {            // Animation Complete        });    });});
    This is done in jQuery btw, and isn't tested so it might not work first time :p

Share This Page