Read the latest web development and design tips at Fred Wu's new blog! :-)
Poke me on GitHub

Archive for the ‘Javascript / AJAX’ Category

jQuery Slideshow Lite Plugin Updated (Major Rewrite)

The jQuery Slideshow Lite plugin is updated with new features!

This is a major rewrite which fixed the known issue of not being able to change slides instantly via pagination clicks.

The new version also adds automatic photo caption display.

Enjoy! :)

Related posts

Release: [jQuery Plugin] Slideshow Lite

Latest release: v0.5.3
Please check for the latest version on Github!

A few days ago I was asked to make a simple slideshow. My initial thought was, there must be a ton of solutions available for jQuery. I could easily draw inspiration from them.

I was wrong. Whilst there are a few nicely done slideshow plugins for jQuery, the majority of them are either poorly written or far too complicated.

So, I decided to code my own plugin from the ground up. Meet Slideshow Lite!

The plugin is only tested with jQuery 1.3, but it should also work on jQuery 1.2.

Features

  • Unobtrusive JavaScript, simply load it and that’s it
  • Clean, semantic HTML structure
  • Easy to use
  • Customisable
  • Free to use or to modify (GPL/MIT dual license)!

(more…)

Related posts

jQuery Endless Scroll Updated

The jQuery Endless Scroll plugin has been updated.

A bug caused by ‘fireDelay‘ is fixed.

Please head over to the release post or the jQuery plugin site for the download link.

Related posts

jQuery.slideDown() issues in IE: quick fixes

A simple Google search suggests that people are having problems with jQuery.slideDown() on Internet Explorer.

I’ve come across two issues on Internet Explorer 7 while developing a website containing some slideDown() effects, and found some quick fixes for them. :)

(more…)

Related posts

Release: [jQuery Plugin] Endless Scroll

Latest release: v1.4.2

If you don’t already know, endless scroll (or infinite scrolling) is a popular technique among web 2.0 sites such as Google Reader and Live Image Search, where instead of paging through items using the traditional pagination technique, the page just keeps loading with new items attached to the end.

I have developed a jQuery plugin to easily achieve this.

Requirement: jQuery 1.2+

The plugin is tested with jQuery 1.2.6, 1.3 and 1.4.

There are a few options to customise the behaviour of this plugin:

  • bottomPixels (integer) – the number of pixels from the bottom of the page that triggers the event
  • fireOnce (boolean) – only fire once until the execution of the current event is completed
  • fireDelay (integer) – delay the subsequent firing, in milliseconds. 0 or false to disable delay.
  • loader (string) – HTML loader
  • data (string) – plain HTML data
  • insertAfter (string) – jQuery selector syntax: where to put the loader as well as the plain HTML data
  • callback (function) – callback function, accepets one argument: fire sequence (the number of times the event triggered during the current page session)
  • resetCounter (function) – resets the fire sequence counter if the function returns true, this function could also perform hook actions since it is applied at the start of the event

(more…)

Related posts

JW Player – sendEvent is not a function

Ok, I’ve spent a whole friggin day on this problem so hopefully this post will help save some people some time…

We’ve been working on a video site recently that uses the fantastic JW Player to play the .flv flash files. For some reason, there were some issues with using a tabbed interface we’d made in conjunction with the JW Player.

After changing from a tab with a text page back to the video page, the following error was coming up:

Error: $("#player1")[0].sendEvent is not a function

The code causing this error was a little routine to load a different video into the player when someone clicks on a different tab:

$('#player1')[0].sendEvent('LOAD',obj);

After a whole day of trial and error and putting alerts all over my JS code, I finally worked out what the hell was going on.

Even though my JS code was waiting until the document had been loaded (through jQuery’s $(document).ready(function() { blah..blah), the JW Player wasn’t loading in that time. It turns out even though our tabbed pages were powered by simple show/hide CSS, going from the video tab to a non-video tab and back made the JW Player have to load again.

The sendEvent is not a function error was simply because the JW Player hadn’t loaded yet, so the player1 object didn’t exist yet!

The solution? A simple delay:

setTimeout(function() { $('#player1')[0].sendEvent('LOAD',obj); }, 200);

Now this is not a pretty solution at all. Maybe 200 ms is enough time for the player to load on my computer, but what about on another set up? Newer versions of the JW Player automatically call a particular function when it finishes loading (playerReady()), but I wasn’t able to find a quick and easy way to check the player was loaded.

If anyone knows how to get playerReady() working nicely with jQuery’s $(document).ready() I’d love to hear about it. From the comments on the JW Player site, it seems the playerReady() function is a little flakey in any case. But is a setTimeout any better? Hmm…

Related posts