PDA

View Full Version : insertAdjacentHTML



mauritsgrootveld
12-29-2006, 09:04 AM
Hi, I am trying to use insertAdjacentHTML with css...But it seems it is not working very well... everything loads well and no errors. But after inserting some css with insertadjacent I insert a div that has to follow the rules that are set by the previous insertadjacent. This does not work. Does someone know a solution to this? Could you please give me an example? I use the following code:


function insertScript()
{
var sHTML='<style type="text/css">body{margin:0;height:100%;overflow-y:auto;padding: 0 16px 0 0;}#menu{display:block;top:0px;left:0px;width:100%;heigth:100%;position:fixed;z-index: 9999;}* html #menu{position:absolute;}</style><!--[if lte IE 6]><style type="text/css">/*<![CDATA[*/ html{overflow-x:auto; overflow-y:hidden;} /*]]>*/</style><![endif]--><!--[if lte IE 6]><style>/*<![CDATA[*/ #adsie{position:absolute; top:0px; left:0;}/*]]>*/</style><![endif]-->';
window.document.body.insertAdjacentHTML("afterBegin",sHTML);
var sCreative='<div id="menu"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="100%"><param name="movie" value="hockeystick.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="SCALE" value="exactfit" /><embed src="hockeystick.swf" width="100%" height="100%" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" scale="exactfit"></embed></object></div>';
window.document.body.insertAdjacentHTML("beforeEnd",sCreative);
}

Twey
12-29-2006, 12:56 PM
insertAdjacentHTML() is IE-only and treats the DOM as a string, so you should avoid it. Use DOM methods instead.

mauritsgrootveld
01-04-2007, 11:36 AM
Ok, i got it working with this code:




var sHTML = '<style type="text/css">body{margin:0;height:100%;overflow-y:auto;padding: 0 16px 0 0;}#hockeystick{display:block;top:0px;left:0px;width:100%;heigth:100%;position:fixed;z-index: 9999;}* html #hockeystick{position:absolute;}</style><!--[if lte IE 6]><style type="text/css">/*<![CDATA[*/ html{overflow-x:auto; overflow-y:hidden;}/*]]>*/</style><![endif]--><!--[if lte IE 6]><style>/*<![CDATA[*/ #adsie{position:absolute; top:0px; left:0;}/*]]>*/</style><![endif]-->';
window.document.write(sHTML);

var sCreative='<div id="hockeystick"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="100%"><param name="movie" value="http://www.dqatestsite.nl/test/hockeystick.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="SCALE" value="exactfit" /><embed src="http://www.dqatestsite.nl/test/hockeystick.swf" width="100%" height="100%" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" scale="exactfit"></embed></object></div>';
//window.document.body.insertAdjacentHTML("beforeEnd",sCreative);
document.body.innerHTML = document.body.innerHTML + sCreative;

but this only works on pages with this doctype declaration:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and the site where it has to placed has:



<?xml version="1.0"?>
or


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
or even both...

Does anyone know how to work around this???

Twey
01-04-2007, 04:11 PM
but this only works on pages with this doctype declaration:One of the reasons I suggested using DOM methods.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">Please, stay away from transitional DOCTYPEs. The transitional period from HTML 3 to HTML 4 ended a long time ago. There's no reason to use anything but valid (http://validator.w3.org/) HTML Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML also has problems, the main one being that it's totally unsupported by IE, currently the most popular browser.
the site where it has to placed has [an XML prolog] or [an HTML 4.0 Transitional DOCTYPE] or even both...It should have neither, and certainly not both. The XML prolog is valid only in XHTML.