• Download jQuery
• jQuery tutorials page
• How jQuery works
• Getting started with jQuery
• Snippets & tutorials
• Karl Swedberg's tutorial
• jQuery crash course
• Simple introduction to jQuery

2nd February 2008

• Shadowbox
• Interface Elements (out of date, sadly)
• Flot - instant charting
• ColorBlend
• Facebox
• Wiki - plugins repository
• jQuery UI

There's a wealth of talented developers creating jQuery plugins - new ones every day

Obviously, there's no reason why you shouldn't just speed ahead and use them! Be careful, though. I've already tried a few which either didn't work or broke in some browsers.

Lots of plugins exist to carry out everyday actions, and this is where I think jQuery's documentation falls down.

It surely can't be necessary to include an extra page of code, just (for example) to replace text with an image or to do a rollover. Even I can write this kind of script, so I figured jQuery must have built-in methods that make ordinary stuff easier.

It does! But I'm finding pretty damn hard to locate the instructions for using jQuery methods. When I do find them, I'll post them here. I'll also post my solutions - bear in mind that I'm not a great coder, so you'll likely find better ways

2nd February 2008

I'd been looking foward to using Interface Elements but couldn't seem to get them working right. When I finally read the notes, it turns out the plugin is no longer supported - it comes with a copy of jQuery v.1.2, which is the only one that works properly with Elements

Quite a bit of it has been integrated with jQuery UI but there is still nothing like Interface Elements' "Grow/Shrink", which I consider a work of Javascript genius (it even grows & shrinks the text, with all its formatting!), nor any draggables as good as Floating Windows. And I loved the drag-&-drop shopping cart.

Still, the UI does seem to be getting somewhere at last and I hope a developer somewhere will hear my plea for updated versions of the Interface goodies!

12th April 2008

• 15 days of jQuery
• Ajax Rain
• Webappers
• Ajaxonomy

2nd February 2008

The usual escape character for Javascript is a backslash. I tried escaping darn near everything, but got errors. The Wiki says to escape double forward-slashes, as in a url, but that caused errors too.

Some of the jQuery code I've seen seems to use $ as an escaper, but I ain't messin' with no dollar signs!

A member of the Google group explained that, if you use single quotes to surround your text string, you only have to escape any other single quotes in the string - which seems very logical! I'm embarrassed not to have spotted that

So, basically, it's best to use single quotes - then you only have to escape apostrophes & the odd single quote.

$("p").append(' I said, "it\'s best to use single quotes" ');

5th February 2008

We're not alone in finding jQuery's lack of documentation for beginners a tad wanting. A huge part of the problem, I think, is that it's been taken up lovingly by Javascript developers - who seem to have forgotten that a Javascript library is supposed to appeal to developers without specialist knowledge!

It's tricky. If you don't know any Javascript at all, you can still use many of jQuery's plugins. Others seem shrouded in mystery, even if you have intermediate knowledge. And, if you want to gain some control over what a script does to your website, you have to figure out what that script is doing, and how

Quite often, a quick reference guide is what's called for. Sadly, there is no such thing for jQuery itself yet - but here's a good place to start if you don't know where to start!

Echo Echo - Javascript Tutorial

Although it's called a tutorial, the site features an at-a-glance guide that can often provide just the clue you're looking for

28th February 2008

The first of jQuery's methods that I tried, this one falls into the DOM manipulation category. Up until now, I've managed to get away with a very slim knowledge of the 'DOM tree' ... but, without knowing your way round it, you won't be able to navigate the jQuery documentation.

After remembering that browsers give you the option to view the DOM info, I stopped panicking. It's not that hard

I wanted to replace my h1 heading with an image. Javascript is the best tool for this: non-Javascript browsers & search engines get the default text heading, properly styled, while regular visitors see the image served up by Javascript.

I discovered that .append writes whatever html you like, into the element you specify. This is what I did:

// jQuery starts
$(document).ready(function() {
// replace the header with an image
$('h1').append('<img src="/images/headertext.gif" alt="alt text" title="title text" longdesc="http://something.com/fullinfo.html" />');
//jQuery ends
});
-->
</script>
</head>
<body>
<h1>
<ins><noscript>Header Text</noscript></ins>
</h1>

This code tells jQuery to look for an h1 element, and write in there the html I put in the brackets after .append.

Of course, the text header doesn't exist as far as Javascript is concerned, because of the <noscript> tags. I cheated a bit by using <ins>, it makes the <noscript> validate

Nearly all of the jQuery methods have this kind of structure:-

$('selector').instruction('details');

Well, 'details' should really be 'parameters' or 'arguments' but this is how I think of them .... More importantly: the selector can be practically anything! An element, an #id, a class or a variable. Hurrah!

Now all I have to do is figure out the rest of it

4th February 2008

In the Google group, Wick suggested another solution, which doesn't involve cheating on the <noscript> tag - because there isn't one!

It goes like this:

// replace the header with an image
$('h1').html('<img src="/images/headertext.gif" alt="alt text" title="title text" longdesc="http://something.com/fullinfo.html" />');

This time, my html is simply
<h1> Header Text </h1>

The .html() method actually re-writes the html on the fly! This feels really weird to me - the page source has not changed at all, but the result is there for all to see on my page And, of course, it still works just as intended for non-Javascript browsing.

You can't use this method with an XML page .... perhaps because there isn't any HTML
jQuery does work with XPath though, so there's probably a similar, XML-friendly, method.

11th February 2008

jQuery has a whole bunch of useful methods like $( ).append( ) above.

I came a cropper when trying to use the CSS method. It's supposed to go like: $('p').css('color','red'); but I was trying to do ('background-image','something.gif') and it wouldn't go past the parser!

Turns out you have to write backgroundImage instead.

I haven't tried anything else like this yet, but my guess is you'll have to "Javascript-ify" any CSS styles with hypens. Apparently this is called camelCase

4th February 2008

• jQuery api - DOM manipulation
• jQuery api - CSS
• Also the same categories at visual jQuery
    (very helpful, slightly out of date)

4th February 2008

Lots of jQuery developers have added image preloaders, thank goodness

I particularly liked 2 of them: one very simple, and one very multi-purpose but compactly written.

As I'm just learning, I decided to use the simple one: I can understand the code & it looks "normal" to me! I plan to have a shed-load of images on my new site, though, so I'll be switching to the multiple preloader later.

I put this in the general.js file for my website (linked from my page, of course!):

// preload images (simple)
jQuery.preloadImages = function() {
      for(var i = 0; i<arguments.length; i++) {           jQuery("<img>").attr("src", arguments[i]);
     }
}

And this inside the document.ready section of my page head:

// preload images $.preloadImages('/images/image1_over.gif','/images/image2_over.gif' );

Easy! And it works

5th February 2008

The current version of jQuery comes with a hover custom method, which is handy .... if you don't care about accessibility.

It's an event which is bound to both mouseover and mouseout, but not to focus and blur. I want my 'hover' to work with tab navigation, too. So I had to figure out how to do my own binding.

As it turns out, you can easily bind multiple events to the one handler - though I had to read the source code to find this out!

You just add the other events, with a space between them. See below.

5th February 2008

Here's what I did to begin with:

$("#mylink").bind('focus mouseover', function(event) {
// look at #mylink >> listen for focus and mouseover events on #mylink >> when there is an event, do the following function
     $(this).children("img").attr("src","/images/image1_over.gif");
      // function: look at images inside #mylink >> set the source to
      image1_over.gif
          return false;
            // then stop
});
// this is the reverse action for mouseout & blur
$("#mylink").bind('blur mouseout', function(event) {
     $(this).children("img").attr("src","/images/image1.gif");
          return false;
});

What I did, above, was to create an event handler that is triggered by mouseover OR focus, and link it to the selector called 'mylink'.
Then I created another one, to trigger on mouseout OR blur.

Because the image I want to swap is inside #mylink, I tell the handler to look for a DOM child of #mylink, which is called img, and change its src to the 'over' version.

Here's the html that it's working on:

<a href="/index.html" id="mylink"> <img src="/images/image1.gif" alt="alt text" title="alt text" class="someclass"/> </a>

The second function does the same thing, changing the image source back to what it was at first. It could have been done a bit quicker with regular expressions - but I was finding things complicated enough already

5th February 2008

Important points about this little project, I guess, are:

