473,324 Members | 2,567 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Another DOM question concerning IE & Opera createElement

Why am I having so much trouble with using DOM in IE & Opera to create, then remove an Object & Embedded element?

Here's the code that works in Firefox (Mac/Win/Linux) and Safari, but not on IE or Opera:

Expand|Select|Wrap|Line Numbers
  1.     var myfl_div = document.createElement('myfldiv');
  2.     myfl_div.setAttribute('style','position:absolute; left:100px; top:200px; width:960px; height: 560px; background-color: transparent;z-index: 5;');
  3.  
  4. function myFl_obj_emb()
  5. {
  6.  
  7.     var myBgDiv = document.getElementById('autismlogo');
  8.     myBgDiv.innerHTML = '';
  9.     myBgDiv.innerHTML = '<img src="images/bg5.jpg" usemap="#bg" border="0" alt="Autism the Musical">';
  10.  
  11.     var myAutismFlshObj = document.createElement('object');
  12.     myAutismFlshObj.setAttribute('classid','clsid:d27cdb6e-ae6d-11cf-96b8-444553540000');
  13.     myAutismFlshObj.setAttribute('codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0');
  14.     myAutismFlshObj.setAttribute('width','960');
  15.     myAutismFlshObj.setAttribute('height','560');
  16.     myAutismFlshObj.setAttribute('id','autismIntro');
  17.  
  18.     var myAutismFlshObjParam1 = document.createElement('param');
  19.     myAutismFlshObjParam1.setAttribute('name','allowScriptAccess');
  20.     myAutismFlshObjParam1.setAttribute('value','sameDomain');
  21.  
  22.     var myAutismFlshObjParam2 = document.createElement('param');
  23.     myAutismFlshObjParam2.setAttribute('name','movie');
  24.     myAutismFlshObjParam2.setAttribute('value','autism_intro3.swf');
  25.  
  26.     var myAutismFlshObjParam3 = document.createElement('param');
  27.     myAutismFlshObjParam3.setAttribute('name','quality');
  28.     myAutismFlshObjParam3.setAttribute('value','high');
  29.  
  30.     var myAutismFlshObjParam4 = document.createElement('param');
  31.     myAutismFlshObjParam4.setAttribute('name','bgcolor');
  32.     myAutismFlshObjParam4.setAttribute('value','#000000');
  33.  
  34.     var myAutismFlshObjParam6 = document.createElement('param');
  35.     myAutismFlshObjParam6.setAttribute('name','id');
  36.     myAutismFlshObjParam6.setAttribute('value','autismIntro');
  37.  
  38.  
  39.     var myAutismFlshEmbed = document.createElement('embed');
  40.     myAutismFlshEmbed.setAttribute('src','autism_intro3.swf');
  41.     myAutismFlshEmbed.setAttribute('quality','high');
  42.     myAutismFlshEmbed.setAttribute('bgcolor','#000000');
  43.     myAutismFlshEmbed.setAttribute('width','960');
  44.     myAutismFlshEmbed.setAttribute('height','560');
  45.     myAutismFlshEmbed.setAttribute('name','autism_intro3');
  46.     myAutismFlshEmbed.setAttribute('id','autismIntro');
  47.     myAutismFlshEmbed.setAttribute('align','middle');
  48.     myAutismFlshEmbed.setAttribute('allowScriptAccess','sameDomain');
  49.     myAutismFlshEmbed.setAttribute('type','application/x-shockwave-flash');
  50.     myAutismFlshEmbed.setAttribute('pluginspage','http://www.macromedia.com/go/getflashplayer');
  51.  
  52.     document.body.appendChild(myfl_div);
  53.     myfl_div.appendChild(myAutismFlshObj);
  54.     myAutismFlshObj.appendChild(myAutismFlshObjParam1);
  55.     myAutismFlshObj.appendChild(myAutismFlshObjParam2);
  56.     myAutismFlshObj.appendChild(myAutismFlshObjParam3);
  57.     myAutismFlshObj.appendChild(myAutismFlshObjParam4);
  58.     myAutismFlshObj.appendChild(myAutismFlshObjParam6);
  59.     myAutismFlshObj.appendChild(myAutismFlshEmbed);
  60. }
  61.  
  62. function myfl_obj_emb_remove()
  63. {
  64.     document.body.removeChild(myfl_div);
  65. }
  66.  
Any help is always appreciated and thanks in advance
Sep 21 '07 #1
7 2506
acoder
16,027 Expert Mod 8TB
IE doesn't support creating object elements via the createElement method properly. In fact, input elements can't be created properly either. You have to use the whole HTML string. I'm not sure about Opera.

On your first line, you're creating an invalid element.
Sep 21 '07 #2
Thanks for the reply.

I thought that might be the case, but I was hoping that maybe there was a chance of a little different syntax for IE. What do you mean by "write it as one string?"

If I can not create an Element using the DOM, then how do I go about removing an embedded flash object from IE?

That was the whole point of using the DOM, was so that I could call removeChild()

Once more, any help is appreciated and thanks in advance.

You guys are the greatest :-)
Sep 21 '07 #3
OK, this is what I've tried to do, which gives me no errors and the DOM inspector for both Opera and IE show that the nodes are there.

So, what am I doing wrong?

Expand|Select|Wrap|Line Numbers
  1. function myFl_obj_emb_ms()
  2. {
  3.     var myBgDiv = document.getElementById('autismlogo');
  4.     myBgDiv.innerHTML = '';
  5.     myBgDiv.innerHTML = '<img src="images/bg5.jpg" usemap="#bg" border="0" alt="Autism the Musical">';
  6.  
  7.     var myAutismFlshObj = document.createElement('object');
  8.     myAutismFlshObj.classid = 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000';
  9.     myAutismFlshObj.codebase = 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0';
  10.     myAutismFlshObj.width = '640';
  11.     myAutismFlshObj.height = '560';
  12.     myAutismFlshObj.id = 'autismIntro';
  13.     myAutismFlshObj.movie = 'autism_intro3.swf';
  14.  
  15.     var myAutismFlshObjParam1 = document.createElement('param');
  16.     myAutismFlshObjParam1.name = 'allowScriptAccess';
  17.     myAutismFlshObjParam1.value = 'sameDomain';
  18.  
  19.     var myAutismFlshObjParam2 = document.createElement('param');
  20.     myAutismFlshObjParam2.name = 'movie';
  21.     myAutismFlshObjParam2.value = 'autism_intro3.swf';
  22.  
  23.     var myAutismFlshObjParam3 = document.createElement('param');
  24.     myAutismFlshObjParam3.name = 'quality';
  25.     myAutismFlshObjParam3.value = 'high';
  26.  
  27.     var myAutismFlshObjParam4 = document.createElement('param');
  28.     myAutismFlshObjParam4.name = 'bgcolor';
  29.     myAutismFlshObjParam4.value = '#000000';
  30.  
  31.     var myAutismFlshObjParam5 = document.createElement('param');
  32.     myAutismFlshObjParam5.name = 'play';
  33.     myAutismFlshObjParam5.value = 'true';
  34.  
  35.     var myAutismFlshObjParam6 = document.createElement('param');
  36.     myAutismFlshObjParam6.name = 'id';
  37.     myAutismFlshObjParam6.value = 'autismIntro';
  38.  
  39.  
  40.     var myAutismFlshEmbed = document.createElement('embed');
  41.     myAutismFlshEmbed.src = 'autism_intro3.swf';
  42.     myAutismFlshEmbed.quality = 'high';
  43.     myAutismFlshEmbed.play = 'true';
  44.     myAutismFlshEmbed.bgcolor = '#000000';
  45.     myAutismFlshEmbed.width = '640';
  46.     myAutismFlshEmbed.height = '560';
  47.     myAutismFlshEmbed.name = 'autism_intro3';
  48.     myAutismFlshEmbed.id = 'autismIntro';
  49.     myAutismFlshEmbed.align = 'middle';
  50.     myAutismFlshEmbed.allowScriptAccess = 'sameDomain';
  51.     myAutismFlshEmbed.type = 'application/x-shockwave-flash';
  52.     /*myAutismFlshEmbed.pluginspage = 'http://www.macromedia.com/go/getflashplayer';*/
  53.  
  54.     document.body.appendChild(myfl_div);
  55.     document.body.appendChild(myAutismFlshObj);
  56.     document.body.appendChild(myAutismFlshObjParam1);
  57.     document.body.appendChild(myAutismFlshObjParam2);
  58.     document.body.appendChild(myAutismFlshObjParam3);
  59.     document.body.appendChild(myAutismFlshObjParam4);
  60.     document.body.appendChild(myAutismFlshObjParam5);
  61.     document.body.appendChild(myAutismFlshObjParam6);
  62.     document.body.appendChild(myAutismFlshEmbed);
  63. }
  64.  
  65. function myfl_obj_emb_remove()
  66. {
  67.     document.body.removeChild(myfl_div);
  68. }
  69.  
The remove function is called after the swf file has completed.

Once more, any help is appreciated and thanks in advance.
Sep 22 '07 #4
acoder
16,027 Expert Mod 8TB
I thought that might be the case, but I was hoping that maybe there was a chance of a little different syntax for IE. What do you mean by "write it as one string?"
Instead of
Expand|Select|Wrap|Line Numbers
  1. document.createElement("object");
you have to write out the whole HTML string (see documentation).
So you would probably write something like:
Expand|Select|Wrap|Line Numbers
  1. document.createElement("<object id=\"...\" width=\"...\" ...>...</object>");
This is incorrect syntax, so won't work in standards-compliant browsers so you could check for the existence of the object and then try this code.
Sep 22 '07 #5
OK, with some digging around on the internet and help from the last response, here's the solution:

First, I had to use PHP to detect what browser because I found that javascript can not tell between Opera and Internet Explorer and thereafter direct the browser to the proper Javascript code:

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. if(strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== FALSE)
  3. {
  4. echo  '
  5.     </head>
  6.     <body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_obj_emb_opera();">
  7.     ';
  8. }
  9. else if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
  10. {
  11. echo  '
  12.     </head>
  13.     <body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_detect_func();">
  14. <div id="myfldiv">
  15. <span>
  16. </span>
  17. </div>    
  18.     ';
  19. }
  20. else
  21. {
  22. echo'</head><body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_detect_func();">';
  23. }
  24. ?>
  25.  
The above code also creates a div called "myfldiv" which I did not want to be created with any other browser other than IE.

The following Javascript code, with respects to Opera, creates an element by writing the entire HTML string exactly as the response above suggested.

