...

View Full Version : Resolved How do I set the document.write font colour with this script.



effpeetee
06-23-2009, 04:48 PM
I have been trying for quite a while, trying to include the font color in the attached script.


<script type="text/javascript">
<!--
function greet() {
var todaydate = new Date();
var timeis = todaydate.getTime();
todaydate.setTime(timeis);
var houris = todaydate.getHours();
if (houris >17) display = "Good Evening - Welcome to the Taylor Website";
else if (houris >11) display = "Good Afternoon - Welcome to the Taylor Website";
else display = "Good Morning - Welcome to the Taylor Website";
var title = document.title;
var welcome = (display);
document.write(welcome);
}
-->
</script>

Four massive tomes of Javascript tuition have failed to help me. Perhaps it cannot be done. More likely, my one brain cell has gone to sleep.

I know that I can fake it in the html, but I do not want to do that. That would be cheating in my book.:o

I would appreciate any guidance. Ultra was easy after this:D

Frank

Philip M
06-23-2009, 04:57 PM
A) Don't use document.write(). Use a <div> instead.

B) Set fonts, colors etc. with CSS.

effpeetee
06-23-2009, 05:00 PM
A) Don't use document.write(). Use a <div> instead.

B) Set fonts, colors etc. with CSS.
Yes. I know I can do that, but I am supposed to be learning javascript.

Frank

Philip M
06-23-2009, 05:08 PM
<body onload = "greet()">

<div id = "greeting" style="font-size:24pt; font-weight:800; color:red; background:lime; border:3px dashed blue"><div>

<script type="text/javascript">

function greet() {
var todaydate = new Date();
var timeis = todaydate.getTime();
todaydate.setTime(timeis);
var houris = todaydate.getHours();
if (houris >17) display = "Good Evening - Welcome to the Taylor Website";
else if (houris >11) display = "Good Afternoon - Welcome to the Taylor Website";
else display = "Good Morning - Welcome to the Taylor Website";
var title = document.title;
var welcome = (display);
document.getElementById("greeting").innerHTML = welcome;
}


</script>

Using Javascript alone you can only add the deprecated <font> etc. tags.

effpeetee
06-23-2009, 05:31 PM
<body onload = "greet()">

<div id = "greeting" style="font-size:24pt; font-weight:800; color:red; background:lime; border:3px dashed blue"><div>

<script type="text/javascript">

function greet() {
var todaydate = new Date();
var timeis = todaydate.getTime();
todaydate.setTime(timeis);
var houris = todaydate.getHours();
if (houris >17) display = "Good Evening - Welcome to the Taylor Website";
else if (houris >11) display = "Good Afternoon - Welcome to the Taylor Website";
else display = "Good Morning - Welcome to the Taylor Website";
var title = document.title;
var welcome = (display);
document.getElementById("greeting").innerHTML = welcome;
}


</script>

Using Javascript alone you can only add the deprecated <font> etc. tags.
This is what I have come up with. Is it not OK?

You can see it here. (http://exitfegs.co.uk/javaindex.html)


<script type="text/javascript">

function greet() {
var todaydate = new Date();
var timeis = todaydate.getTime();
todaydate.setTime(timeis);
var houris = todaydate.getHours();
if (houris >17) display = "Good Evening - Welcome to the Taylor Website";
else if (houris >11) display = "Good Afternoon - Welcome to the Taylor Website";
else display = "Good Morning - Welcome to the Taylor Website";
var title = document.title;
var welcome = (display);
document.write(display.fontcolor("red")

)}</script>


You can see it here. (http://www.exitfegs.co.uk/javaindex.html)

Frank

effpeetee
06-23-2009, 06:00 PM
This source helped (https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Objects/String/Fontcolor) me to get this far.
Frank

Philip M
06-23-2009, 06:11 PM
You will notice that fontcolor is non-standard.

It causes a string to be displayed in the specified color as if it were in a <FONT COLOR="color"> tag. You will surely be aware that <FONT COLOR> is deprecated.

It is your website, but why spend time and effort learning how to do it the wrong way rather than the right way? CSS is the correct method in 2009. You are using CSS in any case.

effpeetee
06-23-2009, 06:25 PM
Sorry, I have not made myself clear. The object was just to explore Javascript. Personally. I do not want to alter the colour. I just wanted to know if it could be done. My knowledge of Javascript is very rudimentary.

I often use my site to test out some new code. That way I can get other people involved, including non coders.

On the other topic. I like code to be valid, but I am not a pedant. Even so. I do try to be correct.

Thanks for your help, it is appreciated. I will try using your code on the page tomorrow.

This is my actual site. (http://exitfegs.co.uk/)
I am in the process of tidying it up codewise.

Regards,

Frank

12 Pack Mack
06-23-2009, 07:07 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var GMToffset = -4; // Your current GMT offset, whether Standard or Daylight

function init(){

var greetingPrefix = "Good ";
var greetingSuffix = " Welcome to the Taylor Website";
var now = new Date();
now.setHours(GMToffset + now.getHours() + now.getTimezoneOffset() / 60);
var currHour = now.getHours();
var partOfDay = currHour > 11 ? "Afternoon" :
currHour > 17 ? "Evening" :
"Morning";
document.getElementById('greeting').innerHTML = greetingPrefix + partOfDay + greetingSuffix;
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

#greeting {font-size: 14pt; font-family: tahoma; color: #ff8c00; text-align: center; width: 90%;
margin-left: auto; margin-right: auto; background-color: #afeeee; padding-top: 3px;
padding-bottom: 3px; border: 1px solid black;}

</style>
</head>
<body>
<div id="greeting"></div>
</body>
</html>

effpeetee
06-23-2009, 07:45 PM
Thank you 12 Pack Mack,

I was aware that css is the right way and my site does in fact use it. I was trying to find out whether javascript could deal with the colour.

However, I like the result of your code and I am going to use it as the pattern for the re-doing of my site. Many thanks for your help.

Frank

12 Pack Mack
06-23-2009, 08:29 PM
Frank:

I appreciate your courtesy. Good luck with your project.

effpeetee
06-23-2009, 08:33 PM
Frank:

I appreciate your courtesy. Good luck with your project.
Page one, (http://exitfegs.co.uk/)

Frank

12 Pack Mack
06-23-2009, 08:56 PM
Frank:

Several errors:

This, belongs within the <style> tags:


#greeting {font-size: 1.5em; font-family: tahoma; color: #000; text-align: center; width: 90%;
margin-left: auto; margin-right: auto; background-color: #fff; padding-top: 3px;
padding-bottom: 3px; border: 0px solid gray;}

These belong where the <title> and <meta> tags are in my example, immediately after the opening <head> tag.


<title>Opening page of the Taylor website.</title>
<LINK REL="SHORTCUT ICON" HREF="http://www.exitfegs.co.uk/favicon.ico">

Use only ONE set of <script> tags. Use only one set of <style> tags.


There are other errors. Duplicate <body> tag, <style> tags within the <body>, etc.

<style> and <script> tags belong in the <head> and nowhere else.

XHTML requires lowercase for, well, everything. Some tags, in XHTML need to be "closed" like this: />

I'd just use HTML 4.01 strict, as shown in my example.

Go to:

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

and validate your markup and css.

effpeetee
06-23-2009, 09:49 PM
Done most of it. Off to bed now. It's been a busy day.

Kind regards,

Frank

12 Pack Mack
06-23-2009, 09:58 PM
Frank:

Yes, in my FF extension, it validates, but you have 3 sets of <script> tags.

The opening <html> tag no longer needs:

xmlns="http://www.w3.org/1999/xhtml"

You have script for TWO "greetings". ???

Looks good, otherwise.

Take care.

effpeetee
06-23-2009, 11:17 PM
Just done last update for today.

Good night.

Frank

Hsoutdoors
06-25-2009, 12:07 AM
I tried this and works perfectly. One question - it is after 6pm but page says afternoon. Does it have anything to do with the GMT offset?

Thanks,
Harry

See below

Hsoutdoors
06-25-2009, 02:06 PM
12 Pack Mack,

Thank you for the code. Looks good. One question - does the GMT setting have anything to do with the problem I have? It was after 6pm my time (EST) but the page says "Good Afternoon" This site is going to take place of my original. Thanks for the help.

Harry

12 Pack Mack
06-25-2009, 02:21 PM
Harry:

The GMT offset ensures that every visitor, no matter their timezone, will see the greeting that is appropriate for the site owner's local time.

Eliminate that line, if you want the greeting to be appropriate to the visitor's local time.

Hsoutdoors
06-25-2009, 11:45 PM
12 Pack Mack,
I deleted the line and the only thing i see is a very thin border. No text at all.
Thanks in advance,
Harry



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum