All posts tagged ‘jQuery’

File Under: JavaScript
May
3
2011

JQuery Update Improves HTML5 Data Tools

By

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:

Tags:
File Under: CSS, Visual Design
Nov
2
2010

Lettering.js Makes Complex Typography Easy

By

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:

Tags: , , , , ,
File Under: CSS, JavaScript, Visual Design
Oct
19
2010

jQuery Masonry: Play Tetris With Your CSS Floats

By

One of the things that’s always on our minds here at Webmonkey and Wired is the wired.com news stream. We produce a huge number of posts every day, and our curated front door only shows the crème de la crème. The rest gets dumped in a river, which is informative, but not that exciting to look at. So we see it as a challenge: how to keep it visually interesting and still show a good mix of stories, all with a minimal amount of fuss and busywork.

Tumblr is a good solution, and one that several other news organizations are using. I happened across the Scaffold theme, and I like how it organizes posts not on a strict grid, but on a fluid grid where elements fill in the gaps around each other. It looks like a Tetris board.

The secret sauce is jQuery Masonry, a plug-in for the popular library by David Desandro.

“Think of it as the flip side of CSS floats,” he writes. “Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.”

You can grab the code from Desandro or check out the development version on GitHub. Just like jQuery, it’s distributed under an MIT license.

A particularly nice use of it in the wild is Zander Martineau’s Rather Splendid blog.

See also:

Tags: , , ,
File Under: Frameworks, JavaScript
Oct
18
2010

New JQuery Release Adds JSLint Support

By

The popular jQuery JavaScript library has released an update to its current 1.4 release. The latest version, jQuery 1.4.3, is relatively minor update, but includes some speed improvements and several welcome new features including support for JSLint, HTML 5 data- attributes and a major rewrite of the css() module.

If you’d like to update to the latest release and test your code against jQuery 1.4.3, you can download it here (or here, minified). As always you can also load the code directly from Google’s CDN.

Perhaps the most important part of this release is the JSLint support. While Douglas Crockford’s JSLint tool — which is designed to find a multitude of JavaScript problems in your code — proudly proclaims it will “hurt your feelings” (and it will), it’s also a great way to debug your code.

According to a blog post announcing jQuery 1.4.3, the jQuery team will be using JSLint to prevent regressions in future releases. Of course, it also means that you can use JSLint in your own jQuery-based scripts without having to wade through jQuery errors.

One thing we should note though is that the jQuery team has made a few minor changes to JSLint to suit the “particular development style” of jQuery code. Most of the changes are minor, and you can read the full details in the jQuery style guide.

Here’s a video of jQuery creator John Resig showing off the power of the library, including an overview the latest enhancements (and those still to come) at the Future of Web Apps conference earlier this month in London. The video comes courtesy of the conference’s producers at Carsonified. Check out their Future of Web Design conference in New York next month.

John Resig – The Future Of JavaScript & jQuery 2010 from legacye on Vimeo.

See Also:

Tags: ,
File Under: JavaScript
Jul
22
2010

Video: jQuery Gurus Talk About Mobile, the Future

By

Here’s a short video about the future of jQuery, our favorite JavaScript library for creating rich, animated site interactions.

The interviewees are Mike Hostelter and Jonathan Stark, co-founders of appendTo, a consulting company that trains and supports jQuery programmers. The video was shot this week at O’Reilly OSCON 2010, taking place in Portland, Oregon through Friday.

In the interview, they talk a little bit about what’s next for the jQuery Core group — currently, jQuery creator John Resig is auditing mobile browsers to build more mobile features into jQuery, making it easier for JavaScript developers to make HTML5 iPad and smartphone web apps that are more “appy.” Also, there ultimately won’t be a separate pack for mobiles and desktops — the future of jQuery is one code library that works on all browsers and all devices.

See other OSCON 2010 videos on O’Reilly’s YouTube channel.

See Also:

Tags: , , , ,
« OLDER POSTS