...

View Full Version : Change from image to text.



effpeetee
06-17-2010, 07:16 PM
function greet()
{
var hour = (new Date()).getHours();
var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" );
document.write('<img src="' + when + '.png" alt="Good ' + when + '">\n');}


This script puts up a png which gives a greeting depending on the time of day. I want instead to put the greeting as text.
It's a bit ostentacious as it is..
I would appreciate any pointers. Site is here. (http://www.exitfegs.co.uk/)

Thank you.

Philip M
06-17-2010, 07:36 PM
<script type = "text/javascript">
function greet() {
var hour = (new Date()).getHours();
var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" );
document.write('Good ' + when + '<br>')
}
</script>“Expert: a man who makes three correct guesses consecutively.” - Dr. Laurence J. Peter (American "hierarchiologist", Educator and Writer, 1919-1990)

Old Pedant
06-17-2010, 07:37 PM
You answered your own question.



function greet()
{
var hour = (new Date()).getHours();
var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" );
document.write('Good ' + when);
}

After all, the alt= of the <img> was *already* text. So just use that text and you are done.

Want to style it?

document.write('<span class="greeting">Good ' + when + '</span>');

And then add a <style> for that class.

*********

EDIT: *sigh* Philip just types faster.

effpeetee
06-17-2010, 08:06 PM
EDIT: *sigh* Philip just types faster.

You are both great guys. Thanks a lot. I wish my eyes were 20 yrs younger then I could read the books that I have. Ah well.

Time and tide wait for no man. So my own father was fond of reminding me.
Frank.

What would |I do without the Forum?

Old Pedant
06-17-2010, 08:27 PM
EDIT: *sigh* Philip just types faster.
And has better tag lines.

3 consecutive correct guesses...hmmm...guess I'll never be an expert.

3 is easy. It's the consecutive part that is hard.

effpeetee
06-17-2010, 09:29 PM
I am having problems due to my ignorance.

This is what I get (http://exitfegs.co.uk/indexjs.html) so far.

Frank

Old Pedant
06-17-2010, 10:01 PM
You left out the <script>...</script> tags around the document.write!

But you also left out the code that figures out what the value of when should be.

******

You know, I think you are making a mistake doing this. It is *NEVER* going to look as good as the image version, and the text will never match the appearance of the "Welcome..." line. I truly feel you should have left good enough (which is actually much better) alone.

effpeetee
06-18-2010, 07:12 AM
Thanks for your help but this is not just about looks (I agree that it already looks good enough.) but i really want to know HOW to do it.

It is more about javascript than just about appearance. Generally, I use my site to learn how to use code. (Or what is more usual, how not to use code.)

I still cannot make it work (http://www.exitfegs.co.uk/indexjs.html).

Back to the drawing-board.

Frank

Philip M
06-18-2010, 07:55 AM
One reason why you will be having trouble is this:-

<script language="JavaScript">
// Source: CodeFoot.com
function blockError(){return true;}
window.onerror = blockError;
</script>

It stops debugging in its tracks. If you removed that the errors would be apparant.

The below does the trick but I agree with Old Pedant that it will never look as good as the image version.


<BODY onload = "greet()">

<DIV id="spacer"></DIV>

<div id = "greeting"></div>
<script type = "text/javascript">
function greet() {
var hour = (new Date()).getHours();
var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" );
document.getElementById("greeting").innerHTML = "Good " + when + "<br>";
}
</script>

You also have
<script type="text/javascript" src="greet.js"></script>
which is redundant.

effpeetee
06-18-2010, 09:10 AM
Thank you for your help.

I will probably leave the original version as I agree that it is satisfactory, but I wanted to know how to make the change to text if I so desired. My command of javascript is minimal and at 84yrs old with poor sight it is not likely to improve very much without help.
I really do appreciate all the help that i have been given. Although I designed my site overall, practically all of the successful coding has been given by members of these Coding Forums.

I still cannot get it to work using text however.



Regards,

Frank

effpeetee
06-18-2010, 01:48 PM
This is as far as I have got (http://exitfegs.co.uk/jstest.html) to date. Any comments welcomed.

Frank

Philip M
06-18-2010, 05:10 PM
</DIV>div>

effpeetee
06-18-2010, 08:20 PM
</DIV>div>
Thanks, now corrected.

Frank

This is as far as I have got to date. (http://www.exitfegs.co.uk/jstest.html)

Old Pedant
06-18-2010, 08:27 PM
You *really* should have used the code that Philip gave you in post #9.

Generally, I try to avoid using document.write(). It works, but it's comparatively clumsy.

But, anyway, if you insist on using document.write, then:


<html>
<head>
<link rel="stylesheet" type="text/css" href="atwo.css" />
<title>Just a test rig for experimenting.</title>
<style type="text/css">
#H1{
font-size:30px;
width:auto;
text-align:center;
}
</style>
</head>
<body>
<DIV id="H1">
<script type="text/javascript">
var hour = (new Date()).getHours();
var when = (hour > 17) ? "Evening" : ( (hour > 11) ? "Afternoon" : "Morning" );
document.write( "Good " + when + ". Welcome to the Taylor Website" );
</script>
</DIV>
</body>
</html>

Why make it more complex than that? This harkens back to the code from your very first post in this thread, where you were (correctly) doing


var hour = (new Date()).getHours();
var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" );

And is essentially what I suggested in my first post in the thread.

effpeetee
06-19-2010, 08:31 AM
You may remember that while you were on holiday? I sent you a PM because I had lost your original post. Thank you for your patience with me, But I have to learn artistic display by my "suck it and see" method. I don't have the ability to see things in my minds eye. I wish that I did.

However, whatever I decide to leave as the final outcome, all the help received on this forum is much valued. With my poor sight and increasing age, it is the only way that I can learn.

With the new HTML coming up. it will be possible to have better text than before so the quality difference may well narrow.
Here's hoping.

If you can point me to the original post I would be happy to see it again.

Regards, Frank

effpeetee
06-19-2010, 08:04 PM
I have put the latest attempt to put the greeting at the top of the page without success. I have tries everything that I know without success. The greet is a javascript. If I remove everything else, the header greeting shows up.

I just do not know what to adjust. CSS HTML Javascript etc. etc. etc....

Help gratefully received.

The page is here. (http://exitfegs.co.uk/jstest.html)

Frank alias effpeetee.
Or is it effpeetee alias Frank. My brain is so dizzy I really don't know.:confused:

coothead
06-19-2010, 10:31 PM
Hi there Frank,

your code just needed a little cosmetic surgery. ;)

Try it now...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Just a test rig for experimenting.</title>

<link rel="stylesheet" type="text/css" href="index.css">

<style type="text/css">
#h1 {
margin:20px 0;
font-size:30px;
color:#000;
text-align:center;
}
#test {
width:100%;
font-size:25px;
color:#000;
text-align:center;
}
#mypic {
width:540px;
height:400px;
}
</style>


<script type="text/javascript">

function init(){
var imge=null;
pics=[
'23moss.png','web3.jpg','tedanddimitri.jpg','img152.png','Web6.png','Web8.png',
'Ritcroftgroup.png','Eddie.png','Bluebell1.png','steveviewing.jpg','Barkert1.png',
'xmas06.jpg','xmas06a.png','lifespan.jpg','frwall1.jpg','hemelgroup.png'
];

desc=[
'This is where we live in S.W. London','Betty and Frank at Alresford station','Little Ted (The Koala) and Dmitri','Betty and the pussy cat','Betty and the bears','Steven, Joyce and Mark after lunch at the plough','Eddie, Betty, Joyce and Mark - Nan Pearce and Aunt Sylvia.',
'Eddie relaxing at the tv','Steve relaxing on the Bluebell railway','Steven relaxing at the tv','Yvonne,Susan and Claire at Betty\'s funeral','Christmas 2006 at Yvonne, Claire and families','Christmas 2006 at Yvonne, Claire and families',
'Where did all the years go','The lounge','Eddy, John, Mark, Joyce and Steven'
];

lis=document.getElementById('nav').getElementsByTagName('li');

for(c=0;c<lis.length;c++) {
lis[c].number=c;
lis[c].onclick=function() {
document.getElementById('mypic').src=pics[this.number];
document.getElementById('test').innerHTML=desc[this.number];
}
}
greet();
}

function greet() {
var todaydate=new Date();
var timeis=todaydate.getTime();
todaydate.setTime(timeis);
var houris=todaydate.getHours();
if(houris>17) {
display='Evening';
}
else {
if(houris>11) {
display='Afternoon';
}
else {
display='Morning';
}
}
var welcome='Good '+display+ '. Welcome to the Taylor Website.';

document.getElementById('h1').firstChild.nodeValue=welcome;
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>

</head>
<body>

<h1 id="h1">&nbsp;</h1>

<div id="nav">
<ul>
<li>Home</li>
<li>Betty and Frank.</li>
<li>Little Ted and Dmitri.</li>
<li>Lovely Betty and Pussycat.</li>
<li>Betty and the Bears.</li>
<li>Steven and Joyce and Mark.</li>
<li>Ritcroft family group.</li>
<li>Eddie, relaxing at home.</li>
<li>Steven on the Bluebell Railway.</li>
<li>Steve at the box.</li>
<li>Yvonne,Susan and Claire.</li>
<li>Christmas 2006 at Yvonne's - 1.</li>
<li>Christmas 2006 at Yvonne's - 2.</li>
<li>A life span.</li>
<li>The Lounge.</li>
<li>Hemel group..</li>
<li class="bold"><a href="http://www.exitfegs.co.uk/ninea.html">Family photos.</a></li>
<li class="bold"><a href="http://www.exitfegs.co.uk/hol1a.html">Holiday snaps.</a></li>
</ul>
</div>

<div id="rite">
<img src="rhpic.jpg" alt=""><br>
<img src="rhcap.jpg" alt="">
</div>

<div id="image-holder"><img id="mypic" src="23moss.png" alt=""></div>

<div id="test"></div>

</body>
</html>

coothead

effpeetee
06-20-2010, 06:00 AM
Thanks a lot. I can now breathe again. I think my brain must have gone on holiday.

Just here. (http://exitfegs.co.uk/index.html)

Frank

coothead
06-20-2010, 06:49 AM
No problem, you're very welcome. ;)

effpeetee
06-20-2010, 12:02 PM
I am glad that I changed it with all the help received. I do prefer the simpler text captions.
It looks more consistent (http://www.exitfegs.co.uk/)with the rest of the page.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum