O'Reilly

MooTools Kwicks Plugin

By on  
MooTools Kwicks

I wrote a post titled Get Slick with MooTools Kwicks ages ago. The post was quite popular and the effect has been used often. Looking back now, the original code doesn't look as clean as it could. I've revised the original Kwicks code so that Kwicks is laid out in the form of a standard MooTools plugin.

The HTML

<div id="kwick">
	<ul id="kwicks">
		<li><a class="kwick john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon"><span>John Lennon</span></a></li>
		<li><a class="kwick paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney"><span>Paul McCartney</span></a></li>
		<li><a class="kwick george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison"><span>George Harrison</span></a></li>
		<li><a class="kwick ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr"><span>Ringo Starr</span></a></li>
	</ul>
</div>

The Kwicks system works based off of an HTML list containing list items with links.

The CSS

#kwick						{ width:590px; }
	#kwicks 				{ height:143px; list-style-type:none; margin:0; padding:0; }
#kwick li 					{ float:left; }
#kwick .kwick 				{ display:block; cursor:pointer; overflow:hidden; height:143px; width:134px; }
#kwick .kwick span 			{ display:none; }

#kwick .john 				{ background:url(kwicks/john.gif) no-repeat; }
#kwick .paul 				{ background:url(kwicks/paul.gif) no-repeat; }
#kwick .george 				{ background:url(kwicks/george.gif) no-repeat; }
#kwick .ringo 				{ background:url(kwicks/ringo.gif) no-repeat; }

The most key of the selectors is ".kwick" which features "overflow:hidden". Overflow hidden will allow our squeezing of elements.

The MooTools JavaScript

var Kwicks = new Class({
	
	Implements: [Options],
	
	options: {
		squeezeWidth: 100,
		maxWidth: 285
	},
	
	initialize: function(list,options) {
		this.setOptions(options);
		this.list = document.id(list);
		this.parse();
	},
	
	parse: function() {
		//vars
		var items = this.list.getElements('a'),
			fx = new Fx.Elements(items, {wait: false, duration: 250, transition:Fx.Transitions.Cubic.easeOut}),
			startWidths = [],
			options = this.options;
		//kwicks items
		items.each(function(item,i) {
			startWidths.push(item.getStyle('width').toInt());
			item.addEvent('mouseenter',function(){
				var fxSettings = {};
				fxSettings[i] = {
					'width': [item.getStyle('width').toInt(),options.maxWidth]
				};
				items.each(function(sibling,ii) {
					if(sibling != item) {
						var w = sibling.getStyle('width').toInt();
						if (w != options.squeezeWidth) {
							fxSettings[ii] = {
								'width': [w,options.squeezeWidth] 
							};
						}
					}
				},this);
				fx.start(fxSettings);
			},this);
		},this);
		//list
		this.list.addEvent('mouseleave',function() {
			var fxSettings = {};
			items.each(function(item,i) {
				fxSettings[i] = {
					width: [item.getStyle('width').toInt(), startWidths[i]]
				};
			});
			fx.start(fxSettings);
		});
	}
});

/* USAGE */
window.addEvent('domready',function() {
	var kwicks = new Kwicks('kwicks');
});

Unlike my original post, this implementation works off of the MooTools Class system. The class is small and features only one real method but the class' code is also much cleaner than my original implementation!

The Kwicks effect is tasteful, smooth, and attention-grabbing. I recommend adding this to any website that could use a bit of dynamism.

Track.js Error Reporting

Upcoming Events

Recent Features

  • 5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

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

Incredible Demos

Discussion

  1. Amitay

    Very good…

    Where do you find the time to write all these plugins?

  2. Are you saying I have no life? :) Efficiency comes with practice.

  3. Awesome thanks for retooling it :)

  4. I really like Kwicks but the time it takes to make the images just perfect/right/etc has always deterred me from actually using it.

    Good work!

  5. Hmmmm….nice article david!! You are My teacher….

  6. Michael J Kormendy

    So how would we do this if we didn’t want to use a list?
    Lets say, a group of divs, within a div?

  7. Oh man, this is verrrry nice. I’ve been looking for something like this for quite a while and didn’t want to resort to flash.

    Also, kudos for using images of the fab four.

  8. Stefan

    Hi, I’m new to mootools.
    I need to use mootools version 1.2.1 for a project, so I created a mootools.js with all needed classes. But it doesn’t work.. It only works with your mootools.js, which I downloaded from your demo version. Is there an incompatibility? I tried also 1.2.4 and it doesn’t work, too. I hope you can help me!

  9. Hi mate! Love your Mootools magic :)

    However, I’ve discovered a weird bug in this class that seemingly only applies to Google Chrome. Sometimes, the startWidths doesn’t get properly filled, and the menu fold back to 0 pixels when your mouse leaves it. Haven’t been able to find a fix for this, unfortunately, I just hard-coded the values I needed into it.

  10. Samuel

    Hi David,

    I’ve been using SmoothScroll with Mootools core 1.3 (excellent plug-in, by the way) but can’t get Kwicks working with anything other than core 1.2.3. As I’d like to use both plug-ins on the same webpage, I was wondering if there’s anything you can suggest to fix it?

    Any help would be greatly appreciated, thanks.

    • Can you provide any detail as to the error?

    • Samuel

      The browser doesn’t give any errors when I try to use Kwicks with core 1.3; the images used just fail to expand upon mouseover.

      I’m probably just failing to implement the plug-in correctly. I managed to get it working using core 1.2.3 by following the example of your demo, and am assuming that to get it working with core 1.3 I just need to substitute one for the other and update which script the page loads.

      Out of curiosity, how would you go about changing your Kwicks demo so that it uses core 1.3?

      Thanks again, David.

  11. David

    I’ve just been updating a website from Moo 1.2 to 1.3, and with the compatibility layer active everything has gone smoothly, save for an odd bug with the Kwicks. It seems that mouseleave can fail to return the Kwicks to their initial size, if you hover over them too quickly. I’ve verified the problem with Safari and Firefox thus far.

    I’ve set up a js.fiddle to illustrate the problem:

    http://jsfiddle.net/WHmZX/

    Any help on this would be much appreciated.

  12. David

    Fixed, there was a link:’cancel’ missing from the FX.Elements:

    http://jsfiddle.net/WHmZX/2/

  13. David

    Fixed the flakey behaviour of mouse.leave in Moo 1.3, there was a link:’cancel’ missing from the FX.Elements:

    http://jsfiddle.net/WHmZX/2/

  14. Really nice one and i would appreciate your thoughts.

  15. I be thankful for your thoughtful enter.

  16. Guys,

    I want to add social media buttons right after the blog post. How can I do that? Help!

    Thank you

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

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...

  • Tips you can Use to Build an Excellent eCommerce Experience

    There are many reasons to build a good eCommerce experience if you are planning to build an eCommerce website. Visitors can place items in their cart and leave your site without making a purchase. In fact, three out of every four of them will do so....

  • OSCON: Live Stream

    O'Reilly's OSCON is upon us and I'm super excited to share with you a live stream of OSCON keynotes, courtesy of O'Reilly! Check back here every morning this week to get a sneak peek at the best conference in the open source community! Thank you...

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