Hi gang,
I'm writing some JavaScript for an article I'm writing on URPMs (Universally Related Popup Menus). In an effort to minimize the amount of HTML that the end user has to add to their page, I am trying to dynamically assign behaviors and properties to the page within the script. One troublesome area is the save history behavior in I.E. As you probably know, if you add the following CSS to the web page, you can have the dropdown SELECTs retain dynamically created options and selections when refreshing the page:
In the HEAD:
<META NAME="save" CONTENT="history">
<STYLE type="text/css">
.saveHistory {behavior:url(#default#sav
ehistory);
}
</STYLE>
For each SELECT tag:
<select name="Manufacturers" id=Manufacturers class=saveHistory >
Below is a test page with a dynamically created META tag and saveHistory behavior style. In theory it should work, but for some reason, it doesn't. If anyone can figure out what's wrong, I would be grateful!
<html>
<head>
<title>Save History Dropdown Behavior in Internet Explorer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function generateIESaveHistoryMetaT
ag()
{
var meta;
if ( document.createElement
&& ( meta = document.createElement('me
ta') )
)
{
// set properties
meta.name = "save";
meta.content = "history";
// now add the meta element to the head
document.getElementsByTagN
ame('head'
).item(0).
appendChil
d(meta);
}
}
function setListElementPersistence(
)
{
with ( document.getElementById("s
elect") )
{
className = "saveHistory";
style.behavior = "url(#default#savehistory)
";
}
}
function addOptions( list )
{
for (var i=list.options.length; i<10; i++)
{
list.options[i] = new Option("New Item " + i, "");
}
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="generateIESaveHist
oryMetaTag
();setList
ElementPer
sistence()
">
<form name="form1" method="post" action="">
<p align="center">
<select name="select">
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
</select>
</p>
<br>
<br>
<br>
<br>
<p align="center">
<input type="button" name="Button" onclick="addOptions(this.f
orm.select
);" value="Button">
</form>
<h3 align="center"> </h3>
</body>
</html>
Thanks,
Rob G
Start Free Trial
