Javascript Guru

Image Zooming With jQuery

2011-04-24T16:53:00.000+05:30

jqZoom is a jQuery plugin which enables images to be zoomed.
This is an easy-to-implement plugin which is very handy, specially, in e-commerce projects & galleries.

How it works?

This jQuery zoom plugin simply requires that "jqzoom" class to be added to images other that including the JS file and calling the main function once. And that’s it.
You can also configure it to mention the width-height of the zoom div and its position.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.mind-projects.it/blog/jqzoom_v10

Alloy UI: Feature-Rich JavaScript UI Framework

2010-03-10T22:00:00.000+05:30

Alloy UI is a JavaScript UI library, a CSS framework, a set of HTML recipes and a taglib library, all combined to empower developers across multi-skilled teams deliver rich and dynamic applications.
It is built by the developers of Liferay, has a lot of ready-to-use components & requires Yahoo! User Interface Library to run.

The components include:

auto-complete
charts
color picker
calendar
tooltips
forms
treeview
image gallery
& much more..

The framework comes with full set of demos & not documented yet (currently in a preview release).

Requirements: YUI
Compatibility: All Major Browsers
Website: http://www.alloyui.com/
Demo: http://www.alloyui.com/demos.php
Download: http://www.alloyui.com/download.php

JavaScript Framework Matrix: Compare The Popular Ones

2009-09-17T09:29:00.000+05:30

The JavaScript Framework Matrix, by Mathias Schütz, is a well-presented comparison of the popular JavaScript frameworks.
It shows examples for most of the functions which gives a strong idea on the coding principles of every framework.

The libraries included are:

jQuery
MooTools
The Dojo Toolkit
Prototype
Script.aculo.us
Ext.JS
Adobe Spry
BBC Glow
Yahoo UI! Library

Every function/snippet provided links to the original documentation which is nice for reading more on the resource.

Website: http://matthiasschuetz.com/javascript-framework-matr...

A JavaScript Library By BBC: Glow

2009-07-19T23:51:00.000+05:30

Glow is a JavaScript library, built by BBC that aims to make working with JavaScript and the DOM easier, similar to the popular ones like jQuery, MooTools, etc.
It tries to do this by abstracting common tasks, hiding cross-browser issues, and providing a set of user interface widgets.

on reviewing the major libraries we found that none met our standards and guidelines, with browser support in particular being a major issue.

The library is very well-documented & it already comes with various ready-to-use widgets like:

autosuggest
carousel
overlay (lightbox)
slider
timetable
& more..

Several demos are provided to see Glow in action

Requirements: No Requirements
Compatibility: All Major And (Most) Previous Browsers
Website: http://www.bbc.co.uk/glow/
Demo: http://www.bbc.co.uk/glow/demos/
Download: http://www.bbc.co.uk/glow/download/

TypeSelect: Selectable Custom Texts With JS

2009-07-19T23:46:00.000+05:30

TypeSelect is a JavaScript-based solution for using selectable custom fonts on the web.
It combines the power of typeface.js, jQuery, the canvas, toDataURL, CSS background properties & real overlayed text to accomplish this feature.

TypeSelect is very easy to understand & implement. It is totally controlled via CSS & no server-side files are required.
It has support for double/triple-click selections, UTF-8 characters & gracefully degrades in IE6.
On the other hand, currently, it has some limitations like unselectable text in IE, not being able to use :hover or line breaks & few more.

Requirements: jQuery, Typeface.js
Compatibility: All Major Browsers (with some limitations)
Website: http://www.typeselect.org/

Advanced Multilevel Dropdown Menus ProtoFish

2009-06-23T22:19:00.000+05:30

ProtoFish is an advanced dropdown menu script which supports multilevel navigations & built with Prototype.
The script is lightweight (1.3kb minimized), unobtrusive & cross-browser.

The hover class used & delay effect of the menus can be customized with ease.
It is accessible via keyboard using the TAB key & multiple instances of ProtoFish menus can be used on the same webpage.
For demos with various number of of levels & delay effects, click here.

Requirements: Prototype 1.6+
Compatibility: All Major Browsers
Website: http://techblog.procurios.nl/k/618/news/view/34556/1...
Demo: http://techblog.procurios.nl/l/nl/library/download/3...

Lightweight JavaScript Animation Library: $fx()

2009-01-26T13:30:00.000+05:30

$fx() is a JavaScript animation library which is only 3.7kb.
Within a timeline, any CSS property can be altered. And also:

you can combine effects
group them to the chains and run parallel
set different callbacks what gives you even more flexibility.

$fx() is definitely not an alternative to other well-known JavaScript frameworks. On the other hand it does its job (animation) good & if that’s what you need, then it saves you from loading bigger sizes of JS files.
Have a look at the examples.

Requirements: No Requirements
Compatibility: All Major Browsers

Free JavaScript Slideshow (Lightweight-5kb)

2009-01-26T10:57:00.000+05:30

Animated JavaScript Slideshow is a free & lightweight script to display images with style.
It simply turns an unordered list into a gallery which can be customized easily.

You can set it to auto-display the images or it can be browsed manually with the prev-next buttons.

The slideshow provides several other controls like:

Speed of the slideshow
Information to be displayed or not
Opacity of the images & more..

P.S. It does not require any JavaScript library.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.leigeber.com/2008/12/javascript-slideshow/
Demo: http://sandbox.leigeber.com/javascript-slideshow/

Free JavaScript Slideshow (Lightweight-5kb)

2009-01-01T18:55:00.002+05:30

Animated JavaScript Slideshow is a free & lightweight script to display images with style.
It simply turns an unordered list into a gallery which can be customized easily.

You can set it to auto-display the images or it can be browsed manually with the prev-next buttons.

The slideshow provides several other controls like:

Speed of the slideshow
Information to be displayed or not
Opacity of the images & more..

P.S. It does not require any JavaScript library.

Cross-Browser JavaScript Debugger: xBug

2008-12-20T10:10:00.000+05:30

xBug is a JavaScript debugger that enables you to trace or step through your JavaScript code in real-time
It works with Chrome, Firefox 2/3, IE 6/7 & Safari 3.

Using xBug, you can:

set breakpoints, and watchpoints in a separate code window
see a trace log while your code is executing
inspect variables
get an indexed list of the functions/methods, and more…

P.S. It currently runs on the Windows platform.

Requirements: Windows platform
Compatibility: Chrome, Firefox 2/3, IE 6/7 & Safari 3
Website: http://www.xbug.co.uk/
Download: http://www.xbug.co.uk/download.htm

25 Amazing JavaScript Games (Some Fun And Inspiration)

2008-12-19T22:30:00.000+05:30

JavaScript, with the rise of Ajax, is definitely a must-know-well for every web designer/developer.
Besides form controls, alerts & similar simple JavaScript usage, you can almost do anything with the help of JavaScript (& Canvas). Some samples are:

Drag’n drops
Animations
CSS manipulations, Ajax & more.

And there are JavaScript libraries which make them easier like jQuery, MooTools, Prototype, etc.
For any developer looking for advanced JS techniques, games are a real treasure.

You can easily see examples of animations, interactivity, smart solutions for browser related math functions & so.. And they are definitely a source of inspiration as you sometimes face with a feature that you never thought could be existed.
Also, this is the last month of a busy year & every web designer/developer deserves some fun : ).
So, here are 25 amazing (sometimes not the game itself but how beautifully it’s done) JavaScript games that you’ll love.

Bunny Hunt

A classic hunting game with an easy to play interface.
Make sure you check the source of the website to see how simply it is built with the power of XHTML, CSS & JavaScript.
JavaScript Library: none.

Travians

A character game (like Sims) where you’re a villager.
It is a multiplayer game & totally Ajaxed. You can move your character, communicate with other user & more.
JavaScript Library: xajax.

Digg Attack

This is certainly a Web 2.0 game. It is a JavaScript / Canvas 2D Shooter using live data via the Digg API to spawn enemies.
All the images are rendered with Canvas in real-time.
JavaScript Library: none.
Read the rest of this entry »

JavaScript Image Processing Library: Pixastic

2008-12-19T22:12:00.002+05:30

Pixastic is an open source JavaScript image processing library.
It uses HTML5 Canvas element that enables accessing to raw pixel data.

Supported effects are:

desaturation/greyscale
invert
flipping
brightness/contrast adjustment
hue/saturation
emboss
blur & more

There is an image editor built with it & the library is well-documented.

Requirements: No Requirements
Compatibility: All Major Browsers (IE requires ExCanvas)
Website: http://www.pixastic.com/
Download: http://www.pixastic.com/lib/download/

Niceforms 2: Beautiful Forms With JavaScript

2008-12-03T11:00:00.001+05:30

Niceforms, a script to beautify web forms, was very popular for creating beautiful forms. And now the 2nd version is out.
Niceforms 2.0 is a totally re-written version which is very easy to apply, handles more elements & has more customization options.

How to use it?

The script simply replaces the most commonly used form elements with custom designed ones.
Inserting the niceforms.js & the CSS file is enough to use it.
Besides the default theme, new themes can be developed with CSS editing.
Niceforms works in all modern browsers except IE6 (it gracefully degrades).

Requirements: No Requirements
Compatibility: All Major Browsers (except IE 6)
Website: http://www.emblematiq.com/projects/niceforms/
Demo: http://www.emblematiq.com/niceforms/v20/niceforms.html

Lightweight Multi-Level Drop-Down Menu

2008-12-02T23:22:00.000+05:30

This is an easy to implement multi-level drop-down menu.
It is lightweight (1.2kb) & supports multiple instances on one page.

Rather than complicated JavaScript backends, this script converts an unordered list into a menu.
Sub-menus are displayed with an easing animation & it supports all major browsers.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.leigeber.com/2008/11/drop-down-menu/
Demo: http://sandbox.leigeber.com/dropdown-menu/index.html

Lightweight JavaScript Table Sorter

2008-11-08T00:44:00.000+05:30

JavaScript Table Sorter is a lighweight code (1.7kb) for transforming standard tables into a sortable grid.
It includes alternate row formatting, header class toggling, auto data type recognition and selective column sorting.

After inserting the JS file into the website, a simple function does the job:

var sorter=new table.sorter("sorter");
sorter.init("sorter",1);

It is possible to mention which column will be sorted by default & which columns won’t have a sort feature.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.leigeber.com/2008/11/javascript-table-sor...
Demo: http://sandbox.leigeber.com/sorter/index.html

JavaScript Controllable Flash MP3 Player: NiftyPlayer

2008-10-04T00:02:00.000+05:30

NiftyPlayer is a tiny open source Flash MP3 player with a very simple interface.
It is lightweight (4kb) and usage does not require any Flash knowledge as the URL is mentioned in HTML.

The player can be easily controlled with JavaScript besides the Flash interface, like changing the file to be played, stop & start. With this feature, you can even bypass the whole Flash look.

Some other features are:

Autostart capability
Draggable/Clickable seek bar
Simple operation with Play/Pause and Stop buttons
Buffering with progress bar
Buffering is stoppable! (through Stop button)
Volume control

Website: http://www.varal.org/media/niftyplayer/

Create Parallax Effects On The Fly With jParallax

2008-09-14T10:03:00.001+05:30

jParallax is a jQuery plugin which enables you to create Parallax effects.
This effect simply moves layers in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts & create a depth.

Info: If you’re new to parallax effects, check the demo to see it (Parallax in Wikipedia).
jParallax simply provides the necessary options for creating the animation like layer controlling, positioning & timing.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://webdev.stephband.info/parallax.html
Demo: http://webdev.stephband.info/parallax_demos.html
Via: http://ajaxian.com/archives/jparallax-turns-elements...

jQuery Image Gallery Plugin: Galleria

2008-09-13T22:00:00.001+05:30

Galleria is an image gallery jQuery plugin.
It loads the images one by one from an unordered list and can present them:

scaled
unscaled
centered
cropped inside a fixed thumbnail box

The beauty of Galleria is behind the ease of creating a gallery. Simply create an unordered list, add some images and it will create a chic gallery.
Another nice feature is the support of browser history. You can use your browser’s back & forward buttons

Other features of this jQuery image gallery:

Unobtrusive javascript
Lightweight (4k packed)
Displays the thumbnail when the actual image is loaded
CSS powered - create your own gallery style
Super fast image browsing since the images are preloaded one at a time in the background
Stylable caption from image or anchor title
jQuery plugin - takes one line to implement
Can fire events so you can customize the images behaviour onLoad

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://devkick.com/lab/galleria/
Demo: http://devkick.com/lab/galleria/demo_01.htm

Flexible JavaScript Tree Menu: dTree

2008-09-13T19:23:00.000+05:30

While creating a filebrowser for a project, I have tried several JavaScript tree menus and found this one the easiest to work with.
dTree is an easy to setup & use classic JavaScript tree menu.
With a XHTML 1.0 strict validated output, this tree menu supports unlimited number of levels and remembers the state between pages.

Other features of dTree:

Can be used with or without frames
Possible to have as many trees as you like on a page
All major browsers supported
Alternative images for each node

The items don’t need to be in an order within the code as you can re-order them. This is a functional feature when creating the menu from a database.
The script is well-documented and this example shows how flexible it is.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.destroydrop.com/javascripts/tree/
Demo: http://www.destroydrop.com/javascripts/tree/example/

Form Validation + Ajax Submit With ProtoForm

2008-09-13T16:14:00.000+05:30

ProtoForm is a "very easy to implement’, lightweight (4kb) & unobtrusive form validation & Ajaxed submit solution that depends on Prototype.

It can validate:

e-mail
date
telephone number
URL

Parameters are mentioned within the attributes like:

This makes it very easy to implement (a negative point can be requirement to define the ids in a specific way).
ProtoForm also sends data and shows response with Ajax, highlights the form field on focus and on error.

Requirements: Prototype
Compatibility: All Major Browsers
Website: http://www.cssrevolt.com/upload/files/protoform/

JavaScript Coverflow With Canvas

2008-09-13T10:26:00.002+05:30

This is another Coverflow script which uses canvas for the effects.
The script is very easy to implement & works smoothly.

Images can be browsed via scroll wheel or left-right keys besides the mouse clicks. And, it is tested with other javascript libraries like jQuery, MooTools, Dojo and Prototype.
For the canvas support in IE, checkout ExplorerCanvas.

Requirements: No Requirements
Compatibility: All Major Browsers (Explorer Canvas can be used for IE)
Website: http://radnan.public.iastate.edu/coverflow/
Via: http://ajaxian.com/archives/4331

Difference between http:// and https://

2008-09-12T23:55:00.000+05:30

The main difference between http:// and https:// is
It's all about keeping you secure

HTTP stands for HyperText Transport Protocol, which is just a fancy way of
saying it's a protocol (a language, in a manner of speaking) for information to
be passed back and forth between web servers and clients.

The important thing is the letter S which makes the difference between HTTP and HTTPS.

The S (big surprise) stands for "Secure".

If you visit a website or webpage, and look at the address in the web browser, it will likely begin with the following: http://.

This means that the website is talking to your browser using the regular
'unsecure' language.

In other words, it is possible for someone to "eavesdrop" on your
computer's conversation with the website.

If you fill out a form on the website, someone might see the information you
send to that site.

This is why you never ever enter your credit card number in an http
website!

But if the web address begins with https://, that basically means your computer is talking to the website in a secure code that no one can eavesdrop on.

You understand why this is so important, right?

If a website ever asks you to enter your credit card information, you should
automatically look to see if the web address begins with https://.

If it doesn't, there's no way you're going to enter sensitive information like a
credit card number!

jQuery Image Crop Plugin: Jcrop

2008-09-12T21:58:00.001+05:30

For the last weeks, several JavaScript image crop resources are published at WebResourcesDepot. This is because, the increase in use of such interfaces as image-based applications are on the rise & many web applications offer their users to edit their avatars besides only uploading them. So, you may need one of them : ) .
Jcrop is a cross-browser jQuery image crop plugin.

Some features of Jcrop:

Attaches simply to any image in your HTML page
Supports aspect ratio locking
Callbacks for selection done, or while moving
Keyboard support for nudging selection
Support for CSS styling
Advanced API including animation support

An example of this plugin here & a sample PHP code to complete the server-side of the crop here.
P.S. Thanks to Kelly for the suggestion.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://deepliquid.com/content/Jcrop.html
Demo: http://deepliquid.com/content/Jcrop_Examples.html

Lightbox That Displays Any Media: LightWindow

2008-08-08T00:40:00.000+05:30

LightWindow is a highly configurable Lightbox (modal window) solution built with Prototype & script.aculo.us.

It can display any media including Flash, Quicktime or an external website. And, it has gallery support with a multi-gallery feature.

The modal window can be custom positioned and it is automatically resized to fit the content.
LightWindow can be re-styled including markup, CSS & animations easily. Besides clicking on the close button & outside of the modal window, ESC key works for this feature too.
Requirements: Prototype, Script.aculo.us (included with the download)
Compatibility: All Major Browsers
Website: http://stickmanlabs.com/lightwindow

JavaScript Template Engine For HTML: Pure

2008-08-08T00:01:00.001+05:30

Pure is an unobtrusive JavaScript template engine for HTML.

It aims to make HTML dynamic as templates can be created with only JavaScript, HTML & CSS.

Pure is fast & runs on the browser/client side. It currently supports JSON (XML to be supported soon).

This JavaScript template engine can be used as a jQuery plugin (soon Dojo, DOMAssistant, MooTools, Prototype).

Pure provides a detailed "getting started" information supported with helpful examples.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://beebole.com/pure/
Demo: http://beebole.com/pure/examples/docs/example1.html

Easy Sliding Contents With mooSlide

2008-08-05T01:21:00.004+05:30

mooSlide is an easy to use & configure slider class for MooTools.

It is a functional solution to present any content, even as a Lightbox replacement.

Within 1 line of code, you can set the:

slider div
slide in speed
fade out speed
remove on click yes / no
final opacity
height of the slider container
type of effect used
toggler element
slide from position

And, multiple sliders can be used in 1 page.

Requirements: MooTools 1.1+
Compatibility: All Major Browsers
Website: http://www.artviper.net/test/mooSlide2/index.html

A New Approach To Chat: firefly

2008-08-05T01:12:00.002+05:30

firefly is a totally different chat system which can power your websites.

By adding a line of JavaScript, your visitors can chat with each other in an overlayed screen.

Users can:

See other users mouse movements,
Choose avatars,
See the chat history,
Howmany people are already in the page.

As a developer, all I can ask for more is an API that enables integrating any userbase to the system for adding auto avatars, names to the users etc. Considering this is a fresh chat service, in the future, why not?

You should definitely give firefly a try & will probably be impressed.

Requirements: No Requirements
Website: http://firef.ly
Via: http://sharebrain.info/brainpicks/tools-brainpicks/f...

Happy friendship day

2008-08-03T20:04:00.001+05:30

haXe: A Multiplatform Programming Language

2008-08-01T00:40:00.003+05:30

haXe is an open source & multiplatform programming language.

A code written with haXe can be compiled to JavaScript, Flash (AS2 & AS3), PHP and NekoVM which is all the idea behind the project: "let the developer choose the best platform to do a given job".

haXe has installers for Windows, OSX & Linux and the platform is well-documented.

For writing haXe code, plugins for several popular editors can be found here.

Requirements: No Requirements
Compatibility: Windows, OSX & Linux
Website: http://www.haxe.org
Download: http://www.haxe.org/download

JavaScript Keyboard Controls: js-hotkeys

2008-07-28T23:56:00.004+05:30

js-hotkeys is a jQuery plugin which enables you to create keyboard triggered events.

This is a very nice feature if you want to provide users more browsing flexibility. And also, it can be used in JavaScript testing environments like triggering a test function by clicking CTRL + t.

A simple usage of the plugin is:

$.hotkeys.add('Ctrl+a',function(){/*DO YOUR DUTY*/}); $.hotkeys.remove(’Ctrl+a’);

