12
Feb
2010
0

jQuery + HTML5 Zoom Slider

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:

You may also like

Parse XML Inside jQuery
Ultimate Ajax Guide [jQuery]

3 Responses

  1. avatar

    hello tgere and thank you for your information
    –I’ve definitely picked up anything new from right here.
    I did however expertise some technical issues using this website, as I experienced to reload the site
    a lot of times previous to I could get it to load correctly.
    I had been wondering if your hosting is OK?

    Not that I’m complaining, but slow loading instances times will very frequently
    affect your placement in google and could damage
    your high-quality score if ads and marketing with Adwords.
    Anyway I’m adding this RSS to my email and could look out for a lot more of your respective intriguing content.
    Make sure you update this again soon.

    [Reply]

Leave a Reply