Clock count javascript/php error

Question

http://www.juriseodesign.com/clock/Sydney.php

My clock count javascript shows errors. I have my background changes working, but after adding the count clock javascript, the clock doesn't work. I guess it is caused by "collisions" with Mootools and regular jQuery, but I don't have any idea how to fix it. Could anybody can help this for me? Also, how to connect to other paged when I click the one of the city in the dropdown menu?

Thank you so much!

// JavaScript Document

//initial time
var h_current = -1;
var m1_current = -1;
var m2_current = -1;
var s1_current = -1;
var s2_current= -1;


function flip (upperId, lowerId, changeNumber, pathUpper, pathLower){
    var upperBackId = upperId+"Back";
    $(upperId).src = $(upperBackId).src;
    $(upperId).setStyle("height", "64px");

Uncaught TypeError: Object # has no method 'setStyle' (repeated 315 times) $(upperId).setStyle("visibility", "visible"); $(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";

    $(lowerId).src = pathLower+parseInt(changeNumber)+".png";
    $(lowerId).setStyle("height", "0px");
    $(lowerId).setStyle("visibility", "visible");

    var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
    flipUpper.addEvents({
        'complete': function(){
            var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
                flipLower.addEvents({
                    'complete': function(){ 
                        lowerBackId = lowerId+"Back";
                        $(lowerBackId).src = $(lowerId).src;
                        $(lowerId).setStyle("visibility", "hidden");
                        $(upperId).setStyle("visibility", "hidden");
                    }               });                 
                flipLower.start('height', 64);

        }
                        });
    flipUpper.start('height', 0);


}//flip


function retroClock(){

    // get new time
     now = new Date();
     h = now.getHours();
     m1 = now.getMinutes() / 10;
     m2 = now.getMinutes() % 10;
     s1 = now.getSeconds() / 10;
     s2 = now.getSeconds() % 10;
     if(h < 12)
        ap = "AM";
     else{ 
        if( h == 12 )
            ap = "PM";
        else{
            ap = "PM";
            h -= 12; }
     }

     //change pads

     if( h != h_current){
        flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
        h_current = h;
    }

    if( m2 != m2_current){
        flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
        m2_current = m2;

        flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
        m1_current = m1;
    }

     if (s2 != s2_current){
        flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
        s2_current = s2;

        flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
        s1_current = s1;
    }





}

setInterval('retroClock()', 1000);

Did you try using jQuery instead of $, that could help

Piotr Kaluza
– Piotr Kaluza

2012-12-09 22:02:24 +00:00
Commented Dec 9, 2012 at 22:02 — Piotr Kaluza
– Piotr Kaluza, Commented Dec 9, 2012 at 22:02

freedev · Accepted Answer · 2012-12-09 22:13:54Z

1

I just looked at jQuery reference, setStyle method does not exist. You should use css method instead :

$(upperId).css('height','64px;');

Looking at this code, there are many things, that don't match with jQuery methods.

For example: if you want change src attribute to upperId element, in jQuery you should use attr method:

// $(upperId).src = $(upperBackId).src;  // WRONG
$(upperId).attr('src', $(upperBackId).attr('src'));   // CORRECT

If you want reference an element with its id you must prepend # before the element id:

var upperBackId = "#" + upperId + "Back";

edited Dec 9, 2012 at 22:13

answered Dec 9, 2012 at 22:02

freedev

30.9k12 gold badges129 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1890200 Over a year ago

Thank you! So, can I simply replace all setStyle to css?

freedev Over a year ago

Yes. But you should apply also the other suggestions I wrote.

freedev Over a year ago

I followed your link, but as far as I see, you haven't modified anything in the source code... may be better you double check it.

onlineapplab.com · Accepted Answer · 2012-12-09 22:05:32Z

0

You try to use Mootools methods with jQuery. There is no setStyle() method in jQuery.

answered Dec 9, 2012 at 22:05

onlineapplab.com

2632 silver badges9 bronze badges

Comments

j99 · Accepted Answer · 2012-12-09 22:13:44Z

0

Like others have suggested you should use $(..).css( ...) function since setStyle does not exist in jQuery.

I usually also prefer to use $(...).hide() and $(...).show() instead of $(...).css("visibility","hidden") or $(...).css("visibility","visible") since "visibility" still takes space and is the same as setting opacity to 0 - If I hide the element, I don't want it to use any space...

answered Dec 9, 2012 at 22:13

j99

2853 silver badges17 bronze badges

Collectives™ on Stack Overflow

Clock count javascript/php error

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related