A demo of this jQuery keyboard control plugin can be found here.

Requirements: jQuery
Compatibility: All Major Browsers (some handicaps are mentioned at the product website)
Website: http://code.google.com/p/js-hotkeys/
Demo: http://jshotkeys.googlepages.com/test-static.html

Newsvine-Like News Ticker With MooTools

2008-07-28T23:53:00.002+05:30

woork presents a nice MooTools news ticker, which scrolls vertically, similar to the one in Newsvine.

Content is currently hard-coded inside the HTML within li elements. There is also an information provided for how to get the content dynamically from a database.

Speed & delay of the slide effect can be configured within the code.

Requirements: MooTools
Compatibility: All Major Browsers
Website: http://woork.blogspot.com/2008/07/fantastic-news-tic...
Demo: http://woork.bravehost.com/newsticker/index.html

JavaScript Sliding Puzzles With jQuery

2008-07-23T23:24:00.002+05:30

jqPuzzle is a jQuery plugin which enables you to create sliding puzzles from any image.

The created JavaScript puzzle can have the shuffle & solution options besides the moves made & seconds played.

jqPuzzle is highly configurable as the options in the interface can be enabled/disabled, number of rows & columns of the puzzle to be created can be defined & more.

How to use?

After inserting the jquery.jqpuzzle.js & jquery.jqpuzzle.css files to your webpage, simply give the class="jqPuzzle" to any image. That’s all.

Requirements: jQuery 1.2.1+
Compatibility: All Major Browsers
Website: http://www.2meter3.de/jqPuzzle/
Download: http://www.2meter3.de/jqPuzzle/#download

Sparklines (Small Inline Charts) With jQuery

2008-07-21T21:58:00.004+05:30

jQuery Sparklines is a plugin for creating sparklines on the fly.

What is a sparkline:

They are data-intense, design-simple, word-sized graphics that are commonly used in market, stock activity and can be implemented anywhere (via Wikipedia).

This plugin supports:

Line graphs
Bar charts
And, tristate charts

jQuery Sparklines plugin can be used to create graphs from data inside the HTML or via JavaScript. Almost every variable of it can be customized including colors, size & chart type.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://omnipotent.net/jquery.sparkline

MooTools Animated Progress Bar

2008-07-12T20:01:00.003+05:30

Progress bars are a great way visualizing events that may take some time like uploads, form submissions & more.

This is a MooTools animated progress bar which is highly customizable and easy to implement.

You can define the "start percentage" and "speed" of the progress bar besides other variables.

Usage is this easy:

pb = new dwProgressBar({ container: $(’put-bar-here’), startPercentage: 25, speed:1000, boxID: ‘box’, percentageID: ‘perc’ });

and you can set the progress bar to a new percentage with a simple command like: pb.set(55); .

To see a demo of this MooTools progress bar, click here.

Requirements: MooTools
Compatibility: All Major Browsers
Website: http://davidwalsh.name/progress-bar-animated-mootools
Demo: http://davidwalsh.name/dw-content/progress-bar.php

Lightweight FLV Player Component: ToobPlayer

2008-07-01T20:38:00.001+05:30

ToobPlayer is a lightweight (approx. 14-8 KB) FLV player component that comes in 5 flavors, provides a mechanism to play back YouTube videos, and can also display preview images.

Some features of this FLV player:

Resizable, optional full-screen mode
Several video resize mods
Loading status feedback
Mouse wheel support (seeking & volume)
Auto-repeat, buffer time
Customizable
Extensive API

ToobPlayer YouTube integration is done with a simple PHP proxy script to automate acquaring videos & images.

The component requires Flash Player 8+ & AS2.

Custom HTML Form Elements

2008-07-01T20:25:00.002+05:30

This is a JavaScript solution which enables you to create custom HTML form elements (radio buttons, checkboxes, etc.)

The JavaScript simply:

Hides form elements with class="styled"
Sticks a span tag with a CSS class on it next to the element
Adds mouse events to the span that handles the stages when it is clicked.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://ryanfait.com/resources/custom-checkboxes-and-...
Demo: http://ryanfait.com/resources/custom-checkboxes-and-...
Via: http://www.knowtebook.com/css-freedom-redesign-html-...

Easy Draggable Table Columns: Dragtable

2008-06-29T20:43:00.001+05:30

Dragtable is a JavaScript library for making the columns of a table draggable.

It is very easy to use as inserting the dragtable.js in our code and adding the class="dragtable" to any table is enough.

Tables become more functional with Dragtable as you can put the columns you think important side-by-side and have a better view.

It can also be used with the famous Sorttable library which will make the standard tables both draggable and sortable.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.danvk.org/wp/dragtable/

HOW IT'S DONE

2008-06-02T22:40:00.000+05:30

Here's the entire page, minus my comments. Take a few minutes to learn as much as you can from this, then I'll break it down into smaller pieces.

<SCRIPT LANGUAGE="JavaScript">

<!-- Beginning of JavaScript -

function MsgBox (textstring) {

alert (textstring) }

// - End of JavaScript - -->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Objects and Properties

2008-06-01T23:26:00.000+05:30

Your web page document is an object. Any table, form, button, image, or link on your page is also an object. Each object has certain properties (information about the object). For example, the background color of your document is written document.bgcolor. You would change the color of your page to red by writing the line: document.bgcolor="red"

The contents (or value) of a textbox named "password" in a form named "entryform" is document.entryform.password.value.

Methods

Most objects have a certain collection of things that they can do. Different objects can do different things, just as a door can open and close, while a light can turn on and off. A new document is opened with the method document.open() You can write "Hello World" into a document by typing document.write("Hello World") . open() and write() are both methods of the object: document.

Events

Events are how we trigger our functions to run. The easiest example is a button, whose definition includes the words onClick="run_my_function()". The onClick event, as its name implies, will run the function when the user clicks on the button. Other events include OnMouseOver, OnMouseOut, OnFocus, OnBlur, OnLoad, and OnUnload.

What is Object Oriented Programming?

2008-05-30T16:23:00.000+05:30

Everyone that wants to program JavaScript should at least try reading the following section. If you have trouble understanding it, don't worry. The best way to learn JavaScript is from the examples presented in this tutorial. After you have been through the lessons, come back to this page and read it again.

OOP is a programming technique (note: not a language structure - you don't even need an object-oriented language to program in an object-oriented fashion) designed to simplify complicated programming concepts. In essence, object-oriented programming revolves around the idea of user- and system-defined chunks of data, and controlled means of accessing and modifying those chunks.

Object-oriented programming consists of Objects, Methods and Properties. An object is basically a black box which stores some information. It may have a way for you to read that information and a way for you to write to, or change, that information. It may also have other less obvious ways of interacting with the information.

Some of the information in the object may actually be directly accessible; other information may require you to use a method to access it - perhaps because the way the information is stored internally is of no use to you, or because only certain things can be written into that information space and the object needs to check that you're not going outside those limits.

The directly accessible bits of information in the object are its properties. The difference between data accessed via properties and data accessed via methods is that with properties, you see exactly what you're doing to the object; with methods, unless you created the object yourself, you just see the effects of what you're doing.

Other Javascript pages you read will probably refer frequently to objects, events, methods, and properties. This tutorial will teach by example, without focusing too heavily on OOP vocabulary. However, you will need a basic understanding of these terms to use other JavaScript references.

What is JavaScript?

2008-05-30T16:20:00.000+05:30

Javascript is an easy-to-use programming language that can be embedded in the header of your web pages. It can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more.

What's the difference between JavaScript and Java?

Actually, the 2 languages have almost nothing in common except for the name. Although Java is technically an interpreted programming language, it is coded in a similar fashion to C++, with separate header and class files, compiled together prior to execution. It is powerful enough to write major applications and insert them in a web page as a special object called an "applet." Java has been generating a lot of excitment because of its unique ability to run the same program on IBM, Mac, and Unix computers. Java is not considered an easy-to-use language for non-programmers.

Javascript is much simpler to use than Java. With Javascript, if I want check a form for errors, I just type an if-then statement at the top of my page. No compiling, no applets, just a simple sequence.