PTQJSClock v.0.1

This simple clock is showed in an input box in a form, and make use of the Date class, writing the formatted clock and the formatted date once per second.

In the onLoad event of the body section of the page you want to display the clock in, you will insert the "init()" function, which handles the clock update.

The first release is downloadable here.

The zipped package contains:

-a test page: prova.html

-the script: PTQJSClock.js

-the readme: README.txt

Index of web technologies articles

Here's the index of articles I wrote about the technologies I used in my site. Each of them describes how to use them through descriptions and code snippets.

-HTML Tidy Batch Processing
An article on optimizing your html code to pass the validator test iterating a little utility.
-LightBox & LightNav
Lightbox is a nice effect for display images, Lightnav is an extension of Lightbox for bigger images.
-Usage of Jquery Reel for 360° panoramas
Display your cylindrical panorama using only a bit of javascript.
-Personalized maps using Google Maps API: usage, markers, routes
Walkthrough to build a simple map and personalize it.
-PTQ Guestbook v.0.2.1
My guestbook application: simple, easy and customizable.
-PTQ JS Clock v.0.1
My javascript clock, easy to use and display

Display 360° panoramas with Jquery.reel

There's a plugin for the Jquery library named Reel used to display animation sequences. It has also an option useful for displaying stitched images, and it's particularly helpful when dealing with 360 degree panoramas.

We have to download and put in the same folder as the Reel these libraries in gzipped version:
-Jquery
-jQuery.DisableTextSelect
-jquery-mousewheel

Another preliminary step is cutting the first frame of our panorama:
if we are going to display the image '360example.jpg' sized 2000x300 in a squared div we'll cut the first 300x300px square of the image. We have to rename the original image as '360example-reel.jpg' and the newly created image as '360example.jpg' (they must have the same name except for the '-reel' part).

First we have to include the libraries.

<link href='{path-to-reel-folder}/reel.css' rel='stylesheet' type='text/css' />
<script src='{path-to-reel-folder}/jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='{path-to-reel-folder}/jquery.reel-min.js' type='text/javascript'></script>
<script src='{path-to-reel-folder}/jquery.disabletextselect-min.js' type='text/javascript'></script>
<script src='{path-to-reel-folder}/jquery.mousewheel-min.js' type='text/javascript'></script>

The reel.css which we must include simply contains

.jquery-reel
{ border: 2px solid #000; margin: 2em 0; }

I've set a black border around the image to highlight it, but you can set it to 0.

Next, we include the image and the script; the image must be in a logical part of the page.

<div id="DIVname">
<img id='IMGid' src='360example.jpg' width='300' height='300'/>
</div>
<script type='text/javascript'>
$(document).ready(function(){ $('#IMGid').reel({ stitched:2000, indicator: 10 }); });
</script>

Note that the script requires an id for the image, and in the options we must set the original image horizontal size (stitched:) and the size of the squared indicator displayed on the image.