Dynamically Changing Dimensions

Contact Us or call 1-877-932-8228
Dynamically Changing Dimensions

Dynamically Changing Dimensions

The dimensions of an object can be changed by modifying the width and height properties of the element's style property. The following example demonstrates this:

Code Sample:

DynamicHtml/Demos/Dimensions.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Dimensions</title>
<link href="dimensions.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">
	function grow(elem){
		var curWidth = parseInt( getCurrentStyle(elem,"width") );
		var curHeight = parseInt( getCurrentStyle(elem,"height") );
		elem.style.width = (curWidth * 1.5) + 'px';
		elem.style.height = (curHeight * 1.5) + 'px';
		showDimensions(elem);
	}
	
	function shrink(elem){
		var curWidth = parseInt( getCurrentStyle(elem,"width") );
		var curHeight = parseInt( getCurrentStyle(elem,"height") );
		elem.style.width = (curWidth / 1.5) + 'px';
		elem.style.height = (curHeight / 1.5) + 'px';
		showDimensions(elem);
	}
	
	function showDimensions(elem) {
		elem.innerHTML = "w: " + getCurrentStyle(elem,"width") + "<br>h: " + getCurrentStyle(elem,"height");
	}

	observeEvent(window,"load",function() {
		var block = document.getElementById("divBlock");
		observeEvent(block,"mouseover",function() {
			grow(block);
		})
		observeEvent(block,"mouseout",function() {
			shrink(block);
		})
		showDimensions(block);
	});
</script>
</head>
<body>
<div id="divBlock"></div>
</body>
</html>

When the page loads, we begin observing mouseover and mouseout events on the block div. We call grow() on mouse overs and shrink() on mouse outs.

The grow() function uses parseInt() to cut off the units (e.g, px) from the value of the width and height of the div and assigns the resulting integers to variables: curWidth and curHeight. It then modifies the width and height properties of the element by multiplying the current values by 1.5.

The shrink() function does the same thing, but it divides by 1.5 instead of multiplying.

Creating a Timed Slider

The example below shows how a timed slider can be created by dynamically changing an element's dimensions:

Code Sample:

DynamicHtml/Demos/Slider.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Slider</title>
<link href="slider.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.width = "0px";
		clearInterval(timer);
	}
	
	function decrementTimer() {
		var slider = document.getElementById("divSlider");
		var curWidth = parseInt( getCurrentStyle(slider,"width") );
		timesUp = false;
		if (curWidth < 200) {
			slider.style.width = curWidth + 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