Hi,
I have this code working perfectly fine with the cool subwai stuff on the left side and the Reset All button below it. And the menu summary box towards the right handside of the cool subwai stuff. And the pictures come on almost the center of the page.
But when I do the validations on W3C. It shows me errors as below
Error Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>"
Line 4, Column 73: end tag for element "META" which is not open
Line 5, Column 64: end tag for element "LINK" which is not open
Line 7, Column 7: end tag for "HEAD" which is not finished
I tried placing the heading as below
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
But then website goes for a toss.. the box that contains the menu summary data shifts on the left right on the Reset All button. The pictures are also displayed right on top of the Reset Button. Could you please tell me how I can fix this.
Below is my html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"></meta>
<link href="styles.css" rel="stylesheet" type="text/css"></link>
<script charset="utf-8" src="external.js" type="text/javascript"></script>
</head>
<body>
<div>
<p>Cool Subwai presents a number of offers to feast your stomach</p>
<p>Click on the items that you would like to have!!!</p>
<ul>
<li onmouseover="showImg(this,'meatball.jpg')" onmouseout="hideImg()" id="meatball" onclick="select(this)"> Meatball Marinara</li>
<li onmouseover="showImg(this,'bmt.jpg')" onmouseout="hideImg()" id="bmt" onclick="select(this)"> B.M.T </li>
<li onmouseover="showImg(this,'melt.jpg')" onmouseout="hideImg()" id="melt" onclick="select(this)">Subwai Melt</li>
<li onmouseover="showImg(this,'tuna.jpg')" onmouseout="hideImg()" id="tuna" onclick="select(this)">Tuna</li>
</ul>
</div>
<div id="menuSummary">
<center>Classic Subwais <br> Orders </center>
<div id ="meatballselect"></div>------------------------------- Meatball Quantity Ordered <span id = "meatballcount">0</span>
<div id ="bmtselect"></div>------------------------------- BMT Quantity Ordered <span id = "bmtcount">0</span>
<div id ="meltselect"></div>------------------------------- Melt Quantity Ordered <span id = "meltcount">0</span>
<div id ="tunaselect"></div>------------------------------- Tuna Quantity Ordered <span id = "tunacount">0</span>
</div>
<form name="f1" action="">
<input type="button" onclick="resetPage()" value="Reset All" align="middle">
</form>
</body>
</html>
Below is my javascript code
function select(obj){
id = obj.getAttribute("id");
if( id==""){}
else if (id =="meatball")
{myselect = document.getElementById("meatballselect");
mycount = document.getElementById("meatballcount");
}
else if (id =="bmt")
{myselect = document.getElementById("bmtselect");
mycount = document.getElementById("bmtcount");
}
else if (id =="melt")
{myselect = document.getElementById("meltselect");
mycount = document.getElementById("meltcount");
}
else if (id =="tuna")
{myselect = document.getElementById("tunaselect");
mycount = document.getElementById("tunacount");
}
newchild = obj.cloneNode(true);
tn=newchild.firstChild;
txt = tn.nodeValue.substr(0,22);
tn.data=txt;
newchild.appendChild(tn);
obj.setAttribute("class", "selected");
newchild.setAttribute("class", "ordered");
myselect.appendChild(newchild);
count = myselect.childNodes.length
ctnode = document.createTextNode(count);
mycount.removeChild(mycount.childNodes[0]);
mycount.appendChild(ctnode);
}
function resetPage(){
var counts=new Array("meatballcount","tunacount","bmtcount","meltcount");
var selects=new Array("meatballselect","tunaselect","bmtselect","meltselect");
var arraylen=counts.length;
for(i=0; i<arraylen; i++){
var count = 0;
var ctnode = document.createTextNode(count);
mycount = document.getElementById(counts[i]);
while ( mycount.firstChild ) mycount.removeChild( mycount.firstChild );
mycount.appendChild(ctnode);
myselect = document.getElementById(selects[i]);
while ( myselect.firstChild ) myselect.removeChild( myselect.firstChild );
}
}
var offsetx = 200
var offsety = 10
var elementID="myImg"
function showImg(obj,image){
if(document.createElement){
if(!document.getElementById(elementID)){
newImg = document.createElement('IMG')
newImg.id = elementID
newImg.style.display="none"
newImg.style.position="absolute"
document.body.appendChild(newImg)
}
imageDisplay = document.getElementById(elementID)
imageDisplay.src = image
imageDisplay.style.display = 'block'
imageDisplay.style.left=obj.offsetLeft+offsetx
imageDisplay.style.top=obj.offsetTop+offsety
if(imageDisplay.offsetLeft<0){
imageDisplay.style.left=0
}
if(imageDisplay.offsetLeft+imageDisplay.offsetWidth>document.body.clientWidth){
imageDisplay.style.left=document.body.clientWidth - imageDisplay.offsetWidth-50
}
}
}
function hideImg(){
imageDisplay.style.display="none"
}
Below is my css stylesheet code
#myImg {
width:169px;
height:225px;
border:1px solid #5555aa;
}
#menuSummary{
position:fixed;
right: 20;
top:20;
opacity:0.6;
border-width: thin;
border-style: solid;
padding: 10px;
background-color: #eeeeff;
width: 430px;}
.selected { color:green;}
.ordered {color: blue; font-size: 12pt;}
.reset {color:black;}
Thanks,
Raqeeb