Menu
I made a menu, and just now I added
<!DOCTYPE html>
to the document, and it ceases to function. However the code is still running, will still print to console on mouseover etc. I tried other doctypes and they break it too, it just stays static.
What is it about a doctype that could cause JavaScript to not work?
JS:
var total_width = "960";
var slide_width = "182";
var slide_margin = "10";
var expand_width = "374";
var icon_width = "32";
var icon_margin = "15";
var slide_number = "5";
function slideid(i) {
var m = document.getElementById("slide"+i);
var l = document.getElementById("slideimg"+i);
var k = document.getElementById("slidetext"+i);
var j = document.getElementById("slidediv"+i);
return [m, l, k, j]
}
function compat() {
if (window.opera) {
for (var i=1;i<6;i++) {
s = slideid(i);
s[3].style.position="relative";
s[3].style.bottom="46px";
}
}
if (document.all && !(window.opera)) {
for (var i=1;i<6;i++) {
s = slideid(i);
s[0].style.height="60px";
s[1].style.display="none";
var iecontents = s[2].innerHTML;
s[0].innerHTML=iecontents;
s[0].style.fontFamily="'astonishedregular',Impact,serif";
s[0].style.fontSize="40px";
s[0].style.color="#fff";
s[0].style.textDecoration="none";
s[0].style.padding="10px auto";
}
}
}
function expand(x) {
if (document.all && !(window.opera)) {
return
}
var shrink = new Array();
for (var i=1;i<6;i++) {
if (i === x) {
var expander = i;
}
else {
var d = shrink.length;
shrink[d] = i;
}
}
for (var i=0;i<4;i++) {
s = slideid(shrink[i]);
var slide_shrink = ((total_width-(5*slide_margin))-expand_width)/(slide_number-1);
s[1].style.marginLeft=(slide_shrink-icon_width)/2;
s[0].style.width=slide_shrink;
s[2].style.display="none";
s[3].style.width="0"
}
s = slideid(expander);
s[1].style.marginLeft=icon_margin;
s[0].style.width=expand_width;
s[2].style.display="inline-block";
s[3].style.width=expand_width-icon_width-icon_margin-7;
}
function shrink() {
if (document.all && !(window.opera)) {
return
}
for (var i=1;i<6;i++) {
s = slideid(i);
s[1].style.marginLeft=(slide_width-icon_width)/2;
s[0].style.width=slide_width;
s[2].style.display="none";
s[3].style.width="0";
}
}
And HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="menu.js"></script>
</head>
<body onload="compat()">
<div id="Menu" onMouseout="shrink()">
<a href="#" class="slide" id="slide1" onMouseOver="expand(1)">
<img id="slideimg1" src="home.png" />
<div id="slidediv1">
<h2 id="slidetext1">Home</h2>
</div>
</a>
<a href="#" class="slide" id="slide2" onMouseOver="expand(2)">
<img id="slideimg2" src="sound.png" />
<div id="slidediv2">
<h2 id="slidetext2">Music</h2>
</div>
</a>
<a href="#" class="slide" id="slide3" onMouseOver="expand(3)">
<img id="slideimg3" src="blog.png" />
<div id="slidediv3">
<h2 id="slidetext3">Blog</h2>
</div>
</a>
<a href="#" class="slide" id="slide4" onMouseOver="expand(4)">
<img id="slideimg4" src="note.png" />
<div id="slidediv4">
<h2 id="slidetext4">Bio</h2>
</div>
</a>
<a href="#" class="slide" id="slide5" onMouseOver="expand(5)">
<img id="slideimg5" src="way.png" />
<div id="slidediv5">
<h2 id="slidetext5">Links</h2>
</div>
</a>
</div>
</body>
985
You need to add "px" to marginLeft and width. Setting CSS style which requires units will not work without unit. And you are missing <html></html> tags.
function expand(x) {
if (document.all && !(window.opera)) {
return
}
var shrink = new Array();
for (var i=1;i<6;i++){
if (i === x) {
var expander = i;
}
else {
var d = shrink.length;
shrink[d] = i;
}
}
for (var i=0;i<4;i++){
s = slideid(shrink[i]);
var slide_shrink = ((total_width-(5*slide_margin)) - expand_width) / (slide_number-1);
s[1].style.marginLeft=(slide_shrink-icon_width)/2 +"px";
s[0].style.width=slide_shrink +"px";
s[2].style.display="none";
s[3].style.width="0"
}
s = slideid(expander);
s[1].style.marginLeft=icon_margin +"px";
s[0].style.width=expand_width + "px";
s[2].style.display="inline-block";
s[3].style.width= (expand_width-icon_width-icon_margin-7) +"px";
}
function shrink() {
if (document.all && !(window.opera)) {
return
}
for (var i=1;i<6;i++){
s = slideid(i);
s[1].style.marginLeft=(slide_width-icon_width)/2 +"px";
s[0].style.width=slide_width + "px";
s[2].style.display="none";
s[3].style.width="0";
}
}
document.all is a Microsoft thing, not covered by a standard (more in this other Q/A). Remove all use of it and use document.getElementById as necessary instead.
My guess is that if you look in the JavaScript console, you'll see errors related to document.all not existing, because while whatever browser you're testing on supported it in quirks mode, when you switched it to standards mode (by adding a doctype), it stopped supporting it.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
