By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,144 Members | 872 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,144 IT Pros & Developers. It's quick & easy.

IE7 javascript using DOM wont output Dynamic Text?

hoist1138
P: 6
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)

Expand|Select|Wrap|Line Numbers
  1. var mainPic = document.getElementById("placeholder");
  2.  
  3. var picSrc = mainPic.getAttribute("src");
  4.  
  5. var container = document.getElementById("divContainer");//the container div refference so I can use replaceChild() method to replace the targeted <p> Child Node
  6.  
  7. var oldText = document.getElementById("replaceMe");
  8. var newPara = document.createElement("p");
  9. var lableName = document.createTextNode(picSrc); //this variable doesnt want to transfer in IE, works fine in FF and Safari
  10. newPara.appendChild(newName);
  11. newPara.setAttribute("id","replaceMe");
  12.  
  13. container.replaceChild(newPara,oldText);
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.
Jan 8 '08 #1
Share this Question
Share on Google+
10 Replies


100+
P: 428
newPara.appendChild(newName);
You have no variable newName declared.
Jan 8 '08 #2

hoist1138
P: 6
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.

Expand|Select|Wrap|Line Numbers
  1. var mainPic = document.getElementById("placeholder");
  2.  
  3. var picSrc = mainPic.getAttribute("src");
  4.  
  5. var container = document.getElementById("divContainer");//the container div refference so I can use replaceChild() method to replace the targeted <p> Child Node
  6.  
  7. var oldText = document.getElementById("replaceMe");
  8.  
  9. var newPara = document.createElement("p");
  10.  
  11. var lableName = document.createTextNode(picSrc); //this variable doesnt want to transfer in IE, works fine in FF and Safari
  12. var newName = picSrc;
  13. newPara.appendChild(newName);
  14.  
  15. newPara.setAttribute("id","replaceMe");
  16.  
  17. container.replaceChild(newPara,oldText);
Jan 8 '08 #3

acoder
Expert Mod 15k+
P: 16,027
What's the value of the src attribute? Is it relative or an absolute path?
Jan 9 '08 #4

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

Expand|Select|Wrap|Line Numbers
  1. //heres the HTML the image src attrib I want to grab....
  2. <img src="Single/VG-001B.jpg" alt="" name="placeholder" width="450" height="350" id="placeholder" />
  3.  
  4. //heres the javascript targeting that src attrib......
  5.  
  6. var mainPic = document.getElementById("placeholder");
  7. //set up the PARENT DIV CONTAINER so the child elements can be manipulated
  8. //first check if the current pages has the <div id="divContainer"> node there, otherwise forget this section!
  9.         if(document.getElementById("divContainer")){
  10. var picSrc = mainPic.getAttribute("src");
  11.             var getFullName = picSrc.split("/");//use the "/" character to mark the split point into an array
  12.             var getName = getFullName[1].split(".");
  13.             var finalName = getName[0];
  14.             var container = document.getElementById("divContainer");
  15.             var oldText = document.getElementById("replaceMe");
  16.             var newPara = document.createElement("p");
  17.             var newName = document.createTextNode(finalName);
  18.             /*var test = document.createTextElement("this is a test");*/
  19.             /*var myText = document.getElementById("text");*/
  20.             newPara.appendChild(newName);
  21.             newPara.setAttribute("id","replaceMe");
  22.             container.replaceChild(newPara,oldText);
  23.             }
  24.  
  25.             //stop the default a link behavior
  26.             return false;
  27.  
its an absolute path right?
Jan 10 '08 #5

hoist1138
P: 6
by the way to see the real world example for my client.....
http://www.pet-memorial-markers.com/...owerVases.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
}
Jan 10 '08 #6

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 11 '08 #7

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

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5.     <title>Dinamic Label</title>
  6. </head>
  7.  
  8. <script>
  9.  
  10. window.onload = function() {
  11. imgs = document.getElementsByTagName("img")
  12. images = new Array()
  13.  
  14.     for (x=0; x<imgs.length; x++) {
  15.     images[x] = new createDynamicLabel(imgs[x])
  16.     }
  17. }
  18.  
  19. function createDynamicLabel(imgReference) {
  20. this.image = imgReference
  21.  
  22. this.name = this.image.src.substring(this.image.src.lastIndexOf("/")+1,this.image.src.lastIndexOf("."))
  23.  
  24. this.lineBreak = document.createElement("br")
  25. this.image.parentNode.insertBefore(this.lineBreak,this.image.nextSibling)
  26.  
  27. this.label = document.createElement("em")
  28. this.label.innerHTML = this.name
  29. this.label.style.textTransform = "capitalize"
  30. this.label.style.font = "bold 11px verdana"
  31.  
  32. this.image.parentNode.insertBefore(this.label,this.lineBreak.nextSibling)
  33. }
  34.  
  35. </script>
  36.  
  37. <body>
  38.  
  39. <img src="down.gif">
  40.  
  41. <br><br>
  42.  
  43. <img src="aceitar.gif">
  44.  
  45. <br><br>
  46.  
  47. <img src="add.gif">
  48.  
  49. <br><br>
  50.  
  51. <img src="cancelar.gif">
  52.  
  53. </body>
  54. </html>
  55.  
  56.  
Good luck!

ps: take care with additional blank spaces in the code like in line 32
Jan 11 '08 #8

acoder
Expert Mod 15k+
P: 16,027
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().
Jan 11 '08 #9

hoist1138
P: 6
thanks everyone, all masters...
Jan 14 '08 #10

acoder
Expert Mod 15k+
P: 16,027
Glad you got it working. Post again if you have any more questions.
Jan 15 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.