468,554 Members | 1,958 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,554 developers. It's quick & easy.

On fly change the text, image src not supported by IE?

I have the following code, and it works well on Mozilla 1.6. (However,
the image src property cannot be set on Mozilla 1.2.1).

Unfortunately, all the code:
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = itemInfo.price;
doesn't work on IE. What's the proper way to set them in IE?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>popup</title>
<script src="items.js" language="JavaScript"></script>
<script language="javascript">
<!---
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>
</head>
<body onload="javascript:show_details(opener.itemID);">

<table cellpadding="2" cellspacing="2" border="1"
style="text-align: left; width: 100%;">
<tbody>
<tr align="center">
<td style="vertical-align: top;"><img src="na.jpg" title=""
alt="Picture" ID="itemImage"/><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><div ID="descr"></div><br>
</td>
</tr>
<tr align="right">
<td style="vertical-align: top;"><div ID="price"></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
Jul 20 '05 #1
9 2090
Ivo
"Nick" <nb**********@hotmail.com> wrote in message
news:c1**********@news3.bu.edu...
I have the following code, and it works well on Mozilla 1.6. (However,
the image src property cannot be set on Mozilla 1.2.1).

Unfortunately, all the code
doesn't work on IE. What's the proper way to set them in IE?
With the code below, if there is an element with id "price" and an an
innerHTML property and an object itemInfo with a property price, then IE
will display it. Microsoft singlehandedly invented innerHTML so it would be
kinda strange if they suddenly stopped supporting it. Now I do see a nice
accessible div with id="price" below, so I guess the problem lies with the
itemInfo variables. Do you get the expected response if you write
alert(itemInfo.price) in the function?

<snip> <script language="javascript">
<!---
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>
</head>
<body onload="javascript:show_details(opener.itemID);">
You may drop the bit "javascript:". Unless you have specified a different
default content-type for scripts with a meta tag in the head, anything
inside the onload="..." will automatically be interpreted as javascript.

<snip> <td style="vertical-align: top;"><div ID="descr"></div><br>
</td>
</tr>
<tr align="right">
<td style="vertical-align: top;"><div ID="price"></div>

<snip>

HTH
Ivo
Jul 20 '05 #2
Ivo wrote:
"Nick" <nb**********@hotmail.com> wrote in message
news:c1**********@news3.bu.edu...
I have the following code, and it works well on Mozilla 1.6. (However,
the image src property cannot be set on Mozilla 1.2.1).

Unfortunately, all the code
doesn't work on IE. What's the proper way to set them in IE?

With the code below, if there is an element with id "price" and an an
innerHTML property and an object itemInfo with a property price, then IE
will display it. Microsoft singlehandedly invented innerHTML so it would be
kinda strange if they suddenly stopped supporting it. Now I do see a nice
accessible div with id="price" below, so I guess the problem lies with the
itemInfo variables. Do you get the expected response if you write
alert(itemInfo.price) in the function?

Thanks, it turn out be the scope problem because I wrote:

<script src="items.js" language="JavaScript"></script>
<script language="javascript">
<!---
var imageSrc;
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
...
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>

The items.js in the first <script> tag defined the object variable
items, which is global visibla in Mozilla, but the second <script> in IE
cannot see the variable. That's cause the problem.

I don't want to combine it into one because items.js will be a large
object variable definition. And the second <script> tag is for
"presentation layer" so it had better go with the html code. Any
solution to make a javascript variable definition global in the whole html?

Btw, looks mozilla 1.2.1 doesn't support

document.images.itemImage.src = itemInfo.imageUrl;

But Mozilla 1.6 can run the above line without problem.
<snip>
<script language="javascript">
<!---
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>
</head>
<body onload="javascript:show_details(opener.itemID);">

You may drop the bit "javascript:". Unless you have specified a different
default content-type for scripts with a meta tag in the head, anything
inside the onload="..." will automatically be interpreted as javascript.

<snip>
<td style="vertical-align: top;"><div ID="descr"></div><br>
</td>
</tr>
<tr align="right">
<td style="vertical-align: top;"><div ID="price"></div>


<snip>

HTH
Ivo

Jul 20 '05 #3
Ivo
"Nick" <nb**********@hotmail.com> wrote in message
news:c1**********@news3.bu.edu...
Ivo wrote:
"Nick" <nb**********@hotmail.com> wrote in message
news:c1**********@news3.bu.edu...
itemInfo variables. Do you get the expected response if you write
alert(itemInfo.price) in the function?

Thanks, it turn out be the scope problem because I wrote:

<script src="items.js" language="JavaScript"></script>
<script language="javascript">
<!---
var imageSrc;
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
...
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>

The items.js in the first <script> tag defined the object variable
items, which is global visibla in Mozilla, but the second <script> in IE
cannot see the variable. That's cause the problem.

I don't want to combine it into one because items.js will be a large
object variable definition. And the second <script> tag is for
"presentation layer" so it had better go with the html code. Any
solution to make a javascript variable definition global in the whole

html?

Once a scriptfile is read, it becomes part of the page source. Any global
variables that you create in script.js are as global as the functions are
other things that may be in the file. I can't say without having seen
script.js why IE is not picking up the "items" variable while Mozila is. You
pass one variable to the show_details function, "opener.itemID", why not the
"items" variable as well?
Ivo
Jul 20 '05 #4
Ivo wrote:
"Nick" <nb**********@hotmail.com> wrote in message
news:c1**********@news3.bu.edu...
Ivo wrote:
"Nick" <nb**********@hotmail.com> wrote in message
news:c1**********@news3.bu.edu...
itemInfo variables. Do you get the expected response if you write
alert(itemInfo.price) in the function?


Thanks, it turn out be the scope problem because I wrote:

<script src="items.js" language="JavaScript"></script>
<script language="javascript">
<!---
var imageSrc;
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
...
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>

The items.js in the first <script> tag defined the object variable
items, which is global visibla in Mozilla, but the second <script> in IE
cannot see the variable. That's cause the problem.

I don't want to combine it into one because items.js will be a large
object variable definition. And the second <script> tag is for
"presentation layer" so it had better go with the html code. Any
solution to make a javascript variable definition global in the whole


html?

Once a scriptfile is read, it becomes part of the page source. Any global
variables that you create in script.js are as global as the functions are
other things that may be in the file. I can't say without having seen
script.js why IE is not picking up the "items" variable while Mozila is. You
pass one variable to the show_details function, "opener.itemID", why not the
"items" variable as well?
Ivo


Now I put everything in the html file (File is shown below), Mozilla 1.6
always works fine. But IE 6 always error. When using VS.Net debug, it
said that the fill_details is not defined and stop at the <body
onload="javascript:fill_details(opener.itemID)...> .

It's so strange...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>popup</title>
<!--script src="items.js" language="JavaScript"></script-->
<script language="javascript">
<!---
var items = {
Default : {descr:'n/a', price:'n/a', color:'n/a', imageDir:'', top:0,
left:0, width:350, height:350},
ring1 : {descr:'Ring 1 description.', price:120, color:'gold',
imageDir:'', top:100, left:100, width:300, height:350},
};

// Member methods
function getImageUrl(ID) {
return this[ID].imageDir + ID + '.jpg';
}

// Assign member methods
items.imageUrl = getImageUrl;

// Member method
function getARecord(ID) {
var result = {descr:this[ID].descr, price:this[ID].price,
color:this[ID].color, imageUrl:this.imageUrl(ID),
left:this[ID].left, top:this[ID].top, width:this[ID].width,
height:this[ID].height};
return result;
}

items.getARecord = getARecord;

function fill_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = 'Price: ' + itemInfo.price;
if (itemInfo.width != 0 && itemInfo.height != 0)
window.resizeTo(itemInfo.width, itemInfo.height);
if (itemInfo.top != 0 && itemInfo.left != 0)
window.moveTo(itemInfo.left, itemInfo.top);
}
//--->
</script>
</head>
<body onload="javascript:fill_details(opener.itemID);">

<table cellpadding="2" cellspacing="2" border="1"
style="text-align: left; width: 100%;">
<tbody>
<tr align="center">
<td style="vertical-align: top;"><img src="na.jpg" title=""
alt="Picture" ID="itemImage"/><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><div ID="descr"></div><br>
</td>
</tr>
<tr align="right">
<td style="vertical-align: top;"><div ID="price"></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
Jul 20 '05 #5
Nick wrote:
Ivo wrote:
"Nick" <nb**********@hotmail.com> wrote in message
news:c1**********@news3.bu.edu...
Ivo wrote:

"Nick" <nb**********@hotmail.com> wrote in message
news:c1**********@news3.bu.edu...
itemInfo variables. Do you get the expected response if you write
alert(itemInfo.price) in the function?
Thanks, it turn out be the scope problem because I wrote:

<script src="items.js" language="JavaScript"></script>
<script language="javascript">
<!---
var imageSrc;
function show_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
...
document.getElementById("price").innerHTML = itemInfo.price;
}
//--->
</script>

The items.js in the first <script> tag defined the object variable
items, which is global visibla in Mozilla, but the second <script> in IE
cannot see the variable. That's cause the problem.

I don't want to combine it into one because items.js will be a large
object variable definition. And the second <script> tag is for
"presentation layer" so it had better go with the html code. Any
solution to make a javascript variable definition global in the whole

html?

Once a scriptfile is read, it becomes part of the page source. Any global
variables that you create in script.js are as global as the functions are
other things that may be in the file. I can't say without having seen
script.js why IE is not picking up the "items" variable while Mozila
is. You
pass one variable to the show_details function, "opener.itemID", why
not the
"items" variable as well?
Ivo


Now I put everything in the html file (File is shown below), Mozilla 1.6
always works fine. But IE 6 always error. When using VS.Net debug, it
said that the fill_details is not defined and stop at the <body
onload="javascript:fill_details(opener.itemID)...> .

It's so strange...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>popup</title>
<!--script src="items.js" language="JavaScript"></script-->
<script language="javascript">
<!---
var items = {
Default : {descr:'n/a', price:'n/a', color:'n/a', imageDir:'',
top:0, left:0, width:350, height:350},
ring1 : {descr:'Ring 1 description.', price:120, color:'gold',
imageDir:'', top:100, left:100, width:300, height:350},
};

// Member methods
function getImageUrl(ID) {
return this[ID].imageDir + ID + '.jpg';
}

// Assign member methods
items.imageUrl = getImageUrl;

// Member method
function getARecord(ID) {
var result = {descr:this[ID].descr, price:this[ID].price,
color:this[ID].color, imageUrl:this.imageUrl(ID),
left:this[ID].left, top:this[ID].top, width:this[ID].width,
height:this[ID].height};
return result;
}

items.getARecord = getARecord;

function fill_details(ID) {
var itemInfo = items.getARecord(ID);
document.images.itemImage.src = itemInfo.imageUrl;
//document.getElementById("itemImage").src = itemInfo.imageUrl;
document.getElementById("descr").innerHTML = itemInfo.descr;
document.getElementById("price").innerHTML = 'Price: ' +
itemInfo.price;
if (itemInfo.width != 0 && itemInfo.height != 0)
window.resizeTo(itemInfo.width, itemInfo.height);
if (itemInfo.top != 0 && itemInfo.left != 0)
window.moveTo(itemInfo.left, itemInfo.top);
}
//--->
</script>
</head>
<body onload="javascript:fill_details(opener.itemID);">

<table cellpadding="2" cellspacing="2" border="1"
style="text-align: left; width: 100%;">
<tbody>
<tr align="center">
<td style="vertical-align: top;"><img src="na.jpg" title=""
alt="Picture" ID="itemImage"/><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><div ID="descr"></div><br>
</td>
</tr>
<tr align="right">
<td style="vertical-align: top;"><div ID="price"></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>

never mind my previous message. The error is caused by a extra comma
when initialize the object items....
Jul 20 '05 #6
Ivo

"Nick" <nb**********@hotmail.com> wrote in message
news:c1**********@news3.bu.edu...
Nick wrote:
Ivo wrote:
"Nick" <nb**********@hotmail.com> wrote
Ivo wrote:
> "Nick" <nb**********@hotmail.com> wrote
<snip> never mind my previous message. The error is caused by a extra comma
when initialize the object items....


It usually is.
Good luck, Ivo
Jul 20 '05 #7
Ivo wrote:
"Nick" <nb**********@hotmail.com> wrote in message
news:c1**********@news3.bu.edu...
Nick wrote:
Ivo wrote:

"Nick" <nb**********@hotmail.com> wrote

>Ivo wrote:
>
>>"Nick" <nb**********@hotmail.com> wrote


<snip>
never mind my previous message. The error is caused by a extra comma
when initialize the object items....

It usually is.
Good luck, Ivo

Thanks, but Mozilla doesn't have problem with the extra ",". And I even
thought use this feature because I will use spreadsheet/database to
generate the initialize javascript code and I wounldn't worry about the
last ",".

Anyway, this example also shows how difficult to debug javascript, even
with MS VS.Net....
Jul 20 '05 #8
Ivo wrote:
"Nick" [...] wrote [...]:


Please do not write so-called attribution novels. Most of the
information in your attribution is superfluous as it is already
contained in the headers of the posting you reply to, while it
makes your posting and threads where your postings are quoted,
not as easy legible.
<body onload="javascript:show_details(opener.itemID);">


You may drop the bit "javascript:". Unless you have specified a different
default content-type for scripts with a meta tag in the head, anything
inside the onload="..." will automatically be interpreted as javascript.


No, only with UAs that use JavaScript as the default scripting language.
Thus standards-compliant HTML calls for explicitely specifying the
default scripting language to be used in values of intrinsic event
handler attributes:

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
...
</head>

See <http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.2>.
PointedEars
Jul 23 '05 #9
JRS: In article <40**************@PointedEars.de>, seen in
news:comp.lang.javascript, Thomas 'PointedEars' Lahn
<Po*********@web.de> posted at Mon, 5 Apr 2004 17:32:07 :
Ivo wrote:
"Nick" [...] wrote [...]:


Please do not write so-called attribution novels. Most of the
information in your attribution is superfluous as it is already
contained in the headers of the posting you reply to, while it
makes your posting and threads where your postings are quoted,
not as easy legible.


Ignore such remarks; he has yet to grow up. Evidently there is plenty
of time for that; but alas no progress.

The correct, agreed situation is described in the RFCs and allied
documents; they are authoritative, unlike pointy-head.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Randell D. | last post: by
3 posts views Thread by Geoff Soper | last post: by
7 posts views Thread by Keith Smith | last post: by
6 posts views Thread by David Stone | last post: by
14 posts views Thread by windandwaves | last post: by
1 post views Thread by UniDue | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.