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.
O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

Incredible Demos

  • CSS Fixed Position Background Image

    Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a fixed position background would work for you? It does provide a neat inherent effect by...

  • Create a Dynamic Flickr Image Search with the Dojo Toolkit

    The Dojo Toolkit is a treasure chest of great JavaScript classes.  You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo.  You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within...

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

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