SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    simple move div?

    I got this move div working with two buttons, up and down.
    But problem was it keeps moving up on clicks
    So I wanted to add a variable and 1 button, so if I click it checks if its "up or down" , if not moves up and sets variable.
    Then on next click some again and moves down if up. Below my poor attempt at trying to code.. I am a designer really so appreciate any help.


    Code:
    <html>
    <head>
    	
    <script type="text/javascript">
    
    		
    var menu = 0
    
    function Menu_Up(d)
    			{
    			var menu = 1
    			var obj = document.getElementById(d);
    			var currentPosition = parseInt(obj.style.top)
    			var amountToMove = -100
    
    			obj.style.top = currentPosition+amountToMove+"pt";
    			}
    
    
    function Menu_Down(d)
    			{
    			var menu = 0
    			var obj = document.getElementById(d);
    			var currentPosition = parseInt(obj.style.top)
    			var amountToMove = 100
    			
    			obj.style.top = currentPosition+amountToMove+"pt";
    			}
    
    function Menu_Up_down
    			{
    			if (menu == 0) {
          			Menu_Down();
    			} else if (Menu == 1) {
          			Menu_up);
    			} 
    			
    
    	</script>
    
    </head>
     
    <body  class="body">
           
          <div id="movingDiv" style="position:absolute; left:100pt; top:100pt; border:1px black outset; width:160px; text-align:center; background-color:white; font-weight:bold;"><a href="http://www.google.com" target="_blank">Google</a></div>
          
          <div style="position:absolute; top:200; left:20"><a href="javascript:Menu_Up_down('movingDiv')">MOVE UP</a></div>
    
          
    
           
    
     
        
    </body>
    </html>

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The following script combines your move_up and move_down functions. It also sets the style.top for the movingDiv on page load. This is necessary when you want to read the style value later as setting it only in the CSS will produce an empty string for the initial read.

    I noticed that you have a few problems in your iscript. Set the style.top to "px" rather than "pt". Make sure you have semi-colons at the end of each line of javascript. Watch out for the case of your functions - javascript is case sensitive. You had Menu_Up() for the function and Menu_up() when you called it in your moving script. Hope this helps.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Move div</title>
    <script type="text/javascript">
    var menu = 0, movingDivObj;   // global
    // 
    function Menu_Up_down(){ if(menu == 0){ Menu_Move(100,1); } else{ Menu_Move(-100,0); } } 
    //
    function Menu_Move(dirn,tog)
     { var currentPosition = parseInt(movingDivObj.style.top);
       movingDivObj.style.top = currentPosition+dirn+"px";
       menu = tog;
     }
    // 
     window.onload= function(){
      movingDivObj=document.getElementById("movingDiv"); 
      movingDivObj.style.top="100px";
     }
    // 
    </script>
    <style type="text/css">
    body   { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px;  background-color:#FFF;  }
    #wrap  { border:1px solid #CCC; width:400px; height:400px; margin-left:20px;  }
    #butn  {  margin:20px; padding:5px; cursor:pointer; border:1px solid #000; text-align:center; width:110px; background-color:#EEE; }
    #movingDiv { position:absolute; left:50px; top:100px; border:1px solid black; width:160px; text-align:center; padding:5px; background-color:#EEC; }
    </style>
    </head>
    
    <body>
    
    <div id="wrap">
      <div id="butn" onclick="Menu_Up_down()">
        MOVE UP/DOWN
      </div>
      <div id="movingDiv">
        <a href="http://www.google.com" target="_blank">Google</a></div>
    </div>
    
    </body>
    
    </html>

  3. #3
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! Thanks a lot, you realy helped me out. With this example I was able to build my site menu.

    Where is the like/thanks button on this forum?


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
  •