Liam Bigelow Liam Bigelow - 3 months ago 12
CSS Question

How did a doctype break my javascript?

I made a menu here, and just now I added

<!DOCTYPE html>


To the document, and it ceases to function, as seen here, 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.

Here is the script
(I was about to fix up the badly written script when this happened)

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>

Answer

Change with. place "px" with marginLeft and width. Setting css style which requires units will not work without unit... and you are missing <html></html> tag.

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";
    }
}