nyroModal – A Nice Lightbox jQuery Plugin

nyroModal iQuery window plugin

A few weeks ago, I found myself in a position where I needed a nice, simple, easy-to-use lightbox plugin for jQuery. After some searching, I found that there are quite a few different plugins for this purpose, and they all have their pros and cons. After trying a few different plugins, I finally settled on nyroModal.

During my search, I found Thickbox, but that, while being powerful and easily usable, is no longer under development (and hasn’t been for two and a half years). It looks nice, but there were a few quirks with it that I just didn’t like (they’re hard to quantify, but it just didn’t fit the particular application I was using).

I also came across a post on Line25 with a list of 10 different jQuery plugins for lightbox applications. I tried a handful of them. Shadowbox looked promising, but it requires a commercial license if you want to use it for commercial purposes.

Many of the other plugins I investigated only supported images, and I needed my application to allow for the potential of including inline content, Flash videos and more in the future.

I finally tried nyroModal and was very impressed. nyroModal is simple to use out-of-the-box. Basically, all you have to do is include the appropriate CSS and JS files, and then apply a class of “nyroModal” to the elements you want to open the lightbox.¬†NyroModal is also extremely customizable. You can adjust almost every aspect of the lightbox as it’s applied to your page.

Tipsy – Nice, Simple jQuery Tooltips

Today, I found a nice little script called Tipsy. Tipsy, by default, pulls the text from the “title” attribute of any HTML element and turns it into a nicely styled tooltip. The script is easy to configure and offers some nice customization options.

If you would prefer to display an attribute other than the title, you can actually choose any attribute or even indicate custom text to be displayed. You can set the tooltip to display on top of, underneath, to the right or to the left of the element being hovered over. You can even tell Tipsy to dynamically decide which direction to display the tooltip, based on the current position of the element within the window.

If you’re looking for a nice, simple, attractive way to show tooltips on your page, I would highly recommend using Tipsy.

Using Google to Serve Up MooTools or JQuery

You’ll find a lot of tutorials online and various speed-testing tools that tell you to use a content distribution network (CDN) to serve up your images, style sheets and javascript files. When they say that, they’re referring to using cloud storage (a series of servers located across the world). CDN allows you to serve up your content locally to your visitors, making it quicker and easier for them to load your site.

Today, I discovered that Google actually provides a bunch of common javascript libraries, including MooTools, JQuery, Yahoo User Interface (YUI) and more, for free (though, they’ve apparently been doing so for at least a year). Instead of saving the javascript library to your own server and linking to it in that location, you simply link to the javascript files on Google’s server and it’s served up to all of your visitors from their CDN.

Let Your Users Know an AJAX Event has Occurred

With AJAX becoming more and more prevalent, we, as developers, sometimes forget that the average user might not realize parts of the page have changed after an AJAX event has fired. This becomes especially problematic when the changes are occurring outside of the current viewport (which is highly likely if you have a large percentage of visitors using an 800×600 or even a 1024×768 screen resolution).

By adding a few simple lines of javascript to your AJAX event handler, you can make your visitors aware each time the AJAX event changes the content of the page.

Hiding and Showing Elements with Javascript

This is a quick tutorial to explain how you can easily show and hide page elements with javascript.

To begin with, each item that you want to hide/show should have a unique HTML ID. Let’s begin with a very simple HTML page.

<h1>This is my title</h1>
<div id="content">
	<h2>Div1 Follows</h2>
	<div id="div1">
		This is where my first div will be.
	</div>
	<h2>Div2 Follows</h2>
	<div id="div2">
		This is where my second div will be.
	</div>
</div>

We will then write a function that will hide all of the appropriate divs (in this case, div1 and div2).

Add a Retweet Button to Any Page

A few weeks ago, I came across a really nice script that lets you add a retweet button to any page of your site. You can add it into your site template or add it to a single page. The script uses simple javascript DOM replacement rather than inserting an iFrame the way other retweet scripts do. On top of that, the button is not associated with any specific Web site, so it won’t inject any additional text into the default status message it sends to Twitter.¬†This script is very flexible and brings with it quite a few nice features. Following is a quick rundown of some of the nicer features you’ll find. More information is available in the original post on John Resig’s blog.

Pages: