20 Excellent JavaScript Navigation Techniques and Examples

May 1 2009 by Kawsar Ali | 62 Comments

JavaScript allows you to add interactivity and feedback, making the user’s experience better and more intuitive.

Recently we showed you some exceptional CSS navigation techniques and we’d like to follow that up with an article about JavaScript-based navigation examples that you can use. Keep in mind that some of these techniques might not work if the client browser has JavaScript turned off (on average, 5% of users have JS disabled according to W3 web statistics).

In this article you’ll discover some terrific and unique JavaScript-powered navigation techniques and examples.

Tip: clicking on each image will take you directly to the demo page of the navigation menu technique if it’s on a separate page. Their names will take you to their project web page.

1. MenuMatic

This example takes semantic ordered or unordered list of links and turns it into a dynamic drop down menu system that can be vertically or horizontally oriented.

menumatic

View Demo Page

continue reading »

40 Exceptional jQuery Interface Techniques and Tutorials

Apr 8 2009 by Jacob Gube | 62 Comments

With the advent of JavaScript/web application libraries and frameworks, it’s become much easier to build interactive components for a site. For the folks that are unfamiliar with jQuery – it’s a popular, high-performance and compact JavaScript library/framework. jQuery will allow  you to reduce the amount of code you have to write for dealing with browser quirks, memory leaks, and repetitive code by providing you with a set of useful and highly-optimized and thoroughly-tested functions and methods.

In this article, we explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components. Whether you’re looking for a particular interface/interaction pattern built on Query (like module tabs or modal windows) or you simply want to learn the library by engaging in step-by-step tutorials – you should be able to find something here for you.

Modal Windows

1. How to create a stunning and smooth popup using jQuery

How to create a stunning and smooth popup using jQuery tutorial screen shot.

continue reading »

14 jQuery Plugins for Working with Images

Mar 14 2009 by Mirko Humbert | 58 Comments

JavaScript frameworks have become very popular in the recent years by making the creation of dynamic effects much easier. Lightweight, used in the WordPress and Drupal core, jQuery is now one of the most used JavaScript libraries around.

The following list of jQuery plugins will help you to improve the usability of your website or web applications by enhancing the display of your images.

1. s3 Slider

 - screen shot.s3 Slider Demonstration page.

continue reading »

10 Promising JavaScript Frameworks

Sep 3 2008 by Jacob Gube | 114 Comments

Popular JavaScript frameworks/libraries like jQuery, MooTools, Prototype, and YUI (to name a few of the most popular JavaScript frameworks out there) definitely have a solid foothold in the JavaScript framework arena. But for the more adventurous developers looking for new or alternative frameworks/libraries – there are some excellent frameworks outside the popular ones that’s worth checking out.

It’s always good to consider all of your options before settling on a JavaScript framework that’s right for you and/or your team – and though there’s definitely a lot of compelling reasons to stick to the big names – it won’t hurt you any to at least try the alternatives.

This article showcases 10 alternative and capable JavaScript frameworks/libraries to explore. Links to some of their demos (when available) are included in the entry so that you can see the framework in action.

1. SproutCore

SproutCore - screens hot.

continue reading »

Graphing/Charting Data on Web Pages: JavaScript Solutions

Aug 4 2008 by Jacob Gube | 19 Comments

Effective data visualization allows users to easily understand and consume otherwise complex, boring information. Plotting your data can serve as a replacement to tabular data, and is also a great way to add practical graphics to your web page or application. There are a variety of ways you can plot data on-the-fly – but in this article we’ll focus on 10 excellent JavaScript solutions to graphing/charting data that allow you to process data client-side. You’ll also find a link to one of the demonstration pages of the script so that you can see it in action.

Flot

Flot - Screen shot.

continue reading »

Learning MooTools: 20 MooTools Tutorials and Examples

Jun 19 2008 by Jacob Gube | 19 Comments

There are literally over a hundred of JavaScript frameworks out there that make writing complex client-side code significantly easier. If you’re in the market for a powerful, relatively lightweight, and customizable JavaScript framework, MooTools is worth checking out.

To help you get on your way to developing highly-interactive web applications using MooTools, here’s 20 tutorials and working examples that’s worth a read.

Getting Started with MooTools

1. The "Mootorial"

The Mootorial - Screenshot

continue reading »

16 Free JavaScript Solutions for Displaying Your Images

May 3 2008 by Jacob Gube | 44 Comments

If you’re looking for a way to display your images on a website but don’t have the time to create a custom solution, there’s plenty of free and easy-to-use scripts available at your disposal.

Here, I’ve compiled 16 free image galleries and slideshows for you to take a look at. Though the effects are smooth and their features are robust, none of them use Flash, only JavaScript, and they require very little coding on your part.

1. JonDesign’s SmoothGallery 2.0

SmoothGallery 2.0 is a nifty slideshow gallery that transitions between images very… smoothly. The author tested SmoothGallery 2.0 in Firefox, Opera, IE 6 and 7, and Safari. It requires the mootools JavaScript framework.

SmoothGallery 2.0: Improved Mootools Mojo for Images

SmoothGallery demo

continue reading »