Tag Archives: jquery

jQuery 1.4 Released

Jan 22, 2010 by Matt | Posted in Coding No Comments

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

Jan 13, 2010 by Matt | Posted in Coding No Comments

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

Nov 20, 2009 by Matt | Posted in Coding No Comments

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.

GetGravatar jQuery Plugin

Sep 3, 2009 by Matt | Posted in Coding No Comments

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”

Mar 6, 2009 by Matt | Posted in Coding One Comment

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

Jan 21, 2009 by Matt | Posted in Coding One Comment

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

Nov 19, 2008 by Matt | Posted in Coding No Comments

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

Nov 12, 2008 by Matt | Posted in WordPress 13 Comments

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

Sep 22, 2008 by Matt | Posted in Software & Scripts No Comments

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.

Tag Archives: jquery

TweetRoll