jMar"s Blog DevSmash Developer Portal

Saturday, April 12, 2008

Introducing: Kwicks for jQuery

Well despite the underwhelming response I got from my teaser post earlier in the week, I went ahead and wrapped things up. For those of you jQuery fans who have been ashamedly drooling over the perfectly simple Kwicks effect for Mootools, now you can have it too.

The Kwicks for jQuery plugin, documentation, and examples can be found at the Kwicks for jQuery Homepage.

So far I've only been able to test it in IE6+, FF2+, Safari 3 for Windows, and Opera 9. If you encounter any issues let me know!



68 comments:

DanB said...

very cool... I'll be looking for uses for this.

KC said...

thank you very much! just a week ago I had to write something simmilar on my own -- but your plugin is much better and really easy to use! :)

David said...

Really awesome implementation! Nice work!

Jeremy Martin said...

@KC
Thank you and you're welcome!

@David
Glad you approve!

Kriesi said...

Excellent work, saved my day =)
finally i am able to switch from mootools to jquery ;D

jason said...

THANK YOU SO MUCH! I am working on a site, and i wanted to use this exact effect (but didn't want to use mootools) so I'm so glad I came across this in DZone!

Lyniviel said...

Two things that i want to say:
1) Wohoooo! Very great. I searched very long for something like that, because i prefer jQuery over Mootools.
2) Please add an option to set an "opened on the start"-element and make it able that the elements stay open when klicked.

*very happy* (and excuse my bad english, it is not my best language *g*)

Lyn

Jeremy Martin said...

@Lyniviel
That's a good idea. The enhancements I currently plan for the next version (thus far) are these:
- Set a minWidth, rather than maxWidth
- Allow a custom delay for the animation.
- Allow customization of event triggers (i.e., click to expand).
- As you suggest, add a stay open flag.
- And MAYBE allow for vertical arrangements.

Lyniviel said...

Vertical alignment? Woah! That would be very very great.

Here you can see what i ment (meant? past form of mean *g*) with "stay open on click): http://www.phatfusion.net/imagemenu/index.htm
(this was the menu i wanted to have, but it is Mootools *g*)

Lyniviel said...

"edit" (wanna have an edit-button :( ): The "stay open on click" is important if you want to use the menu together with ajax-loaded content. Just as an explanation :)

Jeremy Martin said...

@Lyniviel
I understand what you're saying. And yes, "meant" was correct :p

I guess that means that I should allow different actions to be tied to different events. So a mouseover could be tied to an expand action, and a click could be tied to an "expand-and-stay" action.

There's always a struggle between simplicity of use and complete flexibility.

Lyniviel said...

I know this struggle from my work with/on PHP, it is really annoying :).

But i think it is worth it. There is nothing that would bother me (like it did, until i discovered your Kwicks) more than to have to use a "disliked" framework only because one plugin has one feature more then the plugin of another framework.

I think the idea with binding different actions to different events is very good.

Jeremy Martin said...

@Lyniviel
Perhaps then I'll just make one of the options be "bindings" which takes another object containing event/action pairs, and then I'll just document which actions are available.

Lyniviel said...

excuse me, but that was to difficult for me to understand (brrr... should learn english better).

What do you mean exactly (can you make a possible code-example, just a small snippet of the options)?

Jeremy Martin said...

For example:

$().ready(function() {
$('.kwicks').kwicks({
maxWidth: 205,
spacing: 5,
bindings: {
mouseover: "expand",
click: "expand_sticky"
}
});
});

This would require some more thought though, since events could be assigned to both the individual kwick elements, as well as to the parent ul element. My example above, then, still contains some ambiguity which would need resolving.

Lyniviel said...

Ah, thanks, now i understand what you meant(!).

Yes, such an option would be really great. I'm not good enough in coding (especially JS) to make this changes on my own... so i have to bother you with it *fg* :)

Jeremy Martin said...

No worries. The best thing for a developer is getting good feedback from the users! Those are all good ideas.

Lyniviel said...

Thanks :)

I'm a littlebit unhappy over the fact, that i don't have the time currently to test this on my weblog i'm planning (too much school these days, the... exam? (i think, it is called so) is nearly there).

But i think i will be able to... steal some time for testing this in a... not "serious" environment (only play a littlebit arround).
I'm very... err... "waiting to get time for testing" (dammit...), want to know how it behaves.
imageMenu was a Diva. The right side "vibrated" after i reduced the width to fit my design -.-

Boris said...

Doesn't work at all in Safari 3 on OSX Leopard 10.5.2

Jeremy Martin said...

