Cleverer Quantifier web design references

Version 1.0

Many thanks to the demos/ tips on these sites:

Real time generation of divs

Function to generate new divs on the fly upon button click
(from baconbutty http://www.webdeveloper.com/forum/archive/index.php/t-46933.html)
+ Function to dynamically add content to an existent div
(from Allen Liu http://www.randomsnippets.com/2008/04/14/how-to-dynamically-add-content-to-a-div-via-javascript/)
= Function which generate new divs on demand, containing desired content.

Example code:

<script language="Javascript">
function createDivs(){
for (var i=1; i<4; i+=1)
{
txt = "<h3>Source "+i+"</h3><form name=\"form"+i+"\" id=\"form"+i+"\"><p><INPUT class=field size=4 name=someNumber> Enter approximate # read per month</p>"//use Javascript variables to modify content each time loop is run
document.body.appendChild(feDiv(i,i,txt));
}

function feDiv(y,divName,content)
{
var eDiv=document.createElement("DIV");
//eDiv.style.visibility="hidden";
eDiv.id=divName;
eDiv.style.width=350;
eDiv.style.position="absolute";
eDiv.style.backgroundColor="#E1D0DE";
eDiv.style.left=200;
eDiv.style.top=y*100;
eDiv.style.padding=10;
eDiv.innerHTML = content;
return eDiv;
}
}
</script>
</head>

<body>
<input class=b onclick=createDivs() value="Create divs" type="button" name="button">
</body>

Click here for a demo.

IE/FF incompatibility fix

Seems like this issue confuses many programmers, so thought I might as well add my documentation here-

Example of how the function 'getDocumentById' was originally used, works in Internet Explorer but not Firefox:

<form>
<input type="checkbox" name="list1" value="A" checked> A <br>
<input type="checkbox" name="list1" value="B" checked> B <br>
</form>
listItems=document.forms[form];
if (listItems.elements[i].status){
doSomething(i)
}

In IE, the value of 'listItems.elements[i].status' is 'true,' but in FF, its value remains 'undefined.'
This is apparently because IE does not distinguish between the name and the id of an object, whereas FF does, so if one neglects to define the id, this is what happens for the 2 browsers:
IE: functions requiring the object id will substitute the name for the id.
FF: functions requiring the object id will not be able to find it.
(See this thread for example: http://www.codingforums.com/showthread.php?t=94475)

The solution: define the object id as well as the name.

Modified version, compatible with IE and FF:

<form>
<input type="checkbox" name="list1" value="A" checked id="A"> A <br>
<input type="checkbox" name="list1" value="B" checked id="B"> B <br>
</form>
listItems=document.forms[form];
if (listItems.elements[i].status){
doSomething(i)
}

This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License. Feel free to share (copy, distribute and transmit) and remix (adapt, modify) my calculator, just cite me as a source and use it within non-commercial contexts (ask my permission otherwise). Thanks!!

Cleverer Quantifier web design references

Many thanks to the demos/ tips on these sites:

Sliders

Forms

Check boxes

Real time generation of divs

IE/FF incompatibility fix