- September 11th, 2008
- 158 Comments
You may want to take a look at the following related articles:
- 80+ AJAX-Solutions For Professional Coding1826
- 30 Scripts For Galleries, Slideshows and Lightboxes1848
Hyphenation in Web11
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.
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.
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.
Facelift Image Replacement30
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.
“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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Image Cross Fade Transition134
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.
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.”
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.”
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.
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.
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.”
jQuery File Tree158
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.”
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
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.”
Creating a Slick Auto-Playing Featured Content Slider170
By Chris Coyier.
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
Create a Slick Tabbed Content Area using CSS & jQuery174
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.
Create a Simple, Powerful Product Highlighter with MooTools178
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.
You may want to take a look at the following related articles:
- 80+ AJAX-Solutions For Professional Coding1826
- 30 Scripts For Galleries, Slideshows and Lightboxes1848
- 3 http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/
- 8 http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/
- 11 http://yellowgreen.de/hyphenation-in-web/
- 12 http://code.google.com/p/hyphenator/
- 13 http://yellowgreen.de/hyphenation-in-web/
- 14 http://www.azarask.in/blog/post/socialhistoryjs/
- 15 http://www.niallkennedy.com/blog/2008/02/browser-history-sniff.html
- 16 http://www.azarask.in/blog/post/socialhistoryjs/
- 17 http://devthought.com/textboxlist-meets-autocompletion/
- 18 http://www.facebook.com
- 19 http://devthought.com/textboxlist-meets-autocompletion/
- 20 http://natbat.net/2008/Aug/27/addSizes/
- 21 http://natbat.net/2008/Aug/27/addSizes/
- 22 http://code.google.com/p/syntaxhighlighter/
- 23 http://code.google.com/p/syntaxhighlighter/
- 24 http://code.google.com/p/samaxesjs/
- 25 http://code.google.com/p/samaxesjs/
- 26 http://icant.co.uk/sandbox/stepbystep/#examples
- 27 http://icant.co.uk/sandbox/stepbystep/#examples
- 28 http://yellowgreen.de/morecss
- 29 http://yellowgreen.de/morecss
- 30 http://facelift.mawhorter.net/
- 31 http://facelift.mawhorter.net/
- 32 http://alistapart.com/articles/sprites2
- 33 http://alistapart.com/articles/sprites2
- 34 http://urlgreyhot.com/personal/weblog/jparralax
- 35 http://urlgreyhot.com/personal/weblog/jparralax
- 36 http://code.google.com/p/js-hotkeys/
- 38 http://code.google.com/p/js-hotkeys/
- 39 http://devthought.com/barackslideshow-an-elegant-lightweight-slideshow-script/
- 40 http://devthought.com/barackslideshow-an-elegant-lightweight-slideshow-script/
- 41 http://devkick.com/lab/galleria/
- 42 http://devkick.com/lab/galleria/
- 43 http://www.unfocus.com/projects/historykeeper/
- 44 http://www.unfocus.com/projects/historykeeper/
- 45 http://code.google.com/p/datejs/
- 46 http://code.google.com/p/datejs/
- 47 http://www.nickstakenburg.com/projects/lightview/
- 48 http://www.nickstakenburg.com/projects/lightview/
- 49 http://jqueryfordesigners.com/coda-popup-bubbles/
- 50 http://www.panic.com/coda/
- 51 http://jqueryfordesigners.com/coda-popup-bubbles/
- 52 http://jqueryfordesigners.com/coda-popup-bubbles/
- 53 http://www.ajaxim.com
- 54 http://coding.smashingmagazine.com/wp-content/uploads/2008/09/ajaxim.jpg
- 55 http://www.livevalidation.com/
- 56 http://www.livevalidation
- 57 http://www.prototypejs.org/
- 58 http://www.livevalidation.com/
- 59 http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html
- 60 http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html
- 61 http://digitarald.de/project/fancyupload/1-0/
- 62 http://digitarald.de/project/fancyupload/1-0/
- 63 http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx
- 64 http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx
- 65 http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx
- 66 http://amberjack.org/
- 67 http://amberjack.org/
- 68 http://creativepony.com/journal/scripts/sliding-tabs/
- 69 http://panic.com/coda/
- 70 http://creativepony.com/demos/sliding-tabs/
- 72 http://jqueryfordesigners.com/coda-slider-effect/
- 73 http://creativepony.com/journal/scripts/sliding-tabs/
- 75 http://test.thecodecentral.com/demos/imageloader/
- 77 http://www.swfir.com/
- 78 http://www.swfir.com/
- 79 http://www.outcut.de/MooFlow/
- 80 http://mootools.net/
- 81 http://www.outcut.de/MooFlow/
- 82 http://www.amcharts.com/pie/
- 83 http://www.amcharts.com/pie/
- 84 http://www.amcharts.com/pie/
- 85 http://orangoo.com/labs/GreyBox/
- 86 http://ninjadesigns.co.uk/
- 87 http://www.dustindiaz.com/ajax-contact-form/
- 88 http://ninjadesigns.co.uk/
- 89 http://code.google.com/p/swfobject/
- 90 http://code.google.com/p/swfobject/
- 91 http://www.liquidx.net/plotkit/
- 92 http://www.liquidx.net/plotkit/
- 93 http://www.barelyfitz.com/projects/tabber/
- 94 http://www.barelyfitz.com/projects/tabber/
- 95 http://www.cabel.name/2008/02/fancyzoom-10.html
- 96 http://www.cabel.name/2008/02/fancyzoom-10.html
- 99 http://zendold.lojcomm.com.br/fvalidator/
- 100 http://digitalbush.com/projects/masked-input-plugin
- 101 http://zendold.lojcomm.com.br/fvalidator/
- 102 http://www.filamentgroup.com/lab/jquery_interactive_date_range_picker_with_shortcuts/
- 103 http://www.filamentgroup.com/lab/jquery_interactive_date_range_picker_with_shortcuts/
- 104 http://raphaeljs.com/
- 105 http://raphaeljs.com/
- 106 http://www.nogray.com/time_picker.php
- 107 http://www.nogray.com/time_picker.php
- 108 http://www.kminek.pl/lab/yetii/
- 109 http://www.kminek.pl/lab/yetii/
- 110 http://www.electricprism.com/aeron/calendar/
- 111 http://www.electricprism.com/aeron/calendar/
- 112 http://www.nickstakenburg.com/projects/starbox/
- 113 http://www.nickstakenburg.com/projects/starbox/
- 114 http://www.magictoolbox.com/magiczoom/
- 115 http://www.magictoolbox.com/magiczoom/
- 116 http://www.magictoolbox.com/magicmagnify/
- 117 http://www.magictoolbox.com/magicmagnify/
- 118 http://www.piksite.com/carousel.us/
- 119 http://www.piksite.com/carousel.us/
- 120 http://code.google.com/p/slideshow/
- 121 http://code.google.com/p/slideshow/
- 122 http://code.google.com/p/jgrousedoc/
- 123 http://code.google.com/p/jgrousedoc/
- 124 http://www.lokeshdhakar.com/projects/lightbox2/
- 125 http://www.lokeshdhakar.com/projects/lightbox2/
- 126 http://www.livepipe.net/control/window#hoverbox
- 127 http://www.livepipe.net/control/window#hoverbox
- 128 http://www.ericmmartin.com/projects/simplemodal/
- 129 http://www.ericmmartin.com/projects/simplemodal/
- 132 http://willworkforart.net/tutorials/unobtrusive-expand-and-collapse-navigation
- 133 http://willworkforart.net/tutorials/unobtrusive-expand-and-collapse-navigation
- 134 http://jqueryfordesigners.com/image-cross-fade-transition/
- 135 http://jqueryfordesigners.com/image-cross-fade-transition/
- 136 http://jqueryfordesigners.com/slider-gallery/
- 137 http://jqueryfordesigners.com/slider-gallery/
- 138 http://orderedlist.com/articles/fancyzoom-meet-jquery
- 139 http://orderedlist.com/articles/fancyzoom-meet-jquery
- 142 http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu
- 143 http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu
- 144 http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
- 145 http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
- 148 http://woork.blogspot.com/2008/07/fantastic-news-ticker-newsvine-like.html
- 149 http://woork.blogspot.com/2008/07/fantastic-news-ticker-newsvine-like.html
- 150 http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en
- 151 http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en
- 152 http://webplicity.net/flexigrid/
- 153 http://webplicity.net/flexigrid/
- 154 http://ideamill.synaptrixgroup.com/?page_id=16
- 155 http://ideamill.synaptrixgroup.com/?page_id=16
- 156 http://www.askthecssguy.com/2007/05/brett_asks_the_css_guy_if_the.html
- 157 http://www.askthecssguy.com/2007/05/brett_asks_the_css_guy_if_the.html
- 158 http://abeautifulsite.net/notebook/58
- 159 http://abeautifulsite.net/notebook/58
- 160 http://yura.thinkweb2.com/scripting/contextMenu/
- 161 http://yura.thinkweb2.com/scripting/contextMenu/
- 162 http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html
- 163 http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html
- 164 http://davidwalsh.name/build-toggling-announcement-slider-mootools-12
- 165 http://davidwalsh.name/build-toggling-announcement-slider-mootools-12
- 166 http://web-kreation.com/index.php/tutorials/nice-login-and-signup-panel-using-mootools-12/
- 167 http://woork.blogspot.com/2008/03/simple-images-slider-to-create-flickr.html
- 168 http://www.kriesi.at/archives/apple-menu-improved-with-jquery
- 169 http://www.kriesi.at/archives/apple-menu-improved-with-jquery
- 170 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
- 171 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
- 174 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
- 175 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
- 178 http://nettuts.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/
- 179 http://nettuts.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/
- 184 http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/