All posts tagged ‘jQuery’

File Under: Programming

Learn jQuery From Someone Younger Than JavaScript

If my introduction to jQuery tutorial is too complicated, you should check out Dmitri Gaskin’s Google TechTalk:

The creator of jQuery, John Resig, is only 24, but this speaker makes Resig look ancient. Gaskin is only 12 years old, but he obviously knows his stuff. Not only does he give a thorough introduction to jQuery, he also takes impromptu questions that show he knows the framework inside and out.

By the way, Dmitri Gaskin is also a Drupal core contributor. Check out his website and follow him on Twitter. But you’ll have to wait a few years to hire him.

[via Agafix]

See also:

File Under: Programming

Load Content When Users Hit Page Bottom For Endless Scrolling

There’s a snazzy new feature we’ve seen a couple places that we just had to look into. When users reach the bottom of a page, more content is loaded. So, rather than users closing the window (or having to click a “next page” link), you can given them more to read. For sites with a significant amount of content, this makes for endless scrolling.

Example of endless scrolling

There’s a short delay, while an Ajax call, retrieves more content and pastes it below. Otherwise, it’s a smooth transition to the next bundle of blog posts, photos, or links. You can see endless scrolling in the wild at lifestreaming service, link-sharing site DZone, Google Reader (if you have an account), or this demo of the technology. Just scroll to the bottom of any of those pages.

If this is something you want to implement there’s a JQuery implementation for endless scrolling. As with many snazzy JavaScript tricks, you’ll need a server-side component to send the next set of data.

See also:

File Under: Visual Design

JQuery Redesign: “Be a JavaScript Rock Star”

New JQuery Site

JavaScript framework JQuery redesigned its project site, continuing its innovative ways. The home page jumps out with an illustration that is apparently contentious within the JQuery community. Like it or hate it, it’s definitely a bold departure from the previous version.

Rey Bango, a JQuery evangelist, puts it this way:

One of the things about the jQuery Project is that we’ve never run with the crowd or accepted the norm. By pushing boundaries and sometimes being “in your face” we’ve not only grown tremendously in popularity but we’ve pushed most of the other JS library projects to rethink their own principles and make changes to improve their products.

This redesign is reminiscent of the 2006 redesign, which is still online today. At the time it was the stand-out JavaScript effects library and the redesign still shows off its features. The home page is animated and contains draggable elements.

One of my favorite aspects of the JQuery site has always been its “Learn JQuery Now!” section of the home page. There is a small line of code and a button. Click the button and the JQuery code runs right on the page, showing potential users how easy and cool it is. I’m happy to see that piece remains intact with the redesign.

The new JQuery site was designed by Scott Jehl and the controversial rock star illustrated by Varick Rosete.

See also:

File Under: Software & Tools

Drag And Drop Your Tables Like Netflix

Dragging around embarrassing movies in my Netflix queue

Re-ordering my Netflix queue to move one embarrassing movie below another is easy. The code that let the developers at the movie rental company implement that feature is difficult. At least, it used to be.

Drag-and-drop is a fancy feature touted by many JavaScript frameworks. With extremely little code, page elements can be made draggable. Unfortunately, tables require a little more work.

Drag and drop row one moved to slot threeLuckily, someone else has done the work for us, which they describe in dragging and dropping rows in JavaScript. There’s a lot of code in there, but you can find the nitty gritty by scrolling down to the “putting it all together” section.

To make a table’s rows draggable, just create an instance of their TableDnD class, and pass it a reference to your table. Then, if you want to have your code respond to a dragged row, you’ll need to implement your own onDrop function.

If you’re using the popular JQuery framework, there’s a table drag-and-drop plugin that’s even easier to use.

See also:

File Under: Visual Design

Eye Candy Is Easier With jQuery UI 1.5

jQueryjQuery, the lightweight and powerful JavaScript library, has released a new edition of its UI component, which offers a wealth of ways to fancy up web sites’ user interfaces. It enables the easy creation of drag-and-droppable items on a page, mouse-resizable elements, and a host of cool effects.

The new edition includes an effects library called Enchant, whose visually exciting methods are called things like explode and pulsate; a theme engine called ThemeRoller; a testing and debugging suite; and more.

Check it out.

See Also: