Quick question: How do I [javascript]?

[Muessig]

So I'm making a website and in one of the section I want a simple layout as you can see here:

 

 

I'm pretty sure I need to use javascript to vary the responses "today is (day)" and "10am til when". The responses are as follows:

 

Monday - Friday

10am til when

 

Saturday

9am til bike

 

Sunday

Maybe, maybe not

 

Can anyone write a simple script that would accomplish this, or point me in the right direction to do this?

[briley]

The page is "read" from the top down, and inline javascript like you have is run as soon as it's read, so <p id="lol"> doesn't exist on the page yet when your javascript runs. You'll need to move the javascript after the element you want to modify (putting javascript tags right before your closing </body> tag is one way to ensure everything else has been loaded first). Javascript libraries like jQuery also have helper functions to delay running code until the entire HTML file has been read.

 

For your other question: you can use the same Date.getUTCDate() call to help you figure out what to print in the "today is (TODAY)" space. Consider it your homework!

Hint: The link has an example that should be very useful.

[Seahorsepip]

var d = new Date();
var n = d.getDay()
if(n == 6) {
    document.getElementById("lol").innerHTML = "9am til bike";
} else if(!n) {
    document.getElementById("lol").innerHTML = "Maybe, maybe not";
} else {
    document.getElementById("lol").innerHTML = "10 am til when";
}

<p id="lol"></p>

This js code should do the job, keep in mind it does not take the possibility that your visitor is from a different timezone into account.

[Muessig]

Wow thanks! This is mainly for a uk-based client, but for the sake of curiosity how would I alter this to take time zones into account?

[Seahorsepip]

Wow thanks! This is mainly for a uk-based client, but for the sake of curiosity how would I alter this to take time zones into account?

var today = new Date();  
var localoffset = -(today.getTimezoneOffset()/60);
var destoffset = -4; 

var offset = destoffset-localoffset;
var d = new Date( new Date().getTime() + offset * 3600 * 1000)

Modify -4 till it shows the correct timezone.

[briley]

Javascript's Date.getDay() will return the date based on the current local time of the browser's computer. If you want to display the GMT day no matter what timezone the browser's computer thinks it's in, you can use Date.getUTCDay(), which takes the browser's local time and adds/subtracts hours based on the timezone setting of the browser's computer to get GMT. Note that both methods are still calculated based on the current date/time/timezone settings of the browser's computer... so if the computer is set to the wrong date or the wrong timezone, both getUTCDay() and getDay() could return incorrect days. It's probably not a big deal for your situation, but it's something to keep in mind.

 

If you're building the website using a server-side language (PHP, ASP.NET, etc), most have built-in date methods that you can use. Calculating the date on the server means that the server date/time is used instead of whatever date/time the browser's computer is set to. This gives you a little more control if you need it.

[Seahorsepip]

Javascript's Date.getDay() will return the date based on the current local time of the browser's computer. If you want to display the GMT day no matter what timezone the browser's computer thinks it's in, you can use Date.getUTCDay(), which takes the browser's local time and adds/subtracts hours based on the timezone setting of the browser's computer to get GMT. Note that both methods are still calculated based on the current date/time/timezone settings of the browser's computer... so if the computer is set to the wrong date or the wrong timezone, both getUTCDay() and getDay() could return incorrect days. It's probably not a big deal for your situation, but it's something to keep in mind.

 

If you're building the website using a server-side language (PHP, ASP.NET, etc), most have built-in date methods that you can use. Calculating the date on the server means that the server date/time is used instead of whatever date/time the browser's computer is set to. This gives you a little more control if you need it.

I indeed server side is the way to go if you want to be totally sure it's the same everywhere.

I also looked at getUTCDay but I had some trouble finding out how to change this utc date to +x hours for a specific timezone so that's why I used the normal date function instead.

[Muessig]

I must be being pretty stupid here guys, but I've included the code and can't get it to display on the page at all. I think I need one bit of code that will say what day it is "Wednesday" or whatever and I need this to just display in a way that I can format it. I then need the second bit of code, which you've provided for me above but I'm not sure what I'm doing wrong...

 

 

The image is washed out because dreamweaver is in the middle of crashing (stupid program) and I've added in the text "today is (DAY)" and "10am til when" myself so I could roughly format the rest of that section.

[perochan]

one rule of thumb is

 

put all script file (js or etc.) or inline js codes after all your HTML codes but before </body> tag.

[i11usive]

one rule of thumb is

 

put all script file (js or etc.) or inline js codes after all your HTML codes but before </body> tag.

Or use jquery - $(document).ready(function () { });

[Muessig]

Okay this was all incredibly useful! I've put my scripted elements at the bottom of the page before the </body> tag and everything is working flawlessly now. Thanks guys!