Javascript graphs

Sometimes we need to present our sets of data in a webpage in a manner more friendly for the user. Graphs are suited for this. We can do this serverside, generating an image and send to browser, or make use of different scripts to draw the data straight in the browser. This is a very easy way for very dynamic data, we being able to use some ajax functions to fetch dat from server and draw the graph in real time.

Below we’ll try to give some example of such scripts.

CanvasGraph.js

This script requires Mochikit 1.0+ and sadly, is not working on IE.

Yahoo! UI Library: Charts

As the name sais, requires YUI, and flash plugin.

flot - Attractive Javascript plotting for jQuery

Requires jQuery. Also has some interactivity functions ( zoom to a range, hide/show dataset, return coordinates of point clicked, etc)

Timeplot

” Timeplot is a DHTML-based AJAXy widget for plotting time series and overlay time-based events over them.”

Plotkit

Plotkit needs MochiKit 1.3 or higher and works in all major browsers, switching to svg/canvas/ vml based on browser’s capabilities.

Chronoscope

“Chronoscope supports interactive framerates on datasets with tens of thousands of points by using multiresolution representation and incremental streaming.” It accept mouse and keyboard commands, like zoom, pan, drag-drop, contextual menu, etc..

plOOtr

plootr works with mootools v1.11.

Ajax MGraph

This script is based on Prototype.js. It seems to have some limitations, like only positive numbers, or only integer, and is intended to dispaly monthly based data.Last version allows to create multiple graphs in page.

Javascript Compressor

Javascript compressors, or packers, are tools that compress the javascript file, saving bandwidth. There are several tools that can do this.We will try to show some of them.

For tests i used mootools v1.11 downloaded full, with no compression.

Javascript Compressor

Highest compression level is with “high ascii” setting, “fast decode” unchecked and obtained a 0.224 compression. It uses Dean Edwards algorithm.

Creativyst® CSS & JavaScript Compressor (v2.2c)

This script runs in your browser. Obtained a 51.1% level of compression.

ShrinkSafe

This will ask you to upload the js script and will return a compressed version.

0.39 level.

JS Minifier

Set on agressive mode, will compress the test file to 40.4%.

jscrush - Online JavaScript compressor

jscrush make use of Andrea Giammarchi’s JavaScript Compressor class and Er. Rochak Chauhan’s Create ZIP File class.

We had a 41.9 level of compression.

This script is able to pack pack and combine more scripts in one file, so it saves the number of connections between browser and server.

Bananascript.com

This seems to be the winner.

It compress the file  with 83.3%.

You  have to set the charset to “ISO-8859-1″ or yous script will not work.

Let us know if we missed tools.

Javascript lightboxes

Lightboxes are a nice unobtrusive way to display content in your page,without forcing the user to navigate through your site, and leave current page.You can use it for interaction with user( a login box for example) , videos or even other html content.

We’ll try to make a list with some lightboxes, with some properties.

Suckerfish HoverLightbox Redux

Suckerfish hoverlight redux make use of prototype/scriptaculous and is an improvement of Suckerfish HoverLightbox which is able to make the initial display in horizontal or vertical mode. The script seems to be unobtrusive, and to work on major browsers.

Slimbox, the ultimate lightweight Lightbox clone

From the slimbox page: “Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2. “. So as said, to use that you will need the mootools libraies.

This is more like a tutorial and shows you how to create a lightbox using YUI. Their demo shows you images, videos, and external pages loaded into lightbox.

Lightbox JS v2.0

” 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.” This is an improvement of first version of script founded here: Lightbox JS by Lokesh Dhakar.

Multibox

Multibox is a lightbox that supports images, flash, video, mp3s, html. It depends on mootools v.1.11. It is able to display images, text, flv, mov, real, mp3, wmv and html - external page, ajax, or content from same page.

Greybox Redux

It uses jQuery. It is very small - 1.2 kb, and you don’t to embed Javascript into your site.

ThickBox 3.1

As above exmaple, thikbox uses jQuery too. It’s able “… to show a single image, multiple images, inline content, iframed content, or content served through AJAX “.

Lightwindow

This seems to be the most rich lightbox. It is able to display several formats of information - mov,swf,pdf,images, external pages,inline content, forms. It uses prototype/scriptaculous, and works with all major browsers.

I am sure i did not covered all scripts so please suggest others.

There is a new lightbox.

 Shadowbox.js by Michael J. I. Jackson

This script is able to display many formats but it’s main feature is that is able to use one of common framworks, choosed by coder, depending on his needs.

“Shadowbox comes bundled with adapters for the following JavaScript frameworks:

• Yahoo! User Interface Library
• Ext (standalone)
• Prototype + Scriptaculous
• jQuery“

Javascript form validators

When we use forms, we need somehow to validate the data user input. We can do this both server side  and client side. Client side part helps in user experience, and reduce bandwidth usage. Anyway, is not offering a good security so you ALWAYS should validate your input server side too.

Below we’ll put some resources for scripts that help in validating our forms.

validator.js - Client-side form validating

Form Validator R2.0

JSValidate

Validate.js - webcoder.info

iWeb Toolkit:Javascript Form Validators

JavaScript Form Validations Made Easy!

Really easy field validation

Form Validator

A Guide to Unobtrusive Javascript Validation

jQuery plugin: Validation

LiveValidation

fValidator

Javascript rounded corners

Javascript resources for rounded corners

Corner.js

ShadedBorder - JavaScript Round Corners with Drop Shadow

Anti-aliased Rounded corners with JQuery

 jQuery Corner Demo - more effects, not only rounded

CurvyCorners

Building Rounded Corners With CSS and JavaScript  - more like a tutorial

Rounded corners MochiKit

Rounded corners -  editsite.net

Let us know if you know other resources.

php “included” menu styling

Some times , when we have a pretty big amount of pages on a site, but don’t need or want to use a CMS, we take advantage of PHP and split the page layout in more includes like:header.phpcontent.phpfooter.phpso we do not need to write the same content ( or copy paste ) in every page.If our design is oriented to user( i mean it try to have some usability ) we’ll need to find a way to make the menu clear - pages that are active needs to be “highlighted” somehow.a good example is in wordpress :“Posts” page is current page.We can do this the hard way - copy menu content in every page, and change the styling for current link,or use some php code that do this for us, and move the menu in “header.php” include file.This is a small code we can use for our needs:

">Home

">Product

">Directory

The above code will work for relative links, for absolute links you will have to detect the full url of current page:

<?php $domain = $_SERVER['HTTP_HOST']; $url = "http://" . $domain . $_SERVER['REQUEST_URI'];?>

<div class="actual_menu">    <a href="http://www.cssgallery.info/index.php"

	class="<?php echo (( $url=="http://www.cssgallery.info/index.php") ? "menu_on" : "menu")  ?>">Home</a>

</div>

Rounded corners generators

If you don’t have the time, tools, knowledge or simply not in the mood to code, there are some tools that can help you make your rounded corners:

RoundedCornr

CSS Rounded Box Generator (Beta)

Spiffy Corners

Spanky Corners

Cornershop

Rounded Corners Generator

Rounded Corner Generator - css portal -

Rounded cornes - CSS

Rounded corners are a challenge for every coder that want to make a modern design. If the layout of the page is liquid, a simple image is not enough anymore. in this part we’ll present some css resources for rounded corners.

Nifty Corners: rounded corners without images

CSS and Round Corners: Build Boxes with Curves

Rounded corners in CSS

“Bullet-Proof” Rounded Corners

More Rounded Corners with CSS

CSS Mojo: Adding Visual Polish To Your Pages

CSS Round Corners

CSS - Single Image Fluid/Fixed Rounded Bordered Corners walkthrough

Rounded Corners for Fixed width (css only)

Curved boxes in CSS

Lean and Clean CSS boxes

Mountaintop Corners

CSS Liquid Round Corners

CSS Design: Creating Custom Corners & Borders

Simple Rounded Corner CSS Boxes

Round Corners

CSS teaser box revisited

CSS forms formating

Forms are the base of interactivity in webpages. Formating forms can bring a good usability to a page, easing the user’s experience.

Styling forms in CSS

Tableless forms

Designing a form using CSS layouts

Creating Funky Forms with CSS

Fun with forms customized input elements

Style Web Forms Using CSS

Accessible, stylish form layout

FORM(s) and Function

Tableless forms using CSS

Javascript time pickers

In completion to date pickers, we’ll present here some time pickers

Fancy Time Picker

NoGray Time Picker

 A jquery plugin

jQuery - time picker (list version)

jQuery.ptTimeSelect

ClockPick

Time picker