Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How do I set the document.write font colour with this script.

    I have been trying for quite a while, trying to include the font color in the attached script.

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

    I would appreciate any guidance. Ultra was easy after this

    Frank
    Last edited by effpeetee; 06-23-2009 at 05:51 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    A) Don't use document.write(). Use a <div> instead.

    B) Set fonts, colors etc. with CSS.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Philip M View Post
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Code:
    <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.
    Last edited by Philip M; 06-23-2009 at 05:15 PM.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Philip M View Post
    Code:
    <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.


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

    Frank
    Last edited by effpeetee; 06-23-2009 at 05:40 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This source helped me to get this far.
    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    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.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.
    I am in the process of tidying it up codewise.

    Regards,

    Frank
    Last edited by effpeetee; 06-23-2009 at 06:30 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Code:
    <!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>

  • The Following 2 Users Say Thank You to 12 Pack Mack For This Useful Post:

    effpeetee (06-23-2009), Hsoutdoors (06-25-2009)

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Frank:

    I appreciate your courtesy. Good luck with your project.

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by 12 Pack Mack View Post
    Frank:

    I appreciate your courtesy. Good luck with your project.
    Page one,

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Frank:

    Several errors:

    This, belongs within the <style> tags:

    Code:
    #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.

    Code:
      <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.
    Last edited by 12 Pack Mack; 06-23-2009 at 09:00 PM.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Done most of it. Off to bed now. It's been a busy day.

    Kind regards,

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •