Saturday, April 12, 2008

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.

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.

@LynivielThat'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.

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.

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.

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

@BorisI 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?

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.

@btwilkinsThat 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.

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

@PatrickGood 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!

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!

Safari 3.1.1 BugOK - 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.

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.

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 Jansenmajansen (at) gmx . de

@MarcThanks 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!

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.

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 germanyMarc Jansen

@Presley DesignThe 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.

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.

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.

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

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

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!

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.

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:

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; }