0

Hello I am trying to have my clock and my countdown timer on the same page so people/users can see when I am done with my game and for them to have the correct time with the countdown timer also. Here is the code. They both work separately but when the are both put on a .php page only the bottom one (countdown timer) works and if I do JQuery.noconflict to the timer the clock works but the countdown doesn't. 

<!-- Clock Part 1 - Holder for Display of Clock -->

<span id="tP">&nbsp;</span>

<!-- Clock Part 1 - Ends Here -->



<!-- Clock Part 2 - Put Anywhere AFTER Part 1 -->

<script type="text/javascript">
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function tS(){ x=new Date(); x.setTime(x.getTime()); return x; } 
function lZ(x){ return (x>9)?x:'0'+x; } 
function tH(x){ if(x==0){ x=12; } return (x>12)?x-=12:x; } 
function dE(x){ if(x==1||x==21||x==31){ return 'st'; } if(x==2||x==22){ return 'nd'; } if(x==3||x==23){ return 'rd'; } return 'th'; } 
function y2(x){ x=(x<500)?x+1900:x; return String(x).substring(2,4) } 
function dT(){ window.status=''+eval(oT)+''; document.title=''+eval(oT)+''; document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); } 
function aP(x){ return (x>11)?'pm':'am'; } 
var dN=new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat'),mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),oT="dN[tS().getDay()]+' '+tS().getDate()+dE(tS().getDate())+' '+mN[tS().getMonth()]+' '+y2(tS().getYear())+' '+':'+':'+' '+tH(tS().getHours())+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())+aP(tS().getHours())";
if(!document.all){ window.onload=dT; }else{ dT(); }
</script>

<!-- Clock Part 2 - Ends Here  -->





<script type="text/javascript">
//###################################################################
// Author: ricocheting.com
// Version: v3.0
// Date: 2014-09-05
// Description: displays the amount of time until the "dateFuture" entered below.

var CDown = function() {
    this.state=0;// if initialized
    this.counts=[];// array holding countdown date objects and id to print to {d:new Date(2013,11,18,18,54,36), id:"countbox1"}
    this.interval=null;// setInterval object
}

CDown.prototype = {
    init: function(){
        this.state=1;
        var self=this;
        this.interval=window.setInterval(function(){self.tick();}, 1000);
    },
    add: function(date,id){
        this.counts.push({d:date,id:id});
        this.tick();
        if(this.state==0) this.init();
    },
    expire: function(idxs){
        for(var x in idxs) {
            this.display(this.counts[idxs[x]], "Sorry, hopfully we are open in a couple minutes");
            this.counts.splice(idxs[x], 1);
        }
    },
    format: function(r){
        var out="";
        if(r.d != 0){out += r.d +" "+((r.d==1)?"Day":"Days")+", ";}
        if(r.h != 0){out += r.h +" "+((r.h==1)?"Hour":"Hours")+", ";}
        out += r.m +" "+((r.m==1)?"Min":"Mins")+", ";
        out += r.s +" "+((r.s==1)?"Sec":"Secs")+", ";

        return out.substr(0,out.length-2);
    },
    math: function(work){
        var y=w=d=h=m=s=ms=0;

        ms=(""+((work%1000)+1000)).substr(1,3);
        work=Math.floor(work/1000);//kill the "milliseconds" so just secs

        y=Math.floor(work/31536000);//years (no leapyear support)
        w=Math.floor(work/604800);//weeks
        d=Math.floor(work/86400);//days
        work=work%86400;

        h=Math.floor(work/3600);//hours
        work=work%3600;

        m=Math.floor(work/60);//minutes
        work=work%60;

        s=Math.floor(work);//seconds

        return {y:y,w:w,d:d,h:h,m:m,s:s,ms:ms};
    },
    tick: function(){
        var now=(new Date()).getTime(),
            expired=[],cnt=0,amount=0;

        if(this.counts)
        for(var idx=0,n=this.counts.length; idx<n; ++idx){
            cnt=this.counts[idx];
            amount=cnt.d.getTime()-now;//calc milliseconds between dates

            // if time is already past
            if(amount<0){
                expired.push(idx);
            }
            // date is still good
            else{
                this.display(cnt, this.format(this.math(amount)));
            }
        }

        // deal with any expired
        if(expired.length>0) this.expire(expired);

        // if no active counts, stop updating
        if(this.counts.length==0) window.clearTimeout(this.interval);

    },
    display: function(cnt,msg){
        document.getElementById(cnt.id).innerHTML=msg;
    }
};

window.onload=function(){
    var cdown = new CDown();
                    //Year,Month,Day,Hour,Min,Sec\\ (Jan - 0 Fed - 1 ++ Dec - 11, 12 is replaced with 0 for Jan) 
    cdown.add(new Date(2014,9,29,12,18,0), "countbox1");
};
</script>

<h2> Time until ^^<<>> opens!</h2>
<div id="countbox1"></div>

Fixed the problem Thanks to @Scronide , @James Thorpe , and @Ultimater. I put all of your methods into place and kept them separate and used @Scronide final method. Thanks again.

GrimmRP
  • 43
  • 8
  • 1
    Neither one uses jQuery so there should be no jQuery conflict. It may be they just interfere with each other. Note: For jQuery use a DOM ready handler and not `window.onload` as you are replacing it. – iCollect.it Ltd Oct 29 '14 at 16:53

3 Answers3

1

They're both assigning to window.onload so the second is overwriting the function of the first.

If you are using jquery, instead of assigning to window.onload, you can instead use:

/* first component */

//initialisation for first component
$(function() {
    dT();
});

/* second component */

//initialisation for second component
$(function() {
    var cdown = new CDown();
    //Year,Month,Day,Hour,Min,Sec\\ (Jan - 0 Fed - 1 ++ Dec - 11, 12 is replaced with 0 for Jan) 
    cdown.add(new Date(2014,9,29,12,18,0), "countbox1");
});
James Thorpe
  • 31,411
  • 5
  • 72
  • 93
0

Both use window.onload. Simply join the two functions into one.

Ultimater
  • 4,647
  • 2
  • 29
  • 43
  • Really thats all I had to do? *facepalm* I need to understand Java and JQuery better. Thanks by the way. – GrimmRP Oct 29 '14 at 16:56
  • Yep, just add `dT();` into the body of the second onload callback function body. – Ultimater Oct 29 '14 at 16:58
  • Whilst this would work, in the long run I'd recommend keeping the code for individual components separate and using event binding. If at some point in the future you happen to include something else that itself assigns to `window.onload`, you're back to square one... – James Thorpe Oct 29 '14 at 17:01
  • I kept them separate but added dT(); to the second script and now they both work, thank you Ultimater and @James Thorpe. If I had 15 rep I would give you both +1 for the help. *cheers* – GrimmRP Oct 29 '14 at 17:05
  • @JamesThorpe When working with multiple scripts, yes, as far as best practices goes, event binding is much more dynamic and preferred for the reason you mentioned. But `window.onload` is a perfectly valid solution in a controlled environment without the browser compatibility headache. @user3827023 Just to be clear, Java != JavaScript. Java is a completely different beast altogether with ugly null pointer exceptions to drive the most disciplined of programmers insane. – Ultimater Oct 29 '14 at 17:21
  • 1
    If you must refer to JavaScript in the shortened form, call it `JS` please. For the differences between Java and JavaScript, refer to: http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java – Ultimater Oct 29 '14 at 17:33
0

Neither of these scripts use any jQuery, so it isn't a jQuery conflict. The problem is that they are both setting a function to window.onload, so the last script will always override the one before it.

I suggest removing the if(!document.all){ window.onload=dT; }else{ dT(); } line from the end of the clock script and adding dT(); inside the window.onload assignment from the second script.

So you would have something like:

window.onload=function(){
  dT();
  var cdown = new CDown();
  cdown.add(new Date(2014,9,29,12,18,0), "countbox1");
};
scronide
  • 12,012
  • 3
  • 28
  • 33