Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can I make a changing hyperlink?

    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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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:
    Code:
    <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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    May 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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"

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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.
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    May 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    ???

    I assumed you wanted to REPLACE this:
    Code:
    <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:
    Code:
    <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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    May 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, I set up the whole thing like this (I added large spaces to help differentiate between the sections):
    Code:
    <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.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    GET RID of all the old DayCounter code!

    ZAP all of this:
    Code:
    <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!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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:
    Code:
    <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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    May 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You, my friend, are a brilliant coder.

    It works perfectly now.

    Thank you so much.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Huh. If I was all that brilliant I would get
    Code:
    today.getTime() - BASEDATE.getTime();
    mixed up with
    Code:
    BASEDATE.getTime() - today.getTime();
    That was just plain dumb.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •