|
JavaScript - How Do I Get These 2 Functions To Load At The Same Time?
Hi,
I am new to Javascript so please be gentle. In the following code how would I get the displaymember() and stats() functions to load at the same time? If I have to combine them into the same function how do I do this. Basically, I need displaymember() and stats() to both run when the page loads using onLoad="displaymember()". However, you can only load one function in this way. So I need a way of combining these 2 functions. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function loadXMLDoc(dname) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", dname, false);
xhttp.send("");
return xhttp.responseXML;
}
xml = loadXMLDoc("dating_database.xml");
x = xml.getElementsByTagName("client");
function show(i) {
name = (x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
ethnicity = (x[i].getElementsByTagName("ethnicity")[0].childNodes[0].nodeValue);
region = (x[i].getElementsByTagName("region")[0].childNodes[0].nodeValue);
profession = (x[i].getElementsByTagName("profession")[0].childNodes[0].nodeValue);
membership_status = (x[i].getElementsByTagName("membership_status")[0].childNodes[0].nodeValue);
seeking = (x[i].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
education = (x[i].getElementsByTagName("education")[0].childNodes[0].nodeValue);
body_type = (x[i].getElementsByTagName("body_type")[0].childNodes[0].nodeValue);
eye_colour = (x[i].getElementsByTagName("eye_colour")[0].childNodes[0].nodeValue);
smoker = (x[i].getElementsByTagName("smoker")[0].childNodes[0].nodeValue);
drinker = (x[i].getElementsByTagName("drinker")[0].childNodes[0].nodeValue);
image = (x[i].getElementsByTagName("imgname")[0].childNodes[0].nodeValue);
hairlength = (x[i].getElementsByTagName("length")[0].childNodes[0].nodeValue);
haircolour = (x[i].getElementsByTagName("colour")[0].childNodes[0].nodeValue);
introduction = (x[i].getElementsByTagName("introduction")[0].childNodes[0].nodeValue);
idealdate = (x[i].getElementsByTagName("ideal_date")[0].childNodes[0].nodeValue);
txt = "<h1>" + name + "</h1><br /><img id='profilepic' src='images/" + image + ".gif' /><table><tr><td>Sex:</td><td>" + sex + "</td><td>Seeking:</td><td>" + seeking + "</td></tr><tr><td>Ethnicity:</td><td>" + ethnicity + "</td><td>Body Type:</td><td>" + body_type + "</td></tr><tr><td>Membership status:</td><td>" + membership_status + "</td><td>Profession:</td><td>" + profession + "</td></tr><tr><td>Education:</td><td>" + education + "</td><td>Region:</td><td>" + region + "</td></tr><tr><td>Eye Colour:</td><td>" + eye_colour + "</td><td>Smoker:</td><td>" + smoker + "</td></tr><tr><td>Hair:</td><td>" + hairlength + " " + haircolour + "</td><td>Drinker</td><td>" + drinker + "</td></tr></table><br /><br /><table><tr><td>Introduction:</td></tr><tr><td>" + introduction + "</td></tr><tr><td>Ideal Date:</td></tr><tr><td>" + idealdate + "</td></tr></table>";
document.getElementById("fixed").innerHTML = txt;
}
function displaymember() {
var d = new Date();
var curr_date = d.getDate();
if (curr_date < 10) curr_date = "0" + curr_date;
var curr_month = d.getMonth();
curr_month++;
if (curr_month < 10) curr_month = "0" + curr_month;
var curr_year = d.getFullYear();
//alert("date="+curr_date+" month="+curr_month+" year="+curr_year);
for (i = 0; i < x.length; i++) {
membershipstatus = (x[i].getElementsByTagName("membership_status")[0].childNodes[0].nodeValue);
name = (x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
body = (x[i].getElementsByTagName("body_type")[0].childNodes[0].nodeValue);
ethnicity = (x[i].getElementsByTagName("ethnicity")[0].childNodes[0].nodeValue);
sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
profession = (x[i].getElementsByTagName("profession")[0].childNodes[0].nodeValue);
seeking = (x[i].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
date = (x[i].getElementsByTagName("date_joined")[0]);
month = (date.getElementsByTagName("month")[0].childNodes[0].nodeValue);
year = (date.getElementsByTagName("year")[0].childNodes[0].nodeValue);
var newa = document.createElement('a');
var aIdName = 'my' + i + 'a';
var ahref = '#';
var aclick = 'show(' + i + ')';
newa.setAttribute('id', aIdName);
newa.setAttribute('href', ahref);
newa.setAttribute('onclick', aclick);
newa.innerHTML = name + " | " + body + " " + ethnicity + " " + sex + " " + profession + " with " + membershipstatus + " membership seeks " + seeking + "<br/>";
if (curr_month == month && curr_year == year) {
document.getElementById("member").appendChild(newa);
}
}
}
function stats() {
var m = 0;
var f = 0;
for (i = 0; i < x.length; i++) {
sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
if (sex == "Male") {
m++;
} else {
f++;
}
var fper = (f / x.length * 100);
var mper = (m / x.length * 100);
var fper = Math.round(fper * 100) / 100;
var mper = Math.round(mper * 100) / 100;
document.getElementById("statm").innerHTML = fper + "% <img src='images/malefemale.gif' alt='sexstats' /> " + mper + "%";
}
}
</script>
</head>
<body onload="stats()">
<div>
<img id="background" src="images/bg.jpg" alt="" title="" />
</div>
<div id="pulldown" class="close">
<div id="opacity">
</div>
<div id="contents">
<div class="nav">
<ul class="menu">
<li class="top-li">
<a class="top-a" href="index.html">Home</a>
</li>
<li class="top-li">
<a class="top-a" href="#nogo">About</a>
</li>
<li class="top-li">
<a class="top-a last" href="#nogo">View All</a>
</li>
<li class="top-li">
<a class="top-a last" href="Default.aspx">Search</a>
</li>
<li class="top-li">
<a class="top-a last" href="register.aspx">Register</a>
</li>
<li class="top-li">
<a class="top-a last" href="Edit.aspx">Edit/Delete</a>
</li>
</ul>
</div>
<div id="lowerContent">
<dl>
<dt>
New Members
</dt>
<dd id="member">
</dd>
</dl>
</div>
</div>
<a href="#pulldown" id="pull">Menu</a>
<a href="#x" id="push">Close</a>
</div>
<div id="fixed">
<div id="statm" onload="stats()">
</div>
</div>
</body>
</html>
Similar TutorialsI am having trouble running multiple windows.onload functions and having trouble how to implement them. I found a couple articles on but couldn't really get them to work. Here are the two functions I'm trying to load: Code: <script type="text/javascript">
//<![CDATA[
window.onload=function(){
//randomize order of contents with DIV class="group1"
randomizeContent("group1")
randomizeContent("group2")
randomizeContent("group3")
}
//]]>
</script>
Code: <script type="text/javascript">
function showHideMore(obj) {
var contObj = obj.parentNode.getElementsByTagName('div')[0];
var status = (contObj.style.display == 'block')? 'none' : 'block'
contObj.style.display = status;
<!-- obj.innerHTML = (status == 'block')? 'Show less' : 'Show more'; -->
obj.curPic = (obj.curPic == 0)? 1 : 0;
obj.style.backgroundImage = 'url("'+plusMinusPics[obj.curPic]+'")';
}
window.onload=function(){
plusMinusPics = ['plus.png','minus.png'];
oMoreLessSpans = document.getElementById('list1').getElementsByTagName('span');
for(i=0; i < oMoreLessSpans.length; i++){
oMoreLessSpans[i].curPic = 0;
oMoreLessSpans[i].style.background = 'url("'+plusMinusPics[oMoreLessSpans[i].curPic]+'") no-repeat 0 50%';
oMoreLessSpans[i].onclick=function(){showHideMore(this);}
}
}
</script>
Am I doing something wrong here? I have two anonymous functions to validate two different forms on two different pages. They both work on the individual page, though when I try and put them in the same script.js folder only the top function seems to work. Code: <script type="text/javascript">
// Form Validation / Catalog Template ----------------------------------------------------------------------------------------------------------------------
document.getElementById("formValidation").onsubmit = function(){
if(document.getElementById("reqAddrCont").value == ""){
document.getElementById("reqAddrCont").className = "error";
return false;
}if(document.getElementById("reqAddrName").value == ""){
document.getElementById("reqAddrName").className = "error";
return false;
}if(document.getElementById("reqAddr1").value == ""){
document.getElementById("reqAddr1").className = "error";
return false;
}if(document.getElementById("reqAddr6").value == ""){
document.getElementById("reqAddr6").className = "error";
return false;
}if(document.getElementById("reqAddrState").value == "0"){
document.getElementById("reqAddrState").className = "error";
return false;
}if(document.getElementById("reqAddrPost").value == ""){
document.getElementById("reqAddrPost").className = "error";
return false;
}if(document.getElementById("reqAddrPhone").value == ""){
document.getElementById("reqAddrPhone").className = "error";
return false;
}if(document.getElementById("reqAddrEMail").value == ""){
document.getElementById("reqAddrEMail").className = "error";
return false;
}else{
return true;
}
};
// Form Validation / New Account Template --------------------------------------------------------------------------------------------------------------------------
document.getElementById("formValidationAccount").onsubmit = function(){
if(document.getElementById("AcctName").value == ""){
document.getElementById("AcctName").className = "error";
return false;
}if(document.getElementById("AcctTitle").value == ""){
document.getElementById("AcctTitle").className = "error";
return false;
}if(document.getElementById("AcctCompany").value == ""){
document.getElementById("AcctCompany").className = "error";
return false;
}if(document.getElementById("AcctAddress1").value == ""){
document.getElementById("AcctAddress1").className = "error";
return false;
}if(document.getElementById("AcctAddress2").value == ""){
document.getElementById("AcctAddress2").className = "error";
return false;
}if(document.getElementById("AcctAddress6").value == ""){
document.getElementById("AcctAddress6").className = "error";
return false;
}if(document.getElementById("AcctState").value == "0"){
document.getElementById("AcctState").className = "error";
return false;
}if(document.getElementById("AcctPost").value == ""){
document.getElementById("AcctPost").className = "error";
return false;
}if(document.getElementById("AcctCountry").value == ""){
document.getElementById("AcctCountry").className = "error";
return false;
}if(document.getElementById("AcctPhone").value == ""){
document.getElementById("AcctPhone").className = "error";
return false;
}if(document.getElementById("AcctLogin").value == ""){
document.getElementById("AcctLogin").className = "error";
return false;
}if(document.getElementById("AcctLogin2").value == ""){
document.getElementById("AcctLogin2").className = "error";
return false;
}if(document.getElementById("AcctPassword").value == ""){
document.getElementById("AcctPassword").className = "error";
return false;
}if(document.getElementById("AcctPasswordDupe").value == ""){
document.getElementById("AcctPasswordDupe").className = "error";
return false;
}else{
return true;
}
};
</script>
http://everythingsyoga.netau.net/Ang...ite2/Eat.html# The second link to the right "Eat our Famous" is the link in question, you'll notice the div on the left has about a 3 second delay. Any thoughts? Thanks. How do you make an image begin to load after a certain amount of time? e.g 3 seconds.
how can i make a button disable when the page is loaded first time and then make it enable on the click of other button in javascript.
Hi all Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now? I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load. Example of how the tabs look. Code: <div class="tabbertab">
<h2>Australia_____</h2>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
<caption class="highlight_Red">澳洲 Australia
</caption>
<tr>
<td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc
the other tabs look the same. LT Hi, I have written a number of functions designed to return frequency data on 1000 randomly chosen numbers using different math functions for the rounding. I would like to include all of these functions within the wrapper of another function so that only one call is needed to get returns from all of the 'inner' functions. However, while each of the functions works in isolation, the moment I wrap them in another function they stop working. The following code is one of the functions 'frequencyWrapperOne' that has been wrapped in the function 'testWrapper'. A call to testWrapper does nothing. Can anyone see what I'm doing wrong? Code: function testWrapper()
{
function frequencyWrapperOne()
{
var numberArrayOne = new Array(0,0,0);
for (var i = 0; i < 1000; i = i + 1)
{
var chosenNumber = Math.floor(Math.random() * 3);
if (chosenNumber == 0)
{
numberArrayOne[0] = numberArrayOne[0] + 1;
}
if (chosenNumber == 1)
{
numberArrayOne[1] = numberArrayOne[1] + 1;
}
if (chosenNumber == 2)
{
numberArrayOne[2] = numberArrayOne[2] + 1;
}
}
return window.alert(numberArrayOne.join(','));
}
}
testWrapper();
Thanks. Hi Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
alert(err-str);
here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str="";
function validate_grid(value,id,ind)
{
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
This script displays a link to a registration/login form that loads in a light box for Joomla. I've been goin nuts trying to figure out how to get this to load on page load with a delay. Anyone know how to get this done? PHP Code: <?php JHTML::_('behavior.mootools'); $document = JFactory::getDocument(); $document->addStyleSheet(JURI::base() . 'media/system/css/modal.css'); $document->addScript(JURI::base() . 'media/system/js/modal.js'); $document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});"); $user = & JFactory::getUser(); $uri = JFactory::getURI(); $url = $uri->toString(); $return = base64_encode($url); ?> <div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden"> <a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a> </div> <?php if ($user->get('guest')) :?> <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" onclick="SqueezeBox.fromElement(this); return false;" rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a> <?php else: ?> <?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?> <br> <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a> <?php endif; ?> <script type="text/javascript"> function LB_onLogout() { var form = new Element('form'); form.setProperty('method', 'POST'); form.setProperty('target', '_self'); form.setProperty('action', 'index.php'); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'option'); input.setProperty('value', 'com_user'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'task'); input.setProperty('value', 'logout'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'return'); input.setProperty('value', '<?php echo $return; ?>'); form.appendChild(input); $E('body').appendChild(form); form.submit(); } </script> Ok here is what I have so far, my ending part of my Call Function I think is ok. for my main function. I think I misplaced the { and } I will show you all the codes I have for my main function this is what I have I think I did misplace something but I can not pin point where that one small things should be Code: unction showResults(race,name,party,votes)
{ // script element to display the results of a particular race
var totalV = totalVotes(votes);
document.write("<h2>" + race + "</h2>");
document.write("<table cellspacing='0'>");
document.write("<tr>");
document.write("<th>Candidate</th>");
document.write("<th class ='num'>Votes</th>");
document.write("<th class='num'>%</th>");
document.write("</tr>");
}
for (var i=0; i < name.length; i++)
{
document.write("<tr>");
document.write("<td>" name[i] + "(" + party[i] + ")</td>");
document.write("td class='num'>" + votes[i] + "</td>");
var percent=calcPercent(votes[i], totalV)
document.write("<td class='num'>(" + percent +"%)</td>");
createBar(party[i],percent)
document.write("</tr>");
}
document.write("</table>");
}
</script>
Just wondering if i misplaced any ; or { or } anywhere suggestions? Here is my call function Code: <script type="text/javascript"> showResults(race[0],name1,party1,votes1); showResults(race[1],name2,party2,votes2); showResults(race[2],name3,party3,votes3); showResults(race[3],name4,party4,votes4); showResults(race[4],name5,party5,votes5); </script> I been going over this, I can not seem to figure out what { i might be missing? Thanks Is there a way to activate a function from another function? It has to be in the script tag, it can't be in the HTML section. Can I use something similar to this following code? If not, can anyone give me some help? I have tried to do it various ways, and have looked it up a few times, but to no avail. Can I use something similar to this following code? If not, can anyone give me some help? if (condition) {activate functionname();} Any help I can get would be appreciated. Thanks a lot to anyone who can help. 1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help I'm not really a Java writer, so I don't know how to do this myself, though I imagine it would be pretty simple. I am looking to add a script to a webpage that allows users to input a time manually, and have it converted to GMT/Zulu time and display the converted time. I have seen a lot of time zone conversion scripts online, but they all just convert whatever the current system time is to another time zone. I am looking for a script that allows users to convert a time and show the zulu time, for times other than the current time. The time zone the inputed local time would be in is +4:30 (Kabul). I don't really care about style or aestehtics, just a simple script I can insert into a web page to have a time input field. The converted output time can appear in another field, a popup bubble, etc, again style isn't really an issue. It's really just to help people in my job who need to know what the GMT/Zulu time was for certain local times after the fact. One would think it shouldn't be that hard to just subtract 4:30 in your head, but apparently it is. Sorry if just asking for code outright like this is frowned upon. hi, can some one help me how to get the time and date difference? given two time and date with the following format like in textbox A: 2011-05-03 17:35:47.0 and textbox B: 2011-05-03 16:35:47.0 then the output would be: 0 days, 1 hour, 0 minutes, 0 seconds regards, verve Hi guys, I am trying to insert the following call into my page; Code: <script type="text/javascript" defer="true">
$('#query').autocomplete({
serviceUrl:'service/autocomplete.ashx',
minChars:1,
delimiter: /(,|;)\s*/, // regex or character
maxHeight:400,
width:250,
deferRequestBy: 0, //miliseconds
params: { country:'Yes' }, //aditional parameters
// local autosugest options:
lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
});
</script>
It works fine in all browsers except ie(6,7,8) Code: Internet Explorer can not open website. Operation Aborted. I understand it is caused by the jquery autocomplete function loading before the page / DOM has fully loaded. I tried adding Defer="true" to the script however this doesn't seem to work. Could someone please tell me what i must add to the script so that it loads after the dom has fully loaded? Thanks guys George This is my first time doing JavaScript I don't what I did wrong here, but the problem its not showing up the current date and time. Code: <script language = "JavaScript" type="text/javascript">
now = new Date();
localtime = now.toString();
utctime = now.GMTString();
document.wite("<b>localtime</b>" + localtime + "</br>");
document.write("<b>utctime</b>" + utctime);
</script>
This is what supposed to look like I have tried using different browser chrome,IE9,Maxtor, and Opera my OS is Win7 Hi - I have a date in my javascript like this: Mon Dec 12 00:00:00 UTC+0430 2011 I need to convert it to a date without the offset (the +0430). I actually changed my computer's timezone to generate this offset - we have uses placing orders on our site who don't use UTC and it's throwing our orders out as they need to select a delivery date but it's passing the date with the offset. How do I convert a date to UTC time? Thanks Hi there! Well, I recently found the Image clock code, and I am loving it! But, I would like it to only display pacific time, not retrieve the time from a users browser. Here's my code: Code: <script type="text/javascript">
/***********************************************
* JavaScript Image Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["/users/1712/49/18/66/album/c012.png", "/users/1712/49/18/66/album/c112.png", "/users/1712/49/18/66/album/c211.png", "/users/1712/49/18/66/album/c311.png", "/users/1712/49/18/66/album/c411.png", "/users/1712/49/18/66/album/c511.png", "/users/1712/49/18/66/album/c611.png", "/users/1712/49/18/66/album/c711.png", "/users/1712/49/18/66/album/c811.png", "/users/1712/49/18/66/album/c911.png", "/users/1712/49/18/66/album/cam11.png", "/users/1712/49/18/66/album/cpm13.png", "/users/1712/49/18/66/album/ccolon11.png"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}
imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
else
sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
}
imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('<span id="'+this.spanid+'"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}
imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML
}
</script>
<DIV STYLE="position:absolute; top:260px; left:215px; width:109px; height:28px">
<FONT SIZE="+2" COLOR="black">
<TABLE BORDER="0" cellpadding="10" CELLSPACING="0" TOP MARGIN="0">
<TR>
<TD WIDTH="109" HEIGHT="28" BACKGROUND="/users/1712/49/18/66/album/clock210.png" VALIGN="top">
<script type="text/javascript">
new imageclock.display()
</script>
</TD>
</TR>
</TABLE>
</DIV>
Much appreciated! |
|||||||