jQuery + HTML5 Zoom Slider

By
Ahmed
– February 12, 2010Posted in: Tutorials

At the end of this tutorial you will be able to make something like this:

Now let’s start out tutorial:

The Main Layout:

The HTML Work:


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<center>
<br />Zoom Control<br />
<table>
<tr>
<td>-</td>
<td><input type="range" id="ran" min = '20' max"100" value = '20'/></td>
<td>+</td>
</tr>
</table>
<br />
<table>
<tr>
<td><div>Zoom Meter:</div></td><td><div id="met"></div></td>
</tr>
</table>
<br />
<img src="image/zoom.png" class="img" />
</center>

</body>
</html>



 So now let me explain what i did up there:  Starting normal html5 page by adding "!Doctype HTML" tag, then normal layout made of table the first TR contains the title of the control and it's Zoom Contro, l, + and - signs on the side of the actual input and that what i want to talk about.  The Range Input:  It's a slider controller retuning  numeric value from -0 to 100 as default. and you can set min value and max value by adding min = '' and max = '' inside the input tag.  So what i did up there is i added this range input and gave id ran as id.  After that, close the first TR and the whole table, take a break line and start another table/TR. inside the first td you going to see the words Zoom Meter and in the other td you gonna find a div with the id met, and inside this div you going to print the value of the slider.  Take a break line and add image with the class of img to apply the style which we gonna make. And the whole work will be on this image. That's it we done with the HTML.


The CSS Work:


.img{

	width: 20%;
	height:auto;

}



 I did nothing up there, Just change the width to 20% and the height to auto to let it change normally when the width changes.


The jQuery Work:


$(document).ready(function(){
		var startz = $("#ran").val();
		$("#met").text(startz+"x");

		$(".img").css({"width" : startz+"%"});

		$("#ran").change(function(){
				var zoom = $("#ran").val();
				$(".img").css({"width" : zoom+"%"});
				$("#met").text(zoom+"x");
		});	

});



 What i did up there is:  First make variable and call it startz and it = to the range value, next change the met div content to the value of the range input.  After that, by using the change function which is available in jQuery 1.4, i'm saying if the value of ran changed to the following.  So what we doing is we making new variable and it = to ran value then, update the css settings to the new width by making the width = to the value of the range input.  And Finally, change the met div content to the new value.  And that's it we done, Now we have Zoom Slider...  To download the full tutorial's files click download:
Tags: , , ,
avatar

About Ahmed

My name is Ahmed Hussein aka Ahmed The Geek, i'm 19 years old guy from Cairo, Egypt. I'm a Computer Science Student, and working as a web developer at Tawasol IT Co,. Hope you like my posts and feel free to contact me :).