This tutorial explains how to pre-load data for the next users action and store it on the client using JSON and the power of AJAX. An example of its usage would be paging through data in a table or a grid.
Demo Link.
http://particletree.com/examples/paging/
Read more and download the source from the below link.
http://particletree.com/features/preloading-data-with-ajax-and-json/
Showing newest 49 of 55 posts from July 2009. Show older posts
Showing newest 49 of 55 posts from July 2009. Show older posts
Preloading Data with AJAX and JSON
CSS Decorative Gallery
This article shows a simple, yet effective technique to decorate an image gallery. This trick, using only CSS and some images, could make any image gallery look great.
Read more and download the source from the below link.
Demo is also available at the same link.
http://www.webdesignerwall.com/tutorials/css-decorative-gallery/
Secret Message with CSS Positioning and Transparency
Want to make a “Secret Message” with CSS Positioning and Transparency.
Try this one.
Demo Link.
http://css-tricks.com/examples/SecretMessage
Read more and download the source from the below link.
http://css-tricks.com/make-a-secret-message-with-css-positioning-and-transparency/
jQuery Gestures - jQuery Based Script
This jQuery based snippet can be used to enable gestures on your webpage.
Demo Link.
http://random.friggeri.net/jquery-gestures/
Read more and download the source from the below link.
http://friggeri.net/blog/2008/12/21/jquery-gestures
Clock Widget With CSS3 and jQuery
CSS3 introduces a new feature Transform:rotate. This snippet uses this feature and the power of jQuery to get a ticking clock up and running on a web page.
Demo Link.
Note : Requires CSS3. So demo works only browsers that support CSS3.
that would be the latest version of Apples Safari browser (v3, v4 developer preview, or iPhone Safari) or Google Chrome. Thats as of the day this post was made.
http://css-tricks.com/examples/CSS3Clock/
Read more and download the source from the below link.
http://css-tricks.com/css3-clock/
Fancy Thumbnail Hover Effect - jQuery based Script
This tutorial explains how to create a fancy thumbnail hover effect using jQuery and CSS.
Demo Link
http://www.sohtanaka.com/web-design/examples/image-zoom/
Read more at the below link.
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
TARZAN - PHP toolkit for building web apps with AWS
TARZAN is a PHP toolkit that you can use to build web applications that can be easily integrated with Amazon Web Services.
Read more and download the source from the below link.
http://tarzan-aws.com/
Postcard Style Comments
Came across this stunning comment form that looks like a postcard.
This tutorial will teach you how to make a stunning comment form using an old postcard photo. Final result can be seen on the image below.
Demo Link.
http://www.jankoatwarpspeed.com/examples/postcard-comment-form/
Read more and download the source from the below link.
http://www.jankoatwarpspeed.com/post/2008/09/15/Turn-postcard-photo-into-a-stunning-comment-form-using-CSS.aspx
Pure Edit - Content Management System
PureEdit is the first CMS that dramatically simplifies the back-end development of your website while giving you full control of the front-end design and programming. By allowing such uncommon flexibility, PureEdit empowers you to design web sites from the ground up, without forcing you to follow the narrow template rules you'll find elsewhere.
Read more and download the source from the below link.
http://www.pureedit.com/
Paging Dropdown / Listbox: jQuery based Script
Some websites have these huge listboxes / dropdowns that contain hundreds of elements.
This jQuery based solution introduces paging in listboxes / dropdowns. This will speedup page loading and optimize DB/Network usage.
Read more and download the source from the below link.
http://www.moretechtips.net/2009/07/paging-listbox-another-jquery-plugin.html
Resizing Images Based On Browser Window Size
Came across this article that explains how you can resize your images based on the window size of the users browser.
Demo Link.
http://buildinternet.com/live/imageresize/
Read more at the below link.
http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/
Gritter for jQuery (Growl)
Growl is a notification bubble/popup that appears in the top right of your desktop.
This jQuery based plugin brings the Growl functionality to your web page. 
Demo Link.
http://boedesign.com/demos/gritter/
Read more and download the source from the below link.
http://boedesign.com/2009/07/11/growl-for-jquery-gritter/
Autotab: jQuery auto-tabbing and filter plugin
Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form.
Read more and download the source from the below link.
Demo is also available at the same link.
http://www.lousyllama.com/sandbox/jquery-autotab
Control.SelectMultiple - MultiSelect plugin
Control.SelectMultiple uses a combination of a standard select input, and a collection of checkbox inputs to create an alternative to the standard select multiple control. It's primary benefit besides a vastly improved experience for selecting multiple items is that for single item selection, it behaves like a normal select input.
Read more and download the source from the below link.
Demo is also available at the same link.
http://livepipe.net/control/selectmultiple
Tipmage - AJAX powered Image Tooltips
Tipmage is a javascript plugin that lets you create and managing tooltips for images.
With this plugin rectangular sections of the image can be marked and a description can be attached to them.
This plugin also allows editing the description (tooltip) using AJAX.
Read more and download the source from the below link.
Demo is also available at the same link.
http://digitalhymn.com/argilla/tipmage/
seekAttention - jQuery Based Script
The "seekAttention" plugin is a jQuery based script that can be used to get the users attention to particular section of the web page. This is achieved by fading out a definable area and leaving the target element un-faded.
Demo Link.
http://enhance.qd-creative.co.uk/demo/seekAttention/#demos
Read more and download the source from the below link.
http://enhance.qd-creative.co.uk/demo/seekAttention/
jQuery Performance Improvement Tips
This is a good article that explains how to write optimized jQuery code that does not cause performance issues. 
Read more at the below link.
http://www.artzstudio.com/2009/04/jquery-performance-rules/
jQuery Tools
jQuery Tools is a collection of the most important user-interface components for today's websites. This single JavaScript file weighs only 5.8 Kb
The package contains lots of demos including:
Tabs
Tooltips
Expose
Overlay
Scrollable
Flashembed
Video Enabled Demos With FlowPlayer
Demo Link.
http://flowplayer.org/tools/demos/index.html
Read more and download the source from the below link.
http://flowplayer.org/tools/index.html
Letterpress using CSS
Lots of websites have started using the Letterpress effect off late.It adds a touch of “tactile” to the overall design and at the same time looks good with gradients, shadows, etc. This article explains how you can add this effect to your website using CSS.
Read more and learn to create the effect at the below link.
http://www.ilovecolors.com.ar/create-letterpress-using-css/
idTabs - jQuery based Script
idTabs is a jQuery based plugin to add tabs to your web pages. Its super simple to add tabs with this plugin and opens the door to endless possibilities.
Read more and download the source from the below link.
Demo is also available at the same link
http://www.sunsean.com/idTabs/
Polaroid photo viewer - jQuery Based Script
This jQuery based script lets you create a Polaroid photo viewer. The pictures can be dragged, moved around and rotated. 
Demo Link.
http://demo.marcofolio.net/polaroid_photo_viewer/
Read more and download the source from the below link.
http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html
Shoutbox - PHP, AJAX & jQuery Powered
This tutorial will teach you how to create a stunning and dynamic shoutbox based on PHP and AJAX powered with some jQuery love.
Demo Link.
http://www.yensdesign.com/tutorials/shoutbox/
Read more and download the source from the below link.
http://yensdesign.com/2009/01/create-a-shoutbox-using-php-and-ajax-jquery/
JavaScriptMVC Framework
JavaScriptMVC is a MVC framework for JavaScript. It brings methods to the madness of JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.
Read more and download the framework at the below link.
http://javascriptmvc.com/
Page Peel Effect - jQuery Based Script
Looking for the Peel Effect that lots of websites have started using to showcase ads? Try this one. This jQuery based script can produce a clean peel effect with a simple mouse over. 
Demo Link.
http://www.sohtanaka.com/web-design/examples/peeling-effect/
Read more at the below link.
http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/
Sparklines - jQuery based Script
Sparklines are small inline charts that are generated directly in the browser.
This would be really useful if you need to capture some real time statistics.
Read more and download the source from the below link.
Demo is also available at the below link.
http://omnipotent.net/jquery.sparkline/
PrettyPrint - variable dumper
PrettyPrint is an in-browser JavaScript variable dumper similar to ColdFusions’s cfdump. It enables you to print out an object of any type in table format for viewing during debugging sessions. 
Demo Link.
http://james.padolsey.com/demos/prettyprint/
Read more and download the source at the below link.
http://james.padolsey.com/javascript/prettyprint-for-javascript/
Animated Curtain Opening - jQuery based Script
This jQuery based script can be used to animate a curtain opening. With this script you can build a stage with retractable curtains on your web page. 
Demo Link.
http://buildinternet.com/live/curtains
Read more and download the source from the below link.
http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/
Drop Line Tabs - jQuery based script
This CSS menu with some jQuery magic turns a nested UL list into a horizontal drop line tabs menu.
Read more and download the source from the below link.
Demo is also available at the same link.
http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_tabs/
KeyPress Navigation Menu - jQuery based script
This article shows you how to create navigation menu that works using keyboard strokes without requiring the user to hover mouse over menu items. The snippet is based on the jQuery JavaScript framework.
Demo Link.
http://nettuts.s3.amazonaws.com/013_keypress/demo/demo.html
Read more at the below link.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/
Image Dropdown - jQuery based script
This jQuery based plugin allows you to convert those so uncool html dropdowns to cool image dropdowns like the one shown below. 
Demo Link.
http://www.marghoobsuleman.com/mywork/jcomponents/customdropdown/dropDownCustom.html
Read more and download the source from the below link.
http://www.marghoobsuleman.com/jquery-image-dropdown
Sigma - AJAX Grid
Written in pure javascript, Sigma grid is an Ajax data grid for displaying and inline editing data in a scrollable and sortable table. It is very powerful yet easy to use & integrate with php, asp.net, jsp and RoR.
Read more and download from the below link.
http://www.sigmawidgets.com/products/sigma_grid2/
Input field Hints
With a little JavaScript and CSS you could have input hints that show up when the focus is on an input field
Demo Link.
http://www.askthecssguy.com/examples/formfieldhints/example06.html
Read more and download the source from the below link.
http://www.askthecssguy.com/2007/03/form_field_hints_with_css_and.html
JWChat - AJAX Powered Jabber Client
JWChat is a full featured, web-based Jabber client. Written using AJAX technology it relies on JavaScript and HTML at the client-side only. It supports basic jabber instant messaging, roster management and groupchats based on the MUC protocol.
Read more and download the source from the below link.
http://www.cgitop.com/2008/02/22/jwchat-jabber-web-chat.html
Garage Door - jQuery Based Script
Looking for a Garage Door effect menu. Try this jQuery based snippet. 
Demo link.
http://www.gayadesign.com/scripts/jquerygaragedoor/
Read more and download the source from the below link.
http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/
Inline Form Validation - jQuery based Script
This article explains how you could use the all powerful jQuery and AJAX to setup inline validation on the forms of your web pages. 
Demo Link.
http://www.position-relative.net/creation/formValidator/
Read more and download the source from the below link.
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Product Planner
If you want to create user flows for your web products, try Product Planner.
So what are you waiting for. Discover, create and share user flows at Product Planner.
Read more and create your product flows at the below link.
http://productplanner.com/
Lightweight Accordion
Here's another Accordion snippet that you can use on your webpages. So whats new?
This ones light weight, built with scriptaculous and works properly in every browser.
Read more and download the source from the below link.
Demo is also available at the same link.
http://stickmanlabs.com/accordion/
Invisible Human Check For Web Forms
This is an alternative to CAPTCHA. Users visiting your website need not fill in squiggly letters from a CAPTCHA image. This JavaScript plugin quietly discovers if the user is a human or not.
With this plugin,
1. the form records certain events to prove human involvement.
2. if JavaScript is not enabled, a fallback solution kicks in (ofcourse requires human involvement).
3. the human checks are invisible to the user where possible.
4. it is not possible for the bot to discover the test and to spoof the results.
Read more and download the source from the below link.
http://www.webdesignfromscratch.com/javascript/human-form-validation-check-trick.php
Blend - jQuery Effect
Blend - A jQuery based animation/effects, progressive enhancement plugin for CSS backgrounds. 
Read more and download the source from the below link.
Demo is also available at the same link.
http://colorpowered.com/blend/
Layered Slideshow With A Transparent PNG Frame
In this tutorial you will learn to create a basic slideshow that uses a combination of PNG transparency and layered positioning to create the effect of each slides being held in by the bottom corners.
Demo Link.
http://buildinternet.com/live/png-slideshow/png-slideshow.htm
Read more and download the source from the below link.
http://buildinternet.com/2009/06/how-to-make-a-slideshow-with-a-transparent-png-frame/
Multi Select Transfers - MooTools based script
If you need a MooTools based script that helps users to trade options from one multi select to another, try this one.
Demo link.
http://davidwalsh.name/dw-content/multi-select.php
Read more and download the source from the below link.
http://davidwalsh.name/multi-select-transfers-using-mootools-12
Javascript Input Mask
A nice JavaScript input mask which helps displaying the password field characters as images.
Read more and download the source from the link.
Demo is also available at the below link.
http://www.puremango.co.uk/mask/
Virtual Keyboard - jQuery based script
Have you noticed certain banking websites that use virtual keyboards as an added security measure (To prevent keyloggers)? If you need a similar virtual keyboard for your webpage you can use this jQuery based snippet.
Read more and download the source from the below link.
Demo is also available at the same link.
http://keith-wood.name/keypad.html
APE - AJAX Push Engine
APE is an open source technology allowing to exchange data between thousands of users through a web browser, without reloading.
Check out the best, most scalable HTTP streaming server.
Demo Link.
http://www.ape-project.org/en/demos.html
Read more and download the push engine from the below link.
http://www.ape-project.org/en/home.html
Animate Image Filling Up Using jQuery
Came across this jQuery based snippet that uses css and a little bit of photoshop skills to animate an image filling up. Can't make sense? Try the Demo Link.
Demo Link.
http://buildinternet.com/live/imagefill/index.html
Read more and download at the below link.
http://buildinternet.com/2009/06/animate-image-filling-up-using-jquery/
jQuery Lazy Loader - On Demand Load Plugin
This Jquery plugin is an on-demand plugin loader, also known as a lazy loader. Instead of downloading all Jquery-plugins, you might or might not need, when the page loads, Lazy downloads the plugins when you actually use them.
Read more and download the source from the below link.
http://www.unwrongest.com/projects/lazy/
Tooltip and Image Preview - jQuery based Script
Need a tooltip-like bubble pop ups that appears when you roll over a link or a thumbnail preview? Try this jQuery based snippet that's really easy to implement on your web pages.
Demo link.
http://cssglobe.com/lab/tooltip/03/
Read more and download the source from the below link.
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
Slide Box - jQuery plugin
Slide Box is a jQuery based plugin that can be used to take any div and transform it into top/bottom sliding panel.
Read more and download the source from the below link.
http://www.hotajax.org/demo/jquery/SlideBox/SlideBox/index.html
Tabbed Content Rotator - jQuery based script
Lots of websites feature content rotators. Came across this jQuery based plugin that lets you create a Tabbed Content Rotator.
Demo Link
http://www.raymondselda.com/demo/tabbed-rotator/
Read more and download the source from the below link.
http://www.raymondselda.com/create-a-tabbed-content-rotator-using-jquery/
Subscribe to:
Posts (Atom)
AJAX Crawler - More AJAX & DHTML Samples...
Posts
