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 5 of 5

Thread: Animating a div

  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    39
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Animating a div

    I have a div that I use as a sidebar. I want to be able to animate in and out. I have discovered easeInOut which I believe will help me achieve what I want, but I cannot get it work, nor can I find any references which clearly explain how to use it. Can anyone explain to me how to use this to change the width of a div or point me towards a good reference explaining me how to use it?

    Many thanks.

  • #2
    New Coder
    Join Date
    Mar 2007
    Posts
    39
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have found an example piece of code at hesido.com but I am getting an error. This is the code I am using:

    Code:
    var i=document.getElementById('sideBarBorder');
    doWidthChangeMem(i,i.currentWidth,170,10,10,0.333);
    
    function doWidthChangeMem(elem,startWidth,endWidth,steps,intervals,powr) { 
    //Width changer with Memory by www.hesido.com
        if (elem.widthChangeMemInt)
    	window.clearInterval(elem.widthChangeMemInt);
        var actStep = 0;
        elem.widthChangeMemInt = window.setInterval(
    	function() { 
    	  elem.currentWidth = easeInOut(startWidth,endWidth,steps,actStep,powr);
    	  elem.style.width = elem.currentWidth + "px"; 
    	  actStep++;
    	  if (actStep > steps) window.clearInterval(elem.widthChangeMemInt);
    	} 
    	,intervals)
    The line that appears to be throwing the error is elem.style.width = elem.currentWidth + "px";

    Does anyone have any ideas?

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    New Coder
    Join Date
    Mar 2007
    Posts
    39
    Thanks
    1
    Thanked 0 Times in 0 Posts
    will my method not work then? seeing as i have already spent quite some time working on that i would rather continue along that route.

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    I've never heard of easeInOut()...try the method that I suggested...for example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html lang=en>
    
    <head>
    
    <title></title>
    
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    
    #sidebar
    {
        position:absolute;
        top:50px;
        left:0;
        height:400px;
        background-color:red;
    }
    
    </style>
    
    <body>
    
    <div id="sidebar" style="width:50px">&#160;</div>
    
    <script type="text/javascript">
    
    var timer;
    
    window.onload = function()
    {
        addSidebarEvent('sidebar');
    };
    
    function addSidebarEvent(id)
    {
        var divObj = document.getElementById(id);
    
        divObj.onmouseover = function()
        {
            if (timer) clearTimeout(timer);
            slideIt(id,1);
        };
    
        divObj.onmouseout = function()
        {
            if (timer) clearTimeout(timer);
            slideIt(id,2);
        };
    }
    
    function slideIt(id,state)
    {
        var divObj = document.getElementById(id);
    
        if (state == 1)
        {
            if (parseInt(divObj.style.width) < 150)
            {
                divObj.style.width = parseInt(divObj.style.width) + 5 + "px";
                timer = setTimeout('slideIt("'+id+'",'+state+')',50);
            }
        }
        else if (state == 2)
        {
            if (parseInt(divObj.style.width) > 50)
            {
                divObj.style.width = parseInt(divObj.style.width) - 5 + "px";
                timer = setTimeout('slideIt("'+id+'",'+state+')',50);
            }
        }
    }
    
    </script>
    
    </body>
    
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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