Image 01 Image 02

0

JQUERY Font Slider

Posted on 9th July 2008 by Matt

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.

0

JQUERY 1.5.1 release

Posted on 28th June 2008 by Matt

JQUERY devs release JQUERY 1.5.1 which fixes more than 50 known issues within JQUERY. This release note was posted by the JQUERY team on the 27/06/2008. The full post can be read on the JQUERY blog here: http://jquery.com/blog/2008/06/27/jquery-ui-151/

http://ui.jquery.com/