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: , , , ,
File Under: Ajax, UI/UX
Jul
21
2010

Beautify Broken Links With Catch404

By

The 404 error is one of the bitter realities of the web.

“The page you’ve requested does not exist.” So cold and unforgiving. Unlike a bad database connection or an unresponsive server, the 404 Page Not Found error has a finality to it — this link is dead and it’s never coming back.

But now we have Catch404 by Addy Osmani, a jQuery plug in that handles broken links with style. Deploy Catch404 on your site, and instead of seeing a page reporting a broken link, the user is presented with an Ajax modal window (also called a hop-up, or a lightbox) informing them the linked page isn’t there. The windows also offers some alternate destinations they might want to check out.

We’ve been trying to make 404s go down a little easier for years now. The custom 404 page is a popular solution. It’s available on just about every web CMS out there. You can do it yourself, too. Browsers are also taking it upon themselves to beautify the broken link with custom pages, offering suggestions or inviting users to search for the page using a built-in search box.

Catch404 takes both of those ideas — the custom alert and the suggestions of what to do next — and places them into the user experience before the link is even loaded. The plugin, which requires the jQuery framework, sends the link off to Yahoo’s YQL engine to check to make sure it’s alive. It only performs this check for external URLs; local URLs don’t require the check. The check is performed behind the scenes, using an Ajax request. If all is good, the user goes about his or her way. If the check results in a 404, the user sees the modal window.

Here’s a demo.

You’ll notice one obvious downside, which is that your users will have to wait an extra half-second or so while the YQL call completes. So why use it?

When a user is browsing your site and clicks on a link you’ve provided, then sees a 404 error, it’s your problem whether you’re responsible or not. Linking to dead pages makes you look like a sloppy curator, and the user will place some, if not all, of the blame for that error on you. Catch404 is more helpful than an impersonal error.

If the speed hit from the cross-site link checking bothers you, consider adding Catch404 only to legacy content — those years-old pages filled with links that may or may not still be alive.

Activating Catch404 is simply a matter of assigning a class to the link, so you can invoke it only where it makes sense.

[via Delicious]

See Also:

Tags: , , ,
File Under: HTML5, Multimedia
Jul
15
2010

More Cool HTML5/JavaScript Video Players

By

One of the most-cited advancements in HTML5 the new syntax for embedding videos on web pages without the use of plugins.

Rather than load up a Silverlight or Flash player, you can just wrap a file URL in <video> tags and the video will play natively in the most recent crop of browsers — including Mobile Safari on the iPhone and iPad, where Flash and Silverlight aren’t allowed.

The design of default controls are left up to the browser vendor, but they are usually rather spartan, so the user experience is a little lacking. But since native web playback is all done with web standards, you can create fancy players in JavaScript and CSS that wrap around your video and make playing, controlling and navigating video content much more elegant.

We’ve previously told you about some great standards-based players from Sublime Video, Kaltura and Video for Everybody. Here are a few more.

  • FlareVideo (screenshot at the top) is an HTML5 player that we especially like because it’s very easy to dip into the CSS and JavaScript and start customizing. It also ships with a couple of themes that mimic the look of Vimeo and Spotify and serve as a helpful springboard for further customization.

  • Video JS is another player based on some lightweight JavaScript. It’s fully skinnable, library independent, and it has a fallback scheme for IE.

  • The Open Standard Media (OSM) player uses the jQuery framework to fancy up your HTML5 videos. So if you’re the jQuery type, this one’s for you. You can also use it to play back videos published on Vimeo and YouTube in a playlist that sits next to the player.

    • [Via insicdesigns]

    See Also:

    Tags: , , ,
    File Under: Ajax, JavaScript, Web Apps
    Jun
    3
    2010

    Beautiful Websites: Slippy for Presentations

    By

    Jordi Boggiano has created Slippy, a lightweight library for building animated, browser-based slideshow presentations. Slippy is very simple — check out a short demo and view the source code. Grab the code from github.

    It’s written in HTML and it uses JQuery for the interactions (touch the space bar, use the arrow keys, or click the mouse to go to the next slide). It also uses Syntax Highlighter, a bit of JavaScript that pretties up snippets of code — we use Syntax Highlighter for tutorials here on Webmonkey — so it’s especially useful for presentations where you’re showing code examples. Jordi points out that Slippy can run your scripts in pretty alert() boxes (rather than the standard, boring browser alerts) to show your examples in action.

    Composing a presentation is simple. Just hack a basic HTML file. Each slide is in its own <div>, and all the markup beyond that is standard HTML. Bravo!

    See Also:

    Tags: , ,
    File Under: Ajax, Frameworks, JavaScript
    Jan
    19
    2010

    JQuery Celebrates 4 Years on the Web With New Release

    By

    Popular Ajax library jQuery is celebrating its fourth birthday with a major new release — JQuery 1.4.

    JQuery has long had a devoted following among interface designers. Proponents tout its speed and lightweight structure which make it easy to integrate complex effects with only a few lines of code. Google, Microsoft, Amazon and independent web developers everywhere have turned to jQuery to handle Ajax, JavaScript animations and other hallmarks of the modern web.

    The latest version of jQuery boasts some impressive speed gains and represents a ground up refactoring of much of jQuery’s underlying code. According the jQuery’s developers this release is significantly faster across browsers and eliminates much of the redundancy in jQuery’s internal functions.

    Other nice changes in this release include support for HTML5 elements in serialization calls, the ability to test for specific rendering engines (for example, target WebKit with jQuery.browser.webkit) and support for per-property easing in your animations.

    For full details on everything that’s new, check out the jQuery blog post and be sure to look over the backwards-incompatible changes before you attempt to upgrade any of your jQuery projects.

    As always you can grab both the minified and full source versions of jQuery from the download page or simply include the Google hosted version in your projects by including the URL, http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js, in your projects.

    See Also:

    Tags: ,
    File Under: UI/UX, Web Services
    Oct
    29
    2009

    Google Groups Fail: JQuery Dumps Google Over Spam, Interface Problems

    By

    Much of Google’s success rests on the fact that the words “Google” and “suck” rarely appear in the same sentence.

    There is one notable exception: Google Groups, which lately has started to look more and more like an abandoned service. The mailing-list and discussion-board service has remained short on features since Google launched it in 2001. Meanwhile, Groups has become overwhelmed with spam, and one the most popular Google Groups — the JQuery mailing list, with more than 20,000 members — is jumping ship.

    John Resig, the lead developer of JQuery, a popular JavaScript Library for developing complex web applications, recently posted a sharply critical look at Google Groups.

    “As far as I’m concerned, Google Groups is dead,” he writes.

    Resig isn’t the only one with problems. Google Groups began life as a way to rescue the Deja.com Usenet archive, but as our Epicenter blog recently reported, the Usenet portion of Google Groups is fundamentally broken. Google has since addressed some problems highlighted in that piece, but even newly created groups, like the JQuery group, feel neglected and overrun with spam.

    While Resig is careful to note that Google Groups remains a workable optionfor private mailing lists, but for large public mailing lists like JQuery, Google Groups’ inability to combat spam, its poor moderator tools and general neglect have made the platform unusable.

    “The problem mostly lies in the use cases that we’re trying to support,” Resig says in an e-mail to Webmonkey. “We need to support people who are actively trying to help new users, and we also need to support people who just want a simple question answered.” Spam, awkward filtering tools and a lack of support have driven JQuery to look elsewhere for a platform that connects its users, he says.

    From an end-user point of view, the problem might not be immediately noticeable, especially if you’re using a good e-mail client which can filter out the spam for you. However, it can be a bit shocking to visit your favorite Groups’ homepage and discover it’s been overrun by spammers.

    While Gmail is good at filtering spam, Google Groups is so bad, it’s almost as if the company isn’t even trying. There is a moderation option, which helps a bit. For example, compare the Django Users Group homepage (which uses moderation) to the EveryBlock Group (which doesn’t use moderation). As you can see, there isn’t one legitimate message on the Everyblock Group homepage, while there’s hardly any spam in the Django Group.

    Sadly, as Resig points out, moderation makes joining and posting to a Google Group much more complex for the first-time users who have come seeking help, and the tools provided for moderators aren’t nearly as slick as you’d expect from a Google product.

    Compounding the problem, spammers have figured out that spoofing e-mail addresses works swimmingly in Google Groups. So even with moderation turned on, spam will inevitably get through. Even worse, it’ll look like it came from legitimate list members, or even the moderators. In the end, the moderators have to moderate their own e-mail addresses to truly stop Google Groups spam.

    Resig tells Webmonkey that JQuery is still looking for a suitable replacement for Google Groups. The top contenders are Vanilla Forums, which allows people to subscribe to all new posts and comments by e-mail, and Stack Exchange, which is essentially Stack Overflow customized for a specific topic.

    Unfortunately, based on Resig’s account, it looks like Google’s Data Liberation Front hasn’t trained its data-export vision on Groups just yet — there is no way to export all the messages from a Group (there is, however, the ability to export a list of all members). In the JQuery Group’s case, that means some 120,000 messages in the group will have to exported by hand.

    As for the future of Google Groups, well, the handwriting might well be on the wall. As blogger and former Yahoo engineer Andy Baio points out, “If you want to know which areas of big companies are being ignored, watch for spam taking over.”

    See Also:

    Tags: , , ,
    « OLDER POSTS