Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    47
    Thanks
    1
    Thanked 0 Times in 0 Posts

    roll up div script

    I am trying to get a div on my page to roll up in vertical size from 250 pixels tall to about 50 when a button is clicked. I've tried to write a script to do this but haven't had any luck. I can make it change size easily enough, but I can't seem to get the smooth change from 250 to 50... it just jumps to that height. I've looked around and can't seem to find it, so I'm hoping someone here has one. Thanks!

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    You might want to look into: http://script.aculo.us/

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    47
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks. Those scripts look really cool. I actually kept working on my own script and I have it working "almost" in IE and Opera. But, not in Mozilla. And in IE, when you click the "Click Me" link the 3rd time, it doesn't roll up until you click it a fourth time. So, it rolls up on the first click fine and unrolls on the 2nd click fine, but the 3rd click is doing something I can't figure out in that it's making the height kind of jitter back and forth until you click the link again. Here's my code. Can anyone tell me what may be causing this and also why it's not working in Mozilla? Thanks.

    <html>
    <head>
    <title></title>
    <script language="javascript">
    var rolled = false;
    var isSized = false;
    var IsIE = document.offsetHeight;
    var IsMozilla = document.clientHeight;

    function doRoll(){
    el = document.getElementById('ad');

    isSized = false;
    var divHeight = IsIE?el.offsetHeight:el.clientHeight;

    //alert(divHeight);

    if (divHeight > 50){
    //alert("roll");
    roll();
    }
    else{
    //alert("unroll");
    unroll();
    }

    }

    function unroll()
    {
    el = document.getElementById('ad');
    var divHeight = IsIE?el.offsetHeight:el.clientHeight;

    if (divHeight < 250)
    {
    if (IsIE)
    el.style.height = el.offsetHeight + 10;
    else
    el.style.height = el.clientHeight + 10;
    }
    else
    {
    isSized = false;
    }

    if (!isSized){
    setTimeout("unroll()",1);
    }
    }

    function roll()
    {

    el = document.getElementById('ad');
    var divHeight = IsIE?el.offsetHeight:el.clientHeight;

    if (divHeight > 50)
    {
    if (IsIE)
    el.style.height = el.offsetHeight - 10;
    else
    el.style.height = el.clientHeight - 10;
    }
    else
    {
    isSized = true;
    }

    if (!isSized){
    setTimeout("roll()",1);
    }
    }

    </script>
    <style>
    #ad{
    border: solid 1px black;
    background-color: #dedede;
    width:250px;
    height:250px;
    }
    </style>
    </head>

    <body>
    <a href="javascript:doRoll();">Click Me</a>
    <div id="ad">
    test
    </div>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Jul 2002
    Posts
    47
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nevermind the jitter bug, I found the problem with that. But I'm still not sure how to get this to work in Firefox or Flock? Thanks.

  • #5
    New Coder
    Join Date
    Jul 2002
    Posts
    47
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay, found the problem with mozilla too. thanks.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts
    So, would you like to post the corrected code so that others can learn from it?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •