SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Smooth movement

  1. #1
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    Smooth movement

    Hey,

    I've seen sites that have JavaScript/DHTML that creates menus that slide down with a smooth motion and things like that. Can someone give me a simple example on how I culd do that?

    Thanks

  2. #2
    Rehab is for quiters! spartan's Avatar
    Join Date
    Apr 2002
    Location
    Cape Town, South Africa
    Posts
    343
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, its really basic

    you have a element on your page, it has a position... style.left...

    you just need to change that position... element.style.left = new position...

    the key is the setTimeOut function that allows you to change that position a little bit every couple of split seconds, to simulate smooth movement....


    here is a simple example... just wipped it together, so dunno if it'll work in anything other than ie6.

    hope that helps

    Code:
    <html>
    <head>
    <title>slide method</title>
    
    <script language="JavaScript1.2" type="text/javascript">
    speed = 10;
    
    function slideME(slideIT, dest){
    	destination = parseInt(dest)
    	slideThis = slideIT
    		
    	
    	if(parseInt(slideThis.style.left) < destination){
    		
    		slideThis.style.left = parseInt(slideThis.style.left) + speed + "px";
    		speed++;
    		setTimeout("slideME(slideThis, destination)", 30);
    	}
    	
    	
    }
    											
    </script>
    </head>
    <body bgColor=white>
    
    <div name=box1 id="box1" onclick="slideME(this,'800')" style="position:absolute; left:150px; top:200px; border:5px double blue; padding:5px; color:white; background:green">slide this</div>
    
    </body>
    </html>
    Spartan
    ---------------------
    It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
    -Mr.Payne

  3. #3
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Thanks for that, exactly what I wanted

  4. #4
    Rehab is for quiters! spartan's Avatar
    Join Date
    Apr 2002
    Location
    Cape Town, South Africa
    Posts
    343
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no probs
    Spartan
    ---------------------
    It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
    -Mr.Payne

  5. #5
    SitePoint Enthusiast Incubator's Avatar
    Join Date
    Apr 2002
    Location
    Good old Belgium
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have to thank you as well
    you brought me one step closer to menu creation
    i knew about the settimeout, but I honestlty didnīt know how to reposition it
    "Press any key to continue. Press any other key to exit."

  6. #6
    SitePoint Member
    Join Date
    Apr 2002
    Location
    New Zealand
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not fully supported is the CSS position:fixed attribute. Positioning is exactly like absolute, except that the element remains in place on scroll.
    Abhishek


Bookmarks

Posting Permissions

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