How To Make Dynamic Content [AlleyCat042]

[Lonin]

Created by AlleyCat042

What is dynamic content?
Dynamic content is content that changes in response to things. Dynamic content is a great way to keep users interested and coming back for more. I'll post some examples that you can use freely in this tutorial. And I'll also probably update this with cookie-related stuff after I take a quick refresher in JS.
[size=x-small]I've been too deep into PHP-land to remember JavaScript too clearly right now, haha.[/size]

Dynamic Content by Time of Day
Changing the content by time of day is great, because users will be forced to check back often in order to get special pets, items, or quests. This can be achieved easily with a pretty simple code which I shall provide for you here:

Code:

<script type="text/javascript">
var now = new Date();
var hours = now.getHours();

//This text will display in the morning, between 6 and 11.
if (hours > 6 && hours < 12){
document.write ('Good morning!');
}
//This text will display in the afternoon, between 12 and 6PM.
else if (hours > 11 && hours < 18){
document.write ('Good afternoon!');
}
//This text will display in the night, between 7PM and 6AM.
else if (hours > 17 || hours < 7){
document.write ('Good night!');
}
</script>

NOTE: This code will change one piece of text (or an image or even an image map!) according to the time of day. You can change the times to your liking, just remember that it's in 24-hour format.

If you want to have a piece of hidden text only display during a certain period of time, use this modified version:

Code:

<script type="text/javascript">
var now = new Date();
var hours = now.getHours();

//This text will display between 12 and 1PM.
if (hours > 11 && hours < 14){
document.write ('This is the hidden text!');
}
</script>

Dynamic Content by Month
This does the same thing as the Time of Day code, but it changes with each month! This is also great to describe changing seasons on your site.

Code:


<script type="text/javascript">
var d = new Date();
var n = d.getMonth();
//This text will display in Jan.
if (n == 0){
document.write ('It\'s January!');
}
//This text will display in Feb.
else if (n == 1){
document.write ('It\'s February!');
}
//This text will display in March.
else if (n == 2){
document.write ('It\'s March!');
}
//This text will display in April.
else if (n == 3){
document.write ('It\'s April!');
}
//This text will display in May.
else if (n == 4){
document.write ('It\'s May!');
}
//This text will display in June.
else if (n == 5){
document.write ('It\'s June!');
}
//This text will display in July.
else if (n == 6){
document.write ('It\'s July!');
}
//This text will display in August.
else if (n == 7){
document.write ('It\'s August!');
}
//This text will display in Sept.
else if (n == 8){
document.write ('It\'s September!');
}
//This text will display in Oct.
else if (n == 9){
document.write ('It\'s October!');
}
//This text will display in November.
else if (n == 10){
document.write ('It\'s November!');
}
//This text will display in Dec.
else if (n == 11){
document.write ('It\'s December!');
}
</script>


These codes can be used to achieve lots of different things, if used cleverly. You can also edit things such as background image or color, links, and other things with this code.

Dynamic Content via Timer
Maybe you want your users to have to wait a certain amount of time before receiving something. For example, it may take 5 minutes to explore an area before coming back with the spoils. To achieve this you can use the following code, which will start a time and then do something when the time is up. You can either make a popup display, or simply have new text display on the page.

POPUP ALERT VERSION:

Code:

Click the button to start the timer. You will receive your prize after 5 seconds!<br />
<button onclick="startTime()">Click Here</button>

<script type="text/javascript">
function startTime()
{
//Delete the following line if you don't want it to display
document.write("Timer in progress...");
//The amount of time is in milliseconds
setTimeout(function(){alert("Here is your prize!")},5000);
}
</script>


TEXT VERSION:

Code:

Click the button to start the timer. You will receive your prize after 5 seconds!<br />
<button onclick="startTime()">Click Here</button>

<script type="text/javascript">
function startTime()
{
//Delete the following line if you don't want it to display
document.write("Timer in progress...<br />");
//The amount of time is in milliseconds
setTimeout(function(){document.write("Here is your prize!")},5000);
}
</script>


"Waiting period" times and suggestions for the "daily" code coming soon.