O'Reilly

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.
Track.js Error Reporting

Upcoming Events

Recent Features

Incredible Demos

  • MooTools Fun with Fx.Shake

    Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...

  • Dynamically Load Stylesheets Using MooTools 1.2

    Theming has become a big part of the Web 2.0 revolution. Luckily, so too has a higher regard for semantics and CSS standards. If you build your pages using good XHTML code, changing a CSS file can make your website look completely different....

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!

Recently on David Walsh Blog

  • Introducing Frontend Masters (with Giveaway)

    Hey DWB readers, I'm super happy to sponsor this blog. I've been a long-time reader and fan, since back when David wrote about JavaScript and MooTools back in 2007. ;-) We are in one of the fastest changing, evolving, most lively communities on earth: JavaScript and front-end web...

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...