• You can bind events to selectors pretty much at will
• You can bind multiple events
• $(this) refers to whatever the code is currently working on (in this case, #mylink)
• .attr() sets properties of the specified element (in this case, the src of img in #mylink - the property it set was the replacement image path)    

5th February 2008

This solution was suggested by Hamish Campbell in the jQuery Google group

$('mySelector').mouseover(function() {
// do something on mouseover and focus
})
.focus(function(){
// trigger the mouseover event on focus
     $(this).trigger('mouseover')
});

Where 'mySelector' would be '#mylink' and "do something" would be the swap image action.

The second function is part of the first one so, when it is called (by the user focus-ing), it shoots straight up to the beginning to find out what action is required. I think this is what jQuery calls chaining - whatever it's called, it's a very neat action

5th February 2008

Also in the jQuery Google group, Brandon Aaron suggested this - I couldn't get it to work; I must have been doing it wrong

$('a') .bind("mouseenter focus mouseleave blur", function(event) { console.log(event.type); });

(You would have to replace console.log(event.type) with the rollover action).

Brandon has some great rollover code examples on his blog. Try them!

5th February 2008

I eventually worked out how to alter jQuery's built-in .hover event, to cover tab navigation as well as mouse actions ...

I put this in my general.js file:

// a more accessible "hover" function
jQuery.fn.extend({
     hover: function(fnOver, fnOut) {
          return this.bind('mouseenter mouseover focus',           fnOver).bind('mouseleave mouseout blur', fnOut);
     }
});

where, as you see, I bound a couple of extra events to fnOver and fnOut (they are defined in the core script)

Now, whenever I use jQuery .hover, it will be bound to both mouse and tab events:

// logo hover link
$('#mylink').hover(
     function () {
          $(this).children('img').attr('src','/images/image1_over.gif');
     },
     function () {
          $(this).children('img').attr('src','/images/image1.gif');
     }
);

I honestly don't know if I've coded it correctly - but it works

5th February 2008

• .hover is a pseudo-event, created by binding mouse events to functions.
• jQuery.fn.extend is written into jQuery, precisely so that you can add to the provided core functions
• it's better to work with the full (long) script version of jQuery, as it's easier to read & identify any parts you want to customise !

5th February 2008

As yet, I haven't found a simple guide to writing functions with jQuery

Maybe everybody (everybody else, that is) thinks it's too obvious to warrant an explanation ....

The image preloader I used supplies a nice example of a function which creates a reference:

jQuery.preloadImages = function()
{
     for(var i = 0; i<arguments.length; i++)
     {
          jQuery("<img>").attr("src", arguments[i]);
     }
}

.preloadImages then becomes a function, which you can refer to from within $(document).ready( on your page.

This looks, to me, like the way you create a computed variable in other scripting languages - and I am sure jQuery, like other languages, provides ways to begin with a new function. Or does it? Nothing I've tried so far has worked ....

6th February 2008

Guess what, it's totally straightfoward

You go:

function myFunction()
{
      $( selector ).stufftodo( details );
};

and you call it from your page code with myFunction .... yep, just like you do with any other type of programming.

Now why was that SO HARD to find out???!!!

12th April 2008

Yet again, I've stayed up ALL night, trying to achieve what should be a staggeringly simple task .... and getting nowhere

In jQuery, it's a big deal that variables remain private to the functions they are in - that is, they cease to exist as soon as the function ends. This gives you a lot of flexibility, but begs the question of how to get the variable's value back OUT of the function, when you want to use it?

Given that I'm already struggling to grasp the preferred methods of declaring a function, trying to get a simple result out of one is driving me (even more) insane! No, you can't just say return x; .... nor return true; From looking at the documentation, I thought I'd be able to access the result of my function by using its name - but that didn't work either. This example from the Wiki:
function create() {
     var counter = 0;
     return {
          increment: function() {
               counter++;
          },
          print: function() {
               console.log(counter);
}    }    }
var c = create();
c.increment();
c.print(); // 1

returned error: "c is undefined"
I've asked the Google group for sensible advice.
Here's hoping someone hears my plea!

12th February 2008

I'm still not 100% sure about this, but I think it's like so:

var x = something;     
// 'global' variable (global to the script, at least) - holds its value outside of the function

x = something;
// local variable, only useful within its own scope

I've managed to make things work this way a few times now I've been trying to play safe by declaring my var variables right at the beginning, and the local ones right inside the function.

Whether this is correct, I have no idea

12th April 2008

Richard D Worth explained how to detect whether images are turned ON:

$('<img src="/images/bgimage.gif' + '#' + Math.random() + '"/>').load(function () {
      alert('images are on'); });

Here. the load event is bound to my background image. Richard has added a random key to the image name, this will force the browser to try a fresh reload. (Clever, huh?)

This event, therefore, will only fire if the load was successful and images are on.

12th February 2008

The problem I had, now, was that the event only fires if the image loaded - whereas, I need an indicator if images are off. I'm sorry to say that I never did manage to get a true boolean or variable out of this test .... but I did find a way round it

$('.imagecheck').html('On');

I added a hidden paragraph at the bottom of my page, with the class 'imagecheck'. The line of code, above, writes 'On' into the paragraph if the image load event fired.

Next, I write a check to see whether <p class="imagecheck"> contains the word 'On'

if ( $('.imagecheck').val() != 'On' ) {

Because, if 'On' isn't written there, obviously the event didn't fire and images are turned off

15th February 2008

To effect this, you need to have a blank stylesheet defined. This will be the "special" stylesheet to be used if images are on OK. In fact, I don't need to do anything to my styles if images are on. But I do need a stylesheet that can be replaced - with the real special styles - if images are off.

In my document head, I added
<link href="/styles/gotimages.css" rel="stylesheet" type="text/css" id="noimages" />

Then created the jQuery code:

if ( $('.imagecheck').val() != 'On' ) {
$('#noimages').attr("href", '/assets/styles/imagefree.css');

This says: if the image load event didn't fire, look for the element with ID 'noimages' and change its href to that of my replacement stylesheet.

15th February 2008

In general.js:

// detect whether images are on
// and change styles accordingly
jQuery.imagesOn = function(){

     $('<img src="' + '/images/bgimage.jpg' + '#' + Math.random() + '"/>' ).load(function() {
          $('#noimages').attr("href", '/styles/gotimages.css');
          $('.imagecheck').html('On');
     });

     if ( $('.imagecheck').val() != 'On' ) {
          $('#noimages').attr("href", '/styles/imagefree.css');
     }
}

In document head:

<link href="/styles/gotimages.css" rel="stylesheet" type="text/css" id="noimages" />

In document body:

<p class="imagecheck">anything</p>

Call (inside document.ready function):

// provide for users without images
$.imagesOn();

15th February 2008

Using an event as a test of the environment is pretty neat I know it's a common method in Javascript, but I'm still getting used to it.
"Do X ..... if X didn't happen, then the conditions for X can't be true"

jQuery doesn't seem terribly well geared-up to test for negatives. I'll just have to learn to live with it ....

Also, it seems FAR harder than it should be, to get a value returned from a function! What I did above, with the 'fake' paragraph, is no more than a hack & I'm sorry it had to be that way.

Still. It works!!

One little extra lesson learned: stylesheet links can have an ID! I never knew that before!

15th February 2008

Interesting discussion about this in the Google group.

16th February 2008

I took my little work of "art" (OK, my hack ) out of my page - it wouldn't work in Opera or Safari.

26th February 2008

Ever thought you should update the tab indices on a page, then got fed up & decided not to bother? (Err, no, of course you haven't )

My thanks to "spinnach" for this snippet. It incrementally adds a tabindex to every 'a' link:

$('a').each(function(i,e){
     $(this).attr('tabindex', i);
});

What it does:

$('a').each(function(i,e){
// Look for every 'a' element >> do a function on each match >> start counting [i] >> keep moving the pointer [e]
     $(this).attr('tabindex', i);
     // At each match >> set the attribute 'tabindex' >> with the counter's current value
});

For a more informed explanation, try Ben Nadel's blog. ("Hotties", huh! )

16th February 2008

As you will have seen from M.Alsup's Cycle pages, you can make Cycle slideshows out of all sorts of things: lists, paragraphs, divs (duh!), tables and what-all. After asking the creator's advice, I found that getting your CSS right means you can style your slideshow any way you want. I ended up with a case of "absolute-div-itis", but have since tried the same menu with a (semantically more correct) list structure & inline positioning. It works

Although Mike says so on his site - I had to rediscover it all by myself - it works MUCH better if you specify the container sizes! (It's less good if you use proportional dimensions, grrr.)

14th April 2008

I always think "How will this look to a user without Javascript?" The answer, in this case, was: "Plastered with images!" Very annoying. You can see a sort of hybrid result on our translated-by-Google pages, if you want a laugh.

Naturally, I'd prefer the reported 11% of users without Javascript to get a simple image menu: no need for their browser to load a further 30 pictures that just sit there, looking pointless

I tried preloading the slideshow images inside jQuery. It broke the slideshow: Cycle expects the slides to be already in the DOM . Lucky for me, Mike had already addressed this question, and come up with an AddSlides extension to Cycle.

Unluckily for me, it didn't work. It was erratic in Firefox, and threw a stop error in IE.

So I cheated (see below).

14th April 2008

Astonishingly for such a stickler as Accordion's creator, Jörn Zaefferer, the 'packed' version I downloaded was broken. Maybe I got a bad download. No worries, however . I pasted the full version into the Packer, generously provided by Dean Edwards, and that worked like a charm.

Hint: not all jQuery plugins compile correctly. In fact, some won't even go through jsLint without breaking . If the plugin you're using doesn't work, don't assume you've done it wrong - until you've tried de-linting the full version and re-packing it! Sometimes, it works wonders.

Of course, if you're a Javascript whizzkid, you can probably fix the plugin code yourself .... and you don't need to be reading this!

14th April 2008

In all the pages I've made with jQuery so far, I have content fading in or (as with Cycle) becoming visible as needed. This means, obviously, those objects must be hidden when the page loads - if not, their 'appearing' effect is pointless.

The jQuery help notes I've read seem to assume it's okay to set them invisible with CSS, as in display: none; That isn't okay with me!

Apart from the extra slideshow images, all my page content is relevant. If I hide it - only to be revealed with Javascript - it will stay hidden forever from users with js turned off, people using text readers and people on some mobile browsers. I don't want that. The content is in the page because it's useful!

Question: How to make stuff invisible with Javascript (so my Javascript effects can work their magic)? Whatever Javascript hides, Javascript can make visible again & those without Javascript are none the wiser - because, for them, the content will be there all the time.

jQuery is no help at all here The expression $(document).ready( etc ...) means the DOM is already loaded. jQuery can only act upon the page as it is when loaded; it isn't called before then.

I reckoned I had to do my Javascript hiding before jQuery gets called. So that's what I've done
I put this in the head, after the css and before all other scripts:

<script type="text/javascript"> document.write('<style type="text/css">#thisitem, #thatitem, #anotheritem {display: none;}<\/style>');

Works great!

14th April 2008

Some people make IE's Cleartype sound like a bug. It isn't. It's an anti-alias 'tuner' for Windows, that makes non-standard fonts look they were supposed to. The thing is, it can't keep track of all the fading-in and fading-out we love to do with jQuery, so typefaces end up looking like they would without Cleartype .... not so nice.

I tried a variety of 'Cleartype fixes' for jQuery and other Javascript methods - none of them worked for me. Then I found Mike Alsup had incorporated one with jQuery Cycle, asked him about it and here it is!

Just include it in your general.js file, you don't need to do anything else

// ==================================
// Cleartype fade fix by Mike Alsup

jQuery.fn.fadeIn = function(speed, callback) {
     return this.animate({
          opacity: 'show' }, speed, function() {
               if (jQuery.browser.msie)
                    this.style.removeAttribute('filter');
               if (typeof callback == 'function')
                    callback();
     });
};

jQuery.fn.fadeOut = function(speed, callback) {
     return this.animate({
           opacity: 'hide' }, speed, function() {
               if (jQuery.browser.msie)
                    this.style.removeAttribute('filter');
               if (typeof callback == 'function') callback();
     });
};

jQuery.fn.fadeTo = function(speed,to,callback) {
     return this.animate({opacity: to }, speed, function() {
          if (to == 1 && jQuery.browser.msie)
               this.style.removeAttribute('filter');
          if (typeof callback == 'function') callback();
     });
};

See all those callbacks? I'm a long way off being able to do that by myself.

One caveat: This actually makes the type rendering worse (a lot worse) on fades in Opera. As I suspect I'm the only person who thinks everybody should use Opera it's currently a worthwhile sacrifice, in my view.

Just so you know

14th April 2008

http://brandonaaron.net/docs/livequery/

 http://www.danwebb.net/2008/1/31/low-pro-for-jquery

 http://groups.google.com/group/jquery-dev/

....