O'Reilly

Facebook Sliders With Mootools and CSS

By on  

One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and the slider. A slider allows the user to drag a slider across a given plain to set a value instead of the boring, tedious text box. I've created a very simple 3-slider system that allows a user to modify the height, width, and opacity of an image using just sliders! Here's how it will look:

slidin'!

Step 1: The CSS

#opacity-area, #width-area, #height-area		{ background:url(horizontal.jpg) 0 8px no-repeat; height:23px; width:500px; margin:0 0 5px 0; }
#opacity-slider, #width-slider, #height-slider	{ background:url(button-horizontal.jpg) no-repeat; width:33px; height:23px; cursor:pointer; }

There's very little CSS involved. I've used the following two JPG's as background images for the sliders:

slidin'!

slidin'!

Step 2: The XHTML

<img src="muse.jpg" id="muse" />

<div id="opacity-area">
	<div id="opacity-slider"></div>
</div>
<div>
	<strong>Opacity:</strong> <span id="opacity-label"></span>%
</div>
<br /><br />

<div id="width-area">
	<div id="width-slider"></div>
</div>
<div>
	<strong>Width:</strong> <span id="width-label"></span> pixels
</div>
<br /><br />

<div id="height-area">
	<div id="height-slider"></div>
</div>
<div>
	<strong>Height:</strong> <span id="height-label"></span> pixels
</div>
<br /><br />
<p><i>The muse, as always, is Christina Ricci.</i></p>

Again, very little XHTML code is involved. Basically just containers for the pieces of the sliders.

Step 3: The MooTools JavaScript

window.addEvent('domready', function () {
	/* opacity slider */
	var mySlide = new Slider($('opacity-area'), $('opacity-slider'), {
		steps: 100,
		wheel: 1,
		onChange: function(step){
			$('opacity-label').set('html',step);
			$('muse').set('opacity',step / 100);
		}
	}).set(100);
	
	/* height slider */
	var mySlide = new Slider($('height-area'), $('height-slider'), {
		steps: 300,
		wheel: 1,
		onChange: function(step){
			$('height-label').set('html',step);
			$('muse').set('height',step);
		}
	}).set(300);
	
	/* width slider */
	var mySlide = new Slider($('width-area'), $('width-slider'), {
		steps: 300,
		wheel: 1,
		onChange: function(step){
			$('width-label').set('html',step);
			$('muse').set('width',step);
		}
	}).set(300);
});

This code is very repetitive, which in turn makes it very easy. We create a new Slider instance for each slider we want on the page, providing the class the respective "area" and "slider" elements. We'll also pass the class steps (height value -- low value defaults to 0), a "wheel" value that allows value modification using the mouse wheel, and a change event function that changes the visible value label and adjusts the image's width or height or opacity level. Lastly, we use the "set()" function to set the default value of the slider.

That's All Folks!

There are many uses for sliders and I could take this example further to make it truly usable. I could, for example, take in the settings of each slider and generate a new image for the user to download. How you use it, however, is up to you.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • 6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • Element Position Swapping Using MooTools 1.2

    We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method. MooTools 1.2 Implementation MooTools 1.2 Usage To call the swap...

  • AJAX For Evil:  Spyjax with jQuery

    Last year I wrote a popular post titled AJAX For Evil: Spyjax when I described a technique called "Spyjax": Spyjax, as I know it, is taking information from the user’s computer for your own use — specifically their browsing habits. By using CSS and JavaScript, I...

Discussion

  1. Andrew

    Hi,

    This doesn’t really count as “progressive enhancement”:http://en.wikipedia.org/wiki/Progressive_Enhancement insasmuch as the functionality breaks without javascript.

  2. @Andrew: You can’t go Wikipedia on me! You’re right on the true definition of “progressive enhancement.” Maybe “visual enhancement” would have been better?

  3. Jonathan

    Hi David,

    I’m trying to get your Facebook Sliders example to work with MooTools 1.11 however I’m not having much success. Safari’s web inspector says there’s an error which I’ve located, it’s these lines of code:

    $('muse').set('height',step);
    

    The other two similar code are also the same. If I comment these lines out, there’s no error and of course the example doesn’t work properly. Is there anything I can do to fix these lines to make it compatible with MooTools 1.11?

    Could you please let me know and thanks for the example! :)

    Jonathan

  4. Jonathan

    Oops, forgot to mention, what does the “wheel” option do? MooTool’s Demo example doesn’t have this option, is this a new option in MooTools 1.2? :)

  5. @Jonathan: The set method has become more prominent in Moo 1.2. Here’s what you need for 1.1:

    $(’muse’).setProperty(’height’,step);
    $(’muse’).setProperty(’width’,step);
    $('muse').setOpacity(step / 100);
    

    Also, the wheel option allows you to use the mouse wheel to control the slide you’re hovered over, which is a new option in 1.2.

  6. Jonathan

    Thanks David! :)

  7. Lu Xin

    This is a good article, but I encountered a problem, if the regulation of the transparency of the page background image how to do it! Can you help me?

    From China’s Lu Xin

  8. bob

    Hey pretty cool again.

    you’ve got some really nice tutorial here.

    But i would like to know if we can make one slider zooming the image proportionally, and have the image in a div with overflow hidden, that way it can become a zoom.
    And i guess a simple “drag” apply to the image will help to move around a map as an example ;)

    cheers

  9. jason

    for usability, how would one make the opacity, height, and width set by text inputs?

  10. Would it be possible to create for instance 4 sliders which would b depend on each other like if you had a 100% value that you would like to distribute over the 4 sliders.So when you moved on the value that was addded on the first would subtract on the others?

  11. okan

    Hello my friend , have you tried this on facebook application?

  12. Nice article. :D i am going to try that.

  13. i want to create an application for sending greetings from site to facebook,how can crate that ?

  14. great srript david.. thanks, this great

  15. Marcello

    It seems this doesn’t work anymore with newer Mootools Version, as the variable Slider can’t be found.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...