[Redbird5]

I have a piece of JS that runs a analog clock I want to alter so it loads when the page loads. Right now it waits for a click event to start. I know what code to change I just don't know what to change it to. I'm positive the startClock function is what I need to change.

for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}

if(window.location.hash === "#clock") {
startClock();
$('p.start').remove();
} else {
$('#start').click(function() {
startClock();
$('p.start').remove();
});
}

function startClock() {
var angle = 360/60,
date = new Date(),
hour = (function() {
var h = date.getHours();
if(h > 12) {
h = h - 12;
}
return h
})(),
minute = date.getMinutes(),
second = date.getSeconds(),
hourAngle = (360/12) * hour + (360/(12*60)) * minute;

if(prop) {
$('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
$('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
$('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
}
}
});

[Martyr2]

No, you just need to change where it calls startClock() from. See these lines...

$('#start').click(function() {
  startClock();
  $('p.start').remove();
});

This is saying call the function startClock() when the press the button with the ID "Start".

You just need to remove that and instead put it into something like the document ready function...

$(document).ready(function () {
    startClock();
    $('p.start').remove();
});

Here we are saying to call the startClock() method when the page has finished loading and is ready.

Edit: You may also need to move some of that "prop" setting stuff into this function as well. But try it without touching that and see if it works first.

Hopefully that fixes up your problem.

This post has been edited by Martyr2: 28 July 2012 - 10:48 AM

[Redbird5]

Thank you kind sir

[Redbird5]

I'm getting a syntax error in the bold area. It's also not telling the correct time.

if(window.location.hash === "#clock") {
startClock();
$('#start').click(function(){
	startClock();
[b]} else {[/b]
$(document).ready(function() {
startClock();
$('p.start').remove();
});
}

// Javascript Document
// clock for the Alton Antique center 
$(function(){

var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
prop,
el = document.createElement('div');

for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}

if(window.location.hash === "#clock") {
startClock();
$('#start').remove();
} else {
$(document).ready(function() {
startClock();
$('p.start').remove();
});
}

function startClock() {
var angle = 360/60,
date = new Date(),
hour = (function() {
var h = date.getHours();
if(h > 12) {
h = h - 12;
}
return h
})(),
minute = date.getMinutes(),
second = date.getSeconds(),
hourAngle = (360/12) * hour + (360/(12*60)) * minute;

if(prop) {
$('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
$('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
$('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
}
}
});