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...
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..
After that everything worked perfectly! Simple mistake, but easy to fall for.
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
Other posts you may like...