css3-xhtml tutorial

Monday, 16 January 2012

best jquery Lightbox

Light box is nice tool to displays images using modal box. jQuery is very popular for modal dialogs because of its very easy implementation and it make website more friendly and interactive.
In this article I collected the best and EfficientLightbox based on the jQuery Javascript library.

jQuery lightbox

A jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup.

fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

lightbox2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

PrettyPhoto

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

best jquery chart libraries

In this article we listed best chart libraries that you can use in your projects. Most of them are free for personal and commercial use.

Jquery GraphUp Plugin

“GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.” and only 4kB.
Demo.

jQuery Highcharts

Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.
Demo

jqPlot

jqPlot is a plotting and charting plugin for the jQuery. jqPlot produces beautiful line, bar and pie charts with many features you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.
Demo

Flot

Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.
Demo

jQuery Google Charting

The current version is 1.4.1 and is available under the GPL or MIT licenses. Whilst the API itself is pretty simple to use (the format to generate graphs is to form a complex url with multiple query string parameters), the plugin goes one step further and actually forms that complex url for you, by allowing you to set the parameters you want with simple jQuery calls:

Thursday, 29 December 2011

HTML5 Input Type - search

The search type is used for search fields, like a site search, or Google search.
The search field behaves like a regular text field.

Input Type - color

The color type is used for input fields that should contain a color.
The Opera browser will allow you to select a color from a color picker, Google's Chrome will only allow hexadecimal color values to be submitted:

Syntax:

Color: <input type="color" name="user_color" />

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Color: <input type="color" name="user_color" />
<input type="submit" />
</form>

</body>
</html>

HTML5 Input Type - Date Pickers

For selecting date and time, HTML5 has several new input types:

date - Selects date, month and year
month - Selects month and year
week - Selects week and year
time - Selects time (hour and minute)
datetime - Selects time, date, month and year (UTC time)
date time-local- Selects time, date, month and year (local time)

select a date from a calendar:

Syntax:

Date: <input type="date" name="user_date" />

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Date: <input type="date" name="user_date" />
<input type="submit" />
</form>

</body>
</html>

select the below input type from a calendar

Input type "month":
Input type "week"
Input type "time":
Input type "datetime"
Input type "datetime-local"

HTML5 Input Type - range

The range that should contain a value from a range of numbers for input fields. This input type is displayed as a slider bar.
You can set number which are accepted:

Syntax:

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10" />
<input type="submit" />
</form>

</body>
</html>

The following attributes specify the range type:

Attribute	Value	Description
max	number	Specifies the maximum value allowed
min	number	Specifies the minimum value allowed
step	number	Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
value	number	Specifies the default value

HTML5 Input Type - Number

The input element number that should contain a numeric value for input fields .

Syntax:

Points: <input type="number" name="points" min="1" max="15" />

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Points: <input type="number" name="points" min="1" max="15" />
<input type="submit" />
</form>

</body>
</html>

The following attributes specify for the number type:

Attribute	Value	Description
max	number	Specifies the maximum value allowed
min	number	Specifies the minimum value allowed
step	number	Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
value	number	Specifies the default value

HTML5 Input Type - url

The URL should contain a URL address for input fields .
When the form is submitted, the value of the url field is automatically validated .

Syntax:

URL_Homepage: <input type="url" name="user_url" />

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Homepage: <input type="url" name="user_url" /><br />
<input type="submit" />
</form>

</body>
</html>