Ajax Updates

Posted by education training on Friday, November 6, 2009

Ajax Updates

A Javascript News TickerTape Component

Posted: 06 Nov 2009 11:16 AM PST

This component vertically scrolls a number of items within a container. Each page of items is pulled from a server which supplies JSON data. You can find a demo of the TickerTape in the download archive, and the download for the latest version here. There is a readme.txt in the download, or read on for an example usage.

  new TickerTape('tickertape.php', 'myTickerTape', 5000);

The parameters are: the data url, a css class for the container, and the time to pause between scrolling each item. Very simple! I had to do this for a project recently and couldn't find any useful "modern" implementations, so I rolled my own. The core js file is 8.5k without any compression at all, or dependencies.

If you have any recommendations or bugs, please just post them in the comments or email me.


Download: http://javascript-ticker-tape.googlecode.com/files/tickertape-1.0.zip
Source: http://colinramsay.co.uk/diary/2007/04/20/a-javascript-tickertape-component/

Related Listings:

  1. DHTMLX JavaScript Tree Component dhtmlxTree (DHTML extensions Tree) is a feature rich JavaScript...
  2. Carousel Component Script The intent of my carousel component was to fill in...
  3. Ext Core – Cross-Browser Javascript Library Ext Core is a lightweight and feature rich core JavaScript...

jQuery Date Picker Script

Posted: 06 Nov 2009 10:34 AM PST

This is an clean, unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages. Designed from the ground up to be flexible and extensible, the date picker can be used in unlimited ways to allow you to add calendar widgets to your pages.

Requirements

* jQuery.
* The date methods.
* Optionally the bgiframe plugin (if you have SELECT elements on your page and don’t want them to shine through the date pickers for users of IE).
* Optionally some localised date methods (if you want to display the date picker in a different language/ locale).

Note about using with older versions of jQuery
The datePicker is compatible with jQuery 1.1+. However, to use it with versions lower than 1.2.1 introduces a dependancy on the dimensions plugin. You will need to use a version of the dimensions plugin pre- 1.2 as in version 1.2 the offset method that we rely on was removed from the plugin (as it now exists in the core). You are always recommended to use the latest version of jQuery anyway.
Usage

Simply reference the relevant files at the head of your page like so:

  <!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <!-- required plugins --> <script src="scripts/date.js" type="text/javascript"></script> <!--[if IE]><mce :script type="text/javascript" mce_src="scripts/jquery.bgiframe.js"></mce>< ![endif]--> <!-- jquery.datePicker.js --> <script src="scripts/jquery.datePicker.js" type="text/javascript"></script>

(Note that I am using IE’s conditional compilation to include the bgiframe plugin as it isn’t necessary for other browsers so it seems pointless for them to download it)

Then simply instantiate the date picker as you like – see the demos below for inspiration.
Documentation

The inline documentation is available as a nicely formated html documentation file thanks to Jörn Zaefferer’s jQuery HTML Documentation Generator

Simple Date Picker Example:
The example displays simple use of the datePicker component to select a date for input fields.
Page sourcecode

 $(function() { 	$('.date-pick').datePicker(); });

CSS:

 /* located in demo.css and creates a little calendar icon  * instead of a text link for "Choose date"  */ a.dp-choose-date { 	float: left; 	width: 16px; 	height: 16px; 	padding: 0; 	margin: 5px 3px 0; 	display: block; 	text-indent: -2000px; 	overflow: hidden; 	background: url(calendar.png) no-repeat; } a.dp-choose-date.dp-disabled { 	background-position: 0 -20px; 	cursor: default; } /* makes the input field shorter once the date picker code  * has run (to allow space for the calendar icon  */ input.dp-applied { 	width: 140px; 	float: left; }

Demos

A picture is worth a thousand words and so is a demo! So here are a bunch of demos showing some of the many ways that you can use the datePicker plugin. Some of the demos are very simple and just illustrate one optional parameter while some are more complicated and illustrate completely different ways of using the plugin.

simple datePicker
A simple example showing the basic use of a date picker tied to an input field.
simple datePicker with today selected
A simple example showing the basic use of a date picker tied to an input field with todays date selected by default.
simple datePicker with dates in the past selectable
A simple example showing the basic use of a date picker tied to an input field with dates in the past selectable.
simple datePicker with ONLY dates in the past selectable
A simple example showing the basic use of a date picker tied to an input field with only dates in the past selectable (e.g. for entering birthdate).
simple inline datePicker
An example showing an inline date picker (which is always on the page and doesn’t disappear).
datePicker showing selectWeek functionality
An example of the selectWeek functionality which is available on the date picker.
datePicker with position
This example shows how you can control where (relative to the associated element) the date picker appears.
datePicker with a clickable input field
An very simple example showing how you can make the date picker pop up when you click on the input field (rather than the associated button).
datePicker with a different dateFormat
A very simple example showing how you can change the date format and first day of the week displayed for the date picker.
Localised datePicker
A very simple example showing how you can localise the date picker.
disabling the datePicker
A simple example showing how you can disable a date picker.
datePicker with custom listener
This example shows how you can bind a date picker to any element and register a event listener which is informed whenever a date is selected.
datePicker with a custom cell renderer
This demo shows how you can have a date picker with a custom cell renderer to change the appearance and behaviour (in this case I make the weekends look different and be unselectable).
datePicker with multiple months visible at once
This shows how you can use the datePickerMultiMonth plugin to extend datePicker to show mulitple months at once.
datePicker with multiple months visible at once (popup edition)
This shows how you can use the datePickerMultiMonth plugin to create popup date pickers which show mulitple months at once.
datePicker with multiple select
This shows the simple script necessary to use the date picker to be able to select multiple dates.
datePicker with multiple select and a limit on the number of selectable dates
Extends the previous example and shows how you can limit the amount of dates that can be selected when selectMultiple is true.
Start and end date pickers
This example shows how you can tie two date pickers together so that the date selected in one influences the dates that can be selected in the other.
datePicker linked to select elements
An example showing how you can bind a date picker to three select elements rather than to an input.
datePicker which disappears on mouse out
An example showing how you can make the date picker automatically close when the user moves their mouse out of it.
Date picker that appears/ disappears on focus/ blur
This example shows how you can make a date picker appear when it’s related element is focused and then disappear when the relevant element is blurred.
complex inline datePicker
An example showing more advanced use of an inline date picker (with multiple instances on the same page with different settings).
more complex inline datePicker
An example showing inline date pickers which are linked together and trigger behaviour in each other…
datePicker Karmas Agent example
An example as a result of a support request from “Karmas Agent” – demonstrates custom listeners, custom date ranges and hiding dates which aren’t part of the current month.
renderCalendar
The date picker also exposes a method for rendering a month view calendar into any element.
renderCalendar with callbacks
You can optionally use callbacks when rendering a calendar to control the look and behaviour of the rendered calendar.
renderCalendar displaying bank holidays
This example shows how you can use the renderCalendar callbacks to add extra data to the rendered calendar (in this case bank holidays are marked)
datePicker multi-month
[Deprecated] This shows how you can create your own datepicker which shows two consecutive months by building on top of the datePicker plugin.

Download: http://jquery-datepicker.googlecode.com/files/jquery.datePicker-2.1.2.js
Source:http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

Related Listings:

  1. Sliding Date-Picker – AJAX Script Sliding Date-Picker enables you to pick dates with a simple...
  2. TimePicker Script with jQuery Plugin A time picker for jQuery. list version | table version....
  3. Sliding Date Picker Due to the development of Qash.nl, a Dutch personal finance...

Unobtrusive Table Sort Script Updated

Posted: 06 Nov 2009 10:16 AM PST

The "Unobtrusive Table Sort Script", that addresses speed issues present within version #1.
Features…

* Plays nicely with the JavaScript global namespace (the script creates and reuses only one JavaScript object)
* Multiple columns can be sorted at once by pressing Shift while selecting the columns using either the keyboard or mouse
* The new script sorts (on average – based on my very non-scientific calculations), 5 times faster than its predecessor
* The plug-in architecture makes writing custom sort functions a breeze
* The script can highlight both alternate rows and full columns on a table by table basis.
* Like its predecessor, the script is fully keyboard accessible
* The script can correctly determine a columns datatype should a datatype not be explicitly defined (datatypes determined are limited to numbers, text, currency values and dates)
* The script is smart enough not to sort columns containing identical data
* Sort routines can be initiated using JavaScript
* Tables can be automatically sorted on a column (or columns) of your choice, even in reverse order
* Before-sort and after-sort callback functions (or Object.methods) can be defined for individual tables

The Slowdown

The original script attempted to grab the inner text of every TD node within the column to be sorted, each and every time the sort routine was activated. This was an extremely processor intensive action and the main cause of slowdown during the sort of large tables. While a limited "cache" system was offered, it relied heavily on use of the JavaScript "in" operator, which is itself notoriously slow to process.
Speeding things up

The new script addresses these issues by creating and storing an internal representation of the parsed table data the very first time that one of the table's sortable TH nodes is activated (i.e. a 2D matrix of the parsed table data).

The data stored within this internal object is then reused during each subsequent sort action. This means that there is a slight processing overhead the first time the sort is activated (as an internal representation of the table's data has to be created) but subsequent sorts, on any of the table's columns, are much faster than in the previous incarnation of the script.

A listing of sample sort times for a 100 row table can be located within the dynamic table creation demo.
Sortable datatypes

The script can currently sort dates (dd-mm-yyyy, mm-dd-yyyy or yyyy-mm-dd formats accepted), currency values (£, $, €, ¥ and ¤), numbers/floats and finally, plain-text (sorted in a case-insensitive manner). Additionally, the character used as the date divider (i.e. the character that separates the date parts) can be "/", "-", "." or " " (space).

Should you need to sort a bespoke datatype, the script can easily be extended by providing a custom sort function.
Making any column sortable

To make any table column sortable, just give the associated table header (TH) tag the class sortable, the script will automatically determine the column datatype, make the entire table header clickable (and not just the text contained within) and create the appropriate up/down arrow within the header when clicked (using the ↑ & ↓ characters).

An example showing the most basic classes required by the script is shown below:

<table id="test1">   <thead>     <tr>       <th class="sortable-numeric">Rank</th>       <th class="sortable-text">Movie</th>       <th class="sortable-date-dmy">Release Date</th>       <th class="sortable-currency">Weekly Gross</th>       <th class="sortable-numeric">Change</th>     </tr>   </thead>   ... snip ... </table>

It is recommended that you always try to stipulate the column datatype as shown in the above example as this speeds up the initialisation process (as the script no longer has to parse the column data in order to determine the column datatype therefore saving precious clock cycles).
A note on the date format

The script currently favours the American date format of "mm-dd-yyyy". This is the first format that all dates are tested against during the data preparation phase, which means that European dates such as 10-08-2006 (i.e. the 10th August 2006) will be parsed as the 8th October 2006.

Should your dates be of the European format "dd-mm-yyyy", add the class sortable-date-dmy to the TH node instead of the class sortable-date, this will tell the script to attempt to parse a DMY format date before attempting to parse a MDY format date.
A note on sorting numeric data

The sortNumeric method bundled with the source code is quite ruthless with the data passed to it. It will replace any character not valid for use within a floating point number and then attempt to parse a float from the result.

This means that the sortNumeric method can be used to sort all manner of numeric column data, for example; columns containing percentages e.g. -22%, 34.6% etc do not require a bespoke sort function in order to be sorted – giving the column the className sort-numeric will suffice.

Forcing a column to "reverse sort" by default

Should you wish to sort a column in reverse order by default, just give the associated TH node the className favour-reverse (Note the English spelling of favour). The default reverse sort is only taken into consideration when sorting on a single column.
Sorting the table automatically

The script will automatically sort any table that has been given the class sortable-onload-N immediately after the window.onload event fires – where N specifies a className of the form "-colNumber[ r ]" – with "colNumber" being replaced by the integer value of the column to sort and the optional "r" (remove the square brackets and spaces!) stipulating that the
column is to be sorted in reverse.

Multiple columns can be stipulated at once, for example, the classname sortable-onload-3r-4r-5 will automatically sort the table on column 4 (reverse sort), then column 5 (again, using a reverse sort) and finally, column 6.

Please note: the column index starts at 0 and not 1.
Preparing an already sorted column

If you have already sorted the table on a specific column or set of columns when the page is generated, it is necessary to indicate this to the script.

This can be done by adding the following className to the table sortable-onload-show-N, where N specifies a className of the form "-colNumber[ r ]" i.e. an identical className to the form discussed above.

This enables the script to create the appropriate up/down arrows within and set the appropriate className on the table headers without it having to actually sort the table data.


Demo: http://dhtmlsite.com/?start_from=30&ucat=&archive=&subaction=&id=&
Download: http://www.frequency-decoder.com/demo/table-sort-revisited/js/tablesort.js
Source: http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited/

Related Listings:

  1. New Sort Table Rows with Ajax Simple sort script using Stuart Langridge’s sortabe.js Some days ago...
  2. Table Sorter 2.0 tablesorter is a jQuery plugin for turning a standard...
  3. SortableTables CMF Script A while back I created a sortable tables custom tag...

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.