Matt’s Blog

I’m just starting out with JQUERY/JQUERY UI and have been meaning to start using them for a long time but haven’t had the time to really have a play. I’ve finally found some time and from using the documentation on the JQUERY site i managed to come up with a font slider which increases/decreases the font size of all the text within my wrapper div(could be any element including the body if you wanted) 1em at a time. Here is the code:

The XHTML

<div id="wrapper">
  <div id="fontslider" class="font-slider" style="margin:10px;">
	<div class="ui-slider-handle"></div>
  </div>
</div>

The CSS

body {
	font-size:small;
}
.font-slider {
 width: 200px;
 height: 23px;
 position: relative;
 background-repeat: no-repeat;
 background-position: center center;
}
.ui-slider-handle {
position: absolute;
 z-index: 1;
 height: 23px;
 width: 12px;
 top: 0px;
 left: 0px;
 background-image: url(slider-handle.gif);
}
.ui-slider-handleactive { border: 1px dotted black;  }
.ui-slider-disabled .ui-slider-handle {
 opacity: 0.5;
 filter: alpha(opacity=50);
}
.ui-slider-range {
 position: absolute;
 background: #50A029;
 opacity: 0.3;
 filter: alpha(opacity=30);
 width: 100%;
 height: 100%;
}
.font-slider {background-image: url(slider-bg-1.png); }

The JS

$(document).ready(function(){
 $("#fontslider").slider({
		min: '1',
		max: '10',
		startValue: 1,
		steps: 10,
		change: function(e, ui){
			$("#wrapper").css("font-size", + ui.value +"em");
		}
	});
});

you will need to make sure you include the the jquery library, ui.core.js and ui.slider.js files from

http://jquery.com

http://ui.jquery.com

I have also created an example * Package *.

Will hopefully get a demo up online soon as well.