Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

While I was working on a jQuery UI plugin I'm writing, in my haste to get it going I made a simple mistake, which was forgetting the fundamental principle of how jQuery works with it's selectors. My aim was to create a new Image instance, apply my jQuery UI plugin to it, which wraps that image in a DIV and then add the DIV to the DOM.

My plugin id is 'photoboxr' and so my code looked something like this...
 JavaScript
var div = $('img').photoboxr({...plugin options...}).photoboxr('wrapper');
$(document).append(div);


Seems simple enough but nothing worked and instead I got a lot of flickering when my web page loaded. I was confused at first.

Then, I realised that I was doing this: $('img'). The intent was of course to create a new Image node, but the reality of running that was to select all existing 'img' elements in my web page. The rest of the code then applied my plugin to all those images and hence caused the flickering and the same repeating image all over the place.

That was a big oops! In case my explanation above is not clear, jQuery was simply interpreting my code by running its Element Selector.

The fix is easy, create a new Image HTML object and pass that to jQuery instead. Derp. The code now became..
 JavaScript
var div = $(new Image()).photoboxr({...plugin options...}).photoboxr('wrapper');
$(document).append(div);


After that everything worked perfectly! Simple mistake, but easy to fall for.



-i

Hope you found this post useful...

...so please read on! I love writing articles that provide beneficial information, tips and examples to my readers. All information on my blog is provided free of charge and I encourage you to share it as you wish. There is a small favour I ask in return however - engage in comments below, provide feedback, and if you see mistakes let me know.

If you want to show additional support and help me pay for web hosting and domain name registration, donations, no matter how small, are always welcome!

Use of any information contained in this blog post/article is subject to this disclaimer.
comments powered by Disqus
Other posts you may like...