jMar"s Blog DevSmash Developer Portal

Tuesday, June 17, 2008

Kwicks 1.5 Released!

Kwicks 1.5

Well I'm happy to announce that I have finally wrapped up the v1.5 update to the Kwicks plugin. Kwicks 1.5 builds upon the original release in several big ways - here is a summary of what's different:

  • Vertical Mode!

    This was a common request, so there was no way I could leave it out of this release.

  • Min vs. Max

    The previous release required developers to specify the "max" width of the active kwick. As of v1.5, developers may now opt to specify the width/height of all of all of the non-active kwicks instead. This feature doesn't really add new functionality, but is merely offered as a convenience.

  • Sticky Mode

    When sticky mode is enabled, one kwick will always be open. This allows for more of an "accordion" type experience.

  • Custom Trigger Event

    Kwicks 1.5 lets you specify the trigger event for the animation. The default is still 'mouseover', but many users had wanted to use 'click' in instead.

  • Smoother Animations

    This release I did some refactoring of the code behind the animations. Several calculations were moved outside of the inner loops allowing for a less tasking, and consequently smoother, animation.

  • Packed Script

    While this release still comes with fully commented and readable code, it also comes with a packed version which is far better for production use. The new packed version is only 2.4 KB, which is actually smaller than the original release.

All in all this is a huge addition to the original version - many of the excellent suggestions I have received were addressed, and I hope that you will find the added flexibility more helpful than confusing. I always believe simplicity is key, so I have tried to keep that in mind as the new features were added. So what are you waiting for? Go check it out!



131 comments:

Anonymous said...

Very well done, buddy. The long awaited release is here, it's great! Congratulation ! . THANKS a BILLION, no more QUADDRILLION. And the amazing thing about it, it runs nearly everywhere. Redmonds badbuilds Internet Explorer (works), Apple designer Safari (checked that), Swedens Opera (did it). This script saved me many hours of programming. Excellent work doing it in landscape (horizontal) and skyscraper (vertical) mode with fading as well, perfect.
It just rocks
with many kind regards from germany
marc jansen

Jeremy Martin said...

@Marc
Thank you for the glowing review!

Anonymous said...

PERFECT TIMING!

Anonymous said...

Hi Jeremy,
my homepage is nearly finished, but I have got a silly question.
Is it possible to put kwick_2 as sticky, instead of the the default sticky, where kwick_1 is only open up. I plan to have 10 kwicks (or pages) and kwicks 1-10 are open (sticky) on each different page.
hmm I hope you understand my question.
with many kind regards fair away in Germany
Marc Jansen
Thanks again

Jeremy Martin said...

@Marc
Absolutely! One of the options is defaultKwick, which is a zero-based index of the initially "sticky" kwick. So if you added:
defaultKwick: 1
you would be setting the second kwick to be initially expanded. You can see the details all of the available options in the documentation.

Anonymous said...

OOhh I apologize (how embarrising). Normally when a newbie aks a stupid question, the answer should always be RTFM. I should have read the documentation before asking something so trivial.
Thank you.
The speed at answering my question is amazing. That what I call fast customer support.
Nice day
Marc

Jeremy Martin said...

@Marc
lol no worries. You were an early adopter anyway, so the documentation wasn't even out yet...

Presley Design said...

Once again, awesome project! I am always amazed at what other people are capable of making JavaScript do.

Also "once again", I am having issues with making a page work with your script.

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

Basically, I have a page with 5 items. I want them to always be at least 45px wide and at most 620px. On page load I want item 0 to be visible. I want them to be "sticky" and function onmouseover. If you get a chance, would you please take a look at the page and see if anything is glaringly obvious to you (like last time, haha). Thanks a bunch!

Jeremy Martin said...

@Presley Design
I noticed that you're using both max and min in your options. In the documentation I specify that you can't use both at the same time. In a nutshell, you set exactly one of them, and then the other is calculated based on the remaining space.

This method admittedly doesn't make a whole lot of sense in sticky mode, since that "available" space is determined by the size of the kwicks set in the css. That's probably something I should address for the next version...

Anyway, in your case, I would set the width in the css to 160px (((4*45)+620)/5), and then use the following options for the plugin:
min : 45,
spacing : 9,
sticky: true

You were also using defaultKwicks instead of defaultKwick, but either way it is unnecessary since the defaultKwick is already 0.

And one last note, the numbers I gave you above don't calculate in the spacing since I wasn't sure whether you meant 620px plus or minus the spacing. If you want to include the spacing, then you should use the following formula instead: ((4*45)+620+(4*9))/5, which will give you approx 167px.

Wow... that's a mouthful...

Presley Design said...

Well, I feel foolish... But, your advice worked perfectly!

Also, do you have a "donate" button on your site anywhere?

Thanks again man!

Jeremy Martin said...

@Presley Design
You're quite welcome - and I do now! (check the left hand column) By the way, the site is looking good!

Anonymous said...

Hi Jeremy,
I could kill Microsoft for making such a buggie beta Program. Why cant the stick to normal standards. I have lost thousands of hour trying to make simple things work (on microcraps or Microhards browser). The project could and would have been finished, if the z-index worked in IE6 and IE7. Now I am spending hours trying to find a work around to show the kwick effect and submenus (css and java) and round buttons (css and java). Try to put z-index to a negative value, like z-index:-1 but FF hides the elements. Sorry my buddy, it seems that some overbloated, non-standards-respecting, cheap-programming, self-important company is preventing me from publishing my homepage. (I cannot neglect more than 50% of my users).
But I wont give up.

Pirates:
Ahoy mates! Microsoft Ship ahoy! Avast! It be the black ship Internet Explorer! Arrr! This be bad ship for me! The booty were none and we are marooned. Shiver me timbers! I will be rigging the code with endless time and walking the plank! Sink me!
Blimey! belay Microsoft cant stop my. Dead men tell no tales.

OK enough pirate talking, back to work.

yours sincerly Marc Jansen

davidwalsh83 said...

Nice work Jeremy! I'm impressed with your skills!

Anonymous said...

Hi Jeremy, i have seem to solved the z-index bug problem with ie6 and ie7. It may not be elegant or java and css confirmed way, but it seems to work without known side-effects.
The IE6 (and IE7)z-index, bug happens when you have two different containers (or layers) and try to give them z-index values. Apparently IE 6 (and IE 7) seems ignore the value, when the parent aren´t absolute (relative). Especially when use drop-down menus, the menus disappear behind the other layers.
OK i hope you understand what i am talking about.
The solution is to give kwick a dummy z-index, which seems to work in IE and FF

.kwicks {

list-style: none;
position: relative;
z-index: 0 !important; z-index: -1;
margin: 0;
padding: 0;
}


all i did is add the attribute or z-index

z-index: 0 !important; z-index: -1;

maybe i been to quick with my solution, but till know it seems to work.

good´day my buddy

Marc Jansen

Anonymous said...

JEEEZZZUUUSSS,
do i hate that company out of redmond. No my trick does not work. It just causes Kwick not to work.
The Submenues have to be changed, so that z-index appear above the kwick-buttons.
Got it to work an my homepage, but i do not have the solution for everyone.
sothing like

if ie6 or ie7 true, then go to hell and format c:/ or better fdisk.

with frustrating regard out of germany.

Marc Jansen

Jeremy Martin said...

@David
Thanks for the kinds words... you get a free link :p
@Marc
I'm sorry to hear you've had so much difficulty with the z-index layering. IE certainly breaks from the standards in a few places on that one. If you're interested in a short read, I'd recommend this article.
It does a good job of summarizing some of those frustrating inconsistencies and addresses some of the common solutions. Also check out the sites that he mentions in it.

Anonymous said...

Hi,
My name is Rúbel Mujica, I am from Venezuela and I work mainly as a web developer.
I tried this script and I found it great!
But in IE (v7) I was getting an "Invalid Argument" error. I thought it has to do with my programming and the combination with other jquery plug-ins I was using, but then I noticed the same error in the example page in the last of them.
The error happens once you have "expanded" any of the letters from the word LOVE and rolling over the text shown.
I read an article about this error and found out that one of the reasons is because IE produces this error when is asigned a NaN to a css property.
With this in mind I made some tests and found, that that was exactly what was happening: in some point, one of the css 'width' or 'left' property assignments were receiving some expression that produced a NaN, causing the error in IE.
I also discovered that this NaN was being produced by a 'division by zero' when calculating some "percentage", so I modified the script and check the denominator of the division, before making it, and if it happens to be zero, I assigned 1 to percentage instead of the division (I'm not sure, but I think that when this condition happens, the percentage should be 100%)
Specifically the changes were made in two points:

line 114 - var percentage = (maxDif!=0)?(now/maxDif - prevWoHsMaxDifRatio):1;
line 142 - var percentage = (normDif!=0)?((now - prevWoHs[0])/normDif):1;

(Originally the assignment was being made without any condition.)

After this change, the error in IE seems to be gone and everything else is working perfectly.

I don't know if what I did is right, I don't understand very well the semantic of the "percentage", in fact also tried with the value of 0 (0%) and all wnet right too.

I hope this can help to others having the same error and to make the adjustments to the script in a new release of it.

Congratulatios to Jeremy for such a great script, thank you very much.

Jeremy Martin said...

@Rúbel
Thank you for taking the time to let me know about this - and you're absolutely right... somehow I forgot to add a check for that. I'll do some testing and see if it justifies its own bug-fix release or if it can just be included in the next feature release. Thank you again!

asnipofgoodness said...

Wow jeremy just found your blog, and can I just say....TOTALLY over my head?!?! anyway just wanted to say HI, if you can even admit you know a simpleton blogger like me!
glad you guys are OK!

Jeremy Martin said...

@Asnips
Ha... well if you started blogging about the ins-and-outs of real estate, I'd probably be lost as well. I didn't realize you guys had a blog too... I've just subscribed.

Jeremy Martin said...

@Everyone
For those of you who have been tracking this thread, Kwicks 1.5.1 has just been released and fixes the Invalid Argument bug. Thanks for all the great input!

Petr Snobelt said...

Hallo, is it possible to use horizontal version with subitems as dropdown menu ?

Thank you

Jeremy Martin said...

@Petr
Technically speaking, there's no reason that you couldn't achieve that effect. The Kwicks plugin itself doesn't support this functionality, but if you're familiar with JavaScript, you could integrate it with several of the existing drop down menu solutions out there - however, I anticipate that a lot of custom tailoring would be necessary.

Humbert Codina said...

Hi,

First of all I wold like to thank you for this awesome plugin. I was expecting a long time for jQuery's version mootools kwicks.

I think there is a problem with the latest version (1.5.1) with IE6+ when the doctype is XHTML STRICT.
I found the problem at line 28 and I would like to suggest my solution:
var kwicks = container.children('li');
If you miss the "var" declaration you get an error in Internet Explorer.
I hope sombody will find this usefull.

GodsDead said...

Ausom, thaks for this!
although it still wont work in IE!! at all! i am using 1.5.1, where can i look for fixes?

Jeremy Martin said...

@Humbert
Thanks for pointing out that issue! The fix will be included inthe next release.

@GodsDead
Can you let me know the exact version of IE you're using and what operating system? Do none of the examples work for you, or does it only fail on a particular example(s)?

Anonymous said...

sticky version does not work in IE6

Leon said...

Hi Jeremy

Re: Humbert's IE6 fix (var kwicks = container.children('li');) for line 28, could you clarify exactly what needs to be changed?

I have release 1.5.1 and am experiencing the same issue with IE6, but, having checked the js, line 26 is exactly as suggested by Humbert. Am I supposed to make amendments to this in the jquery.kwicks-1.5.1.js file itself? And if so, what amendments?

Awesome work, btw.

Leon

Leon said...

Hi Jeremy

Ignore the above post. I have resolved the issue. Line 27 is missing a 'var' declaration. It currently reads:

container = $(this);

but should read:

var container = $(this);

This may be what Humbert was aluding to, so apologies if I'd misunderstood.

Cheers
Leon

capnhud said...

Is it possible for this type of menu to work like this. What I am referring to is using the vertical aligned version, could it be made to do something like the menu on Wilson.

Yes I know that is flashed based but I have been searching for something similar using a different framework and your vertical version appears very close.

ivan said...

Hmm..
I am havening some problems with vertical Kwicks when I need, let's say, 10 of < li >

Our container < ul class="kwicks" > stretches as long as the page itself is long, leaving the first < li > at the top; then huge gap; the the rest of < li > at the bottom.
Have anyone else experience this?

SKMD said...
This comment has been removed by the author.
SKMD said...

Well, thanks buddy. I have to admit, its really a good piece of work. Thank you for sharing it.

as always, IE must complain about your code and refuses to obay :)
in my case . I'm devoloping a CMS. and the admin panel side are all complicated ajax.
I needed your plugin to use it instead of jDrawer that has a clear issue in IE.
when I integrated your plugin (Which was a pretty easy) in my CMS and with a few css lines of modification. I was surprised with result. But not too long, I discovered that your plugin doesn't work in IE and an error is generated about line 24.
I tried to open your examples in IE, it works like a charm. so the problem is from my page !!. it took me all day long to discover what preventing it from working. at the end, I found that a div in my page that has an id="container" was making all that troubles. I assumed that you have used it in your plugin.
I just wanted to share my case because "container" is a widely used name in html world.

Thanks again for your plugin.

Anonymous said...

Great plugin! I've combined with coda-slider. However, I need a way to programmatically select a tab/panel and expand without the user actually clicking it (i.e. a link). Any ideas?

-Dg from Denver

Anonymous said...

On my side var container = $(this); returns an error in IE7 so changing for another name like var oTarget = $(this); resolves the problem. Looks like container could not be used but I have no clue about this behaviour.

Blaise

Anonymous said...

It looks like I need both a min and max value. I previously used mootools and want an affect like this one:
http://orrefors.dualix.no-ip.com/moo/

James said...

To get this script to work in IE7, check Leon's post on Sep 5, 2008.

You will need to modify line 27 of the .js file, from:
container = $(this);

to:
var container = $(this);

Otherwise, DO NOT use any elements in your markup called 'container'.

I had a wrapper on my page [div id="container"] and the script failed.
I renamed it to [div id="xcontainer"] and the script ran fine!

Leon's post is over a month old and it would appear this simple fix has not yet made it into the official release.

This may catch out many newbies who will download the latest version and expect it to solve the issue.

Other than this little bug, this is a great script Jeremy. Thank you!

Arturo said...

Hi Jeremy,

Awesome script! Their is only one thing I would like to do. Can I have the drawers open to the right instead of the left (default)? Is this possible?

Thanks a bunch!

pete said...

Excellent script. I have encountered a JS error in IE when trying to use two kwicks on the same page.
Have you seen this issue before?

The IE fixes listed above don't seem to solve it. Any tips?

pete said...

sorry. false alarm. i did not set a height for the li element.

Leo said...

Thank you for this marvelous jquery script. Very, very good work.

Dominique said...

To fix jitter (background of page) in Internet Explorer between LI's after the first one i added a negative space value:

$('.kwicks').kwicks({
min : 54,
spacing : -5,
isVertical : true,
sticky : true
});

ronski said...

Thanks for the great plugin! And special thanks for user "SKMD" for discovering the ie7 container problem. I was stuck in there few days :) I wasn't clever enough to solve the problem myself.

ritchie.chad said...

@James Thanks for the tip to rename div="container" to something different. I used div="page-wrap" . Works fine in IE now. Thank you, Thank you, Thank you


Jeremy, awesome plug-in. You Rock!

Chad Ritchie

Anonymous said...

Thanks a lot for this nice plugin, I really love it!

Is there a way to programmatically expand a panel, for example by hovering a text link?

Any help welcome!
Dan

Henk said...

Dear Jeremy,
I am trying to use multiple kwick sets on a single page.
The web designer's idea is that clicking for instance the second kwick of a set opens the second kwick of every set (all in sticky mode). So what I need my code to do is call the function in your script that is triggered by the mouse click on the initial kwick. So what part of your script do I need to call to accomplish this? (I hope I am making myself clear here.)

Thanks for any answers, and a great script!

Regards,
Henk

ranjan said...

Hi j!

Was trying to use the script where my html did not match the required html (a list).

I had to modify the script, the mods are as listed below:

1. In defaults I added children: 'li';
2. Modified var kwicks to var kwicks = container.children(o.children);

Hope this gets included in your next release

Dan said...

Hello Jeremy and everyone,

I would like to achieve the following behaviour:
- one kwick open by default (needs sticky to be set to true) AND
- kwicks automatically returning to their original position onMouseOut, including the default opened kwick.

Additionnally, how shall I proceed to create a fading effect using jQuery on the content of a Kwick when it's hovered ?

My programming skills are very limited, so if anyone could suggest a way to do this, I'd be very grateful!

Thanks in advance,
Dan

Iain said...

Hello,

First of all I just wanted to say this is a really nice wee piece of code. Thanks for making it.

The one thing I would like to do which I can't work out is the question which Dan just asked - is it possible to have the kwicks automatically return to their original sticky position onMouseOut, including the position of the default opened kwick?

I can't see this option anywhere. Am I being stupid?

Thanks
Iain

Pablo said...

First off, I'd like to say GREAT JOB! This is a fantastic and clean script!

I have 2 feature requests, or at the very least, some help as to how we can implement these features into your script:

1) Add a delay upon mouseover before the objects begin to slide. Maybe if it can even make use of the hoverIntent plugin (http://cherne.net/brian/resources/jquery.hoverIntent.html).

2) Auto-Play through the animations. For example, #kwick_1 would open and stay open for X seconds and then #kwick_2 would open for X seconds, and so on...

thanks!

Paolo said...

Very, very good work!

I was thinking about a little and useful implementation...
Could you add on the option declaration a couple of callback such as "onBefore" and "onAfter" ("a la" serialScroll for example). It will make easier to add interaction before and after animations!

thank you!

Paolo

Pasquale said...

Is there a way to get the kwicks panels to auto-rotate until the user interact with the panels?

BTW, this is an awesome script.

Thanks.

Data Recovery said...

Hi All,

Can anybody please assist to implement the following...

kwicks automatically return to their original sticky position onMouseOut, after user finishes moving mouse over the menu.

Anonymous said...

does not work with google chrome

Anonymous said...

works fine for me in Chrome. I'm having the problem in IE7 - no effects. :(

Thanks so much for this great plugin!

Anonymous said...

@ James -

Thanks for making the solution to the IE7 problem very clear!

masindohk said...

Is this script compatible with jquery 1.3 or just 1.2.3?

because loading both version in drupal 6 can kill other drupal module that uses 1.3 version.

oliver said...

Thanks for this great script, I've really enjoyed playing with it.

For my own purposes, I added submenus which appear on the active kwick. The items in the submenu change colour on mouseover, and I found that the mouseover event for items in the submenu was re-triggering the kwick expansion, so mouseover-ing a submenu item while the kwick was still expanding caused the easing to restart and look like the kwick had jolted. This may be too specific to be useful for anyone, but my fix was to add the line

if(kwick.hasClass('active')) { return; }

to the start of the animation function kwick.bind... between lines 97-98, to avoid re-triggering the animation.

Anyway, thanks again,

Oliver

Perfectio Contempo said...

Hi sowi to be a bother, only recently started web development (it quite a bitch though)but this kwicks thing is kewl. I have it on a test site of mine and tests fine in safari and firefox, but i can not get it to work in ie (7 and 6)
in the example page of the script I notice you do not use any div id's or classes before the kwicks class, I have not fidlled much in the java cause I think the kwicks class becomes a function, so I really do not want to go mess that up...My point is that if I were to put a header id before the kwicks class or any thing such as a navigation bar or container id or class , the kwicks does not work in ie at all, the moment I take the id's and such away it works.

Might be a stupid mistake as I am still learning css but it does not make sense that it would work in firefox and safari but does not register the kwicks class in ie anymore.

Anonymous said...

How do I add links to my menu items?
The menu is very slow, probably because I am using a background image, is there any thing I can do to solve this?

Will Jackson said...

Hi mate, your plug in for kwicks is great, kudos! do you have any plans to update it for the latest jquery build?

Marco said...

Hi, is avery great Modul.
I found a bug on IE8.
container=$(this);
right:
var container=$(this);
Marco

Edgars said...

Thanks for great script!

And thanks to user SKMD for "container" tip!

Onat Yigit Mercan said...

hello,

there is a problem with ie8. im using packed version of the library. container variable should be declared with 'var' prefix. it fixes the bug. btw great job!

Martha said...

Great plugin! I had MooTools but needed jQuery for compatibility and this code made it possible.

Special THANKS to Marcos (October 15) for giving us the tip on adding "var" which makes it work on IE...

I couldn't get it to run on IE until I saw Marcos' comment.

Anonymous said...

Hi,
Using this awesome script in combination with word-press and have small issue. It seems that in IE 7 the menu appears to be hiding the content within the li items until user first interacts with menu at which point the issue gets resolved.
If anyone can suggest a fix that would be appreciated. Here is a demo of what I am referring to.
http://www.dccentres.ca/_dynamicconditioning/wordpress/

Farhan Zafar said...

I am new to javascript and coding. Can somebody tell me how can i put multiple kwicks on a single page. I need to have two kwicks on a single page...what and where i have to do the changes plz bried...

Thanks,
Farhan

hfsilveiras said...

nice plugin.

A request:

Auto-Play through the animations.

thx ;)

Martin said...

Dear Jeremy ...
I wanted to tell you the truth I loved your script ... I have a problem ... but in reverse around the world, throws me in Firefox 3.0.16 .... is for a site that is still in diapers ... when reloading the page, the links often remain stretched ... if one cools the error goes away ... but of course we can not ask the user to do that ...
Greetings! I leave my page, even developing www.giordanicomputacion.com.ar

Martin said...

Hello again ...
solve the problem .. the error was in a ";"... so simple ...
Thank you very much!

Jakub said...

Hi,

first i would like to thank you for that great code. It is amazing and work everywhere.
but... like always huh?
is it possible to put into tabs flash content? i tried with youtube movie and id doesn't hide.

TARANTO said...

@Marco
Thank you!
You saved my layout! :)

Jorge said...

Hi Jeremy. I've been applying your "Kwicks 1.5" in a blog (wwww.torresdeteletrabajo.com). If you browse it, you can see that in, by example, Mozilla Firefox, it works fine. But the same site in IE 8 shows an error on line 27

...
container = $(this);
...
Can you help me find where is the error? Thanks in advance

Jorge Savoini

Si Pham said...

Hi,

I really love your plugin and I'm trying to put it in my page.

Everything works fine, the problem is when I use jQuery.noConflict() for my script, all my jQuery script becomes useless, only the kwicks would run ??!!
I don't know if anyone has encountered this, any help would be much appreciated.
Thank you so much.

SamsonDelila said...

Very nice plugin ! I've just add your plugin to my new project. Keep good work! You're Awesome !

Beer said...

Jmar:

Embarrassing question about your 'a la mootools' code at: http://www.jeremymartin.name/projects.php?project=kwicks

How do I add links to the images? Tried just about every variation of I could think of in the main html file LI items list section. Don't want to add text, want to make each image a unique link.

Hate asking for something dumb, but would appreciate some help.

Thanks,

Wayne

MasterJuh said...

Hi,
I've tried to implement the "active class" version of this awesome menu system, and to insert inside each part a submenu.
The problem I have is that the sub menu, when developing, doesn't fly over the page.
I think it's because a "li" tag is always given a "overflow:hidden" style, but all the changes in the css I tried didn't resole the problem.
I would be very pleased if some of you take the challenge to help me.
the test-page is here.

Thanks for your work!

Imran Khan said...

Hi Jeremy,

Awesome script, really loved it.
I am using it for my current project wherein I need to call a function on mouseover of active kwick and struggling to achieve that.

Could you please expose an event for that, it would be really helpful for me and others using your script.

Thanks in advance.

David Gursoy said...

hello
i am trying to put the kwicks in the background. i have a dropdown menu but z-index not helps me in this case what can i do here is my website
thanks

Stephanie Vigil said...

Hey Jeremy,

Many thanks for this truly awesome script.

mrmcq5 said...

This script is AMAZING but i'm trying to do something where i think the answer is just obvious but i'm not approaching it the same way.
How do you turn it off? Enabling it is fine, but if want to close my kwicks and have them return to their initial state is there a quick way to do so?

leetee said...

I have gaps inbetween my toggle elements when they are all closed as though it isn't collapsing properly and cannot get rid of them no matter what I do.

I set the "Sticky" attribute to false so that the expandable elements are all closed on page load. This works but they are not fully closed, so to speak. The toggle elements have gaps inbetween them but don't when I set "sticky" to false or when an element is expanded. Can anyone help.

I love this feature and dont want to remove it because I can't get the whole thing to be collapsed.

Ryan B said...

Hi Jeremy, thanks for the great plugin! I wanted to help out anybody running into the same problem as me. I am building wordpress website and included the vertical slider into my website, but I also had a sliding (jquery) carousel across the top. I ran into a problem with IE that caused both of the sliders to not function (things seemed to be working fine in Chrome, and Fire Fox).

So here is what I did to solve it.
1. I imported the following files
jquery-1.4.3.min.js
jquery.kwicks-1.5.1.js
jquery.easing.1.3.js"

2. I added no conflict to the kwiks function
var $j = jQuery.noConflict();

New code:
var $j = jQuery.noConflict(); $j().ready(function() { $j('.kwicks').kwicks({ max : 275,
spacing : 1,
isVertical : true
});
});

After doing both of these steps I was still getting an undefined object/variable error in IE.

3. The final step was to change line 27 on jquery.kwiks-1.5.1.js file from
container = $(this);
to
var container = $(this);


After taking those 3 steps both of my sliders function correctly in FF, Chrome, and IE (7 & 8).

I hope this helps anybody running into the same problem as me.

ryan

Mark Harley said...

Ryan B - thanks I was having the same problem. jCarouselLite and kwicks on the same page causing and undefined object error/vairable error in Internet Explorer only. Joy of IE! Your solution worked for me, except i skipped step 2....

I just changed

container = $(this);
to
var container = $(this);

Thanks Jeremy for a great plugin, and Ryan, you saved my bacon.

:)

Christopher said...

Hello, I would like to see a alternation to Kwicks. Is it possible if Kwicks would collapse and shift ?

Jeff Wylie said...

Anyone had luck with an auto-advancing script? I'm trying to make the 5 slides in my show automatically move after 5 seconds.

Mottie said...

I love this script, but since Jeremy hasn't updated it in two years, I ended up modifying it a bit.

* Added event hooks & callback functions.
* Added a way to get and set the active kwick panel from the script.
* Added a way to close all kwicks from the script.

Check it out the demo and the documentation at my github repository.

Anonymous said...

Is there a easy way to add a callback function to this?

leetee said...

Can anyone help with my query a few comments up? Why doesn't the "sticky" function work properly?

Brigitte said...

Hi, after somes problems, I include the plugin successful in magento ;-)
But I have still 2 problems:
-It doesn´t work in IE8
I have differents widths ( IE 8, FF and opera same, chrome is different)
who can maybe help?

Brigitte

Pablo said...

Big thanks to Mottie for his Kwicks v2.0 update. With it, I was able to hack my own version around the 2.0 script for an "Auto-Play" feature since jMar abandoned the project. I added the following configurable variables:

* Specify which panel to start on; Start with all panels collapsed; or Start with any random panel open

* Specify duration between transitions

* Specify direction (forward or reverse)

* Pause on mouseover, Play or mouseout

Code below...
-----------------------------


/* jQuery */
var $j = jQuery.noConflict();
$j(document).ready(function(){

/* Kwicks Auto-Play Start */
strKwicksID = '.kwicks'; //Class or ID
intKwicksStart = -2 //0-n = Index | -1 = Collapse | -2 = Random | -3 = Off
intKwicksDuration = 3 //Seconds
intKwicksDirection = 1; //1 = Forward | -1 = Reverse

var intKwicksTotal = $j(strKwicksID + ' li').length;
if (intKwicksStart == -2) {
intKwicksStart = Math.floor(Math.random()*intKwicksTotal);
}

if (intKwicksStart != -3) {
kwicksPlay(strKwicksID,intKwicksStart,intKwicksTotal,intKwicksDuration,intKwicksDirection);
$j(strKwicksID).hover(function() {
kwicksPause();
},function() {
kwicksPlay(strKwicksID,-1,intKwicksTotal,intKwicksDuration,intKwicksDirection);
});
}

});

/* Kwicks Functions */
function kwicksPlay(strKwicks,intKwicks,intTotal,intSeconds,intDirection) {
$j(strKwicks).data('kwicks').openKwick(intKwicks);
if (intDirection == -1) {
if (intKwicks < intTotal && intKwicks > -1) {
intKwicks--;
}
else {
$j(strKwicks).data('kwicks').closeKwick();
intKwicks = intTotal-1;
}
}
else {
if (intKwicks < intTotal && intKwicks > -1) {
intKwicks++;
}
else {
$j(strKwicks).data('kwicks').closeKwick();
intKwicks = 0;
}
}
tmrKwicks = setTimeout("kwicksPlay('" + strKwicks + "'," +
intKwicks + "," + intTotal + "," + intSeconds + "," + intDirection + ");",
intSeconds*1000);
}
function kwicksPause() {
clearTimeout(tmrKwicks);
}

oputz said...

Big THX to Motti for updating the script. now it works in IE too.
cheers

Expansa said...

Where do you include the code for the autoplay function?

Pablo said...

Expansa:
In your head area of the page where you would normally include the plugin and make the Kwicks calls.

Nightangel said...

Hi,
I have a big request, I count on quick help, I can not add to the menu, submenu, someone can give me a ready solution to retrieve the example? I have to finish my www project page before the end of the week, to a nice lady working for EU otherwise she will taken my co-funding activities for projekt "Kids play". I really depend on this type of menu ....

I tried as I could but I still do not know how to do it!
Many thanks Angela

my special adres email

nightangel@buziaczek.pl

Taffarel de Lima said...

Hi, thanks for the great gadget ^^, but i have some problems to work in Chrome 8.0, if someone pass through the same problems, send me an e-mail,
taffarel at hotmail[dot]com

thanks for the gadget!!

Anonymous said...

Hi there !
Thanks for this awsome release !!

I'm implementing a kwicks on my site and it's really great.

but i've noticed a little bug when using IE8/IE9beta.
When you zoom in or out (Ctrl+/Ctrl-)
and then refresh (F5), the kwicks behave strangly. Size and padding doesn't adapte correctly.
hope that can help for further releases :).

best regards from france.
benny

Anonymous said...

Simply Awesome!
Now, is it possible to have the opacity of the slide images to 0.6 or 60% for example, and when hovering they come to 1 or 100%? If so, how would the code change what I have now?:

#kwicks{background:#000 url(lib/img/shared/loading.gif) no-repeat center center; overflow:hidden; width:980px; z-index:1000; float:left; }
.kwicks { /* recommended styles for kwicks ul container */
list-style: none; position: relative; margin: 0; padding: 0; float:left; background:#101010;}
.kwicks ul{margin:0;}
.kwicks li { /*do not change these */
display: block; overflow: hidden; padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */ }
.kwicks.horizontal li { /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-right: 0; /*Set to same as spacing option. */ float: left; }
.kwicks.vertical li { /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin:0; /*Set to same as spacing option. */ }
.kwickshadow { z-index: 1; background:url(lib/img/shared/accordion-shadow.png) repeat-y; position: absolute; right: 0px; width: 30px; }
.kwicktopshadow{ z-index: 2; background:url(lib/img/shared/kwicktopshadow.png) repeat-x; position: absolute; top:0px; width: 980px; height:20px; }

Anonymous said...

is it possible to add further click after the kwick opened and let it expand further to the full size of the kwick and then have a back button that will reset it to the beginning ?

Anonymous said...

Hi,

i want to set a hyperlink on each picture.

It doens´t function.

Only textlinks are possible (but text overlays the picture)

Some idea?

E.B. said...

Pablo, what do you mean by this? I really need to get this autoplay bit working :)

"In your head area of the page where you would normally include the plugin and make the Kwicks calls."

should it replace the Kwicks calls? be merged? i tried placing it before my current Kwicks script tags and got numerous errors.

Anonymous said...

I get an error in line:

$(strKwicks).data('kwicks').openKwick(intKwicks);

The js error is $(strKwicks).data('kwicks') is undefined

Some help, thanks

Anonymous said...

I get an error in line:

$(strKwicks).data('kwicks').openKwick(intKwicks);

The js error is $(strKwicks).data('kwicks') is undefined

It's probably because you have an older version of kwicks. Try downloading it from
https://github.com/Mottie/Kwicks/tree/master/js

Anonymous said...

I can't seem to get the openKwick() function to work, nothing really happens, any idea why?

JavaScript
-------------------------------


$().ready(function() {
$('#kwick-accordion').kwicks({
max : 700,
spacing : 2
});

$('#kwick-accordion').data('kwicks').openKwick(1);
});


HTML
----------------------------
[ul class="kwicks" id="kwick-accordion">
[li id="kwick1"><> to [] because blogger wasn't allowing me to post html tags

steve said...

Kudos to the Kwicks author I have used this plug in a number of times with clients and the effect has always gone down well. I have just found this example using HTML5 and CSS 3 which achieves the same effect with no javascript!! Apparently it uses 'flexbox'

http://www.html5rocks.com/en/tutorials/flexbox/quick/

Anonymous said...

This is an awesome script and I think it works great. Just wondered if there is a way to make it automatically go through the different slides after a given duration? I think this feature is all Kwicks can use but can't seem to find a way to make it happen. Any help would be awesome.
Thanks
Matt

Damian said...

You need to add declare container as a var for this to work in IE8

var container = $(this);

Sean said...

Mr. Pablo,

your the best, a lifesaver.

By the way I couldn't get it to work without removing the noconflict stuff.

Autoplay is operational.

Thank the lord

Anonymous said...

Hey guys, I've downloaded the most recent version of the script, and I'm still having problems with errors in IE7.

I've got it on a dev site http://norton.dev.plattformad.com

all other browsers and versions work, but an error and nothing loads in IE7.

i need to get this figured out soonest.

Thanks.

Anthony Charrex said...
This comment has been removed by the author.
Anthony Charrex said...

To solve the error "Message : Object doesn't support this property or method" detected under Internet Explorer, replaces :

container = $(this);

By :

var container = $(this);

On line 27 ;)

Purushartha said...

Dear Jeremy,
Accordion is a wonderful script. Thanks a lot for sharing it.

I am tying to incorporate web form with accordion, and have come across issues. Have you by any chance looked into this before? Please let me know if you have.

Looking forward to hearing form you.

Regards,
Puru

jgroebuck said...

I'm trying to use JQuery plgun hoverIntent with this but I'm having difficulties.

Does anyone have any ideas on this??

Thanks

NashDharas said...

Love the script. Excellent job.

I have one question though. Is there a way to return to the "defaultKwick" after a certain amount of time after a mouseout?

I have not been able to find a solution nor have I successfully been able to implement the funtionality.

Any help would be appreciated.

Thanks.

Nash

DJ said...

I agree with Pablo, this functionality would greatly increase the usability of this plugin:

1) Add a delay upon mouseover before the objects begin to slide. Maybe if it can even make use of the hoverIntent plugin (http://cherne.net/brian/resources/jquery.hoverIntent.html).

You can see that NOT having this can cause issues...check out the tooltips causing issues with the right panel collapsing in my implementation: Slider Menu

Paul said...

Auto-play doesn't work even with Kwicks v2.1.1...
Error is: $j(strKwicks).data("kwicks") is undefined

MB34 said...

So, does anyone actually support this plugin, anymore?

usmc7356 said...

Hello jMar!

I saw the Kwicks slider in action and had to have it on my site... The only issue is I am beyond a noob and don't know where to start.

I have the module installed on my drupal site using the "creative" them by "themforest". I have the block and module enabled and the block placed where I want it in the drupal theme.

Then I get to the problem. What do I do now? I don't know how to add the images I want to take me to other pages, or set up anything other than the block settings. I realize this is probably a stupid question, and I always google my questions before asking them, but Google does not have a single walk through on installing this. I would love this explained for an idiot such as myself. Any help would be greatly appreciated.

Daniel Campo said...

There is another bug in IE in your current 1.5.1 build that causes the script not to work. "Object doesn't support this property or method"

Around char 252 you have the following:

...function(){container=$(this)...

It should be:

...function(){var container=$(this)...

Once container is declared a var then everything is peachy.

Marc said...

Hi folks,

is this blog still active? Because the last comment (and the last release is from June/August 08?)

I'm very interested in this framework and tried to build up a few scenarios but still fail to put some content on the "invisible" part of the container. Is this possible? So that you can see in first instance only the "teaser" and after mouseover you see the content itself?!

Anonymous said...

Firstly, great project. Had a few issues in ie though. Just wanted to share a fix that I came across for internet explorer. I searched for kwicks problems in internet explorer and found the following link:

http://themeforest.net/forums/thread/jquery-kwicks-problem-in-ie/29523

The solution works for me. Make sure you're not calling in the .pack version of the javascript and make the edit they describe there.

(Actually, it's the same as what Daniel Campo just shared above)

Sefa AYDIN said...

İE8 doesn't work.

http://www.boluozelidaresi.gov.tr

line:11
Char:252

Tommy Bell said...

This is brilliant, however I am have a bit of trouble getting something to work, as far as I can understand, it is actually not intended to be centered on a page because absolute positioning is used.

However, i really want it centered on a page, horizontally, can anyone offer some advice on how to do that?

Appreciate any comments.

Anonymous said...

Thanks for this gr8 plugin

but I'm having some issues with autoplay.
it's giving error :

$j(strKwicks).data("kwicks") is undefined

I am using latest kwicks.js and added the autoplay code by Pablo in header but still error exists.

Can anyone help me with this please..?

Aniruddh said...

@Paul,@E.B.,@Pablo
hey I figured out solution for the error: $j(strKwicks).data("kwicks") is undefined
and autoplay is working fine now

this happens if you have old kwicks.js
download latest version
or
just change the line:

$('#kwick-accordion').data('kwicks').openKwick(1);

with

$('#kwick-accordion').data('kwicks')['play'](1);

that's it.
Hope this helps...

David Saji said...

Jeremy i really like your plugin and i am planning to use it in on of my webpages for a school project. The only problem is that there are no copyright statements, i would be grateful if you could email the conditions in which i can use your plugin because i need to specify them in my project. Thank You
my email is davidsaji@hotmail.co.uk

Anonymous said...

great plugin and thanks pablo!

jigolo said...

By the way, the site is looking good!very nice thanks

jigolobar said...

thank you nice blog

jigololuk said...

nice blog thank you

jigolo free said...

wow nice post