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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Is this possible?

    Does anyone know of a way to code something, using only HTML/CSS/Javscript that pulls different info from a document to be displayed depending on what the date is? I've fiddled around with some things, but I'm not quite sure where to start with this. If anyone could help, that would be amazing! Thanks!

  • #2
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    we often do a quote of that day on here, its something thats often asked for. In that you set up an array, with a different quote for each day of the week/month/year/whatever and then display the appropriate quote according to the dat given, would something like that be suitable?

    if so its been written and rewritten on here many times in many different ways, just choose the one that suits you from a search of "quote of the day" or if you prefer just ask someone to post the code here, then either I or someone else will supply it
    <DmncAtrny> I will write on a huge cement block "BY ACCEPTING THIS BRICK THROUGH YOUR WINDOW, YOU ACCEPT IT AS IS AND AGREE TO MY DISCLAIMER OF ALL WARRANTIES, EXPRESS OR IMPLIED, AS WELL AS DISCLAIMERS OF ALL LIABILITY, DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL, THAT MAY ARISE FROM THE INSTALLATION OF THIS BRICK INTO YOUR BUILDING."
    <DmncAtrny> And then hurl it through the window of a Sony officer
    <DmncAtrny> and run like hell

    Portfolio, Tutorials - http://www.nomanic.biz/

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Is this the code for it?

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function showHadith() {
    Date.prototype.getDOY = function() {
    var startdate = new Date(2011,1,6);  // months are 0-11  Start Date is 6th February 2011
    return Math.floor((this - startdate) / 86400000);
    } 
    
    var today = new Date();
    var DOY = today.getDOY(); // days after 06/02/2011
    DOY = DOY%3000;  // if over 3000 start again at 0
    
    var TOD = [];  // Tip Of the Day
    TOD[0] = "The cheese in a mousetrap is always free";
    TOD[1] = "Drink Coca-Cola ice cold";
    TOD[2] = "Clean your teeth daily";
    TOD[3] = "Eat more fruit";
    TOD[4] = "A stitch in time saves nine";
    TOD[5] = "Marry in  haste, repent at leisure";
    
    // and so on up to TOD[3000] 
    
    var weekDays = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
    var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
    var dd = today.getDate();
    var dy = today.getDay();
    var mm = today.getMonth();
    var yy = today.getFullYear();
    
    var daySuffix = 'th';
    if(dd != 11 && dd != 12 && dd != 13) {ddx = dd % 10}
    else {ddx = dd}
    if (ddx == 1) { daySuffix = 'st' }
    if (ddx == 2) { daySuffix = 'nd' }
    if (ddx == 3) { daySuffix = 'rd' }
    
    var tipOfDay = "Tip of the day for " + weekDays[dy] + " " + dd  + daySuffix + " " + months[mm] + " " + yy + ":- &nbsp&nbsp  " + TOD[DOY]
    document.getElementById("theHadith").innerHTML = tipOfDay
    }
    </script>
    
    </head>
    <body onload = "showHadith()">
    
    <span id = "theHadith"></span>
    
    </body>
    </html>
    I might be able to manipulate it to my needs if I had to. The only thing is that I'd have to manually input all the information (over 300 different things to pull on different days). Is there no easier way?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Well, yes, but who wants to have 3000 Tips of the Day?

    Instead of doing
    Code:
    DOY = DOY%3000;  // if over 3000 start again at 0
    delete that line and add a line *AFTER* the set up of the array:
    Code:
    var TOD = [];  // Tip Of the Day
    TOD[0] = "The cheese in a mousetrap is always free";
    TOD[1] = "Drink Coca-Cola ice cold";
    TOD[2] = "Clean your teeth daily";
    TOD[3] = "Eat more fruit";
    TOD[4] = "A stitch in time saves nine";
    TOD[5] = "Marry in  haste, repent at leisure";
    // add as many or as few as you please
    
    // then do this:
    DOY = DOY % TOD.length;
    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.

  • Users who have thanked Old Pedant for this post:

    Cat123456789 (01-12-2012)

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, yes, but who wants to have 3000 Tips of the Day?

    Instead of doing
    Code:
    DOY = DOY%3000;  // if over 3000 start again at 0
    delete that line and add a line *AFTER* the set up of the array:
    Code:
    var TOD = [];  // Tip Of the Day
    TOD[0] = "The cheese in a mousetrap is always free";
    TOD[1] = "Drink Coca-Cola ice cold";
    TOD[2] = "Clean your teeth daily";
    TOD[3] = "Eat more fruit";
    TOD[4] = "A stitch in time saves nine";
    TOD[5] = "Marry in  haste, repent at leisure";
    // add as many or as few as you please
    
    // then do this:
    DOY = DOY % TOD.length;
    When I test it in a browser, it will show the title/date, but then it says that where the text (or in this code's case, the tip) is, is undefined.
    (Bare with me. I'm kind of new to Javascript.)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    (Bare with me...
    Sorry, I'm not getting nude for just anyone.

    <snicker/>

    Okay...let me test the code.
    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.

  • Users who have thanked Old Pedant for this post:

    Cat123456789 (01-12-2012)

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Sorry, I'm not getting nude for just anyone.

    <snicker/>

    Okay...let me test the code.
    I did change the var start date to match today's date, just so you know. And very funny.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Here, tested and working and simplified a little:
    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function showHadith() {
        Date.prototype.getDOY = function() 
        {
            var startdate = new Date(2012,0,1);  // Start Date is 1 January 2012
            return Math.floor((this - startdate) / 86400000);
        } 
    
        var today = new Date();
        var DOY = today.getDOY(); // days after 06/02/2011
    
        var TOD = [
            "The cheese in a mousetrap is always free",
            "Never trust anyone over 30 tons",
            "Don't count your chickens until after Sunday dinner",
            "Stay alert!  Too many people have stopped being lerts.",
            "A stitch in time saves nine hours with right time warp in place",
            "Marry in  haste, repent at divorce court"
        ];
    
        var msg = TOD[ DOY % TOD.length ];
    
        var weekDays = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
        var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
        var dd = today.getDate();
        var dy = today.getDay();
        var mm = today.getMonth();
        var yy = today.getFullYear();
    
        var daySuffix = 'th';
        if(dd != 11 && dd != 12 && dd != 13) {ddx = dd % 10} else {ddx = dd}
        if (ddx == 1) { daySuffix = 'st' }
        if (ddx == 2) { daySuffix = 'nd' }
        if (ddx == 3) { daySuffix = 'rd' }
    
        var tipOfDay = "Tip of the day for " + weekDays[dy] + " " + dd  + daySuffix 
                     + " " + months[mm] + " " + yy + ":- &nbsp&nbsp  " + msg;
        document.getElementById("theHadith").innerHTML = tipOfDay
    }
    window.onload = showHadith;
    </script>
    </head>
    <span id = "theHadith"></span>
    
    </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.

  • #9
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Sorry, I'm not getting nude for just anyone.

    <snicker/>

    Okay...let me test the code.
    Quote Originally Posted by Old Pedant View Post
    Here, tested and working and simplified a little:
    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function showHadith() {
        Date.prototype.getDOY = function() 
        {
            var startdate = new Date(2012,0,1);  // Start Date is 1 January 2012
            return Math.floor((this - startdate) / 86400000);
        } 
    
        var today = new Date();
        var DOY = today.getDOY(); // days after 06/02/2011
    
        var TOD = [
            "The cheese in a mousetrap is always free",
            "Never trust anyone over 30 tons",
            "Don't count your chickens until after Sunday dinner",
            "Stay alert!  Too many people have stopped being lerts.",
            "A stitch in time saves nine hours with right time warp in place",
            "Marry in  haste, repent at divorce court"
        ];
    
        var msg = TOD[ DOY % TOD.length ];
    
        var weekDays = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
        var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
        var dd = today.getDate();
        var dy = today.getDay();
        var mm = today.getMonth();
        var yy = today.getFullYear();
    
        var daySuffix = 'th';
        if(dd != 11 && dd != 12 && dd != 13) {ddx = dd % 10} else {ddx = dd}
        if (ddx == 1) { daySuffix = 'st' }
        if (ddx == 2) { daySuffix = 'nd' }
        if (ddx == 3) { daySuffix = 'rd' }
    
        var tipOfDay = "Tip of the day for " + weekDays[dy] + " " + dd  + daySuffix 
                     + " " + months[mm] + " " + yy + ":- &nbsp&nbsp  " + msg;
        document.getElementById("theHadith").innerHTML = tipOfDay
    }
    window.onload = showHadith;
    </script>
    </head>
    <span id = "theHadith"></span>
    
    </body>
    </html>
    That's perfect! Thanks so much! That will pull each line on the next consecutive date, correct? Also, is there any way to insert breaks between certain lines of text that I'll be adding in? (It doesn't seem to like the attribute, <br /> tag, or the <pre></pre> tags.)
    Last edited by Cat123456789; 01-11-2012 at 01:35 AM.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    <br/> tags should be just fine. But you can't break a quoted string in JavaScript.

    So you could do something like this:
    Code:
        var TOD = [
            "The cheese in a mousetrap is always free",
            "Never trust anyone over 30 tons",
            "Don't count your chickens until after Sunday dinner",
            "Stay alert!  Too many people have stopped being lerts.",
            "A stitch in time saves nine hours with right time warp in place",
            "Marry in  haste, repent at divorce court",
            ( "T'was brillig and the slithy toves<br/>"
              + "Did gyre and gymbal in the wabe.<br/>"
              + "All mimsy were the borogoves,<br/>And the mome rath outgrabe." ),
            "When in the course of human events we find the necessary..."
        ];
    You can just put the <br/> in the middle of the text, as in the 3rd red line there, or you
    can break the lines by terminating one with " and then appending more text with + "...", as shown in the other red lines.

    The parentheses around the multiple lines (in red) aren't needed, but they may help clarify the groups of lines. Readability of code is worth a lot.
    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.

  • Users who have thanked Old Pedant for this post:

    Cat123456789 (01-12-2012)

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Note: You can put any kind of HTML markup tags in your strings. Some may not be valid when then placed inside of a <span>. So you might want to use a <div> for your "container" in place of the <span>.

    Note that in JS, strings are delimited by *EITHER* "..." or '...' and within "..." you can use apostrophes as needed and within '....' you can use quotes as needed.

    Code:
         'John said, "See? I\'ve used both inside the apostrophes!" with glee.'
    Note that you can use an apostrophe inside of '...' by escaping it thus: \'
    Same applies to using \" inside of "....". So lots of flexibility.
    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.

  • Users who have thanked Old Pedant for this post:

    Cat123456789 (01-12-2012)

  • #12
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    <br/> tags should be just fine. But you can't break a quoted string in JavaScript.

    So you could do something like this:
    Code:
        var TOD = [
            "The cheese in a mousetrap is always free",
            "Never trust anyone over 30 tons",
            "Don't count your chickens until after Sunday dinner",
            "Stay alert!  Too many people have stopped being lerts.",
            "A stitch in time saves nine hours with right time warp in place",
            "Marry in  haste, repent at divorce court",
            ( "T'was brillig and the slithy toves<br/>"
              + "Did gyre and gymbal in the wabe.<br/>"
              + "All mimsy were the borogoves,<br/>And the mome rath outgrabe." ),
            "When in the course of human events we find the necessary..."
        ];
    You can just put the <br/> in the middle of the text, as in the 3rd red line there, or you
    can break the lines by terminating one with " and then appending more text with + "...", as shown in the other red lines.

    The parentheses around the multiple lines (in red) aren't needed, but they may help clarify the groups of lines. Readability of code is worth a lot.
    Awesome! And are you sure this will pull them on different days sequentially?


    Code:
    var tipOfDay = "<strong>Word of the Day</strong><br />" + weekDays[dy] + "," + dd  + daySuffix 
                     + " " + months[mm] + " " + yy + ":- &nbsp&nbsp  " + msg;
    document.getElementById("theWords").innerHTML = tipOfDay
    }
    For this little bit of coding here, it keeps getting messed up when I try and move the month before the date. (Americans ) Also, I'm not sure what's doing this, but when you test the code, right after the date, there is both a colon and a dash. I don't know where the dash is coming from, but I only want the colon there.
    Last edited by Cat123456789; 01-11-2012 at 02:42 AM.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Code:
    var tipOfDay = "<strong>Word of the Day</strong><br />" + weekDays[dy] + "," + dd  + daySuffix 
                     + " " + months[mm] + " " + yy + ":- &nbsp&nbsp  " + msg;
    document.getElementById("theWords").innerHTML = tipOfDay
    }
    For this little bit of coding here, it keeps getting messed up when I try and move the month before the date. (Americans ) Also, I'm not sure what's doing this, but when you test the code, right after the date, there is both a colon and a dash. I don't know where the dash is coming from, but I only want the colon there.
    Ummm...it's not obvious?

    Code:
    var tipOfDay = "<strong>Word of the Day</strong><br />" + weekDays[dy] +   
                     + ", " + months[mm] + " " + dd  + daySuffix+ ", " + yy 
                     + ": &nbsp&nbsp  " + msg;
    document.getElementById("theWords").innerHTML = tipOfDay
    }
    If you want to test it, wait until tomorrow and see that the message changes.

    Or change
    Code:
    var today = new Date();
    to specify any date you want to test, thus:
    Code:
    var today = new Date( 2012, 11, 31 ); // December 31, 2012
    Remember, months are 0 to 11 in JS, not 1 to 12.
    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.

  • Users who have thanked Old Pedant for this post:

    Cat123456789 (01-11-2012)

  • #14
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Ummm...it's not obvious?

    Code:
    var tipOfDay = "<strong>Word of the Day</strong><br />" + weekDays[dy] +   
                     + ", " + months[mm] + " " + dd  + daySuffix+ ", " + yy 
                     + ": &nbsp&nbsp  " + msg;
    document.getElementById("theWords").innerHTML = tipOfDay
    }
    If you want to test it, wait until tomorrow and see that the message changes.

    Or change
    Code:
    var today = new Date();
    to specify any date you want to test, thus:
    Code:
    var today = new Date( 2012, 11, 31 ); // December 31, 2012
    Remember, months are 0 to 11 in JS, not 1 to 12.
    Thanks so much for all of your help!

    Code:
    TuesdayNaNJanuary 10th, 2012:
    This is the only problem left (the NaN being randomly asserted.)

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function showWords() {
        Date.prototype.getDOY = function() 
        {
            var startdate = new Date(2012,0,1);  // Start Date is 1 January 2012
            return Math.floor((this - startdate) / 86400000);
        } 
    
        var today = new Date();
        var DOY = today.getDOY(); // days after 1/10/2012
        var TOD = [
            ( "CLAMOR (Noun): klam-er<br />"
    					+ "Definition: Loud and persistent outcry from many people.<br />" 
    					+ "Sentence: The children <u>clamored</u> for more ice cream.<br />" )
    		
        ];
    
        var msg = TOD[ DOY % TOD.length ];
    
        var weekDays = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
        var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
        var dd = today.getDate();
        var dy = today.getDay();
        var mm = today.getMonth();
        var yy = today.getFullYear();
    
        var daySuffix = 'th';
        if(dd != 11 && dd != 12 && dd != 13) {ddx = dd % 10} else {ddx = dd}
        if (ddx == 1) { daySuffix = 'st' }
        if (ddx == 2) { daySuffix = 'nd' }
        if (ddx == 3) { daySuffix = 'rd' }
    	
    var wordOfDay = "<strong>Word of the Day</strong><br />" + weekDays[dy] +   
                     + ", " + months[mm] + " " + dd  + daySuffix+ ", " + yy 
                     + ": &nbsp&nbsp  " + msg;
    document.getElementById("theWords").innerHTML = wordOfDay
    }
    
    window.onload = showWords;
    </script>
    
    </head>
    <span id= "theWords"></span>
    
    </body>
    </html>
    Last edited by Cat123456789; 01-11-2012 at 05:40 AM.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    There is an extra + sign in there:
    Code:
    var wordOfDay = "<strong>Word of the Day</strong><br />" + weekDays[dy] +   
                     + ", " + months[mm] + " " + dd  + daySuffix+ ", " + yy 
                     + ": &nbsp&nbsp  " + msg;
    Kill either one (but only one) of them.
    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.

  • Users who have thanked Old Pedant for this post:

    Cat123456789 (01-12-2012)


  •  
    Page 1 of 2 12 LastLast

    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
    •