All posts tagged ‘jQuery’

File Under: JavaScript

Web’s Most Popular JavaScript Library Drops Support for Older Versions of IE

IE voodoo doll by Cheryl Brind/Flickr.

The popular jQuery JavaScript library has hit a major milestone with the release of jQuery 2.0. The 2.0 release is some 12 percent smaller than its predecessor, but the big news is that jQuery 2.0 drops support for Internet Explorer 6, 7 and 8.

Created to simplify the process of writing JavaScript and manipulating HTML, jQuery began life a mere seven years ago, but quickly found favor with developers sick of dealing with cross-browser JavaScript hassles. According to one survey published last year, jQuery turns up on roughly half of all sites on the web.

Will dropping support for older versions of IE change that? Probably not. If your site needs to maintain support for IE 8 and below (or even IE 9 and 10 running in compatibility mode) you’ll just need to stick with jQuery 1.9 or below.

“jQuery 2.0 is intended for the modern web,” writes jQuery’s Dave Methvin on the Query Foundation website. “We’ve got jQuery 1.x to handle older browsers and fully expect to support it for several more years.”

If you want the best of both worlds you can use a conditional comment to serve 2.0 to newer browsers and 1.9 to older ones, but the far easier way to go is sticking with jQuery 1.x. For now at least the primary use case for the 2.0 line is situations where IE support isn’t a consideration — think Chrome or Firefox add-ons, PhoneGap apps or node.js.

File Under: JavaScript

New ‘Registry’ Hopes to Simplify Finding, Sharing jQuery Plugins

JQuery, the crown king of JavaScript. Image: Roberto Verzo/Flickr.

JQuery greatly simplifies working with JavaScript, particularly for newcomers, and that has long made it a favorite with developers — roughly half of all sites on the web are using it. However, while jQuery itself simplifies things, finding plugins on the site has always been a huge pain.

In an effort to clean up and simplify the process of finding the perfect jQuery plugin, the jQuery project is launching a new site, the jQuery Plugin Registry. In a blog post announcing the new registry site, developer Adam Sontag says that the goal is to “reduce the… obstacles for plugin developers and consumers.”

Based on what’s currently available, the jQuery project has done a good job of building better back end tools for developers, but finding a plugin isn’t much easier than it was before.

Most of what’s new about the jQuery Plugin Registry is for plugin developers — namely Git support and very nice integration with GitHub. Developers can now publish their code to GitHub and the jQuery Plugin Registry will automatically be updated.

Unfortunately for those trying to find the perfect plugin to use on their sites the new Registry site has little in the way of new tools.

As with the old, much-neglected plugin site, each plugin gets a basic page that offers a download link as well as a link to past versions, documentation, the issue tracker, and the source code repository. However, actually browse through the site and you’ll discover that much of that info is often missing. Most jQuery plugins offer little in the way of documentation and the site still lacks any kind of preview images (if available there will be a link to a demo page).

The new site also ignores what could be helpful social tools — there are no user ratings, download counts, likes or anything else to indicate whether or not people actually like using a plugin. Of course now that the plugin registry code is on GitHub, it’s easy to see that issues regarding the site search and lack of screenshots have already been filed. When, or even if, they’ll ever make it to the site remains to be seen. For now the new site remains rough around the edges.

File Under: JavaScript, Multimedia

Tired of Tiny Movies? Go Large With BigVideo.js

Size matters. Image: Screenshot/Webmonkey

Nothing grabs a user’s attention like a big, full-window video on a landing page. For example, check out Path.com. However, with all the various screens potentially connecting to your site these days, making sure your movie plays full-window on all of them can be tricky.

That’s where BigVideo.js comes in. Developer John Polacek‘s BigVideo is a jQuery plugin for adding big background videos to your site. The plugin makes it easy to drop in a single video URL and get fit-to-fill background video that takes up the whole window. The script will fall back to displaying an image on devices where video doesn’t work.

BigVideo can also handle playlists, serving up a series of videos, as well as a very cool feature to play videos without the sound. And yes, you can (and should) add a button to allow users to turn the video off altogether. That said, I left BigVideo open, running in a background tab for several days and it didn’t have a noticeable impact on performance.

For more info, head over to the GitHub page where you can see BigVideo in action, get a full list of features and grab the code for your own site.

File Under: JavaScript

JQuery Update Improves HTML5 Data Tools

John Resig and the rest of the JQuery team have released a major upgrade to the popular jQuery JavaScript framework.

JQuery 1.6 is now available for download from the JQuery site (or you can update to the new CDN URLs)

Standout features in this release include tweaks to the .data() method, which automatically imports any HTML5 data- attributes on an element and converts them to JavaScript values using JSON semantics. For jQuery 1.6, the .data() method has been updated to match the W3C HTML5 spec which calls for camel-casing data attributes that have embedded dashes.

For example, in jQuery 1.5.2, an attribute of data-max-value="15" would create a data object of { max-value: 15 } but as of jQuery 1.6 it sets { maxValue: 15 }.

That, along with a few other changes, may break some code here and there, so be sure to test your apps before making the plunge into jQuery 1.6. For more info on everything that’s new, head over to the jQuery blog.

See Also:

File Under: CSS, Visual Design

Lettering.js Makes Complex Typography Easy

CSS 3 adds some awesome new tools to web designers’ toolkit — the ability to rotate, transform and tweak elements means complex layouts can be done with nothing more than some style sheet rules.

Combine that with some of the fancy new fonts available through web services like Typekit and Fonts.com and you’re well on your way to replicating the kind of fine-tuned typography control print designers have long enjoyed. However, targeting individual letters and words can still be tricky.

That’s where Lettering.js comes in. The JQuery plugin can wrap your text with span tags, allowing you to target CSS rules to individual letters, words or sentences.

If you wondered how the designers behind the Lost World’s Fairs CSS experiment did it, well, look no further than Lettering.js. The other showcase examples on the Lettering.js website are no less impressive.

The library, which requires JQuery, can be downloaded from Github. Using it is as simple as selecting the element you want to target and applying the appropriate function — basically, whether to wrap the letters, words or lines of your target element.

One thing to note, the developers recommend putting Lettering.js in your head tags to avoid the unsightly flash of unstyled content that can occur if you include it at the bottom of your page.

See Also: