75 (Really) Useful JavaScript Techniques

Advertisement

Developers and designers are using more and more JavaScript in modern designs. Sometimes this can be a hindrance to the user and take away from the simplicity of the design, and other times it can add greatly to the user’s experience. The key is a) adding the right amount of JavaScript, and b) using the right JavaScript techniques. We have already1 collected2 various3 JavaScript4 techniques5 in the past – now it’s time for a new portion of JavaScript.

Thanks to the Web’s widespread adoption of JavaScript, JavaScript libraries have sprung up to help make design and development easier. Here are a few of the major JavaScript libraries that developers use: jQuery, Prototype, Scriptaculous, mootools, Dojo. These frameworks have thriving communities whose members have developed countless plug-ins that can greatly add to the JavaScript framework.

However, sometimes we need JavaScript solutions that are a little more involved or specific. Here are 75 more handy JavaScript techniques that have made websites much sleeker and more interesting.

You may want to take a look at the following related articles:

75 Useful JavaScript Techniques

Hyphenation in Web11
This project collects working solutions for automatic hyphenation in (X)HTML pages. For different human and script languages, server- and client-side. A JavaScript-solution, called Hyphenator.js12 is available as well. Hyphenator.js brings client-side hyphenation of HTML-Documents on to every browser by inserting soft hyphens using hyphenation patterns and Franklin M. Liangs hyphenation algorithm commonly known from LaTeX and Openoffice.

Showcase of Beautiful Album and CD covers- Hyphenation in Web13

SocialHistory.js14
SocialHistory.js enables you to detect which social bookmarking sites your visitors use. It cannot enable you to see all of the user’s history. It checks, in a 20-questions style, if the user has been to a particular URL: It’s hit or miss. SocialHistory.js has a big list of the most popular social bookmarking sites which it checks against. An alternative approach15.

Useful JavaScript Techniques - SocialHistory.js16

Textboxlist Auto-Completion17
One of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook18. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading.

TextboxList's Autocompletion19

addSizes.js20
This small JavaScript takes care of an automatic link file-size generation. For instance, if you have large .mp3- or .pdf-files offered on your page, this script automatically checks the size of the file and displays the format and the file size in brackets.

Useful JavaScript Techniques - addSizes.js21

syntaxhighlighter22
SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server.

Useful JavaScript Techniques - syntaxhighlighter23

samaxesjs24
samaxesJS is a set of utilities and controls, written in JavaScript, for building rich interactive web applications. The TOC control dynamically builds a table of contents from the headings in a document and prepends legal-style section numbers to each of the headings: adds numeration in front of all headings, generates an HTML table of contents, degrades gracefully if JavaScript is not available/enabled.

Useful JavaScript Techniques - samaxesjs25

Step by Step26
This script allows you to show and explain visitors what your page has for them. You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.

Useful JavaScript Techniques - Step by Step27

MoreCSS28
MoreCSS is a small, cross-browser compatible JavaScript library which enables you to create tab menus, tables and lists with “zebra”-style as if you were using regular CSS. It’s enough to include the library in HTML and use CSS for general purpose design elements.

Useful JavaScript Techniques - MoreCSS29

Facelift Image Replacement30
Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (h1, h2, etc.) to span-elements and everything in between!

Useful JavaScript Techniques - Facelift Image Replacement31

CSS Sprites232
Cross-browser functionality is a bit of a freebie; jQuery works across most modern browsers, so everything you see here works in IE6+, Firefox, Safari, Opera, etc. We’ve also accounted for multiple graceful degradation scenarios.

Useful JavaScript Techniques - CSS Sprites233

jParralax34
“Parallax is [a jQuery library that] turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.” Think of looking through a camera and having layers of objects at various distances moving around. This library achieves that effect using multiple using static images, one for each layer.

Useful JavaScript Techniques - jParralax35

ddMenu – Context Menu Script
ddMenu is a simple MooTools-based script to create you’re own context menus. Press the Crtl-key and right click to switch between ddMenu and browser default context menu. Press the Shift-key and right click to open ddMenu beside the browser default context menu.

Useful JavaScript Techniques - ddMenu - Context Menu Script

js-hotkeys36
jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination. Alternative approach37.

Useful JavaScript Techniques - js-hotkeys38

BarackSlideshow39
An elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu40

Galleria41
Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Useful JavaScript Techniques - Galleria42

History Keeper43
unFocus History Keeper is a JavaScript based library for managing browser history (back button) and providing support for deep linking for Flash and Ajax applications. It enables back button support, for client-side applications, has a hash-based deep linking (Anchor Style – index.html#foo=bar) and is event-driven – Subscriber pattern. Currently the script works well in all modern browsers.

Useful JavaScript Techniques - History Keeper44

date.js45
Datejs is an extensive open source JavaScript Date library for parsing, formatting and processing time and dates.

Useful JavaScript Techniques - date.js46

Lightview47
Lightview is another script that create modal windows on a web-site. It has a smart image preloading, adjustable rounded corners, without PNGs and content resizes to always fit on your screen. The script can be used for presentations, single images, Quicktime-files, Forms, Iframes, Inline content and Flash-files.

Useful JavaScript Techniques - Lightview48

Coda popup bubbles49

The software company Panic has a beloved Mac application for developers called Coda50. Coda has an incredibly elegant design, and one of the subtle JavaScript effects that have been added to it is a stylized pop-up bubble. The blog jQuery for Designers has created a script that combines jQuery with custom code51 to replicate the feature used on the Coda website. The effect is subtle and elegant and greatly adds to the user’s experience.

Coda Bubble52

ajax im53
With the popularity of Web-based IM clients, like meebox, many developers want to add a JavaScript IM client of their own. Ajax IM is a library dedicated to creating an Ajax IM client that works out of the box. The script is a relatively large one, but it can be a nice effect for some websites that need more interaction with their users.

54

LiveValidation55

This is a handy gem for any web developer who uses forms. Trying to create an intuitive sign-up form can be a chore with all the different types of validation that need to happen. Also, creating a faster, more intuitive form with JavaScript can be tricky, too. Thankfully, LiveValidation56 has taken the guesswork out of the process and created a tiny, unobtrusive script that can take the pain out of form validation. If you’re a Ruby on Rails developer, LiveValidation comes in two forms: either with Prototype57 (ideal for Ruby on Rails) or one that can be used as a stand-alone package.

Live Validation58

Ajax AutoSuggest59
Like TextboxList’s autocompletion script, Ajax AutoSuggest is a tasteful and refined autosuggest script. The script is quite tiny, weighing in at just under 9k, and adds a very nice touch to any search form.

Ajax Auto Suggest60

FancyUpload61
This is an upload script that shows the progress of files you are uploading. It’s perfect for any upload form and even allows for multiple uploads at the same time. You can limit the size of the uploaded file as well as restrict the type of file that can be uploaded. The only requirement that FancyUpload has is that your users have installed Flash, which has a 95% penetration among Web users.

Fancy Upload62

Taggify63
Taggify is a bit different in implementation than the other JavaScripts listed. Taggify is a hosted solution for adding pop-up widgets to photos. Instead of having to download a script and host it on your site, you can just add a tiny <include>64 in your tag, and you’ll have the power of Taggify installed on your site. Using Taggify is interesting; it adds notes and other useful information to photos.

Think of it as a souped-up version of the note-adding feature for Flickr images. You can add any HTML to the Taggify note, creating a nice informational page to accompany any image that needs a bit more explanation.

Taggify65

AmberJack66
AmberJack is one of the more interesting and compelling JavaScript techniques. Website tours are extremely beneficial because they can help familiarize users, showcase features and products, and many other things. Possibly the best part about AmberJack is that nothing has to be installed or learned to start creating website tours. AmberJack provides a way for website and product owners to quickly and easily create website tours with JavaScript. It’s an amazingly tiny download, at only 4 KB.

67

Sliding Tabs68
This is another script inspired by Coda69. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here70. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution71.

72

73

JavaScript Image Loader74
If you’re looking for a more intuitive way for users to upload and preview images on your website, the JavaScript Image Loader (demo75) might fit the bill. The JavaScript Image Loader is a great way to show your users an image before it has uploaded, and it can also provide other information about the image if desired.

76

swfIR77
swfIR is an interesting concept as it uses a combination of Flash and JavaScript and adds image manipulation functionality to it. Once swfIR is installed, it adds a <span> with the class “swfir” around the image. swfIR can add almost any manipulation to an image. An especially useful feature of the script is its ability to automatically resize images based on the size of the page. When you resize the text on the page, the image resizes proportionally with the layout. By resizing the picture along with the text, the design feels much more cohesive.

swfIR78

MooFlow79
For fans of Apple’s Cover Flow feature in Leopard, MooFlow is taken directly from Apple’s playbook. MooFlow is a JavaScript gallery script that uses MooTools80 and adds a bit of JavaScript magic to make beautiful image galleries, complete with a slider that mimics Cover Flow.

Just like with Cover Flow, you can manipulate MooFlow’s gallery layout and functionality. You can toggle full-screen mode, image reflection, and autoplay. MooFlow is quite configurable and easy to set up because it just grabs all of the images within an element.

MooFlow81

amCharts82
This script is a chart generator that runs off of a combination of flash and JavaScript. You can generate virtually any type of graph or chart with the script, and can even use .csv and xml files to pull the data from. With amCharts, you can generate graphs in the form of Column & Bar, Pie & Donut, Line & Area and Scatter & Bubble.

AM Charts83

84

GreyBox85
GreyBox’s website hails the JavaScript pop-up window as “A pop-up window that doesn’t suck,” and for good reason. GreyBox does everything that a modal window should do. It can display pictures, websites, and just about any other content you can think of.

Using GreyBox is incredibly easy because once you’ve included the JavaScript file in the header, the only thing left to configure is adding a <rel> tag to whatever element you want to display in the window.

Mailist86
While Mailist isn’t a full-blown AJAX contact form87, the tiny script is exactly what most Web developers need to quickly store email addresses for things like beta sign-ups and other expression-of-interest forms. It even has a back end for administering things like email backups and editing the look of the form.

88

SWFObject89
SWFObject is a tiny little Flash player that uses JavaScript to overcome many of the obstacles that can’t be solved by markup alone. The player is a tiny download, only 9.5 KB (or 3.8 KB GZIP’ed). SWFObject prides itself on its compatibility with modern browsers, and it actually uses JavaScript to help detect which Flash player version to use and to avoid outdated Flash plug-ins that break Flash content.

SWF Object90

PlotKit91
PlotKit is a JavaScript chart-plotting script that relies on the tiny JavaScript framework Moochikit. PlotKit is an exceptional library for quickly plotting all sorts of graphs.

PlotKit92

JavaScript tabifier93
The JavaScript tabifier is a nifty little script that allows you to quickly and easily create tabs for your content. All that is required to use tabifier is to include the JavaScript and add a <div> with the class “tabber” surrounding the tabbed content, and then add the class “tabbertab” and the title for the <div> in what shows as the tab’s title. You can even use advanced techniques, such as adding cookies to the tabs, dynamically changing the tabs, and setting a default tab.

Tabifier94

FancyZoom 1.195
Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom is providing a smooth, clean, truly Mac-like effect.

It is focused on a smoothest, polished zooming animation and automatically scales images from any image link, with no HTML changes. The script also preloads full-size images in the background on link mouseover and requires no Javascript libraries. FancyZoom requires only two lines of code in your HTML-files.

96

A Mac OS X-style Dock In JavaScript97
Apple’s Mac OS X operating system is renowned for its fluid graphical effects. One impressive feature is the dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Achieving this effect in JavaScript is difficult, but the MacStyleDock function allows this feature to be implemented easily.

Useful JavaScript Techniques - A Mac OS X-style Dock In JavaScript98

fValidator – An open source (free) unobtrusive javascript tool for easy handling form validation99
fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). Alternative jQuery Plugin100.

Useful JavaScript Techniques - fValidator - An open source (free) unobtrusive javascript tool for easy handling form validation101

jQuery Interactive Date Range Picker with Shortcuts102
An advanced jQuery date picker that is optimized for quickly selecting a date from a list of preset dates/ranges, and we added smooth transitions when additional options are revealed.

Useful JavaScript Techniques - jQuery Interactive Date Range Picker with Shortcuts103

Raphaël104
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the Web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library. Raphaël uses SVG and VML as a base for graphics creation.

Useful JavaScript Techniques - Raphaël105

NoGray Time Picker106
This time picker utilizes a simple drag and drop interface. To select the time users can just drag the minutes or hour of a clock.

Useful JavaScript Techniques - NoGray Time Picker107

Yetii – Yet (E)Another JavaScript Tab Interface108
Yetii is a simple, yet functional tab interface implementation. It has lightweight, object-oriented code and degrades gracefully in browsers without JavaScript-support. You can have many independend tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.

You can link to certain tab on page A from page B via URL parameter and you can turn on tab persistence feature, so the most recently clicked tab is stored inside a cookie and remembered between page refresh.

Useful JavaScript Techniques - Yetii - Yet (E)Another JavaScript Tab Interface109

Calendar110
Calendar is a Mootools Javascript class that adds accessible and unobtrusive date-pickers to your form elements.It has highly configurable inputs and selects, multi-calendar support (with padding), variable navigation options and multi-lingual and fancy date formatting.

Useful JavaScript Techniques - Calendar111

Starbox112
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well.

Useful JavaScript Techniques - Starbox113

Magic Zoom114
Magic Zoom is a JavaScript zoom tool. It’s the best way to display images in incredible detail. Users do not need to click anything – they just move their mouse over the image to see every detail of your product.

Useful JavaScript Techniques - Magic Zoom115

Magic Magnify116
Magic Magnify is a Flash zoom tool. It’s an elegant effect to view images with a magnifying-glass. Upon hover over the image, the user sees the close-up detail of the product. Price: $28 / £15 / €18.

Useful JavaScript Techniques - Magic Magnify117

Carousel.us118
Carousel.us is a Javascript 3D carousel, using either the prototype.js and scriptaculous.js or mootools.js frameworks. It also uses PHP Easy Reflections v3 by Richard Davey.

Useful JavaScript Techniques - Carousel.us119

slideshow120
Slideshow is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. Slideshow is the result of many trials in code attempting to create a javascript class that was lightweight, unobtrusive, a snap to setup (but also highly configurable), extendable and – built using the javascript framework with the best effects – visually very impressive. Slideshow began as a side project by Aeron Glemann, and is now open source with an MIT-style license.

Useful JavaScript Techniques - slideshow121

jgrousedoc122
jGrouseDoc allows developers to produce documentation for their javascript code based on javadoc-like comments embedded into the source code. It allows documentation of classes, regardless what kind of library/technology was used to implement OOP. The script also allows documentation of multiple syntaxes that could be used to invoke a function/method. The output is customizable using CSS and Velocity templates or XSLT.

Useful JavaScript Techniques - jgrousedoc123

Lightbox 2124
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Useful JavaScript Techniques - Lightbox 2125

Control.Window126
Control.Window is a fully programmable, multi purpose windowing toolkit for Prototype. It covers a wide variety of use cases and allows for a high degree of customization. It can attach to links to open the targets as windows, or can be filled with dynamic content. It includes support for stackable, draggable and resizable windows. Subclasses to handle Modal windows, LightBoxes and Tooltips are included.

Useful JavaScript Techniques - Control.Window127

SimpleModal128
SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

Useful JavaScript Techniques - SimpleModal129

Creating a carousel with MooTools130
You’ve probably seen it on various websites: those neat little inline slideshows that browse you through a gallery of images (or content if you want, too). Most people simply copy the code to use it on their own site, but I believe that by making it yourself, you learn new techniques and gain new insight. Therefore I’ll walk you through this tutorial that teaches you how to achieve this through the use of CSS and MooTools.

Useful JavaScript Techniques - Creating a carousel with MooTools131

Unobtrusive Expand and Collapse Navigation132
A tutorial that displays how to to create a vertical navigation that will expand and collapse to show and hide sub-navigation using only unordered lists and as few class/id names as possible.

Useful JavaScript Techniques - Unobtrusive Expand and Collapse Navigation133

Image Cross Fade Transition134
Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript. Today’s challenge is the rollover transition.

Useful JavaScript Techniques - Image Cross Fade Transition135

Slider Gallery136
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.

Useful JavaScript Techniques - Slider Gallery137

FancyZoom meets jQuery // Ordered List // We Make The Web Beautifully Simple138

Useful JavaScript Techniques - FancyZoom meets jQuery // Ordered List // We Make The Web Beautifully Simple139

Build An AJAX Powered Shopping Cart140
The goal of this tutorial is to show you how to build an AJAX powered shopping cart. However, it will not be production ready. The back end requirements vary from site to site far too much to write an effective tutorial. Instead, we are going to focus on the AJAX parts.

Useful JavaScript Techniques - Build An AJAX Powered Shopping Cart141

jQuery iPod-style Drilldown Menu142
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

Useful JavaScript Techniques - jQuery iPod-style Drilldown Menu143

Load Content While Scrolling With jQuery144
This script allows to load the content “on the fly” – once th visitors has scrolled vertically to the end of the content block. “I always loved the dZone’s Ajax content loading while scrolling feature and created a similar one using jQuery.”

Useful JavaScript Techniques - Load Content While Scrolling With jQuery145

JavaScript Tooltips146
This tutorial describes how to create a nice, lightweight JavaScript tooltip. By Michael Leigeber.

Useful JavaScript Techniques - JavaScript Tooltips147

Newsticker148
Antonio Lupetti re-creates a news ticker which is similar to the one used on Newsvine. Mootools in use.

Useful JavaScript Techniques - Newsticker149

jQuery virtual tour150
This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.

Useful JavaScript Techniques - jQuery virtual tour151

Flexigrid152
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Useful JavaScript Techniques - Flexigrid153

tableFilter154
This script allows users to filter and sort even large tables quickly and in an interactive way.

Useful JavaScript Techniques - tableFilter155

Row Locking with Checkboxes156
“I had my function set up so that if any part of the row was clicked, the checkbox would check. When I clicked the actual checkbox, it would show a checkmark, but since the checkbox is a part of that row, my function would run, too, which would then think it’s time to uncheck the checkbox. In a fraction of a second, it would look like the checkbox never checked, but the row changed color anyway, sending the wrong signals to the end user.”

Useful JavaScript Techniques - Row Locking with Checkboxes157

jQuery File Tree158
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. It has the ability to style icons based on file extension, uses AJAX to fetch file information on the fly, has a customizable expand/collapse event and support single- and multi-folder views.

Useful JavaScript Techniques - jQuery File Tree159

Proto.Menu, prototype based context menu160
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu161

Pricing Matrix162
This tutorial explains how to create a matrix that would give an indication of relationships among the information provided.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu163

Toggling Announcement Slider164
“A few of my customer have asked for me to create a subtle but dynamic (…I know…) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick from GoDaddy’s playbook, I put together an announcement slider that toggles on click. Thanks to MooTools 1.2, this was a breeze.”

Useful JavaScript Techniques - Proto.Menu, prototype based context menu165

Tutorials

Show/hide a Login Panel using Mootools 1.2166
“Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest WordPress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.”

Images slider to create Flickr-like slideshows167
If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework. “Since long time I was looking for a simple way to implement a Flickr-like slideshow (”image carousel”) and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.”

Create an apple style menu and improve it via jQuery168
“Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.”

Useful JavaScript Techniques - Create an apple style menu and improve it via jQuery169

Creating a Slick Auto-Playing Featured Content Slider170
By Chris Coyier.

Useful JavaScript Techniques - Creating a Slick Auto-Playing Featured Content Slider171

Build An Incredible Login Form With jQuery172
One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we’ll also animate it

Useful JavaScript Techniques - Build An Incredible Login Form With jQuery173

Create a Slick Tabbed Content Area using CSS & jQuery174
“One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.”

Useful JavaScript Techniques - Create a Slick Tabbed Content Area using CSS & jQuery175

Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous176
Learn how to create a lightweight, intelligent “accordion” effect using the Prototype and Scriptaculous libraries.

Useful JavaScript Techniques - Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous177

Create a Simple, Powerful Product Highlighter with MooTools178
This tutorial will help you find your inner cow by introducing you to one of the most powerful and modular javascript libraries—MooTools. You’ll create a flexible tool for highlighting your sites products or services using the MooTools javascript framework.

Useful JavaScript Techniques - Create a Simple, Powerful Product Highlighter with MooTools179

Creating a Dynamic Poll with jQuery and PHP180
When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

Useful JavaScript Techniques - Creating a Dynamic Poll with jQuery and PHP181

Related Posts

You may want to take a look at the following related articles:

Footnotes

  1. 1 http://www.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/
  2. 2 http://www.smashingmagazine.com/2008/04/15/60-more-ajax-and-javascript-solutions-for-professional-coding/
  3. 3 http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/
  4. 4 http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
  5. 5 http://www.smashingmagazine.com/2007/05/30/tables-and-data-grids-with-ajax-dhtml-javascript/
  6. 6 http://www.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/
  7. 7 http://www.smashingmagazine.com/2008/04/15/60-more-ajax-and-javascript-solutions-for-professional-coding/
  8. 8 http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/
  9. 9 http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
  10. 10 http://www.smashingmagazine.com/2007/05/30/tables-and-data-grids-with-ajax-dhtml-javascript/
  11. 11 http://yellowgreen.de/hyphenation-in-web/
  12. 12 http://code.google.com/p/hyphenator/
  13. 13 http://yellowgreen.de/hyphenation-in-web/
  14. 14 http://www.azarask.in/blog/post/socialhistoryjs/
  15. 15 http://www.niallkennedy.com/blog/2008/02/browser-history-sniff.html
  16. 16 http://www.azarask.in/blog/post/socialhistoryjs/
  17. 17 http://devthought.com/textboxlist-meets-autocompletion/
  18. 18 http://www.facebook.com
  19. 19 http://devthought.com/textboxlist-meets-autocompletion/
  20. 20 http://natbat.net/2008/Aug/27/addSizes/
  21. 21 http://natbat.net/2008/Aug/27/addSizes/
  22. 22 http://code.google.com/p/syntaxhighlighter/
  23. 23 http://code.google.com/p/syntaxhighlighter/
  24. 24 http://code.google.com/p/samaxesjs/
  25. 25 http://code.google.com/p/samaxesjs/
  26. 26 http://icant.co.uk/sandbox/stepbystep/#examples
  27. 27 http://icant.co.uk/sandbox/stepbystep/#examples
  28. 28 http://yellowgreen.de/morecss
  29. 29 http://yellowgreen.de/morecss
  30. 30 http://facelift.mawhorter.net/
  31. 31 http://facelift.mawhorter.net/
  32. 32 http://alistapart.com/articles/sprites2
  33. 33 http://alistapart.com/articles/sprites2
  34. 34 http://urlgreyhot.com/personal/weblog/jparralax
  35. 35 http://urlgreyhot.com/personal/weblog/jparralax
  36. 36 http://code.google.com/p/js-hotkeys/
  37. 37 http://nettuts.com/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/
  38. 38 http://code.google.com/p/js-hotkeys/
  39. 39 http://devthought.com/barackslideshow-an-elegant-lightweight-slideshow-script/
  40. 40 http://devthought.com/barackslideshow-an-elegant-lightweight-slideshow-script/
  41. 41 http://devkick.com/lab/galleria/
  42. 42 http://devkick.com/lab/galleria/
  43. 43 http://www.unfocus.com/projects/historykeeper/
  44. 44 http://www.unfocus.com/projects/historykeeper/
  45. 45 http://code.google.com/p/datejs/
  46. 46 http://code.google.com/p/datejs/
  47. 47 http://www.nickstakenburg.com/projects/lightview/
  48. 48 http://www.nickstakenburg.com/projects/lightview/
  49. 49 http://jqueryfordesigners.com/coda-popup-bubbles/
  50. 50 http://www.panic.com/coda/
  51. 51 http://jqueryfordesigners.com/coda-popup-bubbles/
  52. 52 http://jqueryfordesigners.com/coda-popup-bubbles/
  53. 53 http://www.ajaxim.com
  54. 54 http://coding.smashingmagazine.com/wp-content/uploads/2008/09/ajaxim.jpg
  55. 55 http://www.livevalidation.com/
  56. 56 http://www.livevalidation
  57. 57 http://www.prototypejs.org/
  58. 58 http://www.livevalidation.com/
  59. 59 http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html
  60. 60 http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html
  61. 61 http://digitarald.de/project/fancyupload/1-0/
  62. 62 http://digitarald.de/project/fancyupload/1-0/
  63. 63 http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx
  64. 64 http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx
  65. 65 http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx
  66. 66 http://amberjack.org/
  67. 67 http://amberjack.org/
  68. 68 http://creativepony.com/journal/scripts/sliding-tabs/
  69. 69 http://panic.com/coda/
  70. 70 http://creativepony.com/demos/sliding-tabs/
  71. 71 http://thecodecentral.com/2008/02/21/a-useful-javascript-image-loader
  72. 72 http://jqueryfordesigners.com/coda-slider-effect/
  73. 73 http://creativepony.com/journal/scripts/sliding-tabs/
  74. 74 http://thecodecentral.com/2008/02/21/a-useful-javascript-image-loader
  75. 75 http://test.thecodecentral.com/demos/imageloader/
  76. 76 http://thecodecentral.com/2008/02/21/a-useful-javascript-image-loader
  77. 77 http://www.swfir.com/
  78. 78 http://www.swfir.com/
  79. 79 http://www.outcut.de/MooFlow/
  80. 80 http://mootools.net/
  81. 81 http://www.outcut.de/MooFlow/
  82. 82 http://www.amcharts.com/pie/
  83. 83 http://www.amcharts.com/pie/
  84. 84 http://www.amcharts.com/pie/
  85. 85 http://orangoo.com/labs/GreyBox/
  86. 86 http://ninjadesigns.co.uk/
  87. 87 http://www.dustindiaz.com/ajax-contact-form/
  88. 88 http://ninjadesigns.co.uk/
  89. 89 http://code.google.com/p/swfobject/
  90. 90 http://code.google.com/p/swfobject/
  91. 91 http://www.liquidx.net/plotkit/
  92. 92 http://www.liquidx.net/plotkit/
  93. 93 http://www.barelyfitz.com/projects/tabber/
  94. 94 http://www.barelyfitz.com/projects/tabber/
  95. 95 http://www.cabel.name/2008/02/fancyzoom-10.html
  96. 96 http://www.cabel.name/2008/02/fancyzoom-10.html
  97. 97 http://safalra.com/web-design/javascript/mac-style-dock/
  98. 98 http://safalra.com/web-design/javascript/mac-style-dock/
  99. 99 http://zendold.lojcomm.com.br/fvalidator/
  100. 100 http://digitalbush.com/projects/masked-input-plugin
  101. 101 http://zendold.lojcomm.com.br/fvalidator/
  102. 102 http://www.filamentgroup.com/lab/jquery_interactive_date_range_picker_with_shortcuts/
  103. 103 http://www.filamentgroup.com/lab/jquery_interactive_date_range_picker_with_shortcuts/
  104. 104 http://raphaeljs.com/
  105. 105 http://raphaeljs.com/
  106. 106 http://www.nogray.com/time_picker.php
  107. 107 http://www.nogray.com/time_picker.php
  108. 108 http://www.kminek.pl/lab/yetii/
  109. 109 http://www.kminek.pl/lab/yetii/
  110. 110 http://www.electricprism.com/aeron/calendar/
  111. 111 http://www.electricprism.com/aeron/calendar/
  112. 112 http://www.nickstakenburg.com/projects/starbox/
  113. 113 http://www.nickstakenburg.com/projects/starbox/
  114. 114 http://www.magictoolbox.com/magiczoom/
  115. 115 http://www.magictoolbox.com/magiczoom/
  116. 116 http://www.magictoolbox.com/magicmagnify/
  117. 117 http://www.magictoolbox.com/magicmagnify/
  118. 118 http://www.piksite.com/carousel.us/
  119. 119 http://www.piksite.com/carousel.us/
  120. 120 http://code.google.com/p/slideshow/
  121. 121 http://code.google.com/p/slideshow/
  122. 122 http://code.google.com/p/jgrousedoc/
  123. 123 http://code.google.com/p/jgrousedoc/
  124. 124 http://www.lokeshdhakar.com/projects/lightbox2/
  125. 125 http://www.lokeshdhakar.com/projects/lightbox2/
  126. 126 http://www.livepipe.net/control/window#hoverbox
  127. 127 http://www.livepipe.net/control/window#hoverbox
  128. 128 http://www.ericmmartin.com/projects/simplemodal/
  129. 129 http://www.ericmmartin.com/projects/simplemodal/
  130. 130 http://www.webdevlounge.com/javascript/creating-a-carousel-with-mootools/
  131. 131 http://www.webdevlounge.com/javascript/creating-a-carousel-with-mootools/
  132. 132 http://willworkforart.net/tutorials/unobtrusive-expand-and-collapse-navigation
  133. 133 http://willworkforart.net/tutorials/unobtrusive-expand-and-collapse-navigation
  134. 134 http://jqueryfordesigners.com/image-cross-fade-transition/
  135. 135 http://jqueryfordesigners.com/image-cross-fade-transition/
  136. 136 http://jqueryfordesigners.com/slider-gallery/
  137. 137 http://jqueryfordesigners.com/slider-gallery/
  138. 138 http://orderedlist.com/articles/fancyzoom-meet-jquery
  139. 139 http://orderedlist.com/articles/fancyzoom-meet-jquery
  140. 140 http://nettuts.com/javascript-ajax/build-an-ajax-powered-shopping-cart/
  141. 141 http://nettuts.com/javascript-ajax/build-an-ajax-powered-shopping-cart/
  142. 142 http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu
  143. 143 http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu
  144. 144 http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
  145. 145 http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
  146. 146 http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/
  147. 147 http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/
  148. 148 http://woork.blogspot.com/2008/07/fantastic-news-ticker-newsvine-like.html
  149. 149 http://woork.blogspot.com/2008/07/fantastic-news-ticker-newsvine-like.html
  150. 150 http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en
  151. 151 http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en
  152. 152 http://webplicity.net/flexigrid/
  153. 153 http://webplicity.net/flexigrid/
  154. 154 http://ideamill.synaptrixgroup.com/?page_id=16
  155. 155 http://ideamill.synaptrixgroup.com/?page_id=16
  156. 156 http://www.askthecssguy.com/2007/05/brett_asks_the_css_guy_if_the.html
  157. 157 http://www.askthecssguy.com/2007/05/brett_asks_the_css_guy_if_the.html
  158. 158 http://abeautifulsite.net/notebook/58
  159. 159 http://abeautifulsite.net/notebook/58
  160. 160 http://yura.thinkweb2.com/scripting/contextMenu/
  161. 161 http://yura.thinkweb2.com/scripting/contextMenu/
  162. 162 http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html
  163. 163 http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html
  164. 164 http://davidwalsh.name/build-toggling-announcement-slider-mootools-12
  165. 165 http://davidwalsh.name/build-toggling-announcement-slider-mootools-12
  166. 166 http://web-kreation.com/index.php/tutorials/nice-login-and-signup-panel-using-mootools-12/
  167. 167 http://woork.blogspot.com/2008/03/simple-images-slider-to-create-flickr.html
  168. 168 http://www.kriesi.at/archives/apple-menu-improved-with-jquery
  169. 169 http://www.kriesi.at/archives/apple-menu-improved-with-jquery
  170. 170 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
  171. 171 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
  172. 172 http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/
  173. 173 http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/
  174. 174 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
  175. 175 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
  176. 176 http://nettuts.com/javascript-ajax/create-a-simple-intelligent-accordion-effect-using-prototype-and-scriptaculous/
  177. 177 http://nettuts.com/javascript-ajax/create-a-simple-intelligent-accordion-effect-using-prototype-and-scriptaculous/
  178. 178 http://nettuts.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/
  179. 179 http://nettuts.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/
  180. 180 http://nettuts.com/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/
  181. 181 http://nettuts.com/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/
  182. 182 http://www.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/
  183. 183 http://www.smashingmagazine.com/2008/04/15/60-more-ajax-and-javascript-solutions-for-professional-coding/
  184. 184 http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/
  185. 185 http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
  186. 186 http://www.smashingmagazine.com/2007/05/30/tables-and-data-grids-with-ajax-dhtml-javascript/

↑ Back to topShare on Twitter

Glen Stansberry is the editor at Web Jackalope, a blog about creative Web development.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Wow, that is an insanely good list of good JS techniques! Thanks so much for sharing!

  2. 2

    Thanks so much. This is a really wonderful post!!!

    Best regards,
    Roger

  3. 3

    Great list of resources, especially liking the chart/graph ones!

  4. 4

    Awesome list. Thanks for listing my scripts [Lightview & Starbox]

  5. 5

    Great collection, I have used some of them that give my site a wonderful look.

  6. 6

    Man, this stuff is so much better than your ” (really) cute animal pictures ” posts…

    good job!

  7. 7

    Thanks for this great JS collection!!!

  8. 8

    crazy goodness, thanks for putting in the effort.

  9. 9

    I once (April/May 2007) used AjaxIm to create one of the first Facebook IM applications. It was able to handle until 20 thousands users. At that point we had some serious scalling issues and eventually decided to focus on other things.

  10. 10

    Great list! Was fun to read.

  11. 11

    Good stuff instead! Thank you!

  12. 12

    Great post & thanks very much for featuring “Load Content While Scrolling” by WebResourcesDepot.

  13. 13

    Thank you so much! Unbelievable post!

  14. 14

    Wow, Smashing gives away some programming / UI advice too! Cool. Thanks guys!

  15. 15

    This is an extraordinary list – thank you!

  16. 16

    amazing list, very useful.. thanks!

  17. 17

    Awesome!!!!!!!!!!!!!!! Very Very useful to developers like me.

  18. 18

    One of the most useful post I’ve ever seen on Smashing Mag. Thanks a lot :)

  19. 19

    WoW ! Nice list ! Thx Smashing Magazine !

  20. 20

    Awesome! Thank you so much!

  21. 21

    Unbelievably helpful, thanks for all the help mate, great post!

  22. 22

    Awesome post. Thank you.

    greven – Paintbits.com

  23. 23

    I love you Smashing Team!

  24. 24

    AMAZING!!!! thanks a lot! great listing

  25. 25

    Holy ©π@#!!! That smashed my web world to bits! I can’t wait to implement some of these!!!

  26. 26

    But why 75 at one time!?? they are all useful, but a little hard to read…

  27. 27

    I’ve been Smashed. Cheers guys.

  28. 28

    Great list! Thanks for including SimpleModal!

  29. 29

    awesome stuff. Just as I am moving past Css and toward Javascript you create this. Now I’m going to busy for weeks.

    thanks as always

  30. 30

    Simply SMASHING!

    Thanks Smashing Magazine for all the wonderful work you’ve done!

  31. 31

    I think HighSlide deserves to be much better known.

  32. 32

    really insane review + tutorials! Theres always 1 thing i wanted to do with JavaScript and that is creating a news slider where each image/news had its own link like the one in nclud

  33. 33

    Make Design, Not War

    September 11, 2008 3:07 pm

    Wow quite a collection here – thanks for sharing all of these in one easy to check spot; I’ll look forward to trying a few out soon.

  34. 34

    Unglaublich…gute Zusammenstellung!

  35. 35

    wow nice article

  36. 36

    Best… blog entry… EVER

  37. 37

    Great list, in addition to PlotKit, there is Flot for jQuery: http://code.google.com/p/flot/

    Again, great list of resources!

  38. 38

    Nice list indeed most of them i already knew! but still nice job!
    once again!! i my add

  39. 39

    This is Smashing… (Really)!

  40. 40

    This is the best Smashing Magazine article I have ever read.

  41. 41

    Amazing list. Great job SM.

  42. 42

    Greate work!~!~

  43. 43

    There is an error and/or misleading information with regards to SWFObject. SWFObject is not a media player, and in fact, does nothing on it’s own. It’s a Javascript library / application that simply allows an easy and standards way of of embedding flash content on a web page.

    The picture for SWFObject is actually depicting SlideShowPro, an excellent and cheap flash slideshow application and media player: http://slideshowpro.net/examples/

  44. 44

    great stuff..

  45. 45

    Cool man , this is a great list of all cool JS framework.
    Could possibly use this for my freelance project.
    Thanks for sharing buddy.

  46. 46

    FancyUpload is going to die a nasty death unless a workaround is found for the “security fix” in Flashplayer 10. This “fix” means that we can no longer externally target the flash upload facility.
    Official word:
    http://theflashblog.com/?p=423

    I’m sure a workaround will appear eventually – but for now be aware that FancyUpload may not work if users have already upgraded their Flashplayer to version 10

  47. 47

    Awesome!! One of the best post of the year!! I really love this stuff!! Thank you!!

  48. 48

    wow, great list

  49. 49

    Great post. I believe you have the screenshots mixed up between MoreCSS and Hyphenation though.

  50. 50

    Taggify is nice. I discovered that Steve Jobs and I have birthday on feb 24 :)

  51. 51

    Really a useful resource…..thanx SM.

  52. 52

    Whoa! Thanks so much for this post! One of the best yet, in my opinion.
    I have a lot to learn!

  53. 53
  54. 54

    Great Work!!!!!

  55. 55

    awesome post smashers

  56. 56

    Interesting..I luv it..Thanks to Smashing Magazine for helping us.

  57. 57

    Great list! But please, DO skip those “Really”´s in the headline to mark that this IS a useful list of something. Convince with the content itself, just as you always (well, mostly) do, and you won´t need to “sell in” your articles by spicing them.

    Cheers,

    Christoph

  58. 58

    This is awesome collection………. Thanks for sharing.

  59. 59

    That’s an amazing list of useful javascript techniques. Thanks a bunch!

  60. 60

    yeah…very cool post…realy intresting.thanks.

  61. 61

    Compliments for this great post!

  62. 62

    Great selection! Thanks.
    —trice

  63. 63

    Smashing post! job well done!

  64. 64

    The list should really have been reduced.
    Use JavaScript responsibly…

  65. 65

    perfect list. thanks.

  66. 66

    Ohh Yeah, that was amazing, thank you!

  67. 67

    Nice post!!!!!!!!!!!!!!

  68. 68

    Overwelming list! I’ve been smashed! ^^
    Keep up the good work!

  69. 69

    really impressive, thx SM

  70. 70

    Absolutely Awesome Compilation!! I think i don’t need to code js myself.. just need to grab and use… =P Thanks for sharing us…

  71. 71

    Thank you for that great selection!

  72. 72

    S.U.P.E.R.B.!

  73. 73

    AMAZING!, you gave me all what i need Smashing, specially this article

  74. 74

    Such a good list !

    Doesn’t help to make a definitive choice between jQuery and mootools though, arg.

  75. 75

    Curt Simon Harlinghausen

    September 12, 2008 1:21 am

    G E N I U S article. Thanks folks.

  76. 76

    Nice!

    What’s the name of the editor tool at “Raphaël”?

  77. 77

    Awsome list! now I have got a lot of javascript wigets to play with ;)

  78. 78

    posts like this one make smashing worth reading. ty.

  79. 79

    Perfect List!

  80. 80

    Excuse me? Best post ever!

  81. 81

    omg I feel soo full up!

  82. 82

    There goes my friday afternoon! :)

  83. 83

    nice collection with nothing new ^^

  84. 84

    Great list, but I’m a little disappointed because the list is missing a commonly used script or so I think. So you know how headers are usually an include with the navigation? Well, what type of script recognizes the selected button of the page that you are on in the site? No one wants 50 different navigation menus with only the class moved around to show which tab is selected. So how is it done to where you can make the navigation menu tabs selected depending on which page you are on?

  85. 85

    That was delicious

  86. 86

    Super awesome list. Thank you so much!

  87. 87

    What an absolutely awesome list! Top marks to Glen and the Smashing team.

  88. 88

    That for this set S&M.

  89. 89

    Once again, great compilation!

  90. 90

    congratulations it´s perfect, I´ll use on my projects. Smashingmagazine number one…….

  91. 91

    Two scripts which I feel could be beneficial to some:
    1. A comparable but slightly different option to the CoverFlow scripts listed above: Image Flow LINK – not the official site, but a better representation of its features.

    2. CheckTree, a jQuery based tree navigated checkbox list (ala custom Product Installation options GUI). Could be useful… LINK

  92. 92

    Thanks for the great post…there are definately some great gems here!!!

  93. 93

    This is the best article this year imho
    thanks guys

  94. 94

    great! smashing! thanx!

  95. 95

    I haven’t looked at javascript libraries before. This has opened my eyes! Great stuff.

  96. 96

    Great Post, hope I can use some of these soon.

  97. 97

    wow. you are my hero!

    this list is amazing

  98. 98

    Sliding Tabs still has some bugs, but is nice.
    Great list and useful

  99. 99

    great list. it’s been a while – but smashing strikes again..

  100. 100

    I’m confused. I see no mention of YUI.

  101. 101

    I fail to see how parallax is “useful”. What am I missing? What can it be “used” for? “fun” or “entertaining” or “cool” sure, but I wouldn’t categorize it in a post about usefulness.

  102. 102

    great and very usefull list !!
    thanx.

  103. 103

    Awesome post. Thank you so much!

  104. 104

    Awesomeness

  105. 105

    great list. have experimented a bit with jquery & mootools, and this stuff makes it even more interesting to go further with it..

  106. 106

    This is so cool.. would use some of the ones featured here :)

    Thanks

  107. 107

    Really interesting. Thanks !

  108. 108

    Damn they just keep getting longer. Good stuff!

  109. 109
    Awesome! Thanx for this amazing list! 
  110. 110

    Very useful list! I know I’ll return to this as a reference in the future! Great job!

  111. 111

    Great resource!

  112. 112

    you guys simply rock.

  113. 113

    Wow! I think you’ve cover most of web2.0 techniques ever created there! great work

  114. 114

    Fantastic collection of tools, thanks for your hard work.

  115. 115

    amazing.. amazing.. amazing.. thank YOU!!!

  116. 116

    thank you for sharing. this is just what i need. (^_^)

  117. 117

    nice collection.. Thank you….

  118. 118

    indeed useful…

  119. 119

    I would recommend adding to the list a tiny library XMLHttpRequest.js that brings support for XMLHttpRequest to IE7< and fixes all major bugs (including for example memory leaks or misbehaviors) in browsers native implementations of that object.

  120. 120

    Have you guys tried ProtoChart? http://www.deensoft.com/lab/protochart/

    its a JS based charting library.

  121. 121

    smashing magazine really does a good job, keep up the good work!

  122. 122

    this is one really helps me a lot. Done a great job :)

  123. 123

    Kombai is my library that create javascript database. That allows you to select, insert, update, delete, order a client collection of data( syntax like MySQL ):
    //create new database
    var mydata = K.create.database({
    fieldName: [“name”, “phone”],
    primaryKey: “phone”
    });
    // insert in to database
    mydata.Insert([“ohay”, “0987654321”]);
    mydata.Insert([“oh”, “0987654322”]);
    mydata.Insert([“ha”, “0987654323”]);
    mydata.Insert([“hy”, “0987654324”]);

    mydata.Insert({“phone” : “0987654324”, “name” : “hy”});
    mydata.Insert({“phone” : “0987654325”, “name” : “yo”});

    //update
    mydata.Update({“phone” : “232093430”, Where: “name like ‘o%'”});
    mydata.Update({“name”: “none”, Where: “phone ==’0987654325′”});

    //select

    mydata.Select({fieldName: “phone”, Where: “name like ‘%o%'”, orderBy: “phone”, Limit: 3});

    //delete
    mydata.Delete({Where: “name == ‘ohay'”});

    other you can use select in DOM :

    //getElementsByClassName

    var list = K.select({from: document, where: “className == ‘toolbox'”});

    var list2 = K.selcet({from: K(‘id’), where: “nodeName == ‘SPAN'”});

    ….

    Download: http://www.box.net/shared/f1cn69corr

  124. 124

    No edit in place plugins mentioned at all?

  125. 125

    web design company

    September 16, 2008 4:26 pm

    Useful javascripts Techniques. Great site to reference.

  126. 126

    One day, you should publish a book or a CD-ROM with a list of all those links, it will be great :)

  127. 127

    all i can say is this is sooo helpful. Thanks!

  128. 128

    Thanks it’s great

  129. 129

    Awesome!! resource list thanku SM

  130. 130
  131. 131

    Arnaud Velten (Business Commando)

    September 24, 2008 9:40 pm

    Very Very interesting and concise post, Thanks you for the good pack of Javascript goodies ;)
    Arnaud the froggy

  132. 132

    THANX!!
    great post!

  133. 133

    I have too many tabs open :)

  134. 134

    You’re the best, the exmples are the best, Thanks for sharing this, this are rich tools an d resources for our work, for a better web… and for a better world.

  135. 135

    Very nice scripts, I saved a bunch of them on delicous. Thanks !

  136. 136

    Good Collection. This really help

    Umesh Gohil
    Web Developer

  137. 137

    This is definitely the best JavaScripts techniques I ever seen!

  138. 138

    Hi,
    Very good article.but I need a menu whic has to move from left to right when i click image
    like .net toolbox dock menu

  139. 139

    Thanks for giving these techniques for most commonly used tasks on one page.

  140. 140

    thanks a million for this!

  141. 141

    wow! thank you very much. can’t wait to try these cool stuffs!!!!!

  142. 142

    nice tutorials keep up the goodwork!

  143. 143

    gr8 post !!!!!

  144. 144

    Serious – this site is pure and awesome usefullnes.

    I learned a lot and lots of these scripts are just too handy to not have.

    Thanks!

  145. 145

    You made my day – Smashilecious

  146. 146

    really, wonderfull lists

  147. 147

    i will use this “Starbox” in my website. its wonderfull rating system.

  148. 148

    Ajoydhas Amirtharaj

    June 15, 2009 8:58 pm

    This site is very useful for all web developers and designers..

  149. 149

    r4 ds: thanx a lot man…… I have newly joined developing….. and with this good stuff in my hand…. I am going to get promoted soon for sure……

  150. 150

    nice tutorials keep up the goodwork!

  151. 151
  152. 152

    Good Examples, helped me a lot..

  153. 153

    thank a lot

  154. 154

    GREAT WORK. GO AHEAD. BEST OF LUCK.

    MOTIVATION :: IF AT FIRST YOU DON’T SUCCEED, CALL IT VERSION 1.0

  155. 155

    Great post, really useful techniques.

  156. 156

    Ho man! really a very good list. I don’t know half of them exists. Thank you so much

  157. 157

    Thank a lot for such a beautiful content can i java script code for waterfall method plz help dat
    Thanks a lot

  158. 158

    Brilliant – many thanks – better than a news site on the latest tech trends!

↑ Back to top