Webmasters Gallery

Scott Jehl has released jQuery Visualize, the plugin that groks HTML tables and generates lovely charts from it, all from a simple $('table').visualize(); (lot’s of options for you to twiddle too if you want).

First, you create a bog standard table like:

Then you visualize it. You end up with pretty graphs like these:

jQuery Tools is a collection of the most important user-interface components for today’s websites. This single JavaScript file weighs only 5.8 Kb. This library contains some useful JavaScript tools like tabs, tooltips, accordions, overlays, smooth navigation, great visual effects and all those “web 2.0? goodies that you have seen on your favourite websites.

You don’t need to be a programmer to use these tools. They have lots of Demos you can explore and you can copy their source code to your site and things will work. Each tool is used in a similar manner and by learning one tool you can easily learn the other tools.

And above all, the library is constantly maintained and updated. Expect to see new releases coming out on a regular basis. This library is dual licensed under MIT and GPL 2+ licenses.

The Dock is a set of iconic images that expand when rolled over with the cursor, and usually perform some action when clicked. jqDock is a jQuery plugin that mimics that behaviour by transforming a contiguous set of HTML images into an expanding Dock, vertical or horizontal, with or without labels.

Basically, jqDock expands a reduced size image towards its full size when the cursor is on or near it. You can specify a vertical or horizontal orientation for the Dock, and select the direction in which the image should expand and whether to show labels or not. The styling and positioning of the Dock is (almost) entirely down to you.

You should also check out other Fish Eye Menus we mentioned earlier.

Everyone loves the Gmail and Facebook inline chat modules. This Gmail/Facebook Style jQuery Chat Module enables you to seamlessly integrate Gmail/Facebook style chat into your existing website.

You can see the chat box displays at the bottom right hand corner of the screen. You can keep the chat boxes open and stores state (data) even when pages are browsed/refreshed. It will display “Sent at…” after 3 minutes of inactivity. You can also minimize and close chat boxes easily.

This chat script can be used for free under LGPL-style license for non-commercial purposes. However, you need to purchase a license for commercial purposes.

jPolite (jQuery POrtal Lite) is an Open Source jQuery & Ajax Based Portal Framework. This is a lightweight front-end web portal framework based on jQuery.

The focus is easy content integration at the front-end, through an intuitive naming system and conventions plus simple and easy configuration.

jQuery Portal Framework Features

• Flexible layout configurations
• Drag & Drop functionality
• Beautiful UI controls like Tabs, accordion, etc…
• RSS Reader

Raymond Selda has published a tutorial about how to Create a Tabbed Content Rotator using jQuery and the interface library called jQuery UI. This effect can be used effectively on your homepage to present customers with your products and services.

After you’re finished, you can experiment and try placing the tabs above or lining them up vertically. Try looking up some websites that use this kind of interface for inspiration. Simple variations to the interface can be a great way to learn more about CSS.

Introduction

Javascript frameworks aren’t just a path to AJAX without understanding XMLHttpRequest – mature libraries like jQuery are being across the board to improve usability, enhance accessibility and open doors to features you never thought were possible. With its inclusion in the ASP.NET platform, jQuery is now an accepted standard in all web development. In this tutorial, I’ll show you five quick tips for spicing up your site, often without a single change to your existing code.

To follow this tutorial, you’ll need some basic experience with jQuery. I suggest you read through my previous tutorial, Getting Started with AJAX in jQuery. An understanding of the DOM wouldn’t hurt, either. Otherwise, this tutorial requires little else than an existing web page or two using jQuery (download it and include it in your <head>), that could use some web development steroids.

Tutorial Pages:
» Introduction
» Tip 1: Image-less Rounded Corners in jQuery
» Tip 2: Striping Existing Tables
» Tip 3: Building a simple collapsing menu
» Tip 4: Classy full-size views for thumbnails with lightboxes
» Tip 5: CrossSlide – pan and cross-fade animations

My Tiny TodoList is a totally free, simple open source todolist written in PHP and jQuery released from Max Pozdeev and based on my original MyToDoList application.

Using MyTiny TodoList you can add, modify or delete tasks, mark a task as completed and set task priority. Max improved a lot the interface with some nice jQuery effects and other general improvements. The result is very interesting and I suggest you to take it a look.

Max Pozdeev MyTinyTodoList Website
MyTinyTodoList Demo

Some screenshots:

Install My Tiny TodoList
1. Download, unpack and upload to your site.
2. If you want to use Mysql database instead of Sqlite – uncomment the line begining with $config[‘mysql’] in file ‘init.php’ and specify your settings as described in file.
Otherwise sqlite database file ‘todolist.db’ will be created in directory ‘db’. If no – create it manually and make it writeble for webserver/php.
3. Open in your browser file ‘dba.php’ from your site and create tables in databse.
4. Open ‘index.php’ in your browser to run the application.

In the past months I received a lot of request to write a tutorial for beginners in order to explain how to implement a Post-to-Wall Facebook-like. So, I prepared this very simple example which helps everyone understand how to implement this feature in a website using just some lines of PHP and JavaScript code.

Take a mind, every post in the Facebook Wall contains a lot of information (user, sender, message content, date, number of comments, …):

But how I said, this tutorial is for Ajax/jQuery/PHP beginners. So I decided to simplify the original Wall using just a single information: the message content.

In this tutorial we have these files:

– confing.php (database connection parameters)
– index.php
– insert.php
– jquery.js

How the Wall works?

index.php contains a form with id "submit_form" with an input text with id "message_wall". When an user submits a new message. Then the new message is appends to top of the ul list with id "wall" with a nice fade-in effect (with jQuery). Ok, now take a look at the code.
1. index.php
index.php is very simple and contains just simple HTML code:

<form id="submit_wall"&gt;
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<button type="submit">Post to wall</button>
</form>
<ul id="wall">
</ul>

The <ul> list with id "wall" is the "container" of messages which are posted into the wall.

2. JavaScript Code
Open index.php and include jQuery in the <head> tag of the page:

<script type="text/javascript" src="jquery/jquery.js"> </script>

…then add this simple function to enable Ajax functionalities to insert the message posted from the user into a database table without reload the page:

<script type="text/javascript">
$(document).ready(function(){

$("form#submit_wall").submit(function() {
var message_wall = $(‘#message_wall’).attr(‘value’);
$.ajax({
type: "POST",
url: "insert.php",
data:"message_wall="+ message_wall,
success: function(){
$("ul#wall").prepend("<li style="display: none;">"+message_wall+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});

</script>

.prepend(…) is a jQuery function to insert elements inside, at the beginning, of a specific element (in this case UL list with id wall –>$("ul#wall")). When the new message is added into the list is hidden (display:none). Then it appears with a fade-in effect:

$("ul#wall li:first").fadeIn();

ul#wall:first: gets the first li element (the last added) into the ul list with id "#wall".

3. insert.php
insert.php contains some lines of PHP code to insert the new message into a database table. In this example I created a table WALL with just one attribute "message". PHP code is very simple:

<?php
if(isset($_POST[‘message_wall’])){
/* Connection to Database */
include(‘config.php’);
/* Remove HTML tag to prevent query injection */
$message = strip_tags($_POST[‘message_wall’]);
$sql = ‘INSERT INTO WALL (message) VALUES( "’.$message.’")’;
mysql_query($sql);
echo $message;
} else { echo ‘0’; }
?>

Brad Neuberg pointed me to a Blackberry Storm site that uses Raphael, jQuery, and SoundManager to offer an SVG / VML (for IE) experience.