Positioning Elements Dynamically

Contact Us or call 1-877-932-8228
Positioning Elements Dynamically

Positioning Elements Dynamically

The position of an object can be changed by modifying the left and top properties of the element's style property. The following example demonstrates this:

Code Sample:

DynamicHtml/Demos/Position.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Position</title>
<link href="position.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">	
	function moveH(elem, distance){
		var curLeft = parseInt( getCurrentStyle(elem,"left") );
		elem.style.left = (curLeft + distance) + "px";
	}
	
	function moveV(elem, distance){
		var curTop = parseInt( getCurrentStyle(elem,"top") );
		elem.style.top = (curTop + distance) + "px";
	}

	observeEvent(window,"load",function() {
		var btnLeft = document.getElementById("btnLeft");
		var btnRight = document.getElementById("btnRight");
		var btnUp = document.getElementById("btnUp");
		var btnDown = document.getElementById("btnDown");
		var block = document.getElementById("divBlock");
		
		observeEvent(btnLeft,"click",function() {
			moveH(block,-10);
		});
		observeEvent(btnRight,"click",function() {
			moveH(block,10);
		});
		observeEvent(btnUp,"click",function() {
			moveV(block,-10);
		});
		observeEvent(btnDown,"click",function() {
			moveV(block,10);
		});
	});
</script>
</head>
<body>
<div id="field">
	<button id="btnLeft">Left</button>
	<button id="btnRight">Right</button>
	<button id="btnUp">Up</button>
	<button id="btnDown">Down</button>
	<div id="divBlock"></div>
</div>
</body>
</html>

When the page loads, we begin observing click events on the buttons to call moveH() and moveV().

The moveH() function uses parseInt() to cut off the units (e.g, px) from the value of the left property and assigns the resulting integers to the curLeft variable. It then adds the passed-in distance to the left property.

The moveV() function does the same thing, but it modifies the top property rather than the left property.

Creating a Different Timed Slider

The example below shows how a different type of timed slider can be created by dynamically changing an element's position:

Code Sample:

DynamicHtml/Demos/Slider2.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Slider</title>
<link href="slider2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">
	var timer, timesUp;
	function resetTimer(){
		var slider = document.getElementById("divSlider");
		timesUp = true;
		slider.style.left = "1px";
		clearInterval(timer);
	}
	
	function decrementTimer(){
		var slider = document.getElementById("divSlider");
		var curLeft = parseInt( getCurrentStyle(slider,"left") );
		var curWidth = parseInt( getCurrentStyle(slider,"width") );
		timesUp = false;
		if (curLeft < 198 - curWidth) {
			slider.style.left = curLeft + 2 + "px";
		} else {
			alert("Time's up!");
			resetTimer();
		}
	}

	observeEvent(window,"load",function() {
		var btnStart = document.getElementById("btnStart");
		resetTimer();
		observeEvent(btnStart,"click",function() {
			timer = setInterval(decrementTimer, 100);
		});
	});
</script>
</head>
<body>
<div id="divSliderBG">
	<div id="divSlider"></div>
</div>
<button id="btnStart">Start Timer</button>
</body>
</html>
Next