@Boris
I just had a coworker test it on Safari 3 on OSX Leopard 10.4.x. It worked fine there. Are you sure it wasn't something specific to your browser configuration, or that the script downloaded successfully?

Boris said...

When I first load the example page, with the cache cleared it doesn't work, but when I reload the page then it works.
P.S.: Leopard is 10.5 not 10.4 :)

Jeremy Martin said...

@Boris
Ha.. sorry, not too familiar with macs. I made the assumption that OSX was all Leopard and that 10.5 was the latest iteration. Apparently 10.4 is Tiger... :p

That's strange problem though. Unfortunately I don't have access to a machine running that OS. Have you experienced this problem at all with other scripts, perchance?

K said...

I have the same problem as Boris on Windows XP SP2 with Safari 3.1! It works after Reload, or if i view the second example, then all works, but the first have strange behaviour see

http://img225.imageshack.us/img225/1899/kwickssafari31winso7.jpg

User Agent:
Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13

greets,
loeppel

Kristoffer said...

I have the same problem as mentioned above. It occurs in Safari 3.1 in both Windows and OS X.

Kristoffer said...

Yet another update... =)

It seems as if the problem is with Safari 3.1

It works just fine in Safari 3.0

You can download the latest version of Safari from Apple to see it for yourself.

I really hope that you manage to solve the issue =)

Jeremy Martin said...

Curses! I've been getting swamped at work lately, but I'll make it a priority to upgrade my Safari and take a look at it this week. Sorry for the delay everyone, and thanks for your patience!

btwilkins said...

This is awesome! Thanks so much. I saw you mentioned earlier that you're thinking of a vertical option... that's exactly what I'm looking for right now. Check out

www.talstone.com

I've done the vertical arrangement with MooTools, but I'm going to have to switch that over to JQuery because I'm about to implement other JQuery things on there, and apparently JQuery and MooTools kill each other.

Any ideas for a vertical arrangement?

Jeremy Martin said...

@btwilkins
That looks good! I am planning on making a vertical version of it (perhaps just as an option of the same plugin), but I'm not yet sure when I'll have some spare time to put into it. In the meantime, have you looked at any of the accordion plugins? Unfortunately it's not quite the same, but it at least would get you close...

As far as I know, jQuery and Mootools should be able to get along. I would just avoid using the $ alias. However, I wouldn't really recommend using both at the same time anyway since that seems like overkill.

Anonymous said...

Works great but can't get the example 5 to have text in my own sample in ie7.

Other than that pretty cool.

Jeremy Martin said...

@Anonymous
Can you describe your attempt at example 5 in any more detail? Considering that the provided example works in IE7, I'm inclined to think that it might not be the script?

Nick Day said...

Hi,

I need to get a vertical version of this working quite urgently and have ran into difficulties.

I've changed all occurrences of "width" to "height", and "left" to "top" - and it does work as it resizes the boxes to the correct proportions. However, the "middle" boxes have problems with their "top" value on the following lines, as they move down into correct position...

See: http://www.njday.com/kwicks for an example.

kwicks.eq(j).css('top', prevHeights[j] - ((prevHeights[j] - preCalcTops[i][j]) * percentage) + 'px');

kwicks.eq(i).css('top', prevHeights[i] - ((prevHeights[i] - ((i * normHeight) + (i * o.spacing))) * percentage) + 'px');

^^^ Those are the 2 lines which I think are causing the issues. It also only seems to work in Firefox at the moment.

Any help you could give me would be much appreciated!

Cheers,
Nick

Jeremy Martin said...

@Nick
I just whipped up a vertical version of it and tested it in FF2, IE6+, Safari 3, and Opera 9. Would you prefer I just send a zip to the address listed on your site?

And thanks for making me look at that - the conversion is less complex that I thought it would be, so I don't think it will be too difficult to eventually include it in the same script.

Nick Day said...

@Jeremy - wow, great, thanks for looking into this! Yeah if you could please send it to the address on my site that would be great. Thanks again!

Jeremy Martin said...

@Nick
Done!

Patrick said...

any fix for Safari 3.1 yet? for some reason for me, when i clear the cache it works, but when i refresh it the issue comes back. Oh and is there away to have the first panel open start?

Jeremy Martin said...

@Patrick
Good news and bad news. The bad news is, no. The good news is that I expect to have some considerable time this coming Monday to work on it. My goal for Monday is to add the following features:
- Allow mouseover or click as the trigger event.
- Add "accordion" mode which will cause the panel to stay open. The initial panel will be user definable.
- Add vertical mode.
- Let user specify minWidth/Height, rather than maxWidth/Height (this should allow for a more typical accordion experience).
- Figure out that dang Safari 3.1 bug!!!! If anyone else can look at that one I would appreciate it, I'm stumped so far!

