Simple JavaScript user controlled font size slider

[scanman20]

http://www.notonebit.com/temp/yui_0.12.2/example.php

There are many sites that have icons that allow the visitor to increase or decrease the font size of the page to make it more readable without having to fiddle with your browser settings. I wanted to make that even easier by incorporating a simple slider that allows the user to do the same thing in less clicks. Check out the above link and if anyone is interested I'll post details and code for it.

[pushfrog98]

I'm interested in the slider code!

[scanman20]

If you go to the example link, you can view the source and get everything you need. HOwever I do need to update the script to use Yahoo's latest JavaScript as well as put in some documentation. Stay tuned.

[pushfrog98]

Sounds good... I guess I just wasn't sure which code was "necessary" and which code was specific to your site in general.

[scanman20]

OK, here's the latest version which pulls the Yahoo User Interface include files straight from Yahoo, http://www.notonebit.com/temp/yui_0.12.2/example222.php .

In the head of the document, you need to include these files

Code: Select all

  <script src = "http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" ></script>
 
  <!-- Dependency source files -->
  <script src = "http://yui.yahooapis.com/2.2.2/build/dom/dom-min.js" ></script>
  <script src = "http://yui.yahooapis.com/2.2.2/build/event/event-min.js" ></script>
  <script src = "http://yui.yahooapis.com/2.2.2/build/dragdrop/dragdrop-min.js" ></script>
 
  <!-- Slider source file -->
  <script src = "http://yui.yahooapis.com/2.2.2/build/slider/slider-min.js" ></script>

  <script src = "http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js" ></script>

You can omit the last include, animation-min.js as that is only needed if you want to use the animation function when clicking on the background bar. You can see an exmaple of an animated slider here http://developer.yahoo.com/yui/examples ... index.html.
The next section is script to handle the font size changes

Code: Select all

var currentFontSize = 12;

function changeFontSize(sizeDifference){
   currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference);

   if(currentFontSize > 19){
      currentFontSize = 19;
   }else if(currentFontSize < 8){
      currentFontSize = 8;
   }
   setFontSize(currentFontSize);
}

function setFontSize(fontSize){
   var stObj = (document.getElementById) ? document.getElementById('ContentArea') : document.all('Content');
   stObj.style.fontSize = fontSize + 'px';
}

function revertStyles(){
   defaultFontSize = 12;
   setFontSize(defaultFontSize);
   slider.setValue(0,1,1);

The last function, revertStyles, is what is executed when you click the link to revert to the original settings. It sets the default font size and repositions the slider. slider.setValue is responsible for the initialization of the slider. The changeFontSize function checks the value of the slider and calls setFontSize to handle the actual changing of the font size.
I highly recommend reading the yahoo documentation (http://developer.yahoo.com/yui/slider/#start) on getting started with the slider to understand how to style the images. Feel free to use my example as a starting point.
The reset image (originally linked to arstechnica and now gone) fires off the above revertStyles function as mentioned and there's nothing special here. The code for the slider

Code: Select all

<div class="floatright">
   <div id="sliderbg">
      <div id="sliderthumb"><img alt="" src="http://www.notonebit.com/temp/yui_0.12.2/thumb.gif" /></div>
   </div>
</div>

is fairly intuitive and easy to understand. You have two divs, one (the thumbnail "A" you drag) nested inside the other (the background bar you can click on). The floatright css class actuall floats it to the left and was just badly named.
The next div contains a form which is only used to display the current font size.
The final chunk of JavaScript

Code: Select all

<script>
   var slider = YAHOO.widget.Slider.getHorizSlider("sliderbg","sliderthumb", 50, 50);
   slider.subscribe("change", function(offsetFromStart)
      {
         document.formH.horizVal.value = offsetFromStart;
         if (offsetFromStart==0)
         {
            setFontSize(12);
            document.formH.horizVal.value = 12;
         }
         if (offsetFromStart>0)
            {
               setFontSize(12+((offsetFromStart/50)*18));
               document.formH.horizVal.value = Math.ceil(12+((offsetFromStart/50)*18));
            }
         if (offsetFromStart<0)
         {
            setFontSize(12-((Math.abs(offsetFromStart)/50)*6));
            document.formH.horizVal.value = Math.ceil(12-((Math.abs(offsetFromStart)/50)*6));
         }
      });
</script>

does the actual slider creation and initialization, and created an event handler of sorts to deal with the dragging of the thumbnail image. When a change is detected, the offset from the start (positive or negative) is calculated and based on the percent change is fed to the changeFontSize function described earlier. The final section contains a div

Code: Select all

<div id="ContentArea">

where the font change takes place. Any text outside this div won't be affected. Therefore you could wrap an entire site in this div to make the font size change global, or you can target specific sections with an id or class.

[scanman20]

Do you have an example?