Java Script Examples & Tutorials

Java Script Examples & Tutorials

What is JS Charts?

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.

Creating a polaroid photo viewer with CSS3 and jQuery

Italy. A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid.

Creating accessible charts using canvas and jQuery

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.

PlotKit - Javascript Chart Plotting

Below is a demo of a simple HTML Canvas example which should work in Safari 2, Firefox 1.5, Internet Explorer 6 and Opera 9. And SVG Demo can also be found.

Form field hints with CSS and JavaScript

My co-workers pointed out a nice effect on the Vox registration form. As you tab through each input field, some helper text appears in box out to the right. Try it out. Update (4/20/2007): It has been pointed out that Vox has changed their form, and it no longer uses this effect.

Vox Registration Form

It's a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.

How to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.

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:

Niceforms

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!

Syndicate content