Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    United Kingdom
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cant get my time to position correctly

    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.



    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><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

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

    Thanks again!

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Sorry to ask this, but myself personally cannot help you unless you give us the other part of the code (CSS/Javascript/HTML)

  • #3
    New Coder
    Join Date
    Jul 2011
    Location
    United Kingdom
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by JustinJD View Post
    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:

    Code:
    /* 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:

    Code:
    ///////////////////////////////////////////////////////////
    // "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?

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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:

    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:

    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...
    Last edited by vikram1vicky; 07-27-2011 at 01:01 PM.

  • #5
    New Coder
    Join Date
    Jul 2011
    Location
    United Kingdom
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nope, unfortunately it just comes up like this


  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Jackage View Post
    Nope, unfortunately it just comes up like this


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

  • #7
    New Coder
    Join Date
    Jul 2011
    Location
    United Kingdom
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    to which tag you are giving #menu id in your code???
    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>

  • #8
    New Coder
    Join Date
    Jul 2011
    Location
    United Kingdom
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I managed to fix the time problem, just by simply adding <a class="last"> before the javascript.

    Thank you for your help.
    Last edited by Jackage; 07-27-2011 at 01:42 PM.

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Following code is working fine here. try this

    Code:
    <!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>

  • Users who have thanked vikram1vicky for this post:

    Jackage (07-28-2011)

  • #10
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Ahh, I go and have dinner to figure out that vicky has beaten me to the answer already, glad that you found your solution!

  • #11
    New Coder
    Join Date
    Jul 2011
    Location
    United Kingdom
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for trying to help :P


  •  

    Tags for this Thread

    Posting Permissions

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