changing .innerHTML not updating in IE

[Frostillicus]

Hi,

I've written some javascript to randomly choose a classical music composer's
picture and sample audio and display it on my home page
(http://marc.fearby.com/), and this works fine in Mozilla but has problems
in IE. Here's the code:

imagestring = "<img src=\"" + imagedir + composers[i][3] + "\" />";
objimage.innerHTML = imagestring;

To cut a long story short, this basically gets the image from an array and
prints the correct img tag. It works in Mozilla both from my local web
server and the live one (above). IE renders everything perfectly from my
local web server, but when running off the live one, only the first
composer's image appears. When I make three mistakes and then click the NEXT
link, IE running from the live site refuses to display the image, yet
Mozilla does fine.

Is there anything else I have to do, other than setting the innerHTML, to
get IE to behave when accessing the site from my real web site? I've even
tried making sure imagedir has the fully qualified domain name and path, but
IE still won't play ball, but Mozilla still does...

Thanks.

[Michael Winter]

On Fri, 2 Apr 2004 22:31:37 +1000, Frostillicus
<fr****@nilspamos.iinet.net.au> wrote:

[inserting an image]

Is there anything else I have to do, other than setting the innerHTML, to
get IE to behave when accessing the site from my real web site? I've even
tried making sure imagedir has the fully qualified domain name and path,
but IE still won't play ball, but Mozilla still does...

Either move everything to the server and have it generate the pages, or
use a single IMG element and change its src attribute.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Frostillicus]

The thing is, everything is on the server (I just have an exact copy on my
own machine for testing before uploading). Even when I access it from the
remote server, Mozilla displays everything perfectly but IE won't - however,
in IE, I can right-click on the image and click "Show Picture" and it
appears. Everything is being written perfectly but IE just refuses to
download and display the image it knows perfectly well about.

I'm no javascript expert, so would you mind telling me how to change an
existing IMG element's SRC attribute?

Thanks

[Michael Winter]

On Sat, 3 Apr 2004 10:57:11 +1000, Frostillicus
<fr****@nilspamos.iinet.net.au> wrote:

The thing is, everything is on the server (I just have an exact copy on
my own machine for testing before uploading). Even when I access it from
the remote server, Mozilla displays everything perfectly but IE won't -
however, in IE, I can right-click on the image and click "Show Picture"
and it appears. Everything is being written perfectly but IE just
refuses to download and display the image it knows perfectly well about.
[rant]
That was the sort of thing that made me abandon IE for Opera. If I loaded
two pages at the same time, which I do almost all of the time, I'd
frequently find that one of the pages would simply be an image from the
other page. Refreshing would do nothing and I'd have to clear the cache
and load the pages again individually. It seemed to take an eternity to
load pages, and images would frequently load in the wrong locations on the
page.

Similar incompetence on Microsoft's part is probably what's causing the
problem. However, image swapping via the src attribute is so common that
Microsoft probably have that implemented correctly.
[/rant]
I'm no javascript expert, so would you mind telling me how to change an
existing IMG element's SRC attribute?

imgRef.src = "http://...";

The best way to obtain a reference to the IMG element is through the
images collection:

<img id="someName" src="someInitialImage.png">
...
document.images[ 'someName' ].src = "http://...";

If you want support for old browsers that don't like the id attribute,
such as Netscape 4, use the name attribute with an identical value, in
addition to id.

Hope that helps,
Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Frostillicus]

My javascript now contains the following:

// 1st attempt
// var imagestring;
// imagestring = "<img src=\"" + imagedir + composers[i][3] + "\" />";
// objimage.innerHTML = imagestring;

// 2nd attempt (redefined objimage to be my new <img id="whatever" ...>
tag
// objimage.src = imagedir + composers[i][3];

// 3rd attempt
// document.images["composerimage"].src = imagedir + composers[i][3];

// 4th attempt
// var myimage = new Image();
// myimage.src = imagedir + composers[i][3];
// document.images.composerimage.src = myimage.src;

// 5th attempt
var myimage = new Image();
myimage.src = imagedir + composers[i][3];
document.images["composerimage"].src = myimage.src;
Still none of them work with IE on my remote web site (but still works fine
under IIS locally). I agree with you about Microsoft not being competent
enough to create a decent web browser, this is why I added the following to
the code that prints the layout:

mainstr += "<p>Because IE is dumb, you may have to right-click the image
and click Show Picture</p>";

Anybody retarted enough to prefer IE can just lump it. What do I care - it's
not as if I'm dependent upon banner advertising or the like...

Thanks for your help

[Michael Winter]

On Sun, 4 Apr 2004 13:55:45 +1000, Frostillicus
<fr****@nilspamos.iinet.net.au> wrote:

[snipped code attempts]

Still none of them work with IE on my remote web site (but still works
fine under IIS locally).
I'm experiencing (with Opera) the strange behaviour of changing URLs, but
the same initial image. The URLs appear to be valid (nothing daft like two
consecutive slashes), but unless I force the image to load from the
context menu, no change occurs. My money would be on your attempts to
preload the images. Don't[1]. As you're loading the images on demand,
there really isn't any point. Instead, make a direct assignment to the src
attribute.

[snip]
mainstr += "<p>Because IE is dumb, you may have to right-click the
image and click Show Picture</p>";

That, and the text regarding the Java VM, really is difficult to read in
Opera. It's not a problem because of Opera's excellent resizing ability,
but it should be larger. I think 85% of the user's default font size is
the recommended minimum[2]. You're using 60%.

A few things about your site in general:

Remove the return statement in the onload intrinsic event from both the
function call, and the called script as well. It means nothing in that
context.

Though you place a validation link, you XHTML doesn't validate. :P

I suggest you read the article, and its links, below

<URL:http://jibbering.com/faq/#FAQ4_26>

And finally, don't use that stylesheet changer. It's badly written and
inefficient. Moreover, it probably won't work with the browsers that most
need to use it: old browsers that don't support CSS well and would be
better off without it. It would be useful for IE users, though.

A better written, but non-degrading version of the setActiveStyleSheet()
function would be:

function getAttribute( e, a ) {
if( e ) {
if( e.getAttribute ) {
return e.getAttribute( a );
} else {
return e[ a ];
}
}
}

function setActiveStyleSheet( title ) {
var c, l = null, r, t;

if( document.getElementsByTagName ) {
l = document.getElementsByTagName( 'link' );
} else if( document.all && document.all.tags ) {
l = document.all.tags( 'link' );
}
if( l ) {
for( var i = 0, n = l.length; i < n; ++i ) {
r = getAttribute( c = l[ i ], 'rel' );
t = getAttribute( c, 'title' );

if( t && r && ( -1 != r.indexOf( 'style' ))) {
c.disabled = ( t != title );
}
}
}
}

Mike
[1] If you really do want to preload the images, preload all of them once
the page loads with an array of Image objects.
[2] I think some would argue that the user's default size *is* the
recommended minimum.

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Frostillicus]

> I'm experiencing (with Opera) the strange behaviour of changing URLs, but

the same initial image. The URLs appear to be valid (nothing daft like two
consecutive slashes), but unless I force the image to load from the
context menu, no change occurs. My money would be on your attempts to
preload the images. Don't[1]. As you're loading the images on demand,
there really isn't any point. Instead, make a direct assignment to the src
attribute.
I did try preloading just one image using the new Image() construct in one
of my attempts, but the others have all been either changing the src
attribute on the fly, for each image as needed, or rewriting the entire img
tag altogether. None of these work in IE remotely but this works perfectly
in Mozilla both remotely and locally.
That, and the text regarding the Java VM, really is difficult to read in
Opera. It's not a problem because of Opera's excellent resizing ability,
but it should be larger. I think 85% of the user's default font size is
the recommended minimum[2]. You're using 60%.
The text is meant to be the "fine print". I'm thinking of shifting that to a
help link that loads a message box or another layer with larger text,
though.
Remove the return statement in the onload intrinsic event from both the
function call, and the called script as well. It means nothing in that
context.
Will do - soon.
Though you place a validation link, you XHTML doesn't validate. :P
It's been a while since I've revalidated and it looks like it's only the Get
Firefox addition I made that broke it.
And finally, don't use that stylesheet changer. It's badly written and
inefficient. Moreover, it probably won't work with the browsers that most
need to use it: old browsers that don't support CSS well and would be
better off without it. It would be useful for IE users, though.

I was under the impression that the stylesheet changer was well written -
the nice folk at http://www.alistapart.com/ certainly think so. It works in
IE and Mozilla (the browsers I test all my pages in). If anybody is using a
browser that doesn't support CSS well in this day and age (Lynx excepted),
then they're probably used to almost everything not working - this would
have been reason enough to upgrade if it were me, but some people seem to
thrive on pain and frustration.

Thanks for the tips.

[Michael Winter]

On Mon, 5 Apr 2004 10:59:27 +1000, Frostillicus
<fr****@nilspamos.iinet.net.au> wrote:

[snip]

That, and the text regarding the Java VM, really is difficult to read
in Opera. It's not a problem because of Opera's excellent resizing
ability, but it should be larger. I think 85% of the user's default
font size is the recommended minimum[2]. You're using 60%.
The text is meant to be the "fine print". I'm thinking of shifting that
to a help link that loads a message box or another layer with larger
text, though.

I guessed that.

[snip]

Though you place a validation link, you XHTML doesn't validate. :P

It's been a while since I've revalidated and it looks like it's only the
Get Firefox addition I made that broke it.

I know it was only a minor problem, but it looks a little silly providing
a validation link to an invalid document. :)

01234567890123456789012345678901234567890123456789 0123456789012345678912

And finally, don't use that stylesheet changer. It's badly written and
inefficient. Moreover, it probably won't work with the browsers that
most need to use it: old browsers that don't support CSS well and would
be better off without it. It would be useful for IE users, though.

I was under the impression that the stylesheet changer was well written
- the nice folk at http://www.alistapart.com/ certainly think so. It
works in IE and Mozilla (the browsers I test all my pages in).

However, I'm sure you appreciate that "works" doesn't necessarily imply
"best implementation", and I can assure you that the original was not the
best possible. I don't mean to say mine is, but it's an improvement. The
major differences are that it's more robust - support for properties and
methods is checked before using said members - and references are stored
rather than being looked-up repeatedly (I'd expect getElementsByTagName()
to have a fairly large overhead).

I, too, advocate using more modern approaches, but that shouldn't lead to
errors on a page simply because you neglect to check for support. That's
bad authoring, plain and simple.
If anybody is using a browser that doesn't support CSS well in this day
and age (Lynx excepted), then they're probably used to almost everything
not working - this would have been reason enough to upgrade if it were
me, but some people seem to thrive on pain and frustration.

You're making a link here, between CSS and the W3C DOM, where there is
none. A browser can quite conceivably support CSS but not the DOM, or vice
versa. It isn't likely, I'll admit, but as you can't guarantee it won't
happen, you shouldn't create such links.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)