Expand|Select|Wrap|Line Numbers
  1. function myFl_obj_emb_opera()
  2. {
  3.     var myfl_div = document.createElement('myfldiv');
  4.     myfl_div.setAttribute('style','position:absolute; left:100px; top:200px; width:640px; height: 560px; background-color: transparent;z-index: 5;');
  5.  
  6.             var myBgDiv = document.getElementById('autismlogo');
  7.             myBgDiv.innerHTML = '';
  8.             myBgDiv.innerHTML = '<img src="images/bg5.jpg" usemap="#bg" border="0" alt="Autism the Musical">';
  9.  
  10.             myfl_div.innerHTML = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase ="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="640" height="560" id="autismIntro" movie="autism_intro3.swf" src="autism_intro3.swf">';
  11.  
  12.             myfl_div.innerHTML += '<param name=\'allowScriptAccess\' value =\'sameDomain\'>';
  13.  
  14.             myfl_div.innerHTML += '<param name=\'movie\' value =\'autism_intro3.swf\'>';
  15.  
  16.             myfl_div.innerHTML += '<param name=\'quality\' value =\'high\'>';
  17.  
  18.             myfl_div.innerHTML += '<param name=\'bgcolor\' value =\'#000000\'>';
  19.  
  20.             myfl_div.innerHTML += '<param name=\'play\' value =\'true\'>';
  21.  
  22.             myfl_div.innerHTML += '<param name=\'id\' value =\'autismIntro\'>';
  23.  
  24.             myfl_div.innerHTML += '<embed src=\'autism_intro3.swf\' quality=\'high\' bgcolor=\'#000000\' width=\'640\' height=\'560\' name=\'autism_intro3\' id=\'autismIntro\' align=\'middle\' allowScriptAccess=\'sameDomain\' type=\'application/x-shockwave-flash\' pluginspage=\'http://www.macromedia.com/go/getflashplayer\'>';
  25.  
  26.             document.body.appendChild(myfl_div);
  27. }
  28.  
However, I could not get this to work with IE, until I did some digging around adobe's web site and found that IE handles flash differently, so the people at macromedia/abode came up with a solution by way of a JavaScript file of their own that you attach to your html/php page, like so:

Expand|Select|Wrap|Line Numbers
  1. <script src="js_files/AC_RunActiveContent.js" type="text/javascript"></script>
  2.  
From there, that allows the "AC_FL_RunContent" function to be called, which makes it possible for flash to be played in any version of IE.

Expand|Select|Wrap|Line Numbers
  1. function myFl_obj_emb_ms()
  2. {
  3.     var myfl_div = document.getElementById('myfldiv');
  4.     myfl_div.setAttribute('style','position:absolute; left:100px; top:200px; width:640px; height: 560px; background-color: #000000; z-index: 5;');
  5.  
  6. myfl_div.innerHTML = '<script type="text/javascript">AC_FL_RunContent(\'codebase\',\'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0\',\'width\',\'640\',\'height\',\'560\',\'id\',\'autism_intro3\',\'align\',\'middle\',\'src\',\'autism_intro3\',\'quality\',\'high\',\'bgcolor\',\'#000000\',\'name\',\'autism_intro3\',\'allowscriptaccess\',\'sameDomain\',\'pluginspage\',\'http://www.macromedia.com/go/getflashplayer\',\'movie\',\'autism_intro3\' );</script><noscript><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase ="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="640" height="560" id="autismIntro" movie="autism_intro3.swf" bgcolor="#000000" src="autism_intro3.swf">';
  7.  
  8. myfl_div.innerHTML += '<param name=\'movie\' value =\'autism_intro3.swf\'>';
  9.  
  10. myfl_div.innerHTML += '<param name=\'quality\' value =\'high\'>';
  11.  
  12. myfl_div.innerHTML += '<param name=\'bgcolor\' value =\'#000000\'>';
  13.  
  14. myfl_div.innerHTML += '<param name=\'play\' value =\'true\'>';
  15.  
  16. myfl_div.innerHTML += '<param name=\'id\' value =\'autismIntro\'>';
  17.  
  18. myfl_div.innerHTML += '<embed src=\'autism_intro3.swf\' quality=\'high\' bgcolor=\'#000000\' width=\'640\' height=\'560\' name=\'autism_intro3\' id=\'autismIntro\' align=\'middle\' allowScriptAccess=\'sameDomain\' type=\'application/x-shockwave-flash\' pluginspage=\'http://www.macromedia.com/go/getflashplayer\'>';
  19.  
  20.     document.body.appendChild(myfl_div);
  21. }
  22.  
Once the flash file completes it's animation, then it calls a two Javascript functions, one to remove the newly created div and the second to load the home page -- "myhomepage();"

Here's the remove div function, which (once again) IE did not create the div via createElement function, so I had to use getElementById to select the node to remove it:

Expand|Select|Wrap|Line Numbers
  1. function myfl_obj_emb_remove()
  2. {
  3.     if(navigator.appName == "Microsoft Internet Explorer")
  4.     {
  5.         document.body.removeChild(document.getElementById('myfldiv'));        
  6.     }
  7.     else
  8.     {
  9.         document.body.removeChild(myfl_div);
  10.     }
  11. }
  12.  
Sep 24 '07 #6
One update, the latest version of Opera on Mac requires the same technique used with IE for removing the child node.

Which also required that I use PHP to detect Opera and create the div manually as I did with IE.

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. if(strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== FALSE)
  3. {
  4. echo  '
  5.     </head>
  6.     <body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_obj_emb_opera();">
  7. <div id="myfldiv">
  8. <span>
  9. </span>
  10. </div>    
  11.     ';
  12. }
  13. else if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
  14. {
  15. echo  '
  16.     </head>
  17.     <body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_detect_func();">
  18. <div id="myfldiv">
  19. <span>
  20. </span>
  21. </div>    
  22.     ';
  23. }
  24. else
  25. {
  26. echo'</head><body onload="javascript:preloading3();javascript:Is();javascript:myEmailListFunc();javascript:myFl_detect_func();">';
  27. }
  28. ?>
  29.  
  30.  
  31. function myfl_obj_emb_remove()
  32. {
  33.     if(navigator.appName == "Microsoft Internet Explorer")
  34.     {
  35.         document.body.removeChild(document.getElementById('myfldiv'));        
  36.     }
  37.     else if(navigator.appName == "Opera")
  38.     {
  39.         document.body.removeChild(document.getElementById('myfldiv'));
  40.     }
  41.     else
  42.     {
  43.         document.body.removeChild(myfl_div);
  44.     }
  45. }
  46.  
Sep 24 '07 #7
acoder
16,027 Expert Mod 8TB
Thanks for posting your working solutions.

You've used browser detection which is prone to error. Wherever possible, you should try feature/object detection. I'm not sure if it is possible in this case, but I haven't tested.
Sep 25 '07 #8

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

Similar topics

3
by: Michael Phillips | last post by:
Hello I am trying to use DOM to create an object in a document and wish to be compativle with Opera My code is containerDiv = document.createElement("div"); //create download container...
2
by: Martin Doyle | last post by:
Ok, I'm building a JS-based limitless-sublevel dynamic menu and am making it cross browser as well - 3 packs of aspirin so far and counting ;) I'm having a weird rendering problem using Opera...
2
by: skubik | last post by:
I'm curious as to whether it's possible to create a Form object and populate it with form element objects, strictly in Javascript, without the need to apply the form to a document. Essentially,...
4
by: Howard Jess | last post by:
In Opera 8.01 (Linux; Build 1204) and in Opera 7.54 (Windows XP; Build 3865), my form disappears from the HTML markup (below). To summarize: 1) In a <script> block in the <head> I create a form...
7
by: priya.tweety | last post by:
How to call a js file from another js file?
2
by: Eero Tuomenoksa | last post by:
Hi Does someone knows how i can show/hide multible divs at one click? -- Käytössä Operan vallankumouksellinen sähköpostiohjelma: http://www.opera.com/mail/
3
by: patrickkellogg | last post by:
I have this code when you click the buttom is suppose to add a job history. it works with firefox, opera, but not ie. (please note - new entries don't have all the elements in them yet, but...
2
by: emma.sax | last post by:
My script is as follows: function setImageSizes() { var staticHeight = 70; if(!document.getElementsByTagName || !document.images) return false; var thumbnail =...
14
RMWChaos
by: RMWChaos | last post by:
Firebug is reporting "too much recursion" when I attempt to create a child element in a parent that doesn't exist yet. The script should automatically create the missing parent before going on to...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.