• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Quick question: How do I [javascript]?

Question

Muessig    1

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

 

post-69305-0-02124800-1422301525.png

 

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?

Share this post


Link to post
Share on other sites

10 answers to this question

Recommended Posts

  • 0
briley    5

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.

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Muessig    1

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?

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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.

Share this post


Link to post
Share on other sites
  • 0
briley    5

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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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.

Share this post


Link to post
Share on other sites
  • 0
Muessig    1

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

 

post-69305-0-18521500-1422379744.png

 

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.

Share this post


Link to post
Share on other sites
  • 0
perochan    151

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.

Share this post


Link to post
Share on other sites
  • 0
+i11usive    6,086

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 () { });

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Muessig    1

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.