How to make it work.

Drop these scripts in your header:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
   <script src="js/jquery.quote_rotator.js" type="text/javascript" charset="utf-8"></script>

Call the function to any list element:

        $(document).ready(function() {
            $('ul#quotes').quote_rotator();
        });

You can specify which quote you’d like to show first by adding a class of active to the list item. If you don’t explicitly add an active class, it will default to the first item in the list.

Configuration options.

        $('ul#quotes').quote_rotator({
         rotation_speed: 7000,                    // defaults to 5000
         pause_on_hover: false,                   // defaults to true
         randomize_first_quote: true              // defaults to false
         buttons: { next: '>>', previous: '<<' }  // defaults to false
        });

Rotation will pause on mouse hover by default. This is nice if you're rotating through links or other elements that you might not want fading away from the user.

Also notice that next/previous buttons are not included by default. If you want buttons, you need override the buttons option. As in the example above, assign a javascript object with next and previous keys. The values will be used as text for your buttons.

Download the project from github

If you’ve ever used DreamWeaver to create an image map, then you’ll be pretty familiar with image-mapper’s interface. It’s three dead simple steps:

1. Upload your image
2. Map your image
3. Copy your code

It all happens on a single page so it’s pretty hard to get confused.

It’s made with Ruby on Rails and jQuery. And best of all, no more having to deal with DreamWeaver! Have a look for yourself.

Visit Image Mapper.

How to make it work.

1. Drop these scripts in your header:

		<script src="js/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.hover_caption.js" type="text/javascript" charset="utf-8"></script>
	

2. Call the plugin function on your images:

		$(document).ready(function() {
			$('img').hover_caption();
		});
    

3. Add this tiny bit of CSS somewhere:

		.hover_caption {
			background-image: url(hover_caption_bg.png);
			/* NOTE: if you're img elements have paddings
			or margins you'll need to match them here
			to get things lined up properly. */
		}
    

And here’s some configuration options:

		$('img').hover_caption({
			caption_font_size: '18px',
			caption_color: 'white',
			caption_bold: true,
			caption_default: "Click for screenshots."
		});
	

And the captions are pretty smart.

If your image has a title attribute, the plugin will use that as the caption. Otherwise it will default to Click for screenshots. You can change the default if you like, of course.

A few gotchas.

• Be sure the path to hover_caption_bg.png is correct.
• Don’t forget to add hover_caption_bg.png to your project.
• Be sure the path to hover_caption.js is correct.
• Make sure you’ve referenced jQuery first in your header.

Download the project from github

		var stuff_on_sale = $('div#sale_items');
		$('p.featured', stuff_on_sale);
    

And, if you’re like me, you might have found this syntax confusing. JQuery targets elements using CSS selectors – and this second line definitely is not a CCS selector. So what’s going on here?

Introducing the scoped selector.

The first argument (e.g. p.featured) is a standard CSS selector. The second argument (e.g. this) could be any jQuery object.

This selector then will return any elements that are both (a) matching the first argument and (b) contained within the scope of the second argument.

So, in our example, the selector would return all paragraphs with a class of featured contained within the the div of sale items.

Hol’ up mayne!

You’re probably thinking couldn’t I just do this instead?

		$('div#sale_items p.featured');
	

Yes. You could and whenever possible you should. But there are some instances when targeting a specific element within the context of another set of elements can be very handy.

For example, I use scoped selectors frequently when:

• Iterating through arrays elements
• Accomplishing complex tasks with a click function
• Organizing large chunks of code – like plugins

And that’s just a few uses. Once you’re familiar with the idea, you’ll be scoping selectors all over the place.

The sample HTML looks like this:

Home
Services
About
Info
Contact

And the sample CSS:

		li {
			background-color: white;
			color: black;
			padding: 5px 10px;
		}
		li.selected {
			background-color: black;
			color: white;
		}
	

And the corresponding jQuery:

		$(document).ready(function() {

			// store url for current page as global variable
			current_page = document.location.href

			// apply selected states depending on current page
			if (current_page.match(/home/)) {
				$("ul#navigation li:eq(0)").addClass('selected');
			} else if (current_page.match(/services/)) {
				$("ul#navigation li:eq(1)").addClass('selected');
			} else if (current_page.match(/about/)) {
				$("ul#navigation li:eq(2)").addClass('selected');
			} else if (current_page.match(/information/)) {
				$("ul#navigation li:eq(3)").addClass('selected');
			} else if (current_page.match(/contact/)) {
				$("ul#navigation li:eq(4)").addClass('selected');
			} else { // don't mark any nav links as selected
				$("ul#navigation li").removeClass('selected');
			};

		});
    

