...

View Full Version : Cant get my time to position correctly



Jackage
07-27-2011, 11:44 AM
Hey guys,

I'm currently developing a website, and I've encountered a few problems. My first problem is that I cannot get my time to position correctly.

http://img32.imageshack.us/img32/3469/navigationmp.gif


<li><a href="#" onclick="javascript:showdiv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/home.html');return false">Home</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:showdiv('newspage'); ajax_loadContent('news3','external/news.html');return false">News</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/request.html');return false">Request</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/contact.html');return false">Contact</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/tunein.html');return false">Tune in</a></li>
<li><script language="javascript" src="javascript/liveclock.js"></script></li>

That is the code for the navigation bar, the menu items function correctly as well as the time, but obviously the time isn't looking right! Oh, and I'm not the best at coding :confused:

Thank you for reading and attempting to help with this.
I will be very great full if you find a solution.

Thanks again!

JustinJD
07-27-2011, 11:48 AM
Sorry to ask this, but myself personally cannot help you unless you give us the other part of the code (CSS/Javascript/HTML) :(

Jackage
07-27-2011, 11:53 AM
Sorry to ask this, but myself personally cannot help you unless you give us the other part of the code (CSS/Javascript/HTML) :(

Okay,

CSS navigation:


/* menu */

#menu {
width: 960px;
height: 53px;
padding: 0 25px;
margin-bottom: 30px;
background: url(../images/menu.jpg) no-repeat;
}

#menu ul {
height: 52px;
margin: 0;
padding: 1px 0 0 0;
list-style: none;
}

#menu ul li {
padding: 0;
margin: 0;
display: block;
}


#menu ul li a {
float: left;
display: block;
height: 37px;
padding: 15px 52px 0 50px;
font-size: 16px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
background: url(../images/menu_divider.jpg) center right no-repeat;
}

#menu ul li a:hover, #menu ul .current {
color: #0eb0ff;
}

#menu ul .last { background: none; padding-right: 52px }
/* end of menu */

The Time 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 = "Tahoma, Geneva, sans-serif";

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

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

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

// Set the text to display before the clock:
var mypre_text = "Time: ";

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

// 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" 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]); }
}


Which part of the HTML did you need, sorry?

vikram1vicky
07-27-2011, 11:57 AM
The problem is with your time <li>, check there, rest all <li> are having <a> inside them, but time <li> does not have.

write your CSS accordingly. You can do 1 thing...

wrap your time <script> tag in <span> tags and apply CSS on <span> same as of <a> inside <li>

Try this code:



#menu ul li a, #menu ul li span {
float: left;
display: block;
height: 37px;
padding: 15px 52px 0 50px;
font-size: 16px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
background: url(../images/menu_divider.jpg) center right no-repeat;
}
HTML Code:



<li><a href="#" onclick="javascript:showdiv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/home.html');return false">Home</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:showdiv('newspage'); ajax_loadContent('news3','external/news.html');return false">News</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/request.html');return false">Request</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/contact.html');return false">Contact</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/tunein.html');return false">Tune in</a></li>
<li><span><script language="javascript" src="javascript/liveclock.js"></script></span></li>
Let me know it works on not... :)

Jackage
07-27-2011, 12:07 PM
Nope, unfortunately it just comes up like this

http://img846.imageshack.us/img846/1694/navigation.gif

vikram1vicky
07-27-2011, 12:16 PM
Nope, unfortunately it just comes up like this

http://img846.imageshack.us/img846/1694/navigation.gif


to which tag you are giving #menu id in your code???

Jackage
07-27-2011, 12:20 PM
to which tag you are giving #menu id in your code???


<div id="menu">
<ul>
<li><a href="#" onclick="javascript:showdiv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/home.html');return false">Home</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:showdiv('newspage'); ajax_loadContent('news3','external/news.html');return false">News</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/request.html');return false">Request</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/contact.html');return false">Contact</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/tunein.html');return false">Tune in</a></li>
<li><script language="javascript" src="javascript/liveclock.js"></script></li>
</ul>
</div>

Jackage
07-27-2011, 12:36 PM
I managed to fix the time problem, just by simply adding <a class="last"> before the javascript.

Thank you for your help.

vikram1vicky
07-27-2011, 12:37 PM
Following code is working fine here. try this :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* menu */

#menu {
width: 960px;
height: 53px;
padding: 0 25px;
margin-bottom: 30px;
background: url(../images/menu.jpg) no-repeat;
}

#menu ul {
height: 52px;
margin: 0;
padding: 1px 0 0 0;
list-style: none;
}

#menu ul li {
padding: 0;
margin: 0;
display: block;
}


#menu ul li a, #menu ul li span {
float: left;
display: block;
height: 37px;
padding: 15px 52px 0 50px;
font-size: 16px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
background:#333 url(../images/menu_divider.jpg) center right no-repeat;
}

#menu ul li a:hover, #menu ul .current {
color: #0eb0ff;
}

#menu ul .last { background: none; padding-right: 52px }
/* end of menu */
</style>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>

<body onload="startTime()">
<div id="menu">
<ul>
<li><a href="#" onclick="javascript:showdiv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/home.html');return false">Home</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:showdiv('newspage'); ajax_loadContent('news3','external/news.html');return false">News</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/request.html');return false">Request</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/contact.html');return false">Contact</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/tunein.html');return false">Tune in</a></li>
<li><span id="txt"></span></li>
</ul>
</div>
</body>
</html>

JustinJD
07-27-2011, 12:54 PM
Ahh, I go and have dinner to figure out that vicky has beaten me to the answer already, glad that you found your solution! :)

Jackage
07-27-2011, 12:58 PM
Thank you for trying to help :P



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum