Get Slick with MooTools Kwicks
I've created an easy to use MooTools Kwicks plugin which you may view here.
When I first saw MooTools graphical navigation, I was impressed. I thought it was a very simple yet creative way of using Flash. When I right-clicked and saw that it was JavaScript, I was floored. How could they achieve such a fluid effect using just JavaScript? There began my love of the library and ever since I've used MooTools.
When it came time for my employer to redo their website, I made it my goal to really jazz up the site with MooTools. Nothing too fancy and nothing too bright, just some simple effects that show attention to detail and a little bit of fun. I then thought it was the time to use MooTools "kwicks" to give the website a little kick.
Step 1: Create Images
You'll need an image for kwick, obviously. Make them all the same width. Below are my images, all 285 pixels x 143 pixels. Black borders have been added to show you image dimensions.
Step 2: The HTML
Showing the HTML first will give you a good idea of how kwicks are structured.
<div id="kwick"> <ul class="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>
Step 3: The CSS
There's minimal CSS involved in this process so don't worry about stylesheet bloat.
#kwick { width:590px; }
#kwick .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; }
Note the width of the container (#kwick) is not simply all of the image widths added up. I've experienced odd "wraps" with quicks where they fall to the next line. To prevent that I've added one pixel per kwick to the #kwick width. Also note that a kwick's width is set to 134 pixels -- that becomes default width of all kwicks when no kwick hovered over. You also need to declare a class for each kwick, defining its background image.
Step 3: The MooTools 1.2 JavaScript
The JavaScript can be a bit daunting, but the below code needs very little modification to work for you:
var Kwix = {
start: function(){
Kwix.parseKwicks();
},
parseKwicks: function(){
var squeeze_to = 100;
var max_width = 285;
//get original widths
var start_widths = new Array();
var kwicks = $$('#kwick .kwick');
var fx = new Fx.Elements(kwicks, {wait: false, duration: 250, transition:Fx.Transitions.Cubic.easeOut});
kwicks.each(function(kwick, i){
start_widths[i] = kwick.getStyle('width').toInt();
//mouse is in, squeeze and expand
kwick.addEvent('mouseenter', function(e){
var obj = {};
obj[i] = {
'width': [kwick.getStyle('width').toInt(), max_width]
};
var counter = 0;
kwicks.each(function(other, j){
if (other != kwick){
var w = other.getStyle('width').toInt();
if (w != squeeze_to) obj[j] = {'width': [w,squeeze_to] };
}
});
fx.start(obj);
}
);
});
//mouse is out, squeeze back
$('kwick').addEvent('mouseleave', function(e){
var obj = {};
kwicks.each(function(other, j){
obj[j] = {'width': [other.getStyle('width').toInt(), start_widths[j]]};
});
fx.start(obj);
});
}
};
//lock and load!
window.addEvent('domready',Kwix.start);
You only need to edit two lines of code in this example: 9 and 10. Nine defines the "squeeze" width of each kwick: how slim do you want blurred kwicks? Line 10 defines the maximum width of a kwick, which you'll likely want to be the full width of your image.
That's All?
Absolutely! Your navigation goes from...
...to...
Thanks for this. I’ve followed and used Mootools since it was just Moo Fx (I think – the memory’s not what it was) and they always seemed lightweight, easy to use and fast to me. Just as much so as jQuery, yet that’s all you hear about from designers and developers these days. “I tried Scriptaculous/Dojo/Ext.Js but I prefer jQuery.”
Is there something they know that we don’t or is this purely a Mootools marketing issue, do you think?
@evilhuman: A little of both. jQuery has “evangelists” on the team while MooTools has the “use it if you want” attitude.
They’re both great javascript frameworks — I simply prefer the Moo!
I think a lot of developers don’t realize that “the Moo” has evolved far beyond an effects library. That’s what it was when I had first checked it out, and it wasn’t until very recently that I discovered that it had become much more.
Yeah its a lot more these days. And David, I agree, jQuery is good, and similar in a some ways, but Mootools has the edge for me. In fact, in my head I class jQuery and Mootools as the same “sort” of framework, as opposed to the others out there which don’t seem as efficient in my limited exposure to them.
I totally love this effect and I have implemented it on several websites i’ve built. I guess you beat me to posting it!
Oh yeah, did anyone mention that this degrades perfectly?
@Eric: Don’t let my post stop you from posting it on your site!
Is this using the accordian effect?
@Mark: Nope, the accordion is a different set of code.
I’ve been playing with this recently, and to be honest, it’s more powerful than this.You can make it SEO friendly, you can use the images/text as content (not hiding it from view, not using CSS). If I’m suddenly blest with free time I may have to do a proof-of-concept to take your example up a notch! :)
@keif: I wanted to provide a really simple example for those that don’t need a lot more. I look forward to reading what you put together!
@David: No worries.
I think someone should put together a multi-line version of this. Maybe I could do it after this weekend. At some point that might get difficult to use for a user though.
I’m so glad to see MooTools on here. I used a few of their effects on a couple of my sites. Very easy to get up and running!
Great job, I’ve already seen that kind of menu but not like this one. I loved the space that you’ve left in the photos, so you can read it :).
Feel free to post in my blog.
See you on the next post, I’ve you in my RSS reader :)
Gotta love the Kwicks. I came across the MooTools library ages ago and I implemented this quite early on in a project I’m working on- http://am0.co.uk/testinggrounds/martin/ is the link, and it has a fantastic visual presence on the front page of any website.
@alex: it still falls in the trap of using images for content. I’d replace that image with text.
This is my QUICK AND DIRTY mock-up of what I mean – there is still a LOT of tweaking that could be done to it, effects to be added, etc. etc. but I just wanted to see about duplicating it withoutresorting to background images.
http://ikeif.net/mootools/beatles.html
It’s acting funky in IE6 (probably CSS issues). It’s also using mootools 1.1.
This is really sweet. I am just starting to learn javascript and programming in general. After a day of poking around tutorials, starting and ending with this one, I was able to recreate this menu. My biggest difficulty was figuring out where to put the javascript, whether in the head section or in the body section or as a separate js file. I was able to get it working by adding the script tags in the head section or as a separate file without them.
Thanks again! I’m looking forward to being able to (maybe) implement all the ideas I have for this and mootools in general.
@Valerie: Here’s one thing to keep in mind when it comes to MooTools and other javascript frameworks: make it your goal to keep all javascript in the header.
Is linking to an external file preferred over putting the script in the header?
Thanks again.
@Valerie: I get as much “library” javascript into the external file as I can for caching purposes. Some things need to be within the top of the page though. My previous comment referred more to using MooTools’
addEvent('mouseenter')instead of the element’sonmouseoverattribute.Hope this helps!
Thanks for the clarification and for your time. You’ve got a lot of great info here and the site design is great.
Now back to reading Bulletproof Ajax:)
Pretty cool effect!
Unfortunately, I tried to center the
background-imagein the ‘s but Firefox messes it up when you enter an item from ‘the right’. It stretches the the right-half of the image. Any clues how to solve this problem?I have another question: is it possible to add a
class="selected"to an item? I’ve noticed that it gets aclass="active"onMouseOver, but the script overrides any inline classes of this kind.Thanks.
@Korjuin: Can’t give any analysis without a link — have an example somewhere?
David,
Here’s an example.
http://demo.7u.nl/tmp/navtest.htm
Thanks.
korjuin
@Korjuin: Nice work! It’s a little glitchy in Windows/Firefox, but nice job.
Thanks,
That’s the thing with Firefox. When you hover on an item, wait ’till it’s fully stretched and then select the item left of it, it tends to stretch the right area of the image instead of keeping the image centered.
Any idea how to tackle this?
@Korjuin: No idea — simply seems like a browser issue to me.
@David,
Okay, well centering is nice but not necessary for me.
Another question: is it possible to make one item ‘selected’. So, when I’m on page #4, nav-item 4 is fully stretched from start?
@David,
I managed to add something to script so that one item is ‘selected’ when opening the page ( see: http://demo.7u.nl/tmp/navtest.htm), but once you’ve rolled over another item the selected-mode doesn’t return to its original status.
The jquery script overrides it.
Any idea?
Is there a way to make this bad boy default to one image being “open” versus another? I’d like this to be my main nav and have different things “open” by default as the year goes on.
That is, for three months it’s “George” and three months after that it’s “Paul”.
@Mike: Good question. I’ve done this before, but don’t remember exactly how I did it. I believe you want to start the “featured” element’s CSS class (“#kwick .paul”, for example) to a wider width and the others to a lesser width. They should snap back to that original position.
Hi,
Need some help, I am trying to get the kwicks to work, I have copied and pasted the information provided and changed necessary requirements but still cannot get it to work. Apart from the javascript provided do I have to attached another java file?
Kind Regards,
Gareth Hughes
@Gareth: You need the MooTools library from mootools.net .
Can you please tell me what I am doing wrong? I uploaded the mootools to my server, and I thought that I had inserted the code correctly, (using the code from the demo). I think that I’m doing something wrong with the math (width and height )of the images?
http://counterpunchtrading.com/
Hi,
Is it possible to use html content instead of images?
Denise
dear david
thanks a million for your excellent tutorial. based on your explanation and the former mootools-frontpage, i developed a slightly different flavour of the kwick-menu. instead of a fixed width, i needed each menuitem to have a different width, depending on the content. combined with a nice css-rollover-effect it works like a charm. thanks again and keep up the good work. all the best from leipzig, germany
uli
ps: if you wanna see for yourself, check out http://www.greimdesign.de (website for a furniture designer)
hıms it is script very good. i use it pictures scripts
Anyone have any luck getting this to work with a version of MooTools greater than 1.2.0? Since Google AJAX Libraries are only provided for 1.2.1 and above, I’m trying to find a way to get these to work together.
@cd: What error have you encountered?
Result of expression ‘Fx.Elements’ [undefined] is not a constructor.
Adding MooTools More 1.2.3.1 with only Fx.Elements and More components fixed the problem.
The mootools licensing looks like it can’t be used for commercial work. Am I misinterpreting it when I take that to mean any paid work? I would think that if your employer paid you to produce the website, and the site is a commercial site you can’t use mootools. Is it a commercial use if the site is internal to your company–which is a commercial concern?
@R. bruece: That’s incorrect — you may use MooTools however you’d like as it’s released under the MIT License.
Thanks.
I was looking at the accordion documentation and it said non-commercial license and I mistook it to apply to MooTools itself–but it only applies to the documentation.
I’m sorry, but coming from jQuery to tools for a project I’ve really found that jQuery has the edge… if it isn’t the documentation its the user base, if it isnt that its the fact we are using mootools 1.1 and to upgrade requires a major overhaul of a huge JS based project, if it isnt that then its the readability and simplicity of jQuery… I mean.. is it $, $$, $E, getElements, getElement (i know now but it takes a bit of digging to find out which you should be using) and the accordion plugin… omg, kill it! hahaha, just my 2 cents! =`)
Saying this, the class based stuff seems nice, and bind seems useful also… but its not much… and the documentation I find slows me down so much :( its getting labeled muletools… or pootools, when i know in my heart is anything but… just need to sort out the dam documentation!!! :|
A well, thx for you demo, it kinda shows me how to use the Fx stuff… wish there were more people like you showing how you go about using the tools…
sorry for the rant :`P
Trying to add a div containing a swf into kwicks. see –> http://turtlepens.com/about-2/ for details….the reason in doing this is that is has to include some flvs of interactive animations. Apart from a few flickers it seems to display ok in chrome and IE but the flash sits on top in firefox. Any tried to add a swf into kwicks before?
I made a menu using the kwicks plugin and it works great in Safari, but doesn’t show up at all in Firefox or IE….any reasons why not? HELP!
Im going to use this in one of my sites!
Im exited!
hi
i’m wondering what is the use of the //lock and load part?
hi
i tried copy and paste your code in fiddle, (i also made the pics link absolute), and there is one difference with what’s on your site i wish i could solve:
on your site, however quickly we get the mouse out once it touched an element, the element closes. however, on my site and on fiddle, if the mouse is removed from the element BEFORE the 250ms duration expires, the element stays open…
i really wish i knew how you did for the element to close whatever happens, i’ve been looking for one day almost now…
here’s the link of the fiddle
http://jsfiddle.net/api/post/mootools/1.4/dependencies/more/
found the solution:
it comes from the function wait:false which has been abandnned in mootools v 1.3, it has to be replaced by link: ‘cancel’ and it behaves in mootools 1.3 and 1.4 just like in 1.2