jQuery Samples

As part of my learning jQuery project, I've put together some pages which illustrate the things which are possible using jQuery. Many of these scripts were written by other people and I have acknowledged this where necessary and placed a link back to the source article on the page containing the demonstration. In some cases I have tweaked the script(s) (usually by modifying the style sheet).

Getting started

In my opinion there is no easy way into jQuery. You have to know some CSS, you have to know some Javascript and you have to know some HTML. Of course, it is entirely possible to copy and paste scripts from any of the thousands of sites which supply jQuery plugins, and in most cases this works fine. But if you have a problem, you have to be able "go under the hood" and tweak. The script which I am using to generate this tabbed dialog is a case in point. It does not work as downloaded.

For me, as a beginner, the biggest problem was getting to grips with the compact Javascript syntax which is possible with this library. I'd gaze at the script for ages and think "How does this actually work - what are all those braces and brackets for ....etc".

The best primer I found is here. Obviously I have not looked at them all - there are thousands of "tutorials" out there ! Most of the ones I looked at, I found confusing. This is the first one I found which made the "Ah-ha" light go on over my head.

Entropy Rules
As you can see, the tabs can contain any valid HTML content and be styled in any way you like.

Click on the picture to go to the site where I "borrowed" it from. If they were in the UK I'd buy one of their T-Shirts. Hope they don't mind me using one of their pictures.
Anway I think this is very impressive - a fully functioning tabbed dialog with half a dozen lines of javascript - not counting the library of course. But I didn't have to write that !

Thank you Greg Sidelnikov

This was going to be a demonstration of two jQuery effects on the same page i.e. the tabbed dialog and the image flip effect you can see on the home page.

But I could not make it work.

The tab is just blank. I have tried several easy tweaks, like changing the order in which the various scripts execute and wrapping everything in the $(document) .ready(function() but it won't play.

This needs some more research and experiment. I haven't given up on this yet so watch this space.
Bingo balls
Rusty Truck
This is going to be an example of a flash movie - have not got round to doing this yet.

However, I do not think it will work. Flash always wants to be top in the Z-Order so I think what will happen is that the flash object will always show through, irrespective of which tab is selected.

Another thing to try is what happens with dynamic content - e.g. stuff produced by a PHP script at the server ?
Here's the simple photo album (see the Stuff menu) running inside the tabbed dialog. Works a treat.

If you are using a modern browser ( e.g. Chrome, but not unsurprisingly IE9 ) you'll see rounded corners on the images, courtesy of CSS3.

Still got to figure out why example 2 won't run. Think it's something to do with the Z-order. Both examples use it.

This example is from Authentic Society. I had a big struggle to get it to work, because of errors and omissions in the explanation. [ I am not complaining - the guys who put AuthenticSociety together have done a fantastic job. I put these corrections here in the hope they might help other beginners - as the original article is targeted at "absolute beginners" ]. The first one is here:

<script type = "text/javascript">
// initialize plugin code
$(document).ready(function() {
    jQuery.Tabs.initialize( "MyTabbedView",
                            "300px", "150px", 4,
                            ['Description', 'How to Use', 'Download', 'Contact Us'],
                            ['Page1', 'Page2', 'Page3', 'Page4'] );

The number in red is missing in the description. It's the number of tabs you have defined. (I'm sure the need for this could be removed by having the script figure out the number of tabs defined in the array).

The second omission is that nowhere is it mentioned that there is an accompanying style sheet, which you absolutely must have to make this work. If you view the source of this page you'll find the styles declared in the head section. I discovered them by viewing the page source for the demo of this code which AuthenticSociety have on their site. That's where I found the missing parameter too.

The third problem is that there is a mistake in one of the styles, which totally screws up the page layout. The original is here:

	#Page1,#Page2,#Page3,#Page4 { visibility: hidden; display: block; }

The four id selectors refer to the <div> tags into which the content for each tab is placed. The display:block is not needed becasue the <div> is already a block element. The big problem though is with the visibility. The four divs need to be invisible until the code has fired up and set up the tabs. But the visibility property is the wrong way to do it. Sure, it makes the div contents invisible, but they are still on the page - you just cannot see them - it's like they were the same color as the background. You get a big blank gap underneath the tab where all the div contents are hiding. What you should say is:

	#Page1,#Page2,#Page3,#Page4 { display:none; }

and so the divs are not even on the page until the code fires up. See w3schools for more details.

The reason you don't see this gap on the AuthenticSociety demo is, I think, that they have placed all the following content in a div which is absolutely positioned to be up close underneath the tab. Although this works, it's not the right way to to it - you'd have to change the position everytime you change the tab content. It's what the professionals call "tight coupling" I believe.

In addition to these essential fixes, you probably will also want to twiddle the styles ( to change the colors and borders for example ) but that, as they say, I will leave as an exercise for the reader.