All posts in jQuery

For an upcoming project, I’m going to need to be able to pull in an parse RSS feeds, and display them in a quick and simple manner, but without needing to store the information in a database or worry about only pulling the most recent items from a feed. Just read it in, and display each title with a link to the original source.
So I decided to put together a prototype that does just that, reads in a given RSS feed, and prints out in a list the title of each item and a link to the full article. Read more…

There are times when you’ll need to have a form with a few select boxes that are associated, such as suburbs and towns, where the options you want displayed should be those that belong to the currently selected state.

While there are a few ways to do this, I’m going to show you a quick way to achieve this using jQuery.
Read more…

There’s been a few times where I’ve needed something to happen when the user clicks on a few specific elements on the page, however if one of the elements is nested inside the other, the click event gets called twice, once for each element.

More often than not, this isn’t what I want, what I want is for the click on the top level to register, but not on the element underneath.

So how do you do that? It’s actually pretty simple. Read more…

A quick demo of what this article will build can be seen here:
http://www.subooa.com.au/example/randomfadingrotator/images.html

First of all, setup a list of elements on your page something like below:

1
2
3
4
5
6
7
8
9
10
11

 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
		<script src="rfr.js" type="text/javascript"><!--mce:1--></script>
<div id="rotating_items">
<div class="rotating_item">
				<img src="first_image.jpg" alt="" /></div>
<div class="rotating_item">
				<img src="second_image.jpg" alt="" /></div>
<div class="rotating_item">
				<img src="third_image.jpg" alt="" /></div>
</div>

Viewing the above code will show you a simple list of images in an unordered list, nothing fancy at all, so to get the items in the right place and remove the default styling we need to generate the css file (which as you may have noticed we are going to call rfr.css)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

body {
	font-family: "Trebuchet MS", "Geneva CY", Verdana;
	font-size: 12px;
	color: #414141;
}
 
h3{
	font-size: 18px;
	margin: 20px 0px;
}
 
#rotating_items{
	position: relative;
}
	#rotating_items h3{
		margin: 0px;
	}
 
	#rotating_items div.rotating_item{
		position: absolute;
	}

Again, there’s nothing overly complicated in this set of css classes, all that is happening is that each of the elements is being told to display on top of each other, so refreshing your page now you will see only one image. The other images are tucked in behind it, ready to be rotated through.

Now comes the fun part, the javascript. Again, you may have noticed that this javascript file we are going to call rfr.js

As noted earlier, we’re going to pick an element at random from the list available to fade in while the current image fades out.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

jQuery(document).ready(function(){
	showing = jQuery('#rotating_items div.rotating_item:first'); // Initiate the 'showing' variable as the first rotating_item
	showing.siblings('div').hide(); // Hide all other rotating_items
	setInterval("show_next_rotating_item(showing)", 5000); // Set the rotate time to 5 seconds
});
 
// Below is the code that picks an item at random to display
jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
    random: function(a, i, m, r) {
        if (i == 0) {
            jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
        };
        return i == jQuery.jQueryRandom;
    }
}); 
 
// The below function repeatedly gets called, to do the rotating
function show_next_rotating_item(t){
	jQuery(t).fadeOut('slow');
 
	var next_rotating_item = jQuery(t).siblings('.rotating_item:random');
	if(!next_rotating_item.attr('class')){
		next_rotating_item = jQuery('#rotating_items div.rotating_item:first');
	}
	next_rotating_item.fadeIn('slow');
 
	showing = next_rotating_item;
}

The main things to notice here are the ‘random’ extension of jQuery, and the use of the randoms selector when using the ‘siblings’ function call. This allows is to pick a random sibling element of the element that is currently being displayed.

This can be used with pretty much anything, including content based divs. The example here:
http://www.subooa.com.au/example/randomfadingrotator/testimonials.html
Shows a set of testimonials that rotate at random, the added bonus here if you view the javascript source for this version, is that the entire element becomes a hot spot for the link, so the use can click anywhere on the item. It also has some extra code in there to allow you to track the clicks as an event in Google if you so wish.