document.getElementById not working in IE. Why?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved
1 2

•
•
Join Date: Sep 2009
Posts: 8
Reputation: edDev is an unknown quantity at this point 
Solved Threads: 0
edDev edDev is offline Offline
Newbie Poster

document.getElementById not working in IE. Why?

 
-1
  #1
Sep 30th, 2009
First a little background. I have a client (in-house) who insists that our training pages (launched from within iframes on a parent page) be able to load .wmv files with variables for the width and height parameters so we don't have to recode when videos are switched. Flash videos are not an option.

I've searched the net and have received several suggestions and even code snippets from several sources but the only one that comes close to working is this one:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2. 	<head>
  3.     <style type="text/css">
  4. <!--
  5. .fontStyle {
  6. 	font-family: Verdana, Geneva, sans-serif;
  7. 	font-size: small;
  8. 	font-weight: bold;
  9. 	color: #67A2DC;
  10. }
  11.  
  12. -->
  13.     </style>
  14. 		<script type="text/javascript">			
  15.  
  16. 			window.onload=function(){
  17. 				loadVideo();
  18. 			}
  19.  
  20.  
  21. 			function loadVideo()
  22. 			{
  23.  
  24. 					if (parseInt(navigator.appVersion)>3)
  25. 						{
  26. 							if (navigator.appName == "Netscape")
  27. 							{
  28. 								winW = window.innerWidth;
  29. 								winH = window.innerHeight;
  30. 							}
  31. 					if (navigator.appName.indexOf("Microsoft") != -1)
  32. 							{
  33. 								winW = document.body.offsetWidth;
  34. 								winH = document.body.offsetHeight;
  35. 							}
  36. 			}
  37.  
  38. 				var dimW = winW-50;
  39. 				var dimH = winH-20;
  40. 				var w1 = dimW.toString();
  41. 				var h1 = dimH.toString();
  42.  
  43.  
  44.  
  45. 				if(document.getElementById("vidEmbed") != null)
  46. 				{
  47.  
  48. 					document.getElementById("vidEmbed").src = "Welcome_1.wmv";
  49. 					document.getElementById("vidEmbed").style.width = w1;
  50. 					document.getElementById("vidEmbed").style.height = h1;
  51. 				}
  52. 				else if(document.getElementById("Player") != null)
  53. 				{
  54. 					document.getElementById("Player").style.width = w1;
  55. 					document.getElementById("Player").style.height = h1;
  56. 					document.getElementById("objectSrc").value = "Welcome_1.wmv";
  57. 				}
  58.  
  59.  
  60. 			}
  61. 		</script>
  62.  
  63. 	</head>
  64. <body><div>
  65. <p><span class="fontStyle">Introduction<br>
  66.  
  67. </span>
  68.   <object id="Player" width="100%" height="100%" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="border:0px;"> 
  69.  
  70.     <param name="autoStart" value="True">
  71.     <param name="uiMode" value="full">
  72.     <param name="volume" value="50">
  73.     <param name="mute" value="false">
  74.     <param name="URL" id="objectSrc" value="">
  75.     <embed src="" id="vidEmbed" width="100%" height="100%" autostart="true" uimode="full" volume="50" mute="false"> </embed>
  76.   </object>
  77. </p>
  78. </div>
  79. </body>
  80. </html>

I say close because it works just fine in Firefox (go figure) but doesn't appear to be working correctly in IE. IE just will not load the video using the "objectSrc" id. If I move the source video from the javascript into the actual object, then it loads and plays the video (it still doesn't resize the window correctly).

I've been in several forums and have poured over the code with several people and we just can't figure out why this code doesn't work correctly.

Can anyone here help?

Thanks,

M.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 885
Reputation: Airshow will become famous soon enough Airshow will become famous soon enough 
Solved Threads: 127
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: document.getElementById not working in IE. Why?

 
0
  #2
Sep 30th, 2009
You could try an innerHTML approach rather than trying to reuse the object/embed with DHTML.

First rewrite the HTML as follows:
HTML Syntax (Toggle Plain Text) 
  1. <body>
  2. <p><span class="fontStyle">Introduction</span></p>
  3. <div id="video">
  4.   <object id="Player" width="100%" height="100%" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="border:0px;"> 
  5.     <param name="autoStart" value="True">
  6.     <param name="uiMode" value="full">
  7.     <param name="volume" value="50">
  8.     <param name="mute" value="false">
  9.     <param name="URL" id="objectSrc" value="">
  10.     <embed src="" id="vidEmbed" width="100%" height="100%" autostart="true" uimode="full" volume="50" mute="false"> </embed>
  11.   </object>
  12. </div>
  13. </body>
Then in javascript,
javascript Syntax (Toggle Plain Text) 
  1. var videoString = "<object id=\"Player\" width=\"%sW\" height=\"%sH\" classid=\"CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6\" style=\"border:0px;\">" +
  2. 	"<param name=\"autoStart\" value=\"True\">" +
  3. 	"<param name=\"uiMode\" value=\"full\">" +
  4. 	"<param name=\"volume\" value=\"50\">" +
  5. 	"<param name=\"mute\" value=\"false\">" +
  6. 	"<param name=\"URL\" value=\"%sURL\">" +
  7. 	"<embed src=\"%sURL\" width=\"%sW\" height=\"%sH\" autostart=\"true\" uimode=\"full\" volume=\"50\" mute=\"false\"></embed>" +
  8. 	"</object>";
(Not tested)

Then use global regular expression videoString.replace(.....) to replace %sW, %sH, %sURL with appropriate values and document.getElementById("video").innerHTML = .... to poke this HTML into the DOM.

Agreed, it shouldn't be necessary but it might just work.

You can do this within a if(){} condition such that it only applies to IE thus leaving your good FF etc. code intact, and also allowing videoString to be simplified (no need for "<embed ....>").

Airshow
Last edited by Airshow; Sep 30th, 2009 at 5:38 pm.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,396
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 170
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: document.getElementById not working in IE. Why?

 
0
  #3
Sep 30th, 2009
html Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. <!--//
  3.  function setplay(thisfile,ww,hh) {
  4. document.getElementById("MediaPlayer1").src=thisfile;
  5. document.getElementById("MediaPlayer1").style.width=ww;
  6. document.getElementById("MediaPlayer1").style.height=hh;
  7. }
  8.  //-->
  9. </script>
  10. <p><a href="http://www.microsoft.com/windows/windowsmedia/player/download/"><img alt="Get Windows Media Player" src="http://www.microsoft.com/windows/windowsmedia/images/logos/getwm/mp11_88x31_static.gif"width="88" height="31" border="0"></A><br>
  11. <object id="MediaPlayer1" width=384 height=300 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
  12. <param name="fileName" value="">
  13. <param name="showControls" value="true">
  14. <param name="PlayCount" value="0">
  15. <param name="animationatStart" value="true">
  16. <param name="transparentatStart" value="true">
  17. <param name="autoStart" value="true">
  18. <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="" name="MediaPlayer1" width=360 height=260 AutoStart=true></embed></object></p>
  19. <a onclick='setfile("thisfile.wmv","480","300");' > Play thisfile </a><br>
  20. <a onclick='setfile("thatfile.wmv","400","320");' > Play thatfile </a>
Last edited by almostbob; Sep 30th, 2009 at 9:07 pm.
Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 885
Reputation: Airshow will become famous soon enough Airshow will become famous soon enough 
Solved Threads: 127
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: document.getElementById not working in IE. Why?

 
0
  #4
Sep 30th, 2009
edDev,

Try Bob's method first. It looks good to me.

I thought there was a way to address both Object and Embed but it is several years since I had to do it. I'm sure I must have forgotten more than I remember these days.

Airshow
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 8
Reputation: edDev is an unknown quantity at this point 
Solved Threads: 0
edDev edDev is offline Offline
Newbie Poster

Re: document.getElementById not working in IE. Why?

 
0
  #5
Oct 1st, 2009
Sorry guys, went home ill yesterday lunchtime. Am checking from home now - called out sick again.

We need to be able to use variables for the width and height. Bob's code appears to require actual pixel values or am I misreading what I'm seeing?

Thanks,

M.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 885
Reputation: Airshow will become famous soon enough Airshow will become famous soon enough 
Solved Threads: 127
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: document.getElementById not working in IE. Why?

 
0
  #6
Oct 1st, 2009
From his photo, I think that Bob is big enough to look after himself, but since I am around and Bob isn't, I hope he will forgive me for answering on his behalf.

Bob's script is written as a function, setplay , such that thisfile , ww and hh are specified when it is called, eg. setplay('myvid1.wmv', '320', '240'); .

I think you will find that IE will play ball with it as posted, but Moz browsers need 'px' to be specified explicitly.

javascript Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. <!--//
  3. function setplay(thisfile,ww,hh) {
  4.   document.getElementById("MediaPlayer1").src=thisfile;
  5.   document.getElementById("MediaPlayer1").style.width=ww+'px';
  6.   document.getElementById("MediaPlayer1").style.height=hh+'px';
  7. }
  8. //-->
  9. </script>
Alternatively, leave Bob's code as is giving you the freedom to call with
setplay('myvid1.wmv', '320px', '240px'); ,
or
setplay('myvid1.wmv', '100%', '100%'); ,
as required.

If width and height need calculating, then
javascript Syntax (Toggle Plain Text) 
  1. var width = expression;
  2. var height = expression;
  3. setplay('myvid1.wmv', width+'px', height+'px');

Airshow
Last edited by Airshow; Oct 1st, 2009 at 1:22 pm.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 8
Reputation: edDev is an unknown quantity at this point 
Solved Threads: 0
edDev edDev is offline Offline
Newbie Poster

Re: document.getElementById not working in IE. Why?

 
0
  #7
Oct 2nd, 2009
Ok, I'm obviously missing something because for the life of me I can't get this work. First, what is setfile? Do you mean setplay?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <a onclick='setplay("oracleWelcome_1.wmv","480","300");' > Play thisfile </a><br>
  2. <a onclick='setfile("thatfile.wmv","400","320");' > Play thatfile </a>
. Second, even though you've got the <a...> tags there, I am not seeing a hyperlink.
Third, where do I call the setplay function? In the <body>?
I've tried in the body and as window.onload=function(){setplay(somefile.wmv, 480, 300);} but still don't see anything playing.
So obviously, I'm not seeing something...

Thanks,

M.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: document.getElementById not working in IE. Why?

 
1
  #8
Oct 2nd, 2009 
<html>
	<head>
    <style type="text/css">
<!--
.fontStyle {
	font-family: Verdana, Geneva, sans-serif;
	font-size: small;
	font-weight: bold;
	color: #67A2DC;
}

-->
    </style>
		<script type="text/javascript">			

			window.onload=function(){
				loadVideo();
			}
			
	
			function loadVideo()
			{
				
					if (parseInt(navigator.appVersion)>3)
						{
							if (navigator.appName == "Netscape")
							{
								winW = window.innerWidth;
								winH = window.innerHeight;
							}
					if (navigator.appName.indexOf("Microsoft") != -1)
							{
								winW = document.body.offsetWidth;
								winH = document.body.offsetHeight;
							}
			}
				
				var dimW = winW-50;
				var dimH = winH-20;
				var w1 = dimW.toString();
				var h1 = dimH.toString();
				
				
				
				if(document.getElementById("vidEmbed") != null)
				{
					
					document.getElementById("vidEmbed").src = "Welcome_1.wmv";
					document.getElementById("vidEmbed").style.width = w1;
					document.getElementById("vidEmbed").style.height = h1;
				}
				else if(document.getElementById("Player") != null)
				{
					document.getElementById("Player").style.width = w1;
					document.getElementById("Player").style.height = h1;
					//document.getElementById("objectSrc").value = "Welcome_1.wmv";
				
document.getElementById("Player").url = "Welcome_1.wmv";}


			}
		</script>

	</head>
<body><div>
<p><span class="fontStyle">Introduction<br>

</span>
  <object id="Player" width="100%" height="100%" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="border:0px;"> 
    
    <param name="autoStart" value="True">
    <param name="uiMode" value="full">
    <param name="volume" value="50">
    <param name="mute" value="false">
    <param name="URL" id="objectSrc" value="">
    <embed src="" id="vidEmbed" width="100%" height="100%" autostart="true" uimode="full" volume="50" mute="false"> </embed>
  </object>
</p>
</div>
</body>
</html>
Remove red lines!
Set the
<param name="uiMode" value="none"> If you don't want player controls to appear on your media.
Last edited by Troy III; Oct 2nd, 2009 at 1:07 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 8
Reputation: edDev is an unknown quantity at this point 
Solved Threads: 0
edDev edDev is offline Offline
Newbie Poster

Re: document.getElementById not working in IE. Why?

 
0
  #9
Oct 2nd, 2009
FANTASTIC!! THANK YOU! Now, I just noticed that it's not playing in Safari. Any idea why that might be?

Thank you,

M.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,396
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 170
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: document.getElementById not working in IE. Why?

 
0
  #10
Oct 2nd, 2009
safari is apple,
if a mac does the mac have windows media installed
from the "get windows media player" link included in the original script, that part of it works anyway
Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 1051 | Replies: 10
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxexample ajaxjspservlets api blackjack browser bug captchaformproblem checkbox child class close cookies createrange() cursor date debugger dependent developer disablefirebug dom dropdown editor element embed engine events explorer ext file flash form forms game gears getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images internet java javascript javascripthelp2020 jquery jsf jsfile jump libcurl maps margin math matrixcaptcha media mp3 mysql object onerror onmouseoutdivproblem onreadystatechange parent passing paypal pdf php player position post programming progressbar rated runtime safari scriptlets scroll search security session shopping size software solutions star stars stretch synchronous tweet unicode web webkit webservice window wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC