IE7 javascript using DOM wont output Dynamic Text?

[hoist1138]

Thanks to anyone who may be able to steer me in the right direction :)

Interesting that this works fine in All Browsers BUT Internet Explorer.
fairly simple goal......

get a "src" img element attribute and display it (by manipulating DOM elements) on the webpage under a graphic...(for a dynamic label)

[code=javascript]var mainPic = document.getEle mentById("place holder");

var picSrc = mainPic.getAttr ibute("src");

var container = document.getEle mentById("divCo ntainer");//the container div refference so I can use replaceChild() method to replace the targeted <p> Child Node

var oldText = document.getEle mentById("repla ceMe");
var newPara = document.create Element("p");
var lableName = document.create TextNode(picSrc ); //this variable doesnt want to transfer in IE, works fine in FF and Safari
newPara.appendC hild(newName);
newPara.setAttr ibute("id","rep laceMe");

container.repla ceChild(newPara ,oldText);[/code]

again, the goal is satisfied if all I can do is get IE to actually out put a dynamic text variable using the DOM with replaceChild()
Is there a known issue with outputing strings using the DOM in IEx?
thanks to all who lend some brain matter.

[mrhoo]

newPara.appendC hild(newName);

You have no variable newName declared.

[hoist1138]

opps, thanks for the look...I forgot to include it in the Original post, Again heres the weird thing, It works great in all other browsers, and I have tried to look google over and over. Im not sure where to look for this issue.

[code=javascript]var mainPic = document.getEle mentById("place holder");

var picSrc = mainPic.getAttr ibute("src");

var container = document.getEle mentById("divCo ntainer");//the container div refference so I can use replaceChild() method to replace the targeted <p> Child Node

var oldText = document.getEle mentById("repla ceMe");

var newPara = document.create Element("p");

var lableName = document.create TextNode(picSrc ); //this variable doesnt want to transfer in IE, works fine in FF and Safari
var newName = picSrc;
newPara.appendC hild(newName);

newPara.setAttr ibute("id","rep laceMe");

container.repla ceChild(newPara ,oldText);[/code]

[acoder]

What's the value of the src attribute? Is it relative or an absolute path?

[hoist1138]

here is an example of an image name that the script gets and displays on the page perfectly fine with FF and safari..

[CODE=javascript]//heres the HTML the image src attrib I want to grab....
<img src="Single/VG-001B.jpg" alt="" name="placehold er" width="450" height="350" id="placeholder " />

//heres the javascript targeting that src attrib......

var mainPic = document.getEle mentById("place holder");
//set up the PARENT DIV CONTAINER so the child elements can be manipulated
//first check if the current pages has the <div id="divContaine r"> node there, otherwise forget this section!
if(document.get ElementById("di vContainer")){
var picSrc = mainPic.getAttr ibute("src");
var getFullName = picSrc.split("/");//use the "/" character to mark the split point into an array
var getName = getFullName[1].split(".");
var finalName = getName[0];
var container = document.getEle mentById("divCo ntainer");
var oldText = document.getEle mentById("repla ceMe");
var newPara = document.create Element("p");
var newName = document.create TextNode(finalN ame);
/*var test = document.create TextElement("th is is a test");*/
/*var myText = document.getEle mentById("text" );*/
newPara.appendC hild(newName);
newPara.setAttr ibute("id","rep laceMe");
container.repla ceChild(newPara ,oldText);
}

//stop the default a link behavior
return false;
[/CODE]
its an absolute path right?

[hoist1138]

by the way to see the real world example for my client.....

http://www.pet-memorial-markers.com/MemorialDesignCenter/OtherStoryOptions/flowerVases.html

the vase name at the bottom of the graphic is the graphic name extracted from the path
again, try it in FF or Safari, and then.......IE and BLAM, no dynamic src attribute rendering to the page.....

one solution I was thinking of was doing detection script for IE, heres the prototype.....

if ( IE ){
then use non-standard INNER HTML to render to the browser
}else{
use standards like the DOM because standards make life easier for humans that build stuff
}

[acoder]

If you alert picSrc, you will see that IE converts it to a full path, while the rest of the browsers leave it as you expect it to be.

[Romulo NF]

If i got it right thats more or less what you need

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Dinamic Label</title>
</head>

<script>

window.onload = function() {
imgs = document.getElementsByTagName("img")
images = new Array()

	for (x=0; x<imgs.length; x++) {
	images[x] = new createDynamicLabel(imgs[x])
	}
}

function createDynamicLabel(imgReference) {
this.image = imgReference

this.name = this.image.src.substring(this.image.src.lastIndexOf("/")+1,this.image.src.lastIndexOf("."))

this.lineBreak = document.createElement("br")
this.image.parentNode.insertBefore(this.lineBreak,this.image.nextSibling)

this.label = document.createElement("em")
this.label.innerHTML = this.name
this.label.style.textTransform = "capitalize"
this.label.style.font = "bold 11px verdana"

this.image.parentNode.insertBefore(this.label,this.lineBreak.nextSibling)
}

</script>

<body>

<img src="down.gif">

<br><br>

<img src="aceitar.gif">

<br><br>

<img src="add.gif">

<br><br>

<img src="cancelar.gif">

</body>
</html>

Good luck!

ps: take care with additional blank spaces in the code like in line 32

[acoder]

If i got it right thats more or less what you need

Nice! That should do the trick - the most important thing is the use of lastIndexOf().

[hoist1138]

thanks everyone, all masters...

[acoder]

Glad you got it working. Post again if you have any more questions.