[ Show me the time! ]
U
se this cross browser DHTML script to display the analog time to your visitors via a popup window. Activated either through clicking a link, or automatically* as the page loads.
* Further down in this tutorial we will show you what modification is needed to make this clock pop-up on page load as opposed to clicking on the above link.
H
ere is another example of a pop-up with a link that when you click on it a small clock will open up in the left side corner or open automatically.
W
e have tested the code in
IE5.5, IE6.0,
Netscape4.08, Opera7.23 and Netscape7.02
. This script worked well in all platforms with the exception of Netscape7.02 and where it will "Not" work. Two
(2) variations was also
observed in Opera7.23.
- Instead of the clock opening in the upper left corner, it will appear in the lower center of the page.
- The size of the pop-up clock window can be maximized as opposed to not having the maximize button functioning.
- These variations do not effect the script in any way.
D
epending on your knowledge of HTML
and Java scripts this is quite an easy effect to have on your page. It is an easy three part
process.
- Paste the code into the <BODY> section of your document.
- Upload a file to your editor.
- Save the picture of the clock face and upload it to your editor.
W
hen you go to the script site
to get the code it is all very easily explained on how to install it. You need to copy and paste the code into the <BODY> section of your document. You also need to upload a file into your editor, This file will be called "analogclock.htm". Once this is done all you need to do is in the top part of the code that you pasted into the <BODY> section of your document
where it says:
"window.open("analogclock.htm
","","width=150,height=
185")
put your path to the analogclock. It will look like this but do not use this URL, use yours.
"window.open("https://www.angelfire.com/ny5/consigliere/analogclock.html","",
"width=150,height=200")
O
n a final note if you notice the "anaologclock.htm" file you need to upload to your editor. It is a good idea to rename that file with the extention of html instead of htm. The reason being that htm files do not show properly in all browsers. If you do this the only reconfiguration you need to make is on the above section of code.
Y
ou may want to play around with the pixel size of the pop up window until it suits you. We changed it just slightly as you can see in the above example. Once you do all that, it is now done except for the howto make it appear automatically instead of with the [ Show me the time! ]
Howto Open Clock Automatically
I
n the below section of the code, (very bottom) it tells you:
//uncomment below to pop up clock automatically while page loads
//popupclock()
</script>
W
hat this means is quite simple. The two (2) above // tell the script to wait for the link to be activated before opening the window with the clock. By "uncommenting" all you are doing is removing them. So the reconfigured portion of script would look like the below.
//uncomment below to pop up clock automatically while page loads
popupclock()
</script>
Note!
I
f you reconfigure the clock to open automatically you must remember one thing. If the person who is viewing the effect has a "Pop-Up blocker" on his/her system, they will not see the clock pop up automatically.
F
or this reason, we suggest even if you have the clock open automatically, leave the
[ Show me the time! ]
on the page for these people who have pop up's blocked.
I
f you would like to add this effect into your pages, just grab the below link and you are there. If you have any problems with this, feel free to contact us.
[
Get Code Here ]
