PDA

View Full Version : Live clock with onload!.....



Alidad
05-20-2013, 06:36 PM
1) Script Title: live clock

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex6/clock2.htm

3) Describe problem:

please see same site at http://www.dynamicdrive.com/dynamicindex6/clock2.htm ,

I like this live clock but I do not wish to show on the top page but want to show other area in same page instead of top of page, but the scripts show <body onLoad="show_clock()"> does any one know how can i write code to show live clock using this scripts instead of <body onLoad="show_clock()"> !

please let me know thanks.

AM

jscheuer1
05-20-2013, 07:16 PM
Either you're a little confused, or I'm misunderstanding you. The clock can go anywhere you want it on your page. You control that by where in your page you put the code from Step 1. Using the body onload attribute to launch it only controls when it starts working, not where on the page you will see it. It has to wait until the body loads, or at least until the DOM of the page is loaded, so that it can find its code from Step 1.

But if you're asking for another way to tell it when to show up, you can skip the onload attribute of the body tag, that's pretty outdated anyway. Instead put this script at the end of your page, right before the closing </body> tag:


<script type="text/javascript">
show_clock();
</script>

But again, that doesn't control where the clock will be on the page. That's controlled by where you put the code of Step 1.

Whether you use the body onload or the script I'm giving you above, make sure to follow all of the other steps on the demo page.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

molendijk
05-20-2013, 10:11 PM
You can actually put the clock wherever you want by adding show_clock() at the very end of liveclock.js (after the last '}') and then putting something like this on your page:

<body >
Text before the clock<br>
<script type="text/javascript" src="liveclock.js">
/*
Live Clock Script-
By Mark Plachetta (astro@bigpond.net.auŠ) based on code from DynamicDrive.com
For full source code, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/
</script><br>
Text after the clock
</body>
So <body> without the onload.

Alidad
05-21-2013, 03:59 AM
I apologize i'm still not getting, is this what you talking about like this...

<div id="clock-box">

<script type="text/ecmascript" src="../js/liveclock.js">

show_clock()

</script>

</div>

if this is correct why i'm not showing on preview, is not showing anything! did i missed something!I

please help thanks.

AM

molendijk
05-21-2013, 08:58 AM
Did you modify the script like I suggested above?
Here's an example that works (I made the script internal)

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Clock</title>
</head>

<body >

Some text. Replace this with whatever you want<br>

<script type="text/javascript">
///////////////////////////////////////////////////////////
// "Live Clock Advanced" script - Version 1.0
// By Mark Plachetta (astroboy@zip.com.au)
//
// Get the latest version at:
// http://www.zip.com.au/~astroboy/liveclock/
//
// Based on the original script: "Upper Corner Live Clock"
// available at:
// - Dynamic Drive (http://www.dynamicdrive.com)
// - Website Abstraction (http://www.wsabstract.com)
// ========================================================
// CHANGES TO ORIGINAL SCRIPT:
// - Gave more flexibility in positioning of clock
// - Added date construct (Advanced version only)
// - User configurable
// ========================================================
// Both "Advanced" and "Lite" versions are available free
// of charge, see the website for more information on the
// two scripts.
///////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////
/////////////// CONFIGURATION /////////////////////////////

// Set the clock's font face:
var myfont_face = "Verdana";

// Set the clock's font size (in point):
var myfont_size = "10";

// Set the clock's font color:
var myfont_color = "#000000";

// Set the clock's background color:
var myback_color = "#FFFFFF";

// Set the text to display before the clock:
var mypre_text = "The time is: ";

// Set the width of the clock (in pixels):
var mywidth = 300;

// Display the time in 24 or 12 hour time?
// 0 = 24, 1 = 12
var my12_hour = 1;

// How often do you want the clock updated?
// 0 = Never, 1 = Every Second, 2 = Every Minute
// If you pick 0 or 2, the seconds will not be displayed
var myupdate = 1;

// Display the date?
// 0 = No, 1 = Yes
var DisplayDate = 0;

/////////////// END CONFIGURATION /////////////////////////
///////////////////////////////////////////////////////////

// Browser detect code
var ie4=document.all
var ns4=document.layers
var ns6=document.getElementById&&!document.all

// Global varibale definitions:

var dn = "";
var mn = "th";
var old = "";

// The following arrays contain data which is used in the clock's
// date function. Feel free to change values for Days and Months
// if needed (if you wanted abbreviated names for example).
var DaysOfWeek = new Array(7);
DaysOfWeek[0] = "Sunday";
DaysOfWeek[1] = "Monday";
DaysOfWeek[2] = "Tuesday";
DaysOfWeek[3] = "Wednesday";
DaysOfWeek[4] = "Thursday";
DaysOfWeek[5] = "Friday";
DaysOfWeek[6] = "Saturday";

var MonthsOfYear = new Array(12);
MonthsOfYear[0] = "January";
MonthsOfYear[1] = "February";
MonthsOfYear[2] = "March";
MonthsOfYear[3] = "April";
MonthsOfYear[4] = "May";
MonthsOfYear[5] = "June";
MonthsOfYear[6] = "July";
MonthsOfYear[7] = "August";
MonthsOfYear[8] = "September";
MonthsOfYear[9] = "October";
MonthsOfYear[10] = "November";
MonthsOfYear[11] = "December";

// This array controls how often the clock is updated,
// based on your selection in the configuration.
var ClockUpdate = new Array(3);
ClockUpdate[0] = 0;
ClockUpdate[1] = 1000;
ClockUpdate[2] = 60000;

// For Version 4+ browsers, write the appropriate HTML to the
// page for the clock, otherwise, attempt to write a static
// date to the page.
if (ie4||ns6) { document.write('<span id="LiveClockIE" style="width:'+mywidth+'px; background-color:'+myback_color+'"></span>'); }
else if (document.layers) { document.write('<ilayer bgColor="'+myback_color+'" id="ClockPosNS" visibility="hide"><layer width="'+mywidth+'" id="LiveClockNS"></layer></ilayer>'); }
else { old = "true"; show_clock(); }

// The main part of the script:
function show_clock() {
if (old == "die") { return; }

//show clock in NS 4
if (ns4)
document.ClockPosNS.visibility="show"
// Get all our date variables:
var Digital = new Date();
var day = Digital.getDay();
var mday = Digital.getDate();
var month = Digital.getMonth();
var hours = Digital.getHours();

var minutes = Digital.getMinutes();
var seconds = Digital.getSeconds();

// Fix the "mn" variable if needed:
if (mday == 1) { mn = "st"; }
else if (mday == 2) { mn = "nd"; }
else if (mday == 3) { mn = "rd"; }
else if (mday == 21) { mn = "st"; }
else if (mday == 22) { mn = "nd"; }
else if (mday == 23) { mn = "rd"; }
else if (mday == 31) { mn = "st"; }

// Set up the hours for either 24 or 12 hour display:
if (my12_hour) {
dn = "AM";
if (hours > 12) { dn = "PM"; hours = hours - 12; }
if (hours == 0) { hours = 12; }
} else {
dn = "";
}
if (minutes <= 9) { minutes = "0"+minutes; }
if (seconds <= 9) { seconds = "0"+seconds; }

// This is the actual HTML of the clock. If you're going to play around
// with this, be careful to keep all your quotations in tact.
myclock = '';
myclock += '<font style="color:'+myfont_color+'; font-family:'+myfont_face+'; font-size:'+myfont_size+'pt;">';
myclock += mypre_text;
myclock += hours+':'+minutes;
if ((myupdate < 2) || (myupdate == 0)) { myclock += ':'+seconds; }
myclock += ' '+dn;
if (DisplayDate) { myclock += ' on '+DaysOfWeek[day]+', '+mday+mn+' '+MonthsOfYear[month]; }
myclock += '</font>';

if (old == "true") {
document.write(myclock);
old = "die";
return;
}

// Write the clock to the layer:
if (ns4) {
clockpos = document.ClockPosNS;
liveclock = clockpos.document.LiveClockNS;
liveclock.document.write(myclock);
liveclock.document.close();
} else if (ie4) {
LiveClockIE.innerHTML = myclock;
} else if (ns6){
document.getElementById("LiveClockIE").innerHTML = myclock;
}

if (myupdate != 0) { setTimeout("show_clock()",ClockUpdate[myupdate]); }
}
show_clock()

</script><br>


Replace this with whatever you want

</body>

</html>
You don't have to put the script in a div (unless you want to add styles to the clock that are not present in the script itself).

jscheuer1
05-21-2013, 11:08 AM
Arie, I think you may have confused the issue. The advice from my previous post would work. As would yours if followed. Combining the two approaches could result in various problems though.

And the original script, if put on a page as described on its demo page will work fine and can be placed anywhere on a page. That's the main point.

molendijk
05-21-2013, 12:13 PM
John, you're completely right. As I misread your first post and the instructions on the demo page, I immediately started to look for a solution (of my own) that in fact was already there.
I hope Alidad won't be too confused.