Simple move div?

JavaScript
1

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.



<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

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_[COLOR=“#0000FF”]up/COLOR when you called it in your moving script. Hope this helps. :slight_smile:


<!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

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? :slight_smile: