944,156 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > document.getElementById not working in IE. Why?
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Sep 30th, 2009
-1

document.getElementById not working in IE. Why?

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
edDev is offline Offline
8 posts
since Sep 2009
Permalink
Sep 30th, 2009
0

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

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.
Sponsor
Reputation Points: 318
Solved Threads: 358
WiFi Lounge Lizard
Airshow is online now Online
2,527 posts
since Apr 2009
Permalink
Sep 30th, 2009
0

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

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.
Reputation Points: 562
Solved Threads: 369
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Sep 30th, 2009
0

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

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
Sponsor
Reputation Points: 318
Solved Threads: 358
WiFi Lounge Lizard
Airshow is online now Online
2,527 posts
since Apr 2009
Permalink
Oct 1st, 2009
0

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

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
edDev is offline Offline
8 posts
since Sep 2009
Permalink
Oct 1st, 2009
0

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

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.
Sponsor
Reputation Points: 318
Solved Threads: 358
WiFi Lounge Lizard
Airshow is online now Online
2,527 posts
since Apr 2009
Permalink
Oct 2nd, 2009
0

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

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
edDev is offline Offline
8 posts
since Sep 2009
Permalink
Oct 2nd, 2009
1

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

<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.
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is offline Offline
513 posts
since Jun 2008
Permalink
Oct 2nd, 2009
0

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

FANTASTIC!! THANK YOU! Now, I just noticed that it's not playing in Safari. Any idea why that might be?

Thank you,

M.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
edDev is offline Offline
8 posts
since Sep 2009
Permalink
Oct 2nd, 2009
0

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

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
Reputation Points: 562
Solved Threads: 369
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript variable doesnt save enters in IE
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Photo Gallery Caption Won't Change





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC