Results 1 to 7 of 7

Thread: Live clock with onload!.....

  1. #1
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Live clock with onload!.....

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

    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:
    Code:
    <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.
    Last edited by jscheuer1; 05-21-2013 at 02:32 AM. Reason: add required credit, spelling

  4. #4
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

    Did you modify the script like I suggested above?
    Here's an example that works (I made the script internal)
    Code:
    <!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).

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

    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.

Similar Threads

  1. live clock Need Help
    By lentzu in forum JavaScript
    Replies: 3
    Last Post: 09-29-2010, 08:23 PM
  2. Resolved live clock without AM/PM
    By chechu in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 05-02-2009, 06:08 AM
  3. Live clock?
    By techno_race in forum JavaScript
    Replies: 12
    Last Post: 03-27-2008, 10:34 PM
  4. Live Clock script - PLEASE HELP
    By gdevol155 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-29-2007, 12:06 AM
  5. Live Clock Script Bug
    By ashwinuae in forum Bug reports
    Replies: 0
    Last Post: 07-09-2005, 08:31 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •