Forum Moderators: not2easy

Message Too Old, No Replies

Font Size Slider

this one's neat - how'd they do it?

         

lorax

1:05 pm on Sep 18, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



If you visit this article (http://www.newsweek.com/id/159260) you'll see a handy font-size slider in the left-hand column. It looks like it's done with CSS (at least I haven't found any Javascript that controls it yet). I'd like to know how they did it. The CSS for the elements make up the slider's container look pretty clean:

#FontSizeSlider{
width: 40px;
height: 9px;
background: url(../images/toolbox_scrollbar.gif) no-repeat left center;
float: left;
margin: 2px 0 0 8px;
}

#FontSizeSlider div{
cursor: pointer;
left: 0;
top: 0;
position: relative;
width: 9px;
height: 9px;
float: left;
background: url(../images/toolbox_scroller.gif) no-repeat left center;
}

Receptional Andy

1:11 pm on Sep 18, 2008 (gmt 0)



It's actually using jquery for the resizing function(Widget.FontSizeSlider). It's not functional without js, unfortunately.

lorax

1:18 pm on Sep 18, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Blimey - I didn't look down far enough! Thanks RA