First and foremost I appreciate all the wonderful work you've done. In its current form it's already an asset I'm going to recommend it to the higher-ups. :)
As such, I have some Internet Explorer issues to resolve. Your page works exactly as specified in Opera 7.5, but there are three distinct problems that hold back it's design from being perfect. I'm inferring IE is not your primary browser, and ask if anyone can help with these things:
Edit: Resolved. 1. Pressing enter clears all images. My code below holds it at an alert button until okayed. Opera doesn't clear the images. Unfortunately, Internet Explorer 6 is 100% of my target audience.
2. Newly entered items are appearing at the bottom. Wish I knew more about appendChild, maybe there's an inverse method out there? Opera's appending above. It's IE that's appending below. :/
When you were using <div><img id="pic0"src=""alt=""/></div> in your first example I simply reversed the order of pic0, pic1, pic2, etc, and that DID work in IE.
3. All images fetched are being stretched to 300 pixels height now. Again, Opera has zero problems, it's only IE. When I strip the height:300px and width:300px lines, the images even more bizarrely collapse to about 30 by 30 pixels!
I've added some boring stock number formatting rules. It makes entering numbers easier for us. It's almost identical to our Point Of Sale system.
Stock number conveniences:
230-0023 is the same as
23-23
230-23
23-0023
2300023, and
23023
Stock numbers for testing:
2511606 my computer :)
1616420 lowest pixel height I've seen.
1610150 low pixel height.
5800004 shortest -- three important digits.
4318488 longest -- seven important digits.
2300023
PS, I'll focus on that period thing later.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Display Picture</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background:#ccc;
}
div {
width:300px;
background:#fff;
border:solid 1px #000;
margin:auto;
margin-bottom:4px;
}
p {
width:300px;
font-family:arial;
font-size:12px;
text-align:center; /* sigh. doesn't work with b. */
margin-top:10px
}
fieldset {
width:215px;
border:inset 4px #ccc;
margin:auto;
}
input {
width:100px;
text-align:center;
}
img {
width:300px;
height:300px;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var i=0;
var url="http://www.radioshack.ca/images/RadioShack/";
function displayPic() {
var pattern=document.forms[0][1].value;
///REPLACE . WITH DASH. Yes, it's hardcoded, but it's simplest my mind can handle at midnight.
///ELIMINATE ALL NON-NUMBERS MORE THAN THREE DIGITS BEFORE --. AND MORE THAN FOUR DIGITS AFTER --.
pattern=trim(pattern);
var len=pattern.length;
var dash=pattern.indexOf("-");
var gen=0;
var spe=0;
//dash used
if (dash!=-1) {
gen=pattern.substr(0, dash);
spe=pattern.substr(dash+1, len-dash);
if (gen<10){gen=gen*100}; //NEVER NEED. JUST HERE FOR STRUCTURAL INTEGRITY
if (gen<100){gen=gen*10};
}
//dash not used
else {
gen=pattern.substr(0, 3);
spe=pattern.substr(3, len);
}
spe=pad(spe,4);
//alert("dash:"+dash+" len"+len+" gen"+gen+" spe"+spe);
var dir = pattern.substr(0, 2)+"/";
//alert("pattern.substr"+pattern.substr(0, 2)+ " gen.substr(0, 2):" +gen.substr(0, 2));
var elemD=document.createElement("div"); //make
elemD.setAttribute("id","div"+i); //set id to div1, div2, div3
var elemP=document.createElement("p"); //make
elemP.appendChild(document.createTextNode(gen+"-"+spe));
var elemI=document.createElement("img"); //make
elemI.setAttribute("id","pic"+i); //set id to pic1, pic2, pic3
elemI.setAttribute("src",""); //initialize
elemI.setAttribute("alt",""); //initialize
elemD.appendChild(elemP);
elemD.appendChild(elemI);
document.body.appendChild(elemD);
document.getElementById("pic"+i).src=url+dir+gen+spe+"l.jpg";
//Attempt to link to later ex: http://www.radioshack.ca/estore/Product.aspx?language=en-CA&catalog=RadioShack&product=2300023
i++;
selecttext();
}
function pad(number,length) {
var str = '' + number;
while (str.length < length)
str = '0' + str;
return str;
}
function trim(str)
{
return str.replace(/^\s*|\s*$/g,"");
}
function checkKey(e){
if(e && e.which){ //if which property of event object is supported (NN4)
e = e;
characterCode = e.which; //character code is contained in NN4's which property
}
else{
e = event;
characterCode = e.keyCode; //character code is contained in IE's keyCode property
}
//enter pressed
if(characterCode == 13){
displayPic();
return false;
}
//escape pressed
else if(characterCode == 27){
document.forms[0][1].select()
return false;
}
else{
return true;
}
}
function selecttext() {
document.forms[0][1].select();
}
//]]>
</script>
</head>
<body onload="document.forms[0][1].focus()">
<form action="" onSubmit="return false;">
<fieldset>
<legend>DDV DSC SWG too!</legend>
<input type="text" onKeyPress="checkKey(event)" />
<input type="button" value="display image" onclick="displayPic()" />
</fieldset>
</form>
</body>
</html>