How do I make an Image visible?

[Cov]

Hi,

I have the following code:
<script>
LeftCurtain=new Image(midPoint,ht);
LeftCurtain.src="images/black.gif";
LeftCurtain.left="0px";
LeftCurtain.top="0px";
LeftCurtain.visibility="visible";
</script>


Nothing appears. Not in Firefox, Opera or IE7.

Can anyone let me know what's wrong?

 

[David Mark]

Hi,

I have the following code:
<script>

What type of script is this?

LeftCurtain=new Image(midPoint,ht);

Where are these two parameters defined?

LeftCurtain.src="images/black.gif";
LeftCurtain.left="0px";

LeftCurtain.style.left = "0";
Zero is zero, regardless of the unit. Also, you need to set the
position property to absolute, fixed or relative (default is static.)

LeftCurtain.top="0px";

Same problem here.

LeftCurtain.visibility="visible";

Again, you need to reference the style object, but this logic isn't
needed anyway (default is visible.)

</script>

Nothing appears. Not in Firefox, Opera or IE7.

Can anyone let me know what's wrong?

Regardless of the above-mentioned problems, you never appended the
image to the document.

Why try to script a Web page before you have learned the basics of
scripting Web pages?

 

[David Mark]

[snip]


Regardless of the above-mentioned problems, you never appended the
image to the document.

And BTW, use createElement, not the Image constructor.

 

[Cov]

Why try to script a Web page before you have learned the basics of
scripting Web pages?

Thank you for your reply.

Years ago, I was quite conversant with Javascript, so I do know the
basics of Scripting, it's just that my memory is letting me down a
little. Old age.

I have the O'Rielly Javascript Definative Guide (3rd Edition!) and
have been going over it, hoping to jog my memory, but I couldn't see
what I was doing wrong.

Where are these two parameters defined?

Sorry, the parameters are defined earlier in the function
midPoint=document.width/2; and ht=document.height;
There are no errors from the Firefox Javascript error console, so I'm
reasonably sure my code is free of typos.

Regardless of the above-mentioned problems, you never appended the
image to the document.

Okay, I think this is the crux of the problem. How do you append the
image to the document?

And BTW, use createElement, not the Image constructor.

createElement is not O'Rielly's Definitive Guide! (Well, if it is,
it's not in the Index).

Thanks again,

Dave Coventry

 

[David Mark]

Thank you for your reply.

Years ago, I was quite conversant with Javascript, so I do know the
basics of Scripting, it's just that my memory is letting me down a
little. Old age.

Fair enough, but you need to do some reading before diving back in.

I have the O'Rielly Javascript Definative Guide (3rd Edition!) and
have been going over it, hoping to jog my memory, but I couldn't see
what I was doing wrong.

Sounds like a pretty poor guide.

Sorry, the parameters are defined earlier in the function
midPoint=document.width/2; and ht=document.height;

Those are Mozilla-specific properties and are not appropriate for
centering anyway (unless the document fits exactly in the viewport.)
And why try to tackle centering before successfully creating and
appending an element?

There are no errors from the Firefox Javascript error console, so I'm
reasonably sure my code is free of typos.

From the looks of it, it will create an Image object and set some

meaningless properties.

Okay, I think this is the crux of the problem. How do you append the
image to the document?

Google for "JavaScript createElement appendChild."

createElement is not O'Rielly's Definitive Guide! (Well, if it is,
it's not in the Index).

Again, sounds like a pretty poor (or at least outdated) guide.

 

[Richard Cornford]

On Sep 30, 3:31 pm, Cov wrote:

Where are these two parameters defined?


LeftCurtain.style.left = "0";
Zero is zero, regardless of the unit. Also, you need to set the
position property to absolute, fixed or relative (default is static.)


Same problem here.

<snip>

Not that it is a problem as such. Not providing a non-zero dimension
with a unit can be a problem but omitting the unit from a zero dimension
is not required.

A more significant issue may follow from the assumption that the object
returned from - new Image( ... ) - would have a - style - object. There
is no specification that could provide guidance, but historically that
has not necessarily been the case.

Richard.

 

[Cov]

Again, sounds like a pretty poor (or at least outdated) guide.

http://www.amazon.com/JavaScript-De...3533224?ie=UTF8&s=books&qid=1191186893&sr=8-1

 

[Cov]

A more significant issue may follow from the assumption that the object
returned from - new Image( ... ) - would have a - style - object. There
is no specification that could provide guidance, but historically that
has not necessarily been the case.

Richard.

Thank you for your input.

David's point is taken that the document.width and document.height
properties are not necessarily endorsed by other browsers, although it
would surprise me to learn that IE7, Opera and Safari do not have a
mechanism to make this information available to the web page.
Furthermore, although it would probably be against type for IE, I
would expect the other browsers to adopt the same syntax.

Nevertheless, there are valid reason for wanting to do this entirely
in Javascript and not to use the "center" tag.

With regard to whether the Image object would have a style object, if
it didn't then I would expect the error console to complain?

 

[David Mark]

<snip>

Not that it is a problem as such. Not providing a non-zero dimension
with a unit can be a problem but omitting

You lost me there unless you are talking about older browsers where
typeof(el.style.top) == 'number'.

the unit from a zero dimension

is not required.

Not required, it just seems silly to me to provide one. One caveat is
that Firefox returns "0pt" (of all things) for the computed style when
the unit is left off the assignment. It doesn't really matter as you
obviously ignore the unit in any case where the value is zero.

A more significant issue may follow from the assumption that the object
returned from - new Image( ... ) - would have a - style - object. There

Right. That's why I told the OP to use createElement.

 

[Thomas 'PointedEars' Lahn]

http://www.amazon.com/JavaScript-De...3533224?ie=UTF8&s=books&qid=1191186893&sr=8-1

Thanks for further confirmation that also this book can definitely and
safely be recommended against. How many more bad examples from it are
required until the FAQ maintainer eventually removes the recommendation from
the FAQ? How can the FAQ seriously still recommended a book (that should
have gone through several revisions and through the hands of at least one
literary editor before going into print) where its errata are a "must read"
anyway?


PointedEars

 

[David Mark]

Thank you for your input.

David's point is taken that the document.width and document.height
properties are not necessarily endorsed by other browsers, although it
would surprise me to learn that IE7, Opera and Safari do not have a
mechanism to make this information available to the web page.

Use the scrollWidth property of the container element (documentElement
or body, depending on the browser and layout mode.)

Or to center an absolutely positioned element in the viewport, use the
clientWidth property of the documentElement (or body) element.

Furthermore, although it would probably be against type for IE, I
would expect the other browsers to adopt the same syntax.

It is an outdated property.

Nevertheless, there are valid reason for wanting to do this entirely
in Javascript and not to use the "center" tag.

You definitely don't need to use the center tag. CSS makes more
sense. What reason would you have to use script for this?

With regard to whether the Image object would have a style object, if
it didn't then I would expect the error console to complain?

It would complain.

 

[Cov]

Thomas 'PointedEars' Lahn said the following on 9/30/2007 6:16 PM:



It won't be removed any time in the foreseeable future so you can -
safely - stop asking for it to be removed.

And, what does the third edition have to do with the edition listed in
the FAQ?

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Funny; I ask for help on why a piece of code I write won't work and
get castigated for attempting something that, in the opinion of one
poster, is beyond me.

Then the whole thing degenerates into mud slinging and petty point
scoring.

Does ANYBODY come here for assistance or is this newsgroup solely for
the self-indulgence of the senior members?

 

[Cov]

Cov said the following on 10/1/2007 1:51 AM:




The only reason I got involved in this thread at all was because of the
comment about the "FAQ maintainer" (which is me) removing a book
reference from the FAQ. So, it is "Funny" to me why you are replying to
my post when I said nothing about your original question. The reason
your original code doesn't work is you aren't creating a visible image
element in the document, your code creates a JS Image Object.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Okay.

As David suggested, I am using google which obviously handles the
posting differently and I wasn't aware that my replies were appended
in a way that divorced them from the general thread and made them
specific to the last post in the thread. My bad.

And yes, thank you for your pointer as regards making the JS image
visible. That was the sort of pointer I was looking for. I shall do
some more searching and see what I came up with.

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn said the following on 9/30/2007 6:16 PM:

It won't be removed any time in the foreseeable future so you can -
safely - stop asking for it to be removed.

You as a *responsible* FAQ editor leaving a statement in the FAQ that this
book is "currently endorsed by c.l.j. regulars of comp.lang.javascript"
should first make sure that it *is* actually currently endorsed by the
regulars of comp.lang.javascript.

Or you have proven to be inept enough to be the editor of the newsgroup's
FAQ and should be replaced by a more reasonable person ASAP.

BTW: It should be "c.l.js" or "cljs" to distinguish it from comp.lang.java.*

And, what does the third edition have to do with the edition listed in
the FAQ?

Has this been fixed in the fifth edition of the book? If not, that reason
for recommending against this book has not disappeared.


PointedEars

 

[Gregor Kofler]

Cov meinte:

Funny; I ask for help on why a piece of code I write won't work and

....got a sufficient answer 34 minutes later.

"Regardless of the above-mentioned problems, you never appended the
image to the document."

Reading (and understanding) helps.

Gregor

 

[Cov]

Cov meinte:


...got a sufficient answer 34 minutes later.

"Regardless of the above-mentioned problems, you never appended the
image to the document."

Reading (and understanding) helps.

Gregor

--http://www.gregorkofler.at::: Landschafts- und Reisefotografiehttp://www.licht-blick.at ::: Forum für Multivisionsvorträgehttp://www.image2d..com ::: Bildagentur für den alpinen Raum

Yes.

I read that and did ask for specifics and was advised to Google for
"JavaScript createElement appendChild." which produced no meaningful
results.

 

[Gregor Kofler]

Cov meinte:

I read that and did ask for specifics and was advised to Google for
"JavaScript createElement appendChild." which produced no meaningful
results.

What do you understand by "meaningful results"? I suppose most of the
stuff I know about JS, HTML, PHP, MySQL etcpp. stems from online
resources - mainly queried with a search engine.

"javascript appendchild" gives me the German

http://de.selfhtml.org/javascript/objekte/node.htm

as first hit, which explains the above issue pretty well.

The first English hit is

http://www.howtocreate.co.uk/tutorials/javascript/dombasics

which also sports a simple example how appendChild works.

Gregor

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn said the following on 10/1/2007 4:03 AM:

It is nice to see that you have assumed I haven't done something that I
did do. Can you post articles in the last 8 months where people have
commented on the book? I have read them all. Perhaps you should also.

There are at least 3 people posting here regularly (which is the definition
for "regular"; the definition is not "people [whose statements] you like")
who have explicitly or implicitly recommended against this book. If you
would be a reasonable person and a responsible FAQ maintainer, you would not
wait for enough negative statements to accumulate over months(!) but do a
strawpoll NOW
to determine whether or not the statement in the FAQ is still true.

Coming from you, that is hilarious.

If you have nothing else to say about this, I rest my case.

Several major corrections have been made by regulars of this group regarding
the FAQ. Yet you seem unwilling or unable to change anything. This
behavior qualifies as being unreasonable, irresponsible, and eventually inept.

The newsgroup is comp.lang.javascript and its abbreviation has always
been clj/c.l.j and I will continue to refer to it as clj/c.l.j as my
mood sees fit.

That's the point: if you would be a reasonable and responsible FAQ
maintainer you would know that it is no longer your mood that counts.


PointedEars

 

[Cov]

var theImage = document.createElement('image')
//code here to add properties to the image
document.body.appendChild(theImage)

Google is useless sometimes, if not most of the time.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Randy,

I have used the code as you have supplied (and I have read the link
provided by Gregor), but am still viewing a blank page.


RightCurtain= document.createElement('image');
RightCurtain.src="images/black.gif";
RightCurtain.width=midPoint;
RightCurtain.height=ht;
RightCurtain.position="absolute";
RightCurtain.left=midPoint;
RightCurtain.top=0;
RightCurtain.visibility="visible";
RightCurtain.border=1;
document.body.appendChild(RightCurtain);

alert(RightCurtain.width+'x'+RightCurtain.height
+','+RightCurtain.border);

The alert shows the following: "632x428,1" as expected and the Firefox
error console shows no errors, but the page does not display.

Many Thanks,

Dave Coventry

 

[David Mark]

Randy,

I have used the code as you have supplied (and I have read the link
provided by Gregor), but am still viewing a blank page.

RightCurtain= document.createElement('image');

The tag name is img, not image.

RightCurtain.src="images/black.gif";

As for these next seven lines, go back and re-read my first response.

RightCurtain.width=midPoint;
RightCurtain.height=ht;
RightCurtain.position="absolute";
RightCurtain.left=midPoint;
RightCurtain.top=0;
RightCurtain.visibility="visible";
RightCurtain.border=1;
document.body.appendChild(RightCurtain);

alert(RightCurtain.width+'x'+RightCurtain.height
+','+RightCurtain.border);

The alert shows the following: "632x428,1" as expected and the Firefox
error console shows no errors, but the page does not display.

The only error was in your logic. You set useless properties.