JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare your chart data in XML or JavaScript Array and your chart is ready!

JS Charts lets you create charts in different templates like bar charts, pie charts or simple line graphs.

Data visualization in HTML has long been tricky to achieve. Past solutions have involved non-standard plugins, proprietary behavior, and static images. But this has changed with the recent growth in support for the new HTML Canvas element, which provides a native drawing API that can be addressed with simple Javascript. This article is a proof of concept for visualizing HTML table data with the canvas element.

• Download
• You can download it here.

• What is it ?

Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect. Be sure to check out the demo, you definetely will like it.

1. Introduction

Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It's a good "space-saver" and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure for this tabbed interface.

This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.

1 Standard HTML tooltip

The “title” attribute of HTML's tags can be used to create simple tooltips. When the cursor stays over the tag for few seconds, the browser shows automatically the tooltip. But the tooltip's look and layout depend on the browser, and they are not configurable. If one just wants to split the tooltip's contents into two or more lines, there is not standard way to do this. For example:

Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase, or signing up for a website. They are the basic, and pretty much the only way of gathering information on the web.

You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature, and I tend to agree, but there comes a time when you just need to style web forms so that they look different. How do you do that? Niceforms comes to the rescue!

Update: Hoverbox code is free to use, so do with it whatever you want in your own projects. I just ask that you not redistribute the code via template sharing repositories, because I occasionally make updates to ensure multiple browser compatibility. If you do want to spread the word, simply link to this page so that people are always getting the most updated version.

Additionally, thanks to Craig Erskine this now works without the extraneous, meaningless span. Please read through the comments to see all the possible ways you can customize this code. Check out Craig’s example page – here.

A pop-up window that doesn't suck.

Introduction

GreyBox can be used to display websites, images and other content in a beautiful way.

Why use GreyBox:

Check out the front page

If you haven't been to the front page in some time, check it out. I've started blogging about some tips and tricks. Expect some full featured scripts some time soon.

What is it?

Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.