Build a Toggling Announcement Slider Using MooTools 1.2

Written by David Walsh on Monday, July 14, 2008

This article may feature code that is no longer best practice in MooTools.
Click here to learn what has changed to make your code framework-compatible.

A few of my customer have asked for me to create a subtle but dynamic (…I know…) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick from GoDaddy’s playbook, I put together an announcement slider that toggles on click. Thanks to MooTools 1.2, this was a breeze.

Let me show you how to take advantage of the toggling announcement.

View Demo

The CSS

#coupon			{ top:0; right:100px; position:absolute; cursor:pointer; width:585px; background:url(slider-coupon.png) 0 bottom no-repeat; }
.closed			{ height:29px; }
.open			{ height:176px; }

As you can see, I’m using the coupon image as a background image to a DIV I’ll create using MooTools. The top and right properties allow me to position the coupon and I added the pointer cursor to let users know they need to click on the element. The heights set in the open and closed classes will cover the entire height image and just the “tab” part of the image.

The MooTools Javascript

window.addEvent('domready', function() {
			
	//inject div
	var el = new Element('div', {
		'id': 'coupon',
		'class': 'closed',
		'text': ' '
	}).inject(document.body);
	
	//settings
	var state = 'closed';
	
	//add the click toggle
	el.addEvent('click', function() {
		
		//change the state
		state = (state == 'closed' ? 'open' : 'closed');
		el.morph('.' + state);
		
	});
	
});

The code is actually pretty simple. Once the DOM is ready, I inject the coupon DIV in to the body of the page. Then, I create a setting that will help me keep track of the slider’s state. I then add a click event to the couponDIV that changes the element’s state and morphs to the appropriate open / closed class appropriately. That’s it!

View Demo

More Toggler Ideas

A few more ideas for the toggler:

The toggler could use mouseenter and mouseleave events just as easily
You could use this functionality as a preferences “dashboard.” For example, I could use this on each article page. The toggler would have checkboxes that said “Hide Trackbacks” or “Hide Images”.
I’d recommend only using this for advertising on one or very few pages. Having this on every page would annoy the hell out of people.

Download PDF

Follow via RSS Epic Discussion

July 14 / #

Eric Wendelin says:

Simple and elegant. I like it!

July 14 / #

Mark says:

Nice…

July 14 / #

Peck says:

Nice one but beware, you’re over your search input / button on the demo page, because your div is larger than the event button that fire the announcement. I know that this is just a demo page, but this should be avoided by anyone that is using this type of component, be sure to not overlay on things.

Keep the good work ! ;)

July 14 / #

Ahmad Alfy says:

Just awesome!
Well done :)

July 15 / #

Bleyder says:

Hi!

What about if javascript is turned off but css is on? Maybe adding:

coupon{display:none;top:0; right:100px; position:absolute; cursor:pointer; width:585px; background:url(slider-coupon.png) 0 bottom no-repeat;}

and then change this rule via javascript to display:inline solve the problem.

Sorry for my inglish.

July 15 / #

david says:

@Bleyder: Good idea!

August 15 / #

speed says:

Hey David thanks for your 1.2 tutorials a lot :)

I need a little help from you because I’m still learning JS so I can’t figure it on my own :(
here’s the script : http://demos.mootools.net/Fx.Slide
All I want is to remove all the links for the div and just leave “toggle”

like right now there are : “slide out | slide in | toggle | hide | show”
but when I remove the the “slide in” and “slide out” the script stops working :( How can I just put “toggle” and remove rest of the links and still make the slider work?

Thanks!

August 16 / #

speed says:

Ok cool so I’ve managed to achieve what I was talking about up there ^^

But now I need something else…. The status of the panel won’t update until I have the “Show” and “Hide” tabs in the HTML :(

How can I just put “toggle” in the html and make the status change “open and close” ?

Thanks :)

August 30 / #

speed says:

David you never came back to reply :(

Sorry for being so demanding lol!

July 16 / #

Kate says:

Awesome. Thanks! With a little modification, it was just what I was looking for to ascertain if a toggled element was open or closed. Keep up the good work!

July 17 / #

Peter says:

Hello,

Is a Toggling Announcement Slider free for commercial use ?

Thanks in advance.

Peter

July 17 / #

David Walsh says:

Peter: Do whatever you’d like with it! :)

August 17 / #

Monjur Ahmed says:

Very nice example. You know Joomla 1.5 uses MooTools 1.11. I tried to port this example in Joomla 1.5, but failed.
I am looking forward for your another blog entry that describes how to do it in Joomla 1.5.