How does it work?

First we capture the url of the current page in a variable. Then we use that variable to write conditions based on a regular expression (e.g. if the current url contains the word ‘about’). Finally, we use the :eq(index) selector to target the corresponding <li> and add a class of selected.

The only thing that’s remotely tricky here is the :eq(index) selector. This allows you to use an index to target a specific element within a larger array of matched elements.

So in our example, ul#navigation li would return an array of all five <li> elements whereas ul#navigation li:eq(4) would return only the fifth <li>. This saves us the trouble of having to apply a unique id to each list item.

A few gotchas.

• Make sure your regular expression matchers are not too general or you might end up adding selected states to the wrong pages. For example, this might not be a good solution for a blog where the slugs correspond to post tiles.
• Make sure to include the most recent version of jQuery in your head element.
• Make sure jQuery is loaded before the script for your selected navigation.
• Don’t forget to place your script inside the document ready function. Otherwise your script will run before the DOM is fully loaded – and do nothing.

Now, jQuery makes this functionality super easy – just a few lines of code. But here’s the tricky part: the configuration of each profile page needs to be stored in your database and be associated with a given user. Otherwise users would lose all their changes on page refresh. No good.

This means every time a user changes something (e.g. removes a stock ticker) you need to let rails know the profile has been changed so that the appropriate columns can be updated in your database (e.g. set the ticker’s ‘hidden’ boolean to true). And ideally, this should all happen silently in the background so that the user’s not even aware their changes are being saved on the fly.

Now, we’re talking about making the client talk to the server without a page refresh. That means AJAX. So here’s the plan…

1. Create your javascript event.

For simplicity, say you’d like to let the user can change the background color of their profile page. Let’s give them three buttons to toggle between red, yellow, and purple. Your html would look like this:

<body>
Make Green
Make Yellow
Make Purple

</body>

And your jQuery would look like this:

$('.change_bg_color').click(function() {
	if (this.id == 'green') { $('body').css('background-color', 'green') };
	if (this.id == 'yellow') { $('body').css('background-color', 'yellow') };
	if (this.id == 'purple') { $('body').css('background-color', 'purple') };
});

That will get our background changing color, but as soon as the page refreshes we’ll lose our changes. So let’s get rails involved.

2. Set up the appropriate models and associations

I’ll move pretty quickly here cause it’s so easy. I assume you have a current_user stored in your session. I’ll also assume you’ve set up a one-to-one association between ‘users’ and ‘profile_settings.’ This means you should be able to do something like this in your controller:

def make_background_green
	current_user.profile_setting.update_attributes(:background_color => 'green')
end

And then you can apply this color using inline style:

<body style="background-color=<%= current_user.profile_setting.background_color %>;" >
<%= link_to "Make Green", :action => "make_background_green" %>
<%= link_to "Make Yellow", :action => "make_background_yellow" %>
<%= link_to "Make Purple", :action => "make_background_purple" %>

</body>

Of course this is just nasty for a couple of reasons: (a) you’d have to write a new method for each possible color, (b) the markup is sort of ugly, and (c) we’re relying on a page refresh to do the work. So let’s clean this up a bit using AJAX.

3. Update your profile settings via AJAX.

First, let’s get our html looking better:

<body style="background-color=<%= current_user.profile_setting.background_color %>;" >
Make Green
Make Yellow
Make Purple

</body>

Then lets add some AJAX to our click event:

$('h3').click(function() {
	if (this.id == 'green') { $('body').css('background-color', 'green') };
	if (this.id == 'yellow') { $('body').css('background-color', 'yellow') };
	if (this.id == 'purple') { $('body').css('background-color', 'purple') };		

	$.post('http://your_site.com/profile_controller/change_background_color', {
		'background_color' : this.id
	});
});

Here’s where you need to pay attention. We’re sending an AJAX post request with two arguments: (1) the url we’d like to load and (2) the data we’d like to pass along as a key/value pair. This means your controller is going to fire the ‘change_background_color’ action and will have access to the params[:background_color] with a value equal to the clicked element’s id.

And so your controller will look like this:

def change_background_color
  current_user.profile_setting.update_attributes(:background_color => params[:background_color])
  render :nothing => true  # make sure the action knows not to load a template
end

4. Mission accomplished.

Your profile settings should now be updating quietly in the background. If you have any problems, start up firebug and watch your AJAX hit register in the console log. This can be very helpful when debugging. But don’t get discouraged. Once you get this process down, all sorts of cool things become possible.