If you want to stick to being DRY (don’t repeat yourself) for writing less code, then enter LESS. LESS is a JavaScript based CSS preprocessor which allows you to write CSS in its extended syntax and it will automatically compile that code into normal CSS. Currently LESS supports variables, mixins, operations and nested rules.  Variables will allow you to define widely used values in a single place and then re-use them throughout the style sheet:

Each of these different dynamic behaviors are real time-savers and the best way to understand how they work is to refer to the site’s usage examples.

Post from: Hot Scripts Blog

Meet LESS, The Dynamic Stylesheet Language

Related posts:

1. Meet Raphaël, the JavaScript Vector Library
2. Determining Programming Language Popularity

1. Saves your bandwidth - You can save up to 50Kb per visitor in bandwidth by using Google’s CDN.
2. Decrease latency – your visitors will be served by a CDN server closest to their physical location)
3. Better caching- a visitor who accessed a previous site using Google’s hosted JS is likely to have a copy in his cache)

There’s also a handy online tool at Scriptsrc.net that allows you to easily copy and paste the latest version of your JavaScript library for insertion on your page.

Post from: Hot Scripts Blog

Speed up your Apps with Google’s AJAX Libraries

Related posts:

1. Google Introduces WebP – a new image format
2. 5 Amazing JavaScript Image Effects Libraries
3. 10 Great HTML5 Experiments and Apps

Ext started as an extension to YUI , but since has evolved into a full framework., describing itself as being a “cross-browser JavaScript library for building rich internet applications“. While this description stands true, it is however too simple to describe this awesome JavaScript framework.

Ext is extremely powerful and well written. Its true Object oriented nature and design make it perfect for seasoned developers, compared to other mainstream frameworks. If want to create Rich Internet Applications (RIA) Ext is the tool to use: it has an extremely complete GUI toolkit, providing you with tons of components that mimic desktop applications’ fluidity and complexity on the web. Just check Ext demo page, I’m sure you will be dazzled by what you can achieve with it.

You can get Ext in two forms Ext Core and Ext JS.

1. Ext Core is the “lite version” of Ext JS, offering the same kind of functionality as other popular JS frameworks. It’s licensed under the very permissive MIT license. As you might have guessed the GUI components are not included in the Core.
2. Ext JS comes with a lot of extra features and lots of GUI gadgets. You can get it under one of the two licenses: under a GPL or a commercial license that waives the GPL restrictions.

Ext (both Core and JS) is well documented and feature a wide variety of demos and an easy to follow manual . It also has great support community.

In this article we’ll teach you how to get started with Ext JS.

Getting started with Ex

1. Download Ext JS
2. Unzip it to a folder and you are ready to go!

Don’t be alarmed by the file size, you are downloading the full package including sources and examples After having Ext in your project folder all that is missing is including its files in your HTML.

You need to include Ext JavaScript and css files:

<link rel="stylesheet" type="text/css" href="ext-3.3.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.3.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-3.3.0/ext-all-debug.js"></script>

The above code should be enough to get you started, assuming you unzipped Ext into a folder named ext-3.3.0

An in depth introduction to Ext HTML setup is available here make sure you also read the Ext getting started guide.

Hello World

Maybe the easiest way to start using Ext in your existing web site is by replacing those nasty JavaScript alert boxes.

In Ext creating a fancy alert box is easy:

Ext.MessageBox.show({
title: 'Error Alert',
msg: 'Here is an error message!',
buttons: Ext.MessageBox.OK,
icon:Ext.MessageBox.ERROR
});

and voila! Now you have a alert box with title, text, and error Icon.

Unless you are visiting a strange web site you only see alert boxes to display error information.Replacing your alert calls with this code will be a boring task – instead you can add this code to the top of your page:

window.alert = function(str){
Ext.MessageBox.show({
title: 'Error Alert',
msg: str,
buttons: Ext.MessageBox.OK,
icon:Ext.MessageBox.ERROR
});
}

You have overwritten the default alert function, all calls to alert() will now show the fancy Ext alert box! The Ext alert box is HTML only, so you might need to replace \n with <br> if your alerts are multi lined

You can do much more with Ext and alert boxes, check it out here.

Tooltips

Tooltips are nice information messages that you can present to your visitors and the good news is that with Ext you can create them easily and automatically. The next example will show you how to automatically add tool tips to all img tags present in the page. For the tool tip text we will use the Alt attribute from the img tag

Ext.onReady(function(){

Ext.select('img').each(function(el){
var tt = new Ext.ToolTip({
target: el,
title: el.getAttribute('alt')
});
});

});

As you can see the code is inside the Ext.onReady function. This ensures the code is executed as soon as the DOM is ready. If you have code that needs to run on page load, this is the place to have it.

1. The ext.select() function give us an array of all the matching DOM elements, so in our case returns an array with all the images in the page
2. Each() iterates through an array applying a function to each element
3. This way we can easily apply a tool tip to all images in the page
4. For the tool tip text the value of the ALT attribute is used

As you might have noticed, with Ext almost all functions can be chained, making it easy and fast to develop

Forms

Forms are one of the most important components of a web site; be it a contact form, a checkout form, etc. We’ll now take a look how to create an Ext form and HTML markup. This way we are providing users with JavaScript enabled browsers an improved user experience but not excluding users unable to process JavaScript.

This is a bit trickier to achieve as we can not create forms directly from HTML markup. In this example we will create an Ext form with some validation but also provide a regular form if Javascript is disabled.

<form id="myfrm" action="save-form.php" method="POST"> <label for="txtName">Name</label>

<input name="txtName" type="text" /> <label for="txtFeedback">Your comment</label>
<textarea name="txtFeedback"></textarea>

<input type="submit" value="submit" /> </form>

<script type="text/javascript">// <![CDATA[

Ext.onReady(function(){

	var simple = new Ext.FormPanel({
        url:'save-form.php',
        frame:true,
        title: 'Simple Form',
        width: 350,
        defaults: {width: 230},

        items: [
                new Ext.form.TextField({
                	fieldLabel: 'Name',
                	name: 'txtName',
                	allowBlank: false
                }),
                new Ext.form.TextArea({
                	fieldLabel: 'Your comment',
                    name: 'txtFeedBack'
                })
        ],

        buttons: [{
            text: 'submit',
        	handler: function(){
                if(simple.getForm().isValid()){
                	simple.getForm().submit();
                }
            }
        }]
    });

    simple.render('myfrm_ext');
	Ext.get('myfrm').remove();

});

// ]]></script>

Lets review the code step by step.

In the html portion a basic form we define two elements:

1. The form that will be visible only to users without javascript enabled
2. An empty div where we will attach our Ext Form

In the JavaScript portion we create an Ext form.

1. The first block of options define things like the submission url, the form width and the default values to be applied to form elements
2. The items option is where the fields are created, one text field and one text area, we also say that the text field must no be empty (allowBlank = false)
3. In the buttons we add the submit button with an handler function. That function will be called when the button is pressed, and it will submit the form if it passes validation

If you are interested about forms take a look at the forms section in the samples, there is so much more you can with them

Conclusion

The goal of this article was to give you an introduction to Ext JS. By now you know all that you need to start adding some nice features to your web site. You can display fancy alert boxes, create eye catching forms, attach custom functions to DOM elements and also how to search and iterate through all of them.

About the Author

Post from: Hot Scripts Blog

Getting Started with Ext JS

Related posts:

1. Client-side text field validation with Javascript
2. Cookies with JavaScript

jQuery Roundrr

His new jQuery plugin Roundrr transforms list-based images in an interactive wheel-based gallery with keyboard navigation support. The Flash-like effects are smooth, sleek and functional with image caption and image enlargement support.

Addy has written several other jQuery based image galleries. Here are some more:

jQuery Interactive Photo Stack

jQuery ShineTime

Zoomer Gallery

Post from: Hot Scripts Blog

Beyond Traditional Image Showcase with jQuery

Related posts:

1. Google Introduces WebP – a new image format
2. jQuery Mobile Framework Released
3. 5 Amazing JavaScript Image Effects Libraries

A data grid can help address concerns of HTML tables with large data sets by providing features like sorting, filtering, searching, pagination and even in-line editing for your tables. There are two ways you can add data grid functionality to your tables. The first method is to use server-side scripting like PHP or .NET to allow your users to manipulate your table data. The second and recommended method is to use JavaScript to bind grid controls to your tables.

In this post, we’ll take a look at some of the most popular JavaScript Data Grids available on the Net. Some of them are based on pure JavaScript, while others are plugins to JavaScript frameworks like Mootools, jQuery and Prototype.

Pure JavaScript Data Grids

dhtmlxGrid

dhtmlxGrid is an Ajax-driven JavaScript grid control that supports data in different format including XML, JSON, CSV, HTML table and even custom XML format. The grid component lets you implement nice looking tables with built-in inline editing, filtering, searching and grouping capabilities

EditableGrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running. It supports sorting of columns based on different datatypes, filtering, inserting and removing rows as well as an automatic Flash chart-rendering feature.

Standardista Table Sorting

Standardista Table Sorting is a client-side JavaScript sorting module that lets you sort an HTML data table by any column. It is the most basic and easiest to implement table sorting solution we’ve found. It works great with large table sets and supports result of different data types including date, plain text, currency and number.

SortedTable

SortedTable is another JavaScript datagrid component that combines table sorting and rows selection and movement. It allows you to select rows and move them up or down your table or even movie them from one table to another. Its sorting feature supports different data types (similar to Standardista).

SigmaGrid

Written in pure javascript, Sigma grid is an open source 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. One of its great features is the support for printable tabular data.

jQuery Data Grid Plugins

jTPS – Datatable jQuery Plugin

jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability. The development version is currently 15KB.

DataTables – Data Table jQuery plugin

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Some of its key features include pagination, on-the-fly filtering and multi-column sorting.

Animated table sort

This jQuery plugin allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Flexigrid for jQuery

Flexigrid is a 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. It supports resizable and sortable columns, different skinning themes, ability to connect via AJAX, pagination, toolbar and search. One of the great thing about Flexigrid is that you will find a lot of sample codes to integrate it in your preferred scripting language.

TableSorter

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.

Ingrid

Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

Prototype Data Grid Components

TableKit

TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax. It can be implemented by simply calling the JavaScript file and attaching it to a table’s CSS class.

MyTableGrid

MyTableGrid is a JavaScript based DataGrid control built on the Prototype library. It allows you to display your data in a simple and flexible way.  It supports resizable columns, sortable columns and support data import via JSON or AJAX.

MooTools Data Grid Components

OmniGrid

OmniGrid is a datagrid component that supports table sorting, refresh and pagination. Its ability to connect via AJAX enables it to offer in-line editing, addition and deletion of records as well as rows duplication.

Post from: Hot Scripts Blog

15 JavaScript Data Grids to Enhance your HTML Tables

Related posts:

1. HTML with XML Data Binding
2. IxEdit – A JavaScript-based interaction design tool
3. 6 Amazing JavaScript Image Zoom Scripts

IxEdit Design Tool

Enter IxEdit, the first on-the-fly interaction design tool aimed at allowing designers and developers create interactions with no JavaScript coding and just basic knowledge of HTML and CSS. After writing your HTML and CSS, simply embed IxEdit into your source and it will display an elegant floating tool with different options and attributes. You can then create new interactions by selecting the DOM element right from your page and setting up the interaction attributes like drag and drop, fade, etc. You can then preview your changes in real time. For example with a few mouse clicks, you can create a tab-based navigation for your form or add a date picker to your textbox. Once you’re happy with the interaction created, you can export the JavaScript generated and copy and paste it to your source.

IxEdit works under Firefox, Safari, Chrome and Internet Explorer to make your browser your interaction development environment.

Post from: Hot Scripts Blog

IxEdit – A JavaScript-based interaction design tool

Related posts:

1. Meet Raphaël, the JavaScript Vector Library
2. 8 Most Popular JavaScript Image Cropping Scripts
3. 6 Amazing JavaScript Image Zoom Scripts

The scripts below are great starting point to build your calendar. They only provide front-end scheduling interface based on AJAX and CSS. You will have to write your own code that will hook to the different events and possibly an admin area to store and manage the events.

FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

dhtmlxScheduler

dhtmlxScheduler is a Web-based JavaScript events calendar that provides rich and intuitive scheduling solution similar to Microsoft Outlook Calendar, Apple’s iCal or Google Calendar. The events can be displayed in Day, Week, Month or Year views. Advanced drag-n-drop functionality allows users to change events dates and time by easily moving or resizing event boxes. Very lightweight (about 20Kb gzipped), fast-performing, and it uses Ajax to smoothly update and display events schedule.  dhtmlxScheduler is also available as plugins for WordPress, Joomla and Drupal.

jMonthCalendar

jMonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. This calendar is based on jQuery and has extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar also supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.

MooGenda

MooGenda is a javascript calendar based on MooTools, that reads events from JSON requests. MooGenda supports double click on event to see the deafult event view, drag and drop event in month view, every change send a request to back end, to store when and what changed in the event.

If you’re looking to save time building an admin interface for any of the above solutions reviewed, then the following full-fledged calendar systems are perhaps what you need. They come with both the front-end and back-end.

LuxCal

LuxCal is a relative new calendar solution and compared to the other calendar solutions outlined above, LuxCal does not only come with a front-end interface but a complete event management system based on PHP and MySQL. It has been designed for user-friendliness, with support for views like month, day, year and upcoming events. LuxCal has support for colored event categories, recurring events, email notifications of event due dates, private events, access rights configurable for each user and for public access, CSV file import (for instance Outlook export), multi-language support and customizable user interface colors.

Monket Calendar

Monket Calendar is coded in HTML, CSS, Javascript, and PHP. It is based on the premise of providing an Apple iCal style interface that is available wherever you are. The interface has been designed to make it as easy as possible to add/change/remove events and thereby reduce the frustration of using the browser for entering and managing data. Monket Calendar is one of the few calendar scripts that can display multi-day events spanning accross the days on which they occur. This spanning of events makes it much easier to read the calendar at a glance.

PlansCalendar

PlansCalendar is a highly configurable, customizable and easy-to-install calendar script. It is written in Perl. Events can be stored in either flat files or SQL databases. It has support for multiple-calendars, each of which can be managed separately all the while sharing events between each other. PlansCalendar also comes with an add-ons system whereby you can write plugins that re-use ist framework.

There are of course several other calendar scripts that you can choose from. In this post, we have only highlighted calendar scripts with an interface close to Google Calendar. For more calendars including date pickers, event planners scripts, please visit our directory.

Post from: Hot Scripts Blog

7 AJAX & JavaScript Calendar Scripts

Related posts:

1. 8 Most Popular JavaScript Image Cropping Scripts
2. 6 Amazing JavaScript Image Zoom Scripts
3. OOP in JavaScript

An AntiPattern quite simply is what does not work. Let’s consider what this means on a couple of different levels, within the context of validating form data with Javascript.

First lets consider specific code that “does not work”. Recent books have gotten better at avoiding the following sort of thing, but it remains widespread to this day (to keep this example as brief as possible I’m not including any code that would provide feedback to the user, such as a Javascript alert).

If the user enters absolutely nothing into either fname or lname, the form’s onsubmit handler will return false and the form will not be submitted. The code successfully prevents submitting completely empty fields.

It does not however prevent the user from entering spaces into those fields. It is therefore not enough to test against the empty string “”.

The solution is to test against a “regular expression” object. For the uninitiated, “regex”’s, as they are also sometimes called, represent a pattern of characters. For the task at hand, we are going to use a very simple pattern: /\S/

The first thing to notice are the beginning and ending slashes. These simply signify that what’s between them is the expression, not unlike quotation marks signifying that they contain text.

Within the slashes, the pattern \S stands for any non-whitespace character. Regular expressions in Javascript have some useful built in methods, including test() , which returns true or false depending on whether a string passed as an argument matches the pattern.

So in the above example we can just switch the onsubmit event handler to the following, and it will not only reject completely empty fields, but also fields containing only whitespace, such as spaces:

Substituting the above, now both name fields must contain some non-whitespace characters in order for the form to get submitted. Following the colorful parlance for AntiPatterns, the erroneous example on page 1 might be called the “Out of Sight Out of Mind” AntiPattern. Except that AntiPatterns typically describe a problem that is more systemic, rather than one that can be so readily rectified by correcting one line of code. For instance, failure — or refusal — to use a language feature such as Regular Expressions.

Better yet exemplifying a bona fide AntiPattern in a Javascript form validation context is what I call the “All Web Development is New Development” fallacy. This antiPattern, like the code defect debunked in the first example, is commonplace both in books and in code libraries distributed all over the web.

“All Web Development is New Development” in the Javascript form validation context most often occurs through the suggestion that, to signify that form fields are required to be filled in, these required fields must be named in a certain manner. Users of such code are instructed to do such things as end the names of their form fields with “_req” .

So, in our first example, “fname” would become “fname_req” , and “lname” would become “lname_req” . To begin with, though, this violates one of Arthur J Riel’s Object-Oriented Design Heuristics, particularly 3.5, which states in part: “In applications which consist of an object-oriented model interacting with a user interface, the model should never be dependent on the interface.”

The HTML comprises the user interface. Now substitute “data” for “model” above. Data is required to specify one field as required, and another as not required. But by appending “_req” to the name of an HTML form element, the data becomes dependent on the interface.

Rules are made to be broken, but not in this instance. Because, although requiring that form field names have “_req” be appended to them might work in the case of a new web application, what about an existing web application? It almost certainly consists in part of server-side form processing code that relies on pre-determined form field names. Adding “_req” to those field names will almost certainly cause existing server-side code to malfunction.

Post from: Hot Scripts Blog

How Not to Script HTML Form Validation

Related posts:

1. Client-side text field validation with Javascript
2. Understanding Script Licenses

Calling the appropriate form

Javascript allows for a couple different calls to document forms, either by the name or by the position of the form within the document relative to other forms, beginning at 0. For example, if an HTML document contains 2 forms, the first form would be called as follows:

document.forms[0]

For those familiar with arrays, this will come fairly clearly to you. Javascript will build the number of forms into an array, called forms. Arrays always begin at 0, so to figure out the actual array value of the form, take the forms position on the page, relative to other forms, and subtract one. The 5th form, for example, would be called like this:

document.forms[4]

If you provide your HTML forms names, the name of the form can also be used and will be easier for many webmasters. Simply replace the position of forms[x] with the form name. For example, if a form’s name was ‘feedback’, calling that specific form within the document would be written like this:

document.feedback

Amazing Javascript error checking

Each form element belongs, or lives, within one single form, so when error checking multiple forms on one single page, no discrepancies will surface. When checking a particular form field, we call it by the name and check its value. So, let’s say we have the following form item in our first document form:

<input type=”text” Name=”FirstName”>

We don’t have to define a value within the HTML coding because we rely on your web site viewer to do that. To make sure that when the form is submitted, the form item is checked before processing, we’ll use javascript’s onSubmit function within the form tag, like so:

<form action=”test.php” method=”post” onSubmit=”return checkme()”>

All tags rest in the <head> and </head> portion of our HTML document. In addition, a Javascript function is used and named whatever you like, to error check the text box, which may be a new concept to many fairly light Javascript programmers. A function is simply a set, or chunk, of code used with or without variables to perform a particular function. Here’s what I’ve used to check the text box named FirstName. The elements in green signify Javascript comments and will not be displayed when the page is loaded.

Beyond the focus() function, we first use an if statement to check whether the input element FirstName is blank. If it is, an error will be displayed in the form of a popup window and the form will not be processed. You can simply copy and paste for any form element in your form, changing the field name, of course.

Putting it all together

Alright, I’ve broken the code down into sections, so let’s bring this code together into one HTML document. Here’s what a simple form would look like with three text boxes.

Enjoy.

Post from: Hot Scripts Blog

Client-side text field validation with Javascript

Related posts:

1. Cookies with JavaScript
2. Differences between Java and JavaScript
3. OOP in JavaScript