Javascript clock start

[roysters]

Hey guys, wondering if any of you boffins can make sense of this.

basically its a watch rotating and im having trouble getting it to start without pressing a link.

The original JS code is here

https://github.com/fofr/paulrhayes.com-experiments/blob/master/clock/js/experiment.js

One of the suggestions somebody else mentioned in another forum is the code below im not sure where to to put the 'true' value.

    // *******************************************************************
    //  here it starts based on if the url has #clock in its end
    //  a simple way is to change `window.location.hash === "#clock"` to `true`
    //  and it will start without a hash
    // *******************************************************************
    if(window.location.hash = true;) {
        startClock();
        $('p.start').remove();
    } else {
        $('#start').click(function() {
            startClock();
            $('p.start').remove();
        });
    }

Any help is appreciated,

Thanks!

R

 

[AHarvey]

I don't know JS very well at all, but could you not just use something like window.onload to get it working as soon as the window has loaded?

 

[xbenjiiman]

if(window.location.hash = true;) {

The above is invalid syntax and just wrong.

If you're wanting to start it on page load, just call startClock();

 

[roysters]

Sorry the original code was

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

So your saying after the hash replace this entire syntax with 'startClock();' ?

 

[xbenjiiman]

They're actually using a CSS trick with the :target pseudo-selector. As it is now, the animation will only work when #clock is in the URL, making the JavaScript irrelevant.

The JavaScript is only there to calculate the current time.

 

[roysters]

ohhh i see! bummer! i made a nice skinned watch now it seems i have to go another direction. Any suggestions?

 

[xbenjiiman]

Well, the animation needs to be triggered since it's a transition.

I've created a fiddle for you, which triggers the animation by adding a class. Note that the CSS has changed.

http://jsfiddle.net/q65uvwfk/1/

What are you using it for? After reading the source, this watch will only last 10 minutes before the animation runs out.

http://paulrhayes.com/2009-03/an-analogue-clock-using-only-css/#How_To

 

[roysters]

It will use for it a HTML5 ad that might appear on various sites / tablets etc, so really, i cant see anyone looking at it for 10 mins...

 

[roysters]

Well, the animation needs to be triggered since it's a transition.

I've created a fiddle for you, which triggers the animation by adding a class. Note that the CSS has changed.

Fantastic mate, this works perfectly. Much appreciated. Just going to analyse the changed you made and try to understand it.

Regardless do you think i should be going another approach?

Now just need to ad a date!

R