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

Many other high-level languages support these features as well.  No matter.  We’ll examine a nice little workaround approach and implement it.  Let’s first peruse an example of a hypothetical function that may benefit from these features:

function getUsers($id=null, $group_id=1, $username = ”, $order=’order_fld’, $order_asc=1) {
return $users_matching_all_criteria;
}

As to whether 1 public function/method with so many parameters is good practice is beyond the scope of this article – it’s just a (somewhat contrived) example!  However, one may take the approach of lightly wrapping such a function with special dedicated getters, i.e.:

function getUserByUsername($username) {
return getUsers(null, 1, $username);
}

This is a valid approach.  However, it represents a bunch of meaningless mechanical coding work.  We must have something more productive to do.  Calling the function directly is, of course, even less desirable:

getUsers(null, 1, ‘bob’);

And this will inevitably result in many “off-by-1” errors in parameter passing, as well as hard-coding defaults.

So wouldn’t it be nice if there were a better way — an easy way to specify the setting via a named list or skip over parameters with ease?

Unfortunately, there is no totally native way to do this.  Both of the below code snippets or similar might work in another language, but – alas – not PHP:

getUsers(, , $username); // Hypothetical; this does not work!

or –

getUsers(‘username’ => $username); // Hypothetical; this does not work!

Such a syntax would preserve the defaults implicitly, while allowing the programmer to modify those parameters that matter to the task at hand.  PHP IDEs that implement implicit code completion could still indicate the defaults based on the function prototype.  As another perk, it permits the programmer to retroactively change a default without locating all references to that function.  If this is not desired, simply do as one must in PHP currently anyway – hard-code the default value in a particular function call.

Many have proposed solutions that involve the use of hashed arrays as 1 argument, but this involves a lot of repetitive work, and the function no longer works via a list-based syntax unless a lot of code for both types of parameter syntaxes is written.  This will also disable the implicit code completion support of various PHP IDEs.  We happen to use Zend Studio for development, and we find that particular feature enhances our productivity.

We will present an implementation of the above features with a 1 line snippet (an include() file) as the first line of every applicable function like so:

(Note: No changes are made to the prototype, and implicit code completion with the various PHP IDEs will even document the function calls!)

function getUsers($id=null, $group_id=1, $username = ”, $order=’order_fld’, $order_asc=1) {

include(par.php); // hook in the Par code

… code …

}

One may then call the function like so:

getUsers(_, _, $username); // Note the underscores.

or –

getUsers(PAR( array(‘username’ => $username) ));

or even mix named and skipped parameters –

getUsers(_. PAR( array(‘username’ => $username) ) );

or even –

getUsers(_. PAR(‘username’, $username));

(Note: If “_” presents a problem, another safer constant may be chosen.  PHP itself allows extended characters 128..255 to be used in the constant and variable grammars.  We briefly examined using “¬¨ (not symbol),” but this is very difficult to key on Windows machines; and just plain annoying on Macs.)

As for native support in PHP 6, don’t count on it:

A PHP “Developer Minutes” says there is no “… real need for named parameters.” And it states further that that they “… do not want to add it” (http://www.php.net/~derick/meeting-notes.html#named-parameters).  The “PHP Todo Backlog” (http://wiki.php.net/todo/backlog#dropped_items) lists named parameters under “Dropped Items.”  Skipped parameters are not mentioned at all in either, but as aforementioned, Stanislav has mentioned he’d like to see them.

Our non-native syntax is not even terribly unwieldy, and it’s unlikely to break much, as it’s on a per-function basis.  If the PHP team decides to introduce the features natively, it will not conflict for a few reasons.  A constant is used instead of an empty parameter – the most likely native syntax for an implementation of parameter skipping.  The PAR object is even less of a problem and wraps all named parameters.  “par.php” handles and abstracts it all, and is itself a combination of reflection and elegant hackery.  It is all blissfully encapsulated inside one simple include call.  So what gives – why an include?

Well, include is a pseudo-closure of sorts.  Anything within the include retains the scope of the parent without specifying the particular variables as with PHP’s closure support. It is of this form:

$returnval = include(‘FILE_FUNC_NAME’);

All parameters in the current scope are “passed” by reference to the “function” within FILE_FUNC_NAME.  The speed-penalty is on the order of half a millisecond per call – half of which seems to be from the include, and the other from the reflection API.  Then penalty, of course, is only present for those functions where it is implemented.  APC seems to speed it up as well, though we didn’t benchmark as much this way.

It’s simple on the outside, and trivial to implement on a per-function basis.  As far as we can tell, PHP 5.3′s closures cannot easily accomplish the same due to their requirement of explicitly stating relevant variables in “use.” This implementation does not require PHP 5.3, and works with any version of PHP with support for reflection.  You may download the applicable code and see more examples of implementation at the below URL:
http://seoegghead.com/software/PHP-parameter-skipping-and-named-parameters.seo
Limitations:
So far reference parameters are not implemented for PAR(), and there may be limitations with objects or it may create a copy where you might not expect.  we just rarely use reference parameter passing in our design patterns.  In PHP, references are a tool of convenience, not performance.  Feel free to fix or contribute, and we’ll credit your contribution.  Enjoy!

Post from: Hot Scripts Blog

PHP Parameter Skipping and Named Parameters – Finally?

Related posts:

1. MySQL Database Handling in PHP
2. Basics of Setting Cookies with PHP
3. Track Your Visitors, Using PHP