Tag Archives: jquery

jQuery 1.4 Released

Version 1.4 of jQuery has been released, and Net.Tuts+ has published a nice guide to some of the more interesting features that are now available.

I’m particularly interested in the first item, which sounds intriguing.

Pre 1.4, jQuery supported adding attributes to an element collection via the useful “attr” method, which can be passed both an attribute name and value, or an object specifying several attributes. jQuery 1.4 adds support for passing an attributes object as the second argument to the jQuery function itself, upon element creation.

A few other things that have been added are: more live() events, animation queue delays, a method to check whether an element contains another element with a certain selector, and a way to remove elements without destroying the data.

It certainly is a feature-packed release.

jQuery 1.4 Released: The 15 New Features you Must Know [Net.Tuts+]

Learning oEmbed

WoorkUp has an interesting post on oEmbed, and how you can use jQuery to take something like a YouTube or Flickr URL and automatically load the video or image on the page. Facebook uses this technique to fetch thumbnails and descriptions when you post a link.

WordPress 2.9 also includes oEmbed functionality, allowing you to easily add YouTube videos to your posts, simply by wrapping the video page’s URL in a pair of “embed” shortcode tags.

WoorkUp shows how you can implement the feature in your own projects.

Learning oEmbed: Convert Links Into Embedded Content [WoorkUp]

jParse: A jQuery XML Parser Plugin

jParse is a jQuery plugin that can asynchronously fetch an XML file (AJAX, in other words) and parse it for display. It works in all modern browsers, plus Internet Explorer 6+, and the file is only 1.8KB in size. It’s basic usage looks something like this, where #item-cont is the element that the XML content will be displayed in:

$('#item-cont').jParse({
    ajaxOpts: {url: 'digg-feed.xml'},
    count: '#item-count'
});

The script’s biggest limitation is that you can’t request an XML file from another domain, because of JavaScript’s Cross-Site Scripting taboo. You could, if you wanted, get around that with a PHP proxy or similar trick.

ThickBox Development Ends

The versatile jQuery “lightbox” script known as ThickBox is no longer being maintained, as of September 30th. This is unfortunate, as it was my favorite jQuery plugin for the purposes it was meant to serve, and it has been used by a lot of major applications, such as WordPress.

ThickBox, if you are unaware, is a UI script for creating pseudo-modal dialog boxes to display images, IFRAME’d content, AJAX data, etc.

The ThickBox homepage suggests some alternate scripts, of which ColorBox and jQuery UI Dialog are probably my favorites. ColorBox, especially, seems to match the functionality and extendability of ThickBox quite nicely. (It’s also a comfortably small 9kb in size.)

One more parting thought: Is a fork of ThickBox not out of the question, or at least someone taking over development? It would be nice to see someone pick up and continue work on the script.

GetGravatar jQuery Plugin

GetGravatar is a jQuery plugin that is a perfect touch for blog comment forms. It monitors an email address form input, and makes an AJAX request to load a Gravatar. (See a demo.) This would enable you to show a user’s Gravatar next to the comment form immediately after they input their email.

Get Gravatar is meant to be used with a text input. As the text changes in the input, it pings the Gravatar service to fetch the user’s avatar. Due to Gravatar’s restrictions, Gravatars must be retrieved with an MD5 hash of the user’s email. Since Javascript doesn’t have a built-in way to fetch an MD5 hash, this plugin has a PHP counterpart.

Obviously there are more creative uses for this, but either way it’s a nifty script.

Open Links in New Windows or Tabs Without Target=”Blank”

Though it’s not considered good practice to go around opening new windows on people, it still is something that there are practical uses for. There are legitimate reasons to open new windows, other than trying to open all of your external links in new windows, such as popping a window with a Google Map or Flash game, etc.

I recently came accross an interesting post on WP Cult that discussed opening external links in a new window with jQuery. I adapted the jQuery snippet a little and came up with this:

jQuery(function() {
jQuery("a.popup")
.click(function(){
window.open(this.href, "popupwin", "status=1, toolbar=0, location=1, menubar=0, width=600, height=450, resizeable, scrollbars");
return false;
})
});

If you add the snippet to your page head, between <script> tags, of course (and after referencing the jQuery library), you gain the ability to selectively make links open in new windows by adding the class of “popup” to the <a> tag.

In addition to avoiding the target=”_blank” attribute, you gain the control of being able to customize window size and chrome. It’s also very accessible to both users and search robots, since the href attribute still points to the usual URL, unlike with some JavaScript solutions that break browser features such as middle-clicking to open a link in a new tab.

Google AJAX Libraries API

Do you use a JavaScript library — such as jQuery, Prototype, or MooTools — on one (or more) of your websites? That probably adds a good 18-120 kilobytes to your pages’ total size, adding more time to users’ download time.

Now, how many websites use that same framework? How many websites make use of jQuery, or example? A lot. That means any given user could be downloading the JavaScript files multiple times in a day, as different sites require it. What a waste of time and bandwidth.

Google has an interesting solution. They host multiple versions of several major JavaScript libraries on their servers for web developers to take advantage of. This offers several advantages. Their servers are quick and have wide pipes allowing for very fast downloads, for one. The real benefit is caching.

If a user visits several sites that reference jQuery (or another library) from Google, their browser caches the file and will only load it once, reusing the cached file on the other sites when they are loaded. This is because you’re referencing a file from ajax.googleapis.com instead of your own domain, and if multiple sites reference it, the browser remembers it already downloaded the file and uses the local copy.

Continue reading →

jQuery Color Fade Menu

Have you ever seen one of those Flash navigational menus where the hover color fades in and out? You know, the ones where you point to an item and it doesn’t just change color abruptly, but fades into the other color?

Well, it’s possible to create that effect without Flash, using straight JavaScript. Using the jQuery framework it’s not too hard at all.

CSS-Tricks.com has a great tutorial up, teaching how to do just that. Color Fading Menu with jQuery.

It’s a neat effect, and though it’s not entirely necessary, it can make your navigation a little more interesting without detracting from it usability or SEO-wise.

Include Common JavaScript Libraries in Your WordPress Theme

I bet you didn’t know that WordPress already includes several common JavaScript libraries, ready to be called upon with a simple template tag. Libraries such as

  • jQuery
  • Scriptaculous
  • Tiny MCE
  • Thickbox

Want to use jQuery in your theme, for a tabbed box, an AJAX something, or some sort of DHTML effect? You can add it in with a single template tag in your header.

Continue reading →

jQuery Plugin: Jcrop

A lot of web apps these days involve images. Twitter, Gravatar, Facebook, you name it. For avatars, sharing photos, or whatever, user-submitted images are a big part of the modern web.

Now, suppose you’re building a web app, and you want to allow a user to upload an image of a certain size or aspect ratio (for whatever your purpose is). Now you can’t guarantee that the user will upload an image of the correct dimensions, and you probably don’t want them breaking your layout by submitting a 1200-pixel-wide image. What do you do?

Provide means for the image to be cropped in-browser. There’s a cool little jQuery plugin called Jcrop that allows users to crop images in browser. It seems customizable enough, letting you re-style the selection box, contstain it to a specific aspect ratio, etc. It works fairly similar to Gravatar’s cropping tool.