Now we need some CSS. In a new file in your text editor add the following selectors and rules: #outerContainer { width:800px; } .container { width:370px; float:left; padding:7px 0 0 0; background:url(../images/containerTop.gif) no-repeat 0 0; margin:0 10px 10px 0; } .container .contents { width:350px; background:url(../images/containerBody.gif) no-repeat 0 100%; padding:0 10px 10px; } .contai...

So far all of our examples have used simple text as the heading and content for the tooltips; in addition to this we can also supply other content such as images, using HTML instead of plain text within the tooltips. This gives us much more flexibility over the behavior and appearance of the tooltips, and allows us to add images, lists, and other elements. We’ll make a new page for this examp...

We’ll also need some PHP to finish off this example; in a new page in your text editor add the following code: <?php //connection information $host = “localhost”; $user = “root”; $password = “your_password_here“; $database = “prototip”; //make connection $server = mysql_connect($host, $user, $password); $connection = mysql_select_db($dat...

Author: Dan Wellman In the first part of this tutorial we looked at the ease with which a default implementation of Prototip tooltips could be put on the page, and how, with just a little configuration we could change the appearance and behavior of the tooltips. In this part of the tutorial we’re going to take a look at the built-in AJAX functionality boasted by the plugin, and see how we can...

The workplace environment is a effective, but often overlooked, element in managing staff member health. Here we will identify some of the best-practices in starting a Employee Wellness Program that supports your organizations employee health strategy and allows staff members to take charge of their own health. For example, a Employee Wellness Program that includes a tobacco-free workplace policy...

In many cases, the pages on a website consist of much content that is common between them. Using traditional methods, that content would have to be reloaded on every request. However, using Ajax, a web application can request only the content that needs to be updated, thus drastically reducing bandwidth usage and load time. The use of asynchronous requests allows the clients Web browser UI to be ...

This weblog shows how to create a short script that will track and log the user activity. In interactive application development we love our ability to track and analyze the behavior of our users. Through tools like Google analytics and Urchin, web sites can monitor and analyze where their users are going, and more importantly how those users are getting there. As our company delves deeper into c...

This weblog of mine presents the example code for using Django, newforms and MochiKit to do AJAX validation. Before we get going, some context: the Christian Camps in Wales web site has a forum system which allows people to create polls. I rewrote this recently to use newforms, mainly to keep up to date with Django, and also to try out some AJAX. I first had to write a Form subclass which encaps...

AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications. With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP requests) between the b...

Before sending data to the server, we have to explain three important properties of the XMLHttpRequest object. The onreadystatechange Property After a request to the server, we need a function that can receive the data that is returned by the server. The onreadystatechange property stores your function that will process the response from a server. This is not a method, the function is stored in t...

To send off a request to the server, we use the open() method and the send() method. The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off t...