...

View Full Version : Is this possible?



Cat123456789
01-10-2012, 08:56 PM
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!

nomanic
01-10-2012, 09:14 PM
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

Cat123456789
01-10-2012, 11:20 PM
Is this the code for it?


<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?

Old Pedant
01-10-2012, 11:34 PM
Well, yes, but who wants to have 3000 Tips of the Day?

Instead of doing

DOY = DOY%3000; // if over 3000 start again at 0
delete that line and add a line *AFTER* the set up of the array:


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;

Cat123456789
01-10-2012, 11:44 PM
Well, yes, but who wants to have 3000 Tips of the Day?

Instead of doing

DOY = DOY%3000; // if over 3000 start again at 0
delete that line and add a line *AFTER* the set up of the array:


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.)

Old Pedant
01-10-2012, 11:51 PM
(Bare with me...

Sorry, I'm not getting nude for just anyone.

<snicker/>

Okay...let me test the code.

Cat123456789
01-10-2012, 11:56 PM
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. :p

Old Pedant
01-11-2012, 12:04 AM
Here, tested and working and simplified a little:


<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>

Cat123456789
01-11-2012, 12:10 AM
Sorry, I'm not getting nude for just anyone.

<snicker/>

Okay...let me test the code.


Here, tested and working and simplified a little:


<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.)

Old Pedant
01-11-2012, 12:50 AM
<br/> tags should be just fine. But you can't break a quoted string in JavaScript.

So you could do something like this:


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.

Old Pedant
01-11-2012, 12:54 AM
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.



'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.

Cat123456789
01-11-2012, 01:19 AM
<br/> tags should be just fine. But you can't break a quoted string in JavaScript.

So you could do something like this:


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?



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 :p) 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.

Old Pedant
01-11-2012, 03:02 AM
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?



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

var today = new Date();

to specify any date you want to test, thus:


var today = new Date( 2012, 11, 31 ); // December 31, 2012

Remember, months are 0 to 11 in JS, not 1 to 12.

Cat123456789
01-11-2012, 04:16 AM
Ummm...it's not obvious?



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

var today = new Date();

to specify any date you want to test, thus:


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!


TuesdayNaNJanuary 10th, 2012:

This is the only problem left (the NaN being randomly asserted.)


<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>

Old Pedant
01-11-2012, 05:11 AM
There is an extra + sign in there:


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.

Cat123456789
01-12-2012, 04:31 AM
You are a life saver. Thank you so much for all of your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum