Treehouse

Build a Toggling Announcement Slider Using MooTools 1.2

By on  

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.

Toggle Announcement

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

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!

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.
ydkjs-3.png

Recent Features

Incredible Demos

Discussion

  1. Simple and elegant. I like it!

  2. Nice…

  3. 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 ! ;)

  4. Just awesome!
    Well done :)

  5. 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.

  6. @Bleyder: Good idea!

  7. speed

    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!

  8. speed

    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 :)

  9. speed

    David you never came back to reply :(

    Sorry for being so demanding lol!

  10. 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!

  11. Peter

    Hello,

    Is a Toggling Announcement Slider free for commercial use ?

    Thanks in advance.

    Peter

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

  13. Monjur Ahmed

    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.

  14. dino

    hi david is there any way to make it come from right to left?

  15. Hi David – any chance that you could publish the jquery version of this?

    PS – thanks for all the help you have given me without even knowing it. Your blog has proved invaluable to me. Al

  16. MAE

    hey david,

    the demo seems not to work anymore, bye

    @ironsideboy: tehere are thousand copies of this script @ jquery downloadbase

  17. Matt

    Seems your fixed position search bar covers up your demo.

  18. If you are willing to buy a house, you will have to receive the home loans. Furthermore, my father always uses a college loan, which occurs to be the most reliable.

  19. Hi David – any chance that you could publish the jquery version of this?

    PS – thanks for all the help you have given me without even knowing it. Your blog has proved invaluable to me. Al

  20. 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 :)

  21. prem

    i need some dojo stuffs like Drag n Drop, toggle , drop down multilist navigation.

  22. I found this tut very useful!
    Btw. MooTools is great!
    Thanks!

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

Use Code Editor