Wednesday, September 3, 2008

Give Nice Look TO Your Website with Ajax , Javascript , Jquery

Nice Looking Simple Downloadable dhtml and ajax code
1.

Prototype Window - Demo

This javascript class allows you to add window in a HTML page.

2.

AJAX Star Rating Bar - Demo

This is a rating bar script that allows users to rate things with no page refresh.

3.

An AJAX contact form - Demo

A drop-in AJAX contact form that can be used in WP. PHP () Mail ready.

4.

Heatmap for your website - Download

ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones.

5.

GreyBox: An easy javascript popup box

GreyBox can be used to display websites, images and other content in a beautiful way.

6.

Digg - like spy script - Demo

Examples and code on how to create a digg spy page.

7.

Bubble Tooltips - Demo

Easy way to add fancy tooltips with a balloon shape to any web page.

8.

Reflection.js 1.6 - Demo

To add a reflection just add a class="reflect" to the image.

9.

Edit-in-Place with Ajax - Demo

A nice little AJAX function that allows users to edit text on a page without any forms.

10.

Ajax Tabs Content script - Demo

Fetch and display an external page inside a container when a tab is clicked on.

11.

Dragable RSS boxes script - Demo

Tutorial and downloadable files to create draggable boxes like on online desktops.

12.

AJAX poller script - Demo

A poller script that uses Ajax to send vote to the server & receives results from the server.

13.

Dragable content script - Demo

In this script you can drag nodes to a set of boxes.

14.

Lightbox/Modal window effect using CSS

The Lightbox Effect without Lightbox. Lightbox alternative and login method.

15.

AJAX Fisheye List Widget - Demo

Dojo Tool Kit has come up with a new web based non-flash menu which is easy to use.

16.

Google X script - Demo

Cool trick with javascript - google page with crazy rollovers.

17.

Create Pie and Donut Charts - Demo

PHP/Flash. Using it you can easily create animated pies or donuts for your web site.

18.

Ajax subscription box - Mailist 0.9

An email address can be submitted without having to reload the whole page.

19.

Googlemap with geocode support - Demo

SOLMETRA Maps is a PHP class meant to simplify display of Google Maps on your site.

20.

Tabbed content browser - Demo

Tutorial: Building AJAX tabbed content with Prototype.

21.

Browser-based instant messaging client

Ajax powered IM system that sits right on your web site.

22.

Ajax domain search script - Demo

Simple and very easy to understand - Wrote in PHP + AJAX.

23.

Amberjack site tours - Demo

A lightweight Open Source library that allows you to create cool site tours.

24.

Gmail style, AJAX check username signup

Signup check username suggest new (php, AJAX, Javascript).

25

Easy Ajax with ASK

ASK - Add dynamic content to a page unobtrusively.

26.

Slideshow Alternative - Demo

An excellent javascript slideshow with cross fade transition effects and linkable slides.

27.

Roll-your-own AJAX Slideshow

Just import their script in your web page to add a cool popup slideshow.

28.

Carousel Component - Demo

Photo library / slideshow code. Animated or non, static or fresh-fresh ajax.

29.

ActiveCollab - open source project planner

An easy to use, web based, open source collaboration and project management tool.

30.

Unobtrusive table sort script - Demo

Add sortable tables to your web page with this (unobtrusive) Javascript routine.

31.

Really Easy Field validation with Prototype

Here's a form validation script that is very easy to use.

32.

ModalBox 1.5 - User friendly web-based

popups & wizards. Prototype JS framework & script.aculo.us toolkit.

33.

Magnetic AJAX - Demo

This is just like the magnetic word kits you've seen before except this is on the internet.

34.

Transparent message - Demo

Very nice looking implementation of alert and message overlay using ROR and JS.

35.

ThickBox 2.1.1 - a webpage UI dialog widget

Similar to lightbox, but more versatile. Can be used with inline content, iframes & images.

36.

Suckerfish HoverLightbox

Roll over a title, it shows a grid of thumbnails. Rolling over a thumbnail shows a slightly...

37.

Relay - AJAX directory manager - Demo

Nice and small AJAX based online file and directory manager tool.

38.

Smoot - Web-based diagram and GIS tool

Smoot is a downloadable tool for creating diagrams of icons and links between them.

39.

jQuery Portlets - Demo

Boxes of content that can be expanded / coallapsed and dragged to a new position.

40.

Highslide JS thumbnail viewer

Animated, shadowed popups from thumbnails with CSS-styled captions.

41.

Timeline

Timeline is a DHTML-based AJAXy widget for visualizing time-based events.

42.

GoogieSpell - Demo

Gmail like downloadable spell checker for your own web application.

43.

An Ajax file uploads progress bar

AJAX powered progressbar to monitor file uploads with (Cake)PHP.

44.

TurboDbAdmin - Demo

A single-page solution for exploring and editing databases from a browser.

45.

jTip - A jQuery Tool Tip - Demo

A JavaScript library that provides pop-up help messages. Uses the jQuery library.

46.

Phoogle Maps v2.01

With about 5 lines of code you can display a customized Google Map on your website.

47.

JonDesign's SmoothGallery - Demo

A slide show javascript making use of javascript libraries - prototype and moo.fx

48.

Plotr - Javascript graphics

With Prototype you can plot data on a graph on your web site. Pretty sweet.

49.

Sortable, resizable, editable tables - Demo

TableKit is a collection of HTML table enhan- cements using the Prototype framework.

50.

Cross-fading Slideshow - Demo

This is a demo of a simple slideshow with a cross-fading effect.

51.

FrogJS Javascript Gallery

FrogJS is a simple, unobtrusive javascript gallery script with smooth transitions.

52.

Advanced RSS Ticker

RSS ticker script to display any RSS content on your site in a ticker fashion.

53.

SWFUpload

Upload files via flash to get the flash-upload dialog goodness.

54.

NoFunc - Sexy Box

This will create a basic lightbox interface using AJAX Requests and HTML masking.

55.

DHTML Color Picker - Demo

Very light weight color picker, 24.5k vs. it?s nearest competitors 72.3k.

56.

DebugScreen

A solution for more friendly JavaScript debugging. The page is in Japanese.

57.

PlotKit - Javascript Chart Plotting - Demo

PlotKit is a Chart and Graph Plotting Library for Javascript.

58.

35mm Photo Viewer - Demo

Web-based DHTML image/photo display and browsing application.

59.

Swazz Javascript Calendar

Lightweight widget which shows a calendar for use in picking dates on form fields.

60.

Prototype Carousel Class - Demo

Carousel image slideshow viewing using Prototype and scriptaculous.

61.

Loupe.js - Javascript Image Loupe

Loupe.js allow you to add a loupe to images on your webpages (FFox 1.5+, Opera 9+, Safari)

62.

TJPzoom - JS / CSS / DOM image magnifier

Makes large images completely visibly through small page-areas.

Some More Javascript/Ajax Effects for Modern Web Design...


1- Easiest Tooltip and Image Preview Using jQuery - A clean and easy to use jQuery tooltip & image preview script

tooltip

2- jQuery idTabs - These days using tabs in Wordpress themes and websites is common. iTabs is a plugins for jQuery that makes adding tabs to a website really simple.
idtabs

3- Coda-Slider - A jQuery plugins for tabs with sliding animation
codeslider

4- prettyPhoto a jQuery lightbox clone - A very beautiful lightbox for images with next/previous buttons, caption and preload animation for both single images and galleries.
light

5- Glass Box - GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. The GlassBox library ..
glassbox

6- SimpleModal Dialog Box - it comes with 3 example, basic dialog box, contact form and confirm override.

dialog

7- CSS Text Gradient - “Text Gradient is a simple css trick that allows you to improve your site’s appearance by putting gradients on system font titles using nothing but css and a png image.”

gradient

8- Simple Javascript Accordions - is a very small JS accordion script which is really handy in today’s web projects.

jsacc

9- Custom JavaScript Dialog Boxes - “The script currently offers four dialog styles: alerts, warnings, prompts and success. There is nothing to add to your page except references to the JavaScript and CSS if you choose not to incorporate them in your existing files.”

customdialog

10- Dynamic JavaScript Form Validation - It’s clear:)

msg_screenshot

11- jQuery Lightbox Plugin (balupton edition) - another jQuery lightbox plugins with only 15KB size
light2

12- AutoCompleter - This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

thumb

13- Top Floating message box using jQuery - This effect will be useful for advertising, hot news, etc

topfloat

14- Easy AJAX inline text edit 2.0 - an easy to integrate inline text edit script. No JavaScript knowledge needed, just follow the five steps for integration.

inlineedit

15- Create site tours with Amberjack - Amberjack is a lightweight Open Source library, enabling webmasters to create cool site tours.

tour

16- Accordion Menu script - It became really easy to make accordion menu using this script.

accordion

17- Create a Slick Tabbed Content Area using CSS & jQuery - Finally, this tutorial from NETTUTS demonstrates how to create a slick tabbed content area for your themes. You see tabbed content boxes in a lot of websites these days specially in Wordpress themes.

tabbed

10 JavaScript Effects to Boost Your Website’s Fanciness Factor


10 Javascript Effect to Boost Yoyr Website's Fanciness Factor

1) GreyBox

graybox screenshotGreyBox allows you to launch other websites in a modal window (like a pop-up window, but it doesn’t open another browser). This is great for when you’re linking to multiple websites and don’t want the user to navigate away from your web page or to open another browser window that might be blocked by the user’s browser. Using GreyBox is easy and involves a 3-step process outlined in the web page.

Here’s some key pages regarding GreyBox: Download page, Documentation, Examples, Installation, and Advanced Usage (for the more experienced JavaScript’ers, check this page out for tips on how you can extend the library’s functionality).

2) instant.js

instantjs screenshotinstant.js effect dynamically adds a Polaroid-like effect to your images (it tilts it and adds a border with a drop shadow), simulating this popular image technique without having to use a digital-image editing application such as Photoshop.

This can be utilized for when you’re applying this popular visual technique on multiple images and you don’t want to manually edit the pictures yourself (you can probably batch process, but that’s really only effective for simple actions such as resizing images, cropping uniformly, etc.).

3) mooTable

mooTable screenshotmooTable allows you the ability to provide sorting of table data ( without a page refresh) by utilizing the DOM instead of requesting the data again, sorted another way. Implementation is simple, and configuring the sorting of tables is a breeze.

This library needs the mootools framework, which you can download here. You can also find a forum post on the mootools boards by the author of mooTable, with feedback from other mootools developers.

4) FancyForm

FancyForm screenshotFancyForm replaces boring form controls such as radio buttons and check boxes, with fancier ones. The basic implementation is a two-step process: (1) include JavaScript files on the web page, and (2) assign your form controls the class="checked" or class="unchecked" for checkboxes and class="selected" and class="unselected" for radio buttons. Very unobtrusive JavaScript.

This script needs mootools as well (and was developed for version 1.1).

5) image menu

Phatfusion image menu screenshotimage menu, developed by phatfusion, is a spiffy horizontal menu that expands when you hover over menu items (such as images).

You can use this for displaying a montage of images that are each partly hidden, but that the user can reveal fully by hovering over it.

This script needs mootools as well (and was developed for version 1.1)

6) AmberJack: Site Tour Creator

AmberJack Site Tour Creator screenshotHere’s a lightweight JavaScript library that allows you to create a scripted website tour, allowing users to visit key web pages in real-time with a small description box on each page.

This allows users to take a tour of the various sections of a website, without them having to view a static demo created in flash or some other method. Extra bonus, you can download various “skins” or even create your own, to match the look and feel of your website. Here’s the skins gallery so you may see if they have a theme that doesn’t clash with your website.

7) ImageFlow

ImageFlow screenshotInspired by iPod’s “coverflow”, ImageFlow is a simple effect that displays a collection of images that the user can scroll there using a scroll bar at the bottom of the image set. Advanced developers can probably modify the slider to spruce it up a bit more.

When the user clicks on an image, it re-directs them to another web page with the image displayed, so an excellent idea would be to use this in conjunction with a modal box script to open the image instead.

Update: Just now, the author of ImageFlow emailed me announcing ImageFlow version 0.9. Check it out here (it fixes the issue of the image opening another browser window when clicked, and it works with Lightbox compatibility). Thanks for the update Finn!

8) ShadowBox.js Media viewer

ShadowBox.js Media viewer screenshotShadowBox is “a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript” (wow that’s a mouthful, isn’t it?).

What distinguishes shadowbox from the plethora of other modal boxes out there like Lightbox 2, is that it supports other file types besides images, such as a flash videos, embedded youtube videos, Apple.com Trailers, and web pages (a log-in page for example, that saves the user a trip to another page just to log on). Worthwhile script to test and play around with.

9) TJPzoom 3 - image magnifier

TJPzoom 3 image magnifier screenshotTJPzoom allows you to zoom in on particular sections of a high-resolution image. Holding down the mouse button and dragging up or down, can decrease or increase the zooming of the image magnifier tool.

One way of utilizing TJPzoom is to scale high-resolution pictures down to fit a web page, and then allow the users to zoom into parts of the image using the magnifier tool.

10) mootools Tips

mootools Tips screenshotmootools Tips is part of the mootools framework that allows you to provide a highly configurable way of showing tool tips to the user; when the user hovers over a link or image, additional information about the element appears on the screen.

Some options that you can tweak are the: CSS styles (to make it look different from the default black background and white text), transition speed, style of how the tool tip appears on-screen, and how long you want the tool tip be displayed. This requires the mootools framework.