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

Animate change of mainContent margin-right

Discussion in 'XenForo Development Discussions' started by PoLiZe, Jan 10, 2011.

  1. PoLiZe

    PoLiZe Well-Known Member

    Hi people of XF..


    I have a question, i'm trying to make a button for "hide" the sidebar.. the sidebar are hidden but the margin-right of the mainContent class is "260px".. i can change that with javascript but i need a animation for that..

    with jQuery animate i try but i can do it because first i'm noob in js and i can change the margin-right because are in a "class"..

    How i can makeit?



    I have that:

    HTML:
    <script>
      $(document).ready(function() {
    
    $(ocultar).click(function () {
          $(sidebar).hide("slide", { direction: "right" }, 1000);
    });
     });
    </script>
    <script>
    $("#ocultar").click(function(){
      $("#mainContent").animate({
        margin-Right: "0"
      }, 1500 );
    });
    </script>
    
    "ocultar" is a div with the button.

    the sidebar slide for hide with animation but the mainContent margin-Right no :(
     
  2. Jeremy P

    Jeremy P Well-Known Member

    Try marginRight instead of margin-Right
     
  3. PoLiZe

    PoLiZe Well-Known Member

    I try marginRight first but nothing.
     
  4. PoLiZe

    PoLiZe Well-Known Member

    I now delete the class on sidebar.css and on pagecontainer add
    <style>
    #mainContent {
    margin-right: 260px;
    }
    </style>

    and i added id on div..

    and my javascript code is that:

    <script>
    $(document).ready(function() {

    $(ocultar).click(function () {
    $("#mainContent").animate({ "margin-rigth": "0px"}, 800);
    });
    });
    </script>

    but nothing :S
     
  5. PoLiZe

    PoLiZe Well-Known Member

    any reply?
     

Share This Page