AJAX

Problem Using innerHTML

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

•

Join Date: Dec 2008

Posts: 1

Reputation: Omer.Registry is an unknown quantity at this point

Solved Threads: 0

Omer.Registry Omer.Registry is offline

Offline

Newbie Poster

Problem Using innerHTML

Dec 1st, 2008

Hi to all I'm new in the forum and this is my first post, I hope, you can help me with the following problem, I have a blank page with a flash object (swf) that plays a FLV movie. I'm trying to remove and return the object when the user clicks on the buttons, the problem is that when I return the object to the page the object is displayed but the movie(FLV) is not played.
I already try using removing and return the element from the DOM, with:
Remove object:
[<container element>].removeChild([<object to append>]);
Return object:
[<container element>].appendChild([<object to append>]);
But this is causing another problems, this is the reason I MUST use the innerHTML method:

This is my page:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
<script>
var htmlEmbed ="";
function hideObj()
{
	htmlEmbed = document.getElementById('divObj').innerHTML;
	document.getElementById('divObj').innerHTML = "";
}
 
function showObj()
{
	document.getElementById('divObj').innerHTML = htmlEmbed;
}
</script>
 
</head>
 
<body>
 
<input type="button" onclick="hideObj()" value="Hide (Embed)" />
<input type="button" onclick="showObj()" value="Show (Embed)" />
 
<br />
 
<div id='divObj'>
 
<object id="FlashObjId" name="FlashObjName" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=+ 9,0,0,0" style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: visible; BORDER-LEFT: 0px; WIDTH: 336px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; HEIGHT: 280px; textAlign: left">
<PARAM NAME="movie"  VALUE="http://www.topfstedt.de/FLVScrubber3/FLVScrubber.swf">
<PARAM NAME="play"  VALUE=true'>
<PARAM name="allowScriptAccess" value="always">
<PARAM name="allowFullScreen" value=true>
<PARAM NAME="menu" VALUE=false>
<PARAM NAME="FlashVars" VALUE="file=http://www.nibbler.at/republicofideas.flv&previewImage=http://nibbler.at/republicofideas.jpg">
<PARAM NAME="bgcolor" VALUE="ff00ff">
</object>
 
</div>
 
</body>
</html>
 
<html>
<head>
<script>
var htmlEmbed ="";
function hideObj()
{
	htmlEmbed = document.getElementById('divObj').innerHTML;
	document.getElementById('divObj').innerHTML = "";
}

function showObj()
{
	document.getElementById('divObj').innerHTML = htmlEmbed;
}
</script>

</head>

<body>

<input type="button" onclick="hideObj()" value="Hide (Embed)" />
<input type="button" onclick="showObj()" value="Show (Embed)" />

<br />

<div id='divObj'>

<object id="FlashObjId" name="FlashObjName" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=+ 9,0,0,0" style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: visible; BORDER-LEFT: 0px; WIDTH: 336px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; HEIGHT: 280px; textAlign: left">
<PARAM NAME="movie"  VALUE="http://www.topfstedt.de/FLVScrubber3/FLVScrubber.swf">
<PARAM NAME="play"  VALUE=true'>
<PARAM name="allowScriptAccess" value="always">
<PARAM name="allowFullScreen" value=true>
<PARAM NAME="menu" VALUE=false>
<PARAM NAME="FlashVars" VALUE="file=http://www.nibbler.at/republicofideas.flv&previewImage=http://nibbler.at/republicofideas.jpg">
<PARAM NAME="bgcolor" VALUE="ff00ff">
</object>

</div>

</body>
</html>

Thanks in advanced

•

Join Date: Aug 2006

Posts: 319

Reputation: Luckychap is on a distinguished road

Solved Threads: 42

Luckychap

Offline

Posting Whiz

Re: Problem Using innerHTML

Dec 1st, 2008

Donot use innerHTML to hide or show. But use stype.visibility property to hide or show element.

Your javascript functions then look like this:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
function hideObj()
{
	document.getElementById('divObj').style.visibility = "hidden";
}
 
function showObj()
{
	document.getElementById('divObj').style.visibility = "visible";
}
function hideObj()
{
	document.getElementById('divObj').style.visibility = "hidden";
}

function showObj()
{
	document.getElementById('divObj').style.visibility = "visible";
}