AJAX Crawler - Collection of DHTML and AJAX Samples.: January 2008

Showing newest 53 of 60 posts from January 2008. Show older posts

CodeIgniter - PHP Framework

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications

Read more and download from the below link.
http://codeigniter.com/

PhotoViewer - YUI Based Lightbox

Here's a lighbox application based on the extremely popular YUI (Yahoo UI) library.

Check out the video demo.

Read more and download the source from the below link.
http://nicora.net/projects/photoViewer/index.cfm/home

Shadowbox - Media Viewer

Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from the linking page.

Check out the video demo

Read more and download the source from the below link.
http://mjijackson.com/shadowbox/

jQuery Lightbox Plugin

This is yet another jQuery based lightbox implementation. Clicking on the image thumbnail loads the image in a modal dialog as shown in the screen shots below.

Check out the video demo.

Read more and download the source from the below link.
http://leandrovieira.com/projects/jquery/lightbox/

jTagging - jQuery Plugin

jTagging is a lightweight jQuery based solution which enables users to enter tags more easily.

Check out the video demo.

Read more and download the source from the below link.
http://www.alcoholwang.cn/jquery/jTagging.htm

Mootools menu

Came across this mootools based menu which gives a cool effect hovering over links.Opens a submenu with an accordeon.

Text changes to uppercase along with a change to the background on mouseover.
Check out the video demo

Read more and download the source from the below link.
http://www.artviper.eu/mootoolsmenu/

AJAX Chained Select

I came across an article that teaches how to implement chained SELECT using PHP and AJAX.
Check out the video demo.

Read more and download the source from the below link.
http://www.dhtmlgoodies.com/index.html?whichScript=ajax_chained_select

Simple PHP Based Ajax Chat Room

Here is an extremely simply PHP based AJAX chat application. Requies only two files.
(index.html, w.php)
index.html reads the content & sends your message to w.php
w.php writes the content and prunes it to $maxlines lines
Check out the video demo.

Read more and download the source from the below link.

http://www.linuxuser.at/index.php?title=Most_Simple_Ajax_Chat_Ever

Datejs - A Javascript Date Library

Datejs is an open-source JavaScript Date Library.
Comprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike

Check out the video demo

Read more and download the source at
http://www.datejs.com/

jQuery AJAX Tutorial

Quick tutorial to learn using jQuery to build your AJAX app.

Mootools And AJAX Tutorial

This video tutorial teaches how to use mootools javascript and AJAX to increase user experience.

AJAX Loading Image Generator

If you ever need to create those cool "Loading" images for your AJAX web applications
look no further than AJAXLoad.Info. The site allows you to generate "loading" gifs
with options to choose the background and foreground colors. You can download the images you create all free of cost.
Check out the video demo

To generate your own AJAX Loading images follow the below link
http://www.ajaxload.info/

Vertical Menu - Prototype based

A simple and lightweight prototype-based solution for vertical menu.

Check out the video demo

Read more and download the code from the below link.
http://www.spawnrider.net/blogs/demos/mh/

LavaLamp Menu With jQuery

Here's a cool menu that I came across. Run your mouse over the menu and watch the lava lamp effect on the menu. LavaLamp menu is packaged as a plugin for the jQuery javascript library.

Check out the video demo.

Read more and download the code from the below link.
http://gmarwaha.com/blog/?p=7

Mocha - Mootools UI

Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with canvas tag graphics.

Check out the video demo.

Read more and download the source from the below link.
http://greghoustondesign.com/demos/mocha/

Iconize Textlinks with CSS

With this little CSS technique a user can identify a link by its icon.
If a link points to a pdf file, the css script shows the pdf icon after the link.

Read more and download the code from the below link.
http://pooliestudios.com/projects/iconize/

Ajax ModalPopup Extender in Asp.Net GridView Control

Explore the ModalPopup Extender integrated with Asp.Net GridView control.
Came across this article that teaches how to fetch data from the database, bind it with an Asp.Net GridView control, and show the values in server controls placed in a ModalPopup extender.Also learn how to perform an edit/update function from the ModalPopup extender itself.

Check out the video demo.

Read more and download the source from the below link.
http://www.aspdotnetcodes.com/Ajax_ModalPopup_PostBack_GridView.aspx

Flot - jQuery Graph Library

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

Flot is simple to use, attractive and supports interactive features like zooming.

Check out the video demo.

Read more and download the source at the below link.
http://code.google.com/p/flot/

AJAX Autosuggest

Ajax autosuggest script helps the visitor present in real time (as they type) some of the possible results based on their entered words/characters. This implementation uses the script.aculo.us Javascript library for the Ajax effect.

Check out the video demo below

Read more and download the source from the below link.
http://www.roscripts.com/Ajax_autosuggest_autocomplete_from_database-154.html

AJAX Tabs

A tabbed content browser that’s Ajax powered.
When an user clicks a tab AJAX kicks in and communicates with the server loading appropriate data for the clicked tab.

Check out the video demo below.

Read more and learn how to implement it at the below link.
http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/

AJAX Rating Stars

Need an AJAX based star rating implementation for your website. AJAX Rating Stars uses prototype.js and features form-field binding, javascript callback support and AJAX posting for easy ratings.

Check out the video demo below.

If you want to read more and download the source follow the link below.
http://www.beauscott.com/2006/08/26/ajax-rating-stars/

Javascript based Progress Bar

jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar.
This javascript progress bar can easily be extended and tweaked just by setting a few parameters.

Check out the video demo.

Read more and download the source at the below link.
http://www.bram.us/projects/js_bramus/jsprogressbarhandler/

FastFind Menu Javascript

This script allows for nested menus, based on dynamic "AJAX" responses. The menu can also be dragged/dropped thanks to the jQuery Interface Library.
Check out the video demo below.

Read more and download the code from the below link.
http://labs.activespotlight.net/jQuery/menu_demo.html

Transparent Message

Transparent message is a new way to display information on a web page.
Instead of using the not so good lookin alert javascript function, it shows the message in a overlay layer of your HTML page.
Check out the video demo below.

Read more and download the code from the below link.
http://transparent-message.xilinus.com/

Sliding tabs using Moo Tools

Well the title says it all. Check out the video demo below.

Read more and download the code from the below link.
http://creativepony.com/journal/scripts/sliding-tabs/

AJAX Vista style Calendar

A calendar based on the Vista taskbar calendar. The script runs on MooTools javascript framework, version 1.11 and uses javascript, xHTML, CSS and PHP.
Check out the demo video below

Read more and download the code from the below link
http://dev.base86.com/scripts/vista-like_ajax_calendar.html

UPDATED VERSION : Version 2 now available
New features in version 2:
1) Datepicker functionality (!)
2) Cleaner and more developer centered - easily editable - CSS, PHP and javascript code
3) Easily changeable date labels (e.g. different languages)
4) Easily stylable. Styles are created on top of the general style; the download include two example styles
5)Both normal and datepicker calendar can be instantiated multiple times

Read more and download the code for version 2 from the below link

http://dev.base86.com/solo/29/vista-like_ajax_calendar_version_2_released.html

Mediabox using MooTools

Using the MooTools javascript library, Mediabox lets you open flash, video, and html content in a floating “lightbox” style window.

Read more and download the code at the below link.
http://iaian7.com/webcode/Mediabox

AJAX Magnetic Word Kit

Came across this AJAX implementation of maganetic word kits. Saves it state as you move the words around the page.

Follow the link below to know more.
http://www.broken-notebook.com/magnetic/info.php

XML SWF Charts - * New Version (v5) Available Now

Here's another cool web chart making tool.
It uses SWF to produces the graphs with the data sourced from XML files.

If you want to know more and download the source follow the link below
http://www.maani.us/xml_charts/index.php

Open Source Photo Gallery with Mootools

(E)2 Photo Gallery is a open source gallery built with Mootools Javascript Library. Designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP.

If you want to read more and download the source follow the link below.
http://www.e2interactive.com/e2_photo_gallery/

Javascript Sprite Animation using JQuery

Here's a JQuery based implementation that gives us that effortless page flick feeling using Javascript.

Want to know more and download the source follow the link below.
http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

Image Menu using Moo tools

This is an amazing menu that I came across implemented using Moo tools. The horizontal menu reveals more of the image as you rollover it.

Features include
2 optional onClick events - open & close
href passed to onClick events
stays open when clicked
closes when clicked
select item to pre-open

If you want to know more and download the source follow the link below
http://www.phatfusion.net/imagemenu/index.htm

Prototype Window

This javascript class allows you to add window in a HTML page.
This class is based on Prototype. The code is inspired by the powerful script.aculo.us library.

Check out the image below for some of the sample windows that were produced using this script.

If you want to know more and download the source follow the link below.
http://prototype-window.xilinus.com/index.html

Image Gallery Script

An amazing script to show off your images.

If you want to know more and download the source follow the link below
http://www.dhteumeuleu.com/runscript.php?scr=imgPress-X.html

Live Validation Library

LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere in your javascript, it is not just limited to form fields.

If you want to know more and download the source follow the link below http://www.livevalidation.com/

jQuery plugin for Autocomplete

Here's an auto-complete/suggest javascript library powered by jQuery.
Key features include

Simple configuration and using
AJAX and local data models
Scrollable suggests list
Multiple suggests support
Tested on all popular browsers

If you want to know more and download the source follow the link below
http://code.google.com/p/jqac/

Thumbnails scrolling viewer using Javascript

Check out this amazing thumbnails scrolling viewer implemented using Javascript.
Moving your mouse over the images will cause the image to reposition itself according to the mouse movements.

If you want to know more and download the source follow the link below
http://www.dhteumeuleu.com/runscript.php?scr=panels-III.html

CNN Style Scrolling Ticker using .NET

A new .NET AJAX Control Toolkit control called the MarqueeControl that uses a pretty nifty jquery plugin called liScroll to create a CNN Style Scrolling Ticker

Features

It allows you to specify the scrolling speed by changing the value of the travelocity parameter
The scrolling automatically pauses when you mouse over it

If you want to know more and download the source follow the link below
http://mattberseth.com/blog/2008/01/cnn_style_scrolling_ticker_wit.html

Calendar A Javascript class for Mootools

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements.

Features

Style-able and semantic XHTML
Future / past calendar restrictions (and more)
Highly configurable use of inputs and selects
Multi-calendar support (with padding)
Variable navigation options
Multi-lingual and fancy date formatting

If you want to know more and download the source follow the below link.

http://www.electricprism.com/aeron/calendar/

Interactive Image Gallery

Check out this fantastic interactive image gallery that can be hosted on your site in no time.

If you want to know more and download the source follow the link below
http://www.dhteumeuleu.com/runscript.php?scr=photo3D.html

Lightbox Plugin using JQuery

Lightboxes are a way to display a image on the same page elegantly.

Features:
Lightboxes can be grouped together.
Titles and descriptions for images.
Automatic url detection and inclusion of required files, so no configuration is needed.

Clicking on an image would launch a screen like the one shown below.

If you want to know more follow the link below
http://plugins.jquery.com/project/jquerylightbox_bal

ImageFlow

Here is an amazing implementation of an Image Gallery for your website. The images just flow as you move the slider. The screen shot below should help you visualize it.

If you want to get a demo and download the source follow the below link.
http://imageflow.finnrudolph.de/

jQuery Hover Sub Tag

Tag clouds allow users to instantly visualize the contents of your site.
Here's a nice implementation that shows the main tags and when your mouse hovers over the tag the sub tags are displayed.

If you want to know more and download the source follow the link below
http://www.noupe.com/ajax/jquery-hover-sub-tag-cloud.html

Slider DataPager with Dynamic Tooltips

.Net AjaxControlToolkit's Slider control can be used as a data pager. Guess what now we can even show tooltips as well as the user slides. Check out the screen shot below.

If you want to know more about implementing AjaxControlToolkit's Slider control as a data pager then here is the link to go to.
http://mattberseth.com/blog/2007/12/surrounding_your_data_table_an.html

If you want to know how to implement the tooltip on the data pager this is where you need to go.
http://mattberseth.com/blog/2007/12/a_slider_datapager_with_dynami.html

Spellify simplifies spell checks

How often we end up making spelling mistakes as we type stuff on the web pages.
Spellify is a great AJAX solution implemented using PHP to check spelling errors as we type. I guess the screen shot above says it all.

If you want to know more then follow the link below.
http://spellify.com/

bevel.js - Add bevels to your images

bevel.js allows you to add bevels (and also shading, shining and glowing) to images on your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.

If you want to know more about bevel follow the link below.
http://www.netzgesta.de/bevel/

AJAX Instant Messenger

ajax im ("asynchronous javascript and xml instant messenger") is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. No refreshing of the page is ever needed for this "web application" to work, as everything is updated in real-time via JavaScript.

Follow the link below to find out more
http://www.ajaxim.com/

SOLMETRA Maps - Google Map with geocode support

SOLMETRA Maps is a PHP class meant to simplify display of Google Maps on your site.
SOLMETRA Maps uses the extremely powerful and flexible Google Maps API to generate interactive maps.

If you want to know more then please follow the link below
http://www.solmetra.com/en/disp.php/en_products/en_scripts/en_maps

Timeline - AJAX Widget to visualize time based events

If you need to visualize time based events in full AJAX style then Timeline is what you need. It is like Google Maps for time-based information.
The screen shot below shows Timeline with data.

If you want to know more and get a realistic demo then follow the link below.
http://simile.mit.edu/timeline/

Cool Flash Charts

Need flash charts to be displayed on your web page. amChart offers customizable "pie and donut", "line and area", "column and bar" and "scatter and bubble" charts.
Here's a screen shot of a chart generated using amChart.

If you want to know more follow the link below
http://www.amcharts.com/

Relay - AJAX directory manager

Relay is file management tool for web sites. It has a multi-user access restriction, allowing the administrator to control user access to uploaded files.

Click here for a live demo.

Want to know more. Follow the link below.
http://ecosmear.com/relay/

Advanced RSS Ticker using AJAX

I found this advanced RSS Ticker implemented using AJAX. Some of the features as mentioned in the creators website are :

Displays any RSS feed on the web in a ticker fashion. Specify exactly what components of the feed items to display, such as the title of the item, description, or post date.
Each RSS feed is cached on the server for best performance. LastRSS feature.
Total customization of each RSS ticker through the frontend JavaScript- easily specify the RSS cache period, CSS class name to style the ticker, delay between message change, and what parts of the feed to show (ie: title+description).
Enable or disable a fading effect between message change just by adding or removing two lines of CSS code!
Ticker pauses onMouseover.
Display multiple RSS tickers on a page, each with their own independent settings.