Welcome

Tue, 08/05/2008 - 10:56 — bloke

willkommen, bien venue, welcome, come on in...

This will be an occasional blog dealing with various web programming issues I've come up against. I've been using the excellent JavaScript library jQuery

jQuery

I've chosen jQuery because I was immediately taken with it's integration with CSS, as it enables you to perform a set of actions on sets of elements selected from an HTML page. For example the script adds a change in colour to the background property of a list element on mouseover - useful for navigation and menus. This can replace the :hover from CSS with a tasteful glow effect.

For this to work you also need the interface v1.2 plug-in, to extend jQuery's .animate command to work with the CSS background color. And in turn this needs a fix to jQuery (v 1.2.6) to work with interfaces alterations to dequeue - thanks to a post here from Vinçange for that.

[geshifilter-code] $(document).ready(function(){ //fix the current dequeue problem in the interface plug-in (why is dequeue so hard to spell?) - thanks to Vinçange (function($) { $.dequeue = function( a , b ){ return $(a).dequeue(b); }; })(jQuery); //animate bg colour - choose your own hex, selector and time $("li").mouseover(function(){ $(this).animate( { backgroundColor: '#f00' } , { duration:500 } //animate bg colour );}); $("li").mouseout(function(){ $(this).stop().animate( //stop() prevents flicker on multiple mouseover events { backgroundColor: '#900' } , { duration:500 } , { queue: true } , { callback: function() { $(this).pause('100');//reduces flicker on multiple mouseover events. } } ).dequeue();});//stops there being endless repeats if you mouse in and out repeatedly }); [/geshifilter-code]

I'm sure there is a better, neater, faster way of doing this. Let me know if there is!