Jeremy Martin said...

Kwick Update (haha...):
Well I hoped to have the next version out by now, but a few family situations came up that consumed most of my off-work time. Anyway, with that said, Kwicks 1.5 is ALLLMOST done! The following new features have been implemented thus far:

- The "trigger event" can now be a mouseover OR a click.
- There is now a "sticky mode" that causes the selected kwick to remain open.
- The "default" kwick in "sticky mode" is user definable.
- Kwicks now supports a vertical orientation (more like the typical accordion)
- Users can now choose between setting the maximum width/height of the "active" kwick, or setting the minimum width/height of all the inactive kwicks (if that's unclear, just view the new demos after the release).

TODO for this release:
- Give the Safari 3.1 bug a serious look over.
- The code needs some slight reformatting that will allow it to be packed.
- There are a couple obvious places to optimize the animation I'm going to take a look at.

Thanks to everyone for your excellent suggestions and for your patience!

Jeremy Martin said...

Safari 3.1.1 Bug
OK - I've found the cause of the Safari 3.1.1 bug. In short, *most* browsers load any external style sheets BEFORE $().ready() is fired. However, this is not true in Safari 3.1.1. I have submitted this as a possible bug to the jQuery team and will let you know of the outcome.

In the meantime, I have found two "quick fixes":
1. Instead of running the plugin in the $().ready() method, do it after the document.onload (which waits for the CSS).
2. Move your kwicks related CSS into the head of the page that contains the plugin.

Neither of these solutions are "optimal", but both will work. If it turns out that this is not a jQuery bug, then I will likely add a few more plugin options that will remove the need for the CSS at $().ready() time.

Brian said...

Love you plugin, really waiting for the vertical version.. any idea when the next release will be?

Jeremy Martin said...

@Brian
Well no guarantees, but I'm thinking Monday is looking pretty good...

Anonymous said...

Just love your script and being waiting a while for the vertical accordian menue. I have tried lots of different scrips (like mootool jsscripts, and dhtml) and your script is the best, what i found on the internet. You programming skills seem to be on a high level. Keeping the content in HTML, the styles in CSS and controls in Js and jquery - just perfect. I am very interest in you demo script.

Anonymous said...

Hi Jeremy - stupid me, forgot to write my name. Marc Jansen from Germany and excuse my english. I would be very obliged, if you could send me the script, but i am willing to patient and wait till monday. thanks again for the script.
Marc Jansen
majansen (at) gmx . de

Jeremy Martin said...

@Marc
Thanks for the complement - and don't worry, your English is more than understandable. I do try and maintain separation of concerns as much as possible, although I'm sure I do overlap a little more than necessary at times.

If you REALLY want the script ASAP, I'll cheat and tell you that it is already online and can be found here: http://code.google.com/p/kwicks/source/browse (svn > branches > v1.5 > Kwicks). However, the documentation and new examples will likely not be live until Monday or Tuesday... but that doesn't prevent you from checking out the code. It shouldn't be too hard to figure out how to use the new options.

Thanks again, and be sure to check back soon for the official release with documentation and all!

Anonymous said...

Hi Martin, thanks for the fast reply (just dont want to steel your precious time). I will be taking a look at th script this afternoon. Soon as the page is finished, i will send you a link. THANKS AGAIN, i am just happy person.

Marc Jansen

Presley Design said...

1) Great plugin!

2) I am having some trouble implementing it on my site. When I insert an "a" tag into the expandable "div" the entire "div" disappears... Thoughts?

http://presleydesignstudio.net/pds/portfolio.php

See the first item for an example of this effect. Thanks again for this great plugin!

Anonymous said...

Hi Martin, got it working - yeeeppiiee. If even seems to work in safari on windows, i will check it out how it work on mac os x (safari, firefox). I will post the link when i finished the design. Just dont be shocked, when you the see the design. According to my friends, i seem to bee colorblind and not a very arty type of person. Thanks a million.
Keep up the great work.
with kind regard out of germany
Marc Jansen

Jeremy Martin said...

@Presley Design
The first thing I noticed about the misbehaving element is that there are several empty anchor tags in there. Since these anchors have display:block in the css, perhaps these empty anchors are pushing the intended content out of sight to the right? Each individual kwick element has overflow:hidden, to keep them from expanding/wrapping/scrolling.

I'd have to do some actual testing before I could say for certain, but I'd start there if I were you.

Jeremy Martin said...

@Marc
Excellent - beta testers! And please be sure to send that link - I greatly enjoy seeing how creative some of the plugin users are.

Presley Design said...

Awesome! That's exactly what it was. Those anchor tags were leftovers from my original implementations. I don't know how I didn't think of that. Thanks a bunch!

Jeremy Martin said...

@Presley Design
No problem - four eyes beats two any day...

terminals-blocks said...

I'm so glad I came across this in DZone!

terminals-blocks said...

And MAYBE allow for vertical arrangements.

Ed said...

Great site, lots of information. When an image is slid open on mouse over, could something be added to allow the user to click on the picture and be sent to another page?
So far have the images open up on click, but that is it. Looks great though.

Anonymous said...

I actually thought this was an amazing post, however, I can't seem to get my ANCHORS to respond to clicking. Is there something I'm missing? I see in the "http://www.kriesi.at/" site, he simply creates the links and shifts the actual text to the side so it isn't visible. Well this doesn't result in success for me. I either must leave it on the screen overlapping everything, or do without links. And, of course, kwicks are no good unless you can click 'em :P.

Andeh said...

Yeah im the same, are we missing something?

Anonymous said...

I am having the same problem. Is there any way to make the image into a link?

Anonymous said...

Hello Jeremy,

i love your "jquery-kwicks-script" alternative version to mootools. Goodby mootools, welcome jquery =)

Now i have one question...

How can i handle the following situation:

I would like to create a horizontal kwicks-menu.
Each navigation-button (div/li) with a fixed px-width should expand by mouseover to the right up to a defined max-width and minimize to the source-wide (starting-width) when the mouse leaves the button (div/li).

I would be very happy if you could give me a solution for this "problem".

At this point I send a great "Thank You" to you.

Greetings, René

xxxxiangxxxx said...

Hi,

Is there anyway that I can embed links into the images, so it will be a real menu?

Thank you!

Briana said...

I love this plugin. So easy to use...tonight I'm wishing I had one more feature though...would like to hook into an event like, "onOpen" or something like that. Have some custom animations I would like to do with the content, but only when it opens. Anyhow, just my 2cent wish. Great work!! Thanks much for the contribution

Samantha said...

Hey I was having a similar issue myself, but from using a previous menu i found that by adding in
.kwicks li a{
height: 400px; (set to correct height for you)
text-indent:-9999px;
outline:none;
display:block;
z-index:2;
cursor:pointer;

}

It was possible to add in 'a' tags successfully into the menu and it worked perfect!

Anonymous said...

Thank you Samantha. That is EXACTLY what I was looking for.

masindohk said...

Drupal user can have the module for jquery kwicks at http://www.drupalstore.info/content/jquery-kwiks-menu-module

Anonymous said...

Hi there, I'm playing around with the horizontal menu that slides on click. It works great! I have a question though, is it possible to add a link like "next" and "previous" that would slide open the next section? This would be in addition to clicking on the li of the next section. In other words, a link within the open section that would close it and open the next one... or previous one?

Based on something I'm trying to mock up, this would be a really useful feature, i think. I just can't wrap my head around how I would trigger this action from a link in the selected section.

Thanks!

Profesionalni Sminker said...

Hey Jeremy,

Great work with this.
But, I have a little problem with it.
Sometimes when I load a page, instead for 1000px it make a 2 or 3000px and I can only see home page and when I hover over the home it drags from somewhere another button.

I don't know if this will help but, in your code, you don't tell it its a document like:


$(this is empty).ready(function() {
$('.kwicks').kwicks({
max : 400,
spacing : 0
});
});

and when I use this:

$(document).ready(function() {
$('.kwicks').kwicks({
max : 400,
spacing : 0
});
});

it seems to solve it. Can you tell me if this was the problem?

Sorry for the mess :)

Václav said...

Hi, thanks for your great script. It works fine in every browser except of Safari. Any idea what to do? Thanks

http://img714.imageshack.us/i/safariu.jpg/

http://img842.imageshack.us/i/chromes.jpg/

Anonymous said...

Thank you very much Samantha!!! Your css info helped me to get the images linked.

Anonymous said...

Amazing script and just what I was looking for. Thank you!

The only issue I can't seem to resolve is the all the images are displayed for a few seconds as the page loads. This seems to happen for all browsers.

Any tips?

Thanks in advance

:-)

Unknown said...

I was getting some transition jittery-ness in FireFox. I had to remove this CSS code from my template to restore the smooth transitions (took forever to location the offending line): a:link { -moz-transition-duration: 0.3s; }