Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Format color on a variable 1

Status
Not open for further replies.

DRowland

Programmer
May 23, 2001
232
US
I am new working on javascript, and have a problem that is probably very simple to someone with experience.
I have searched previous entries, and tried all I found, with no luck.
What I want to do, is change the color of one line of a variable.
Below is my script.
_____________________________
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
var greet = "<i>Good Morning!</i> "
if (hours>=12){
dn="PM"
greet.fontcolor = '#FF0080"
greet = "<i>Good Afternoon! </i>"}
if (hours>=18){
greet = "<i>Good Evening! </i>"}
if (hours>12){
hours=hours-12
_______________________________
What I want to do is make the "Good Morning" one color,
"Good Afternoon" another, and "good evening a third. So far, nothing has worked, including the "greet.fontcolor...." line shown.
Any help is welcome.
Thanks
Dick



Dick

|========================|
I sure wish there was a way
to receive the best teaching, [smarty]
without having to go through
some of the worst experiences![ponder]
|========================|
 
OK... Here ya go.
___________________________

<html>
<head>
<title>Date</title>
</head>
<body>
<script type="text/javascript">
<!--

var mydate = new Date();
var hours = mydate.getHours();
var minutes = mydate.getMinutes();
var seconds = mydate.getSeconds();
var dn="AM";
var greet = "Good Morning!";

if (hours >= 12)
{
dn="PM"

greet = "Good Afternoon!";
}
if (hours >= 18)
{
greet.fontcolor('#FF0080');
greet = "Good Evening!";
}

if (hours > 12)
{
hours -= 12;
}

greet.italics();
document.writeln(greet);

// -->
</script>
</body>
</html>



Dick

|========================|
I sure wish there was a way
to receive the best teaching, [smarty]
without having to go through
some of the worst experiences![ponder]
|========================|
 
Try changing it to
Code:
greet.fontcolor(red);
or some other color and see if it works.

--Chessbot
 
Another strike against the batter. Just got another error notice. It just may be that there's no way to do this.


Dick

|========================|
I sure wish there was a way
to receive the best teaching, [smarty]
without having to go through
some of the worst experiences![ponder]
|========================|
 
Here is the entire page. Perhaps there is something else that you can find. The page is actually my wallpaper that shows a picture, and the date and time, with a greeting that changes depending on the time of day. I wanted to have the greeting change color. This is how I find new things to do with websites. I really do appreciate your assistance.
here's the entire script.
__________________

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body background="Vortec_space.jpg" bgproperties="fixed" bgcolor="#0DADFF">

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<font face="Arial, Helvetica, Sans Serif" size="6" color = "#FFFFFFF">


<div align="right">
<b>
<span id="clock">

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("Jan.","Feb.","Mar.","Apr.","May","June","July","Aug.","Sept.","Oct.","Nov.","Dec.")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
var greet = "<i>Good Morning!</i> ";
if (hours>=12){
dn="PM";
greet = "<i>Good Afternoon! </i>"}
if (hours>=18){
greet = "<i>Good Evening! </i>"}
if (hours>12){
hours=hours-12
}
{
d = new Date();
Time24H = new Date();
Time24H.setTime(d.getTime() + (d.getTimezoneOffset()*60000) + 3600000);
InternetTime = Math.round((Time24H.getHours()*60+Time24H.getMinutes()) / 1.44);
if (InternetTime < 10) InternetTime = '00'+InternetTime;
else if (InternetTime < 100) InternetTime = '0'+InternetTime;
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate=greet+ "<br>" + dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" <br> Local time: "+hours+":"+minutes+":"+seconds+" "+dn+" "
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
window.onload=goforit
// End -->
</script>
</font>
</span>
</b>
</div>
</body>
</html>


Dick

|========================|
I sure wish there was a way
to receive the best teaching, [smarty]
without having to go through
some of the worst experiences![ponder]
|========================|
 
Sorry, should be
Code:
greet.fontcolor([red]'[/red]red[red]'[/red]);

--Chessbot
 
Nope. That didn't work either.
I'm now looking at the document.write line to see if I can do it there.

Dick

|========================|
I sure wish there was a way
to receive the best teaching, [smarty]
without having to go through
some of the worst experiences![ponder]
|========================|
 
Try this code (I think there might be a mismatched "{}" somewhere):
Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body background="Vortec_space.jpg" bgproperties="fixed" bgcolor="#0DADFF">

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<font face="Arial, Helvetica, Sans Serif" size="6" color = "#FFFFFFF">


<div align="right">
<b>
<span id="clock">

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")

var montharray=new Array("Jan.","Feb.","Mar.","Apr.","May","June","July","Aug.","Sept.","Oct.","Nov.","Dec.")

function getthedate(){
  var mydate=new Date()
  var year=mydate.getYear()
  if (year < 1000)
    year+=1900
  var day=mydate.getDay()
  var month=mydate.getMonth()
  var daym=mydate.getDate()
  if (daym<10)
    daym="0"+daym
  var hours=mydate.getHours()
  var minutes=mydate.getMinutes()
  var seconds=mydate.getSeconds()
  var dn="AM"
  var greet = "<i>Good Morning!</i> ";
  if (hours>=12){
    dn="PM";
    greet = "<i>Good Afternoon! </i>"
  }
  if (hours>=18){
    greet = "<i>Good Evening! </i>"
  }
  if (hours>12){
    hours=hours-12
  }
  d = new Date();
  Time24H = new Date();
  Time24H.setTime(d.getTime() + (d.getTimezoneOffset()*60000) + 3600000);
  InternetTime = Math.round((Time24H.getHours()*60+Time24H.getMinutes()) / 1.44);
  if (InternetTime < 10) InternetTime = '00'+InternetTime;
  else if (InternetTime < 100) InternetTime = '0'+InternetTime;
  if (hours==0)
    hours=12
  if (minutes<=9)
    minutes="0"+minutes
  if (seconds<=9)
    seconds="0"+seconds
  //change font size here
  var cdate=greet+ "<br>" + dayarray[day]+",   "+montharray[month]+" "+daym+", "+year+" <br> Local time:  "+hours+":"+minutes+":"+seconds+" "+dn+" "
  if (document.all)
    document.all.clock.innerHTML=cdate
  else if (document.getElementById)
    document.getElementById("clock").innerHTML=cdate
  else
    document.write(cdate)
  }
  if (!document.all&&!document.getElementById)
    getthedate()
  goforit();
}
function goforit(){
  if (document.all||document.getElementById)
  setInterval("getthedate()",1000)
}
window.onload=goforit
//  End -->
</script>
</font>
</span>
</b>
</div>
</body>
</html>

--Chessbot
 
Well, it still didn't work.
Question. Did this script work on your machine. I got an error on line 82 column 1.


Dick

|========================|
I sure wish there was a way
to receive the best teaching, [smarty]
without having to go through
some of the worst experiences![ponder]
|========================|
 
I think your font tag was interfering, Does this page work?
Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<style type="text/css">
<!--

.red { color: red; font-style: italic; }
.green { color: green; font-style: italic; }
.blue { color: blue; font-style: italic; }
#clock { color: black; }

-->
</style>
</head>
<body>
<span id="clock">

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");

var montharray=new Array("Jan.","Feb.","Mar.","Apr.","May","June","July","Aug.","Sept.","Oct.","Nov.","Dec.");

function goforit()
{
  if (document.all||document.getElementById)
  setInterval("getthedate()",1000)
}
function getthedate()
{
  var mydate=new Date();
  var year=mydate.getYear();
  if (year < 1000)
    year+=1900
  var day=mydate.getDay();
  var month=mydate.getMonth();
  var daym=mydate.getDate();
  if (daym<10)
    daym="0"+daym;
  var hours=mydate.getHours();
  var minutes=mydate.getMinutes();
  var seconds=mydate.getSeconds();
  var dn="AM";
  var greet = "Good Morning!";
  var color = "green";
  if (hours>=12)
  {
    dn="PM";
    greet = "Good Afternoon!";
    color = "blue";
  }
  if (hours>=18)
  {
    greet = "Good Evening!";
    color = "red";
  }
  if (hours>12)
  {
    hours=hours-12;
  }
  d = new Date();
  Time24H = new Date();
  Time24H.setTime(d.getTime() + (d.getTimezoneOffset()*60000) + 3600000);
  InternetTime = Math.round((Time24H.getHours()*60+Time24H.getMinutes()) / 1.44);
  if (InternetTime < 10) InternetTime = '00'+InternetTime;
  else if (InternetTime < 100) InternetTime = '0'+InternetTime;
  if (hours==0)
    hours=12;
  if (minutes<=9)
    minutes="0"+minutes;
  if (seconds<=9)
    seconds="0"+seconds;
  //change font size here
  var cdate="<span class=\""+color+"\">"+greet+"</span><br>" + dayarray[day]+",   "+montharray[month]+" "+daym+", "+year+" <br> Local time:  "+hours+":"+minutes+":"+seconds+" "+dn+" ";
  if (document.all)
    document.all.clock.innerHTML=cdate;
  else if (document.getElementById)
    document.getElementById("clock").innerHTML=cdate;
  else
    document.write(cdate);
  if (!document.all&&!document.getElementById)
    getthedate();
}
window.onload=goforit
//  End -->
</script>
</span>
</body>
</html>

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
YES!!!
Tah-Dah!!
you get all the stars for your efforts and my appreciation!
I knew there was a way to do this, but my limited knowledge just couldn't get it.. I remember my dad saying years ago, that if you really want the job done, don't read the book, ask the guy who wrote it.
Since you obviously do a lot of writing, the evidence shows my dad was right again..
Thanks...

Dick

|========================|
I sure wish there was a way
to receive the best teaching, [smarty]
without having to go through
some of the worst experiences![ponder]
|========================|
 
Thanks!

(As you can probably tell, I have way too much free time.)

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top