jcarousel No width / height set for items

If you use jquery, then the chances are you are using the jcarousel library.

Well im new to jquery but have come along at an accelerated rate, perhaps because of my OO background.

Ok so you hit this page likely because you got this error

jCarousel: No width/height set for items. This will cause an infinite loop. Aborting…

When i tried to nail down what the cause was i stumbled across a post that told me to add css styles for width and height. This was all well and good until i wanted to apply styling to more than one carousel on the page. Anyway what took me a few hours to figure out I support open and collaborative minds by sharing it here.

The error occurs regardless of widthand height attribute of you jarousel item. You need to set the width and height of the first parent of the carousel. If you follow this design pattern below, you cant go wrong

Firstly im assuming you have already included a reference to your already downloaded jcarousel library. There is really only one of them so you cant go wrong in finding it. here

1. Markup for your page containing the jcarousel element (note wrapped in a containing div)

Your initialising jscript to bring your carousel to life (note applied to the ordered list)

Your CSS (note applied to the wrapping div)

The reason why we do this is because the jcarousel class ammends the html markup so that styles will no longer apply because the objects will no longer exist, or have the same name at the jcarousel object level.

Hope this helped those who were stuck as I was.

JavaScript window.SetTimeout to javascript class method passing object/parameter

I notice people have been struggling with calling a class method and passing a parameter through to it when using the window.setTimeout javascript timer

In my current search engine proejct I am both calling the settimeout method from within my class, assigning the id to a class parameter, incase i want to cancel it before it hapopens, and passing the current call object through to the target class method, setting my delay from a class global delay variable.

The trick is to place an inline function into the expression of the setTimeout call like so :-

Inside my input handler (this is fired from keyup, keydown, paste and various other change events on the page)

Hope this helps those that might have been struggling with this.