Can I make a changing hyperlink?

ted.johnson0988

05-29-2012, 09:46 PM

Hello all,

I'm using a javascript "daily counter" (the code for which is at the bottom) and I'm trying to make it into a link. However, I want that link to change every day depending on what the counter reads. (e.g. I want it to link to "/tagged/DAY-10/" with the DAY-10 being the thing that changes each day and the tagged being constant.)
Now, my basic understanding of HTML lets me know that if I try to code it in as "/tagged/'counter'" or something of that nature which is named in the javascript, it simply won't work.

So, my question is, is there any way I make it into a link that changes retroactively?

Thanks so much.

<title>JavaScript Day Counter - Praveen Lobo</title>

<script type="text/javascript">
/**********************************************************************************************
* Day Counter script by Praveen Lobo (http://PraveenLobo.com/techblog/java...er-count-days/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function DayCounter(initDate, id){
****this.beginDate = new Date(initDate);
****this.container = document.getElementById(id);
****this.calculate();
}
*
DayCounter.prototype.calculate=function(){
****var secDiff = Math.round(((new Date()) - this.beginDate)/1000);
****var nextUpdate = 86400 - (secDiff % 86400);
****var tmp = (tmp = secDiff/86400) < 1? 0 : Math.floor(tmp);
****var days = (tmp < 10 ? ("" + tmp) : tmp < 100 ? ("" + tmp) : tmp);
****this.container.innerHTML =
********"Day " + days ;
****var self = this;
****setTimeout(function(){self.calculate();}, (++nextUpdate*1000));
}
*
window.onload=function(){ new DayCounter('May 19, 2012 00:00:00', 'counter'); }
*
</script>
</head>
<body>
<div id="counter">The contends of this DIV tag will be replaced by the counter</div>
</body>

Old Pedant

05-29-2012, 09:50 PM

Please, instead of using **** to indent your code (and I do thank you for that!), instead put [ code] ... [/code] tags around any code (without spaces in the tags) and it will retain the spaces for you (and, in fact, use a monospaced font).

Old Pedant

05-29-2012, 09:54 PM

Anyway, show us the link (I assume you mean an <a href="..."> link) that you want to change.

And when you say you want it to show /tagged/DAY-10/ do you mean that the 10 is just the day of the month?

Actually, if that's all you want, it's easy:

<html>
<body>
<a id="DAYLINK" href="/tagged/DAY-1/"> Today's link </a>

<script type="text/javascript">
var now = new Date();
document.getElementById("DAYLINK").href = "/tagged/DAY-" + now.getDate() + "/";
</script>
</body>
</html>

ted.johnson0988

05-29-2012, 10:01 PM

Yes, I do mean an <a href="URL">TITLE</a> link

However, when I say "/tagged/day-10" I mean the counter will go up to 90 days. So, for example, today it needs to read "/tagged/day-10" but tomorrow it should be "/tagged/day-11"

Old Pedant

05-29-2012, 10:30 PM

Okay, so you need a base starting date.

And what happens on day 91? Does it go back to 1? Or do you need to make sure you have changed the code by then?

I will assume for now that it goes back to 1.

<html>
<body>
<a id="DAYLINK" href="/tagged/DAY-1/"> Today's link </a>

<script type="text/javascript">
// month numbers in JS are 0 to 11, so subtract 1 from "human" month numbers:
var BASEDATE = new Date( 2012, 4, 29, 12, 0, 0 ); // may 29, 2012 noon

var now = new Date(); // right now
var today = new Date( now.getFullYear(), now.getMonth(), now.getDate(), 12, 0, 0 ); // noon

var msdiff = BASEDATE.getTime() - today.getTime();
var daysdiff = msdiff / ( 24 * 60 * 60 + 1000 ); // divide by ms in one day

daysdiff = Math.round( daysdiff ); // this handles crossing a Daylight Savings Time date

daysdiff = daysdiff % 90; // only allow daysdiff to range from 0 to 89

document.getElementById("DAYLINK").href = "/tagged/DAY-" + ( 1 + daysdiff ) + "/";
</script>
</body>
</html>

The code can be shorter, but I did it in steps like that to show you how/why it works.

You can use any BASEDATE you wish. Just make sure to enter it as shown: year, month-1, day. With the time being 12, 0, 0 (which is noon on that BASEDATE).

I chose NOON on the basedate and on "today" to avoid problems with one-hour offsets when we cross a daylight savings time boundary. For the same reason, I round the number of days difference. Thus we might have 17 days 23 hours rounded to 18 days or we might have 18 days 1 hour rounded to 18 days, depending on which way we crossed the DST line.

Then the % (modulo) operator ensures we get a number from 0 to 89. We want 0 to mean "BASEDATE or 90 days from BASEDATE or 180 days from BASEDATE or...".

And, finally, we add 1 to our 0 to 89 number to get 1 to 90 for your URL.

ted.johnson0988

05-29-2012, 11:09 PM

At day 90 I'm simply done with the counter and I won't need the page anymore.

As for the cose you gave me, where should I put that? I tried adding it underneath but it became a separate link instead of just making the counter into a link.

Old Pedant

05-29-2012, 11:29 PM

???

I assumed you wanted to REPLACE this:

<div id="counter">The contends of this DIV tag will be replaced by the counter</div>
So I gave you an example <a> that you would use IN PLACE of that <div>.

If you need the <div> for some other reason, then just leave it there and put my <a> inside the <div>.

Example:

<div id="counter">
Other stuff you need in this div
<a id="DAYLINK" href="/tagged/DAY-1/"> Today's link </a>
More stuff to stay in the div
</div>

ted.johnson0988

05-29-2012, 11:37 PM

Alright, I set up the whole thing like this (I added large spaces to help differentiate between the sections):

<title>JavaScript Day Counter - Praveen Lobo</title>

<script type="text/javascript">
/**********************************************************************************************
* Day Counter script by Praveen Lobo (http://PraveenLobo.com/techblog/javascript-counter-count-days/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function DayCounter(initDate, id){
****this.beginDate = new Date(initDate);
****this.container = document.getElementById(id);
****this.calculate();
}
*
DayCounter.prototype.calculate=function(){
****var secDiff = Math.round(((new Date()) - this.beginDate)/1000);
****var nextUpdate = 86400 - (secDiff % 86400);
****var tmp = (tmp = secDiff/86400) < 1? 0 : Math.floor(tmp);
****var days = (tmp < 10 ? ("" + tmp) : tmp < 100 ? ("" + tmp) : tmp);
****this.container.innerHTML =
********"Day " + days ;
****var self = this;
****setTimeout(function(){self.calculate();}, (++nextUpdate*1000));
}
*
window.onload=function(){ new DayCounter('May 19, 2012 00:00:00', 'counter'); }
*
</script>
</head>
<body>
<div id="counter">Day</div>

</a>

<script type="text/javascript">
// month numbers in JS are 0 to 11, so subtract 1 from "human" month numbers:
var BASEDATE = new Date( 2012, 4, 20, 0, 0, 0 ); // may 20, 2012

var now = new Date(); // right now
var today = new Date( now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0 ); // noon

var msdiff = BASEDATE.getTime() - today.getTime();
var daysdiff = msdiff / ( 24 * 60 * 60 + 1000 ); // divide by ms in one day

daysdiff = Math.round( daysdiff ); // this handles crossing a Daylight Savings Time date

daysdiff = daysdiff % 90; // only allow daysdiff to range from 0 to 89

document.getElementById("DAYLINK").href = "/tagged/DAY-" + ( 1 + daysdiff ) + "/";
</script>

My start date was May 20th, 2012 at midnight (Day 1). However, the link I'm currently getting with the dates is "/tagged/DAY--76/" and I'm not sure how to fix that.

Also, thank you so much for all your help; I know it's probably a hassle.

Old Pedant

05-29-2012, 11:43 PM

GET RID of all the old DayCounter code!

ZAP all of this:

<script type="text/javascript">
/**********************************************************************************************
* Day Counter script by Praveen Lobo (http://PraveenLobo.com/techblog/javascript-counter-count-days/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function DayCounter(initDate, id){
****this.beginDate = new Date(initDate);
****this.container = document.getElementById(id);
****this.calculate();
}
*
DayCounter.prototype.calculate=function(){
****var secDiff = Math.round(((new Date()) - this.beginDate)/1000);
****var nextUpdate = 86400 - (secDiff % 86400);
****var tmp = (tmp = secDiff/86400) < 1? 0 : Math.floor(tmp);
****var days = (tmp < 10 ? ("" + tmp) : tmp < 100 ? ("" + tmp) : tmp);
****this.container.innerHTML =
********"Day " + days ;
****var self = this;
****setTimeout(function(){self.calculate();}, (++nextUpdate*1000));
}
*
window.onload=function(){ new DayCounter('May 19, 2012 00:00:00', 'counter'); }
*
</script>
So long as it is in there, it will try to overwrite what my code is trying to do!

Old Pedant

05-29-2012, 11:51 PM

And then use the following fixed code.

I had one spot of total idiocy (I was subtracting the two date back-assward) and one typo (a + which should have been *).

This code now seems to work:

<html>
<body>
<a id="DAYLINK">Whatever you want here</a>

<script type="text/javascript">
// month numbers in JS are 0 to 11, so subtract 1 from "human" month numbers:
var BASEDATE = new Date( 2012, 4, 20, 0, 0, 0 ); // may 20, 2012

var now = new Date(); // right now
var today = new Date( now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0 ); // noon

var msdiff = today.getTime() - BASEDATE.getTime();
var daysdiff = msdiff / ( 24 * 60 * 60 * 1000 ); // divide by ms in one day

daysdiff = Math.round( daysdiff ); // this handles crossing a Daylight Savings Time date

daysdiff = daysdiff % 90; // only allow daysdiff to range from 0 to 89

document.getElementById("DAYLINK").href = "/tagged/DAY-" + ( 1 + daysdiff ) + "/";
</script>
</body>
</html>

The link become /tagged/DAY-10/ for today. Assuming you wanted DAY-1 for May 20th, that is correct.

Old Pedant

05-29-2012, 11:53 PM

Oh...if you need it to be /tagged/DAY-07/ (for example) instead of just DAY-7 then we need to make a minor fix:

<html>
<body>
<a id="DAYLINK">Whatever you want here</a>

<script type="text/javascript">
// month numbers in JS are 0 to 11, so subtract 1 from "human" month numbers:
var BASEDATE = new Date( 2012, 4, 20, 0, 0, 0 ); // may 20, 2012

var now = new Date(); // right now
var today = new Date( now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0 ); // noon

var msdiff = today.getTime() - BASEDATE.getTime();
var daysdiff = msdiff / ( 24 * 60 * 60 * 1000 ); // divide by ms in one day

daysdiff = Math.round( daysdiff ); // this handles crossing a Daylight Savings Time date

daysdiff = daysdiff % 90; // only allow daysdiff to range from 0 to 89
var days = daysdiff + 1;
if ( days < 10 ) days = "0" + days;

document.getElementById("DAYLINK").href = "/tagged/DAY-" + days + "/";
</script>
</body>
</html>

ted.johnson0988

05-30-2012, 12:30 AM

You, my friend, are a brilliant coder.

It works perfectly now.

Thank you so much.

Old Pedant

05-30-2012, 12:35 AM

Huh. If I was all that brilliant I would get
today.getTime() - BASEDATE.getTime();

mixed up with

BASEDATE.getTime() - today.getTime();

That was just plain dumb.