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); 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="http://stackoverflow.com/questions/13837004/style.css" /><script src="http://stackoverflow.com/questions/13837004/menu.js"></script></head><body onload="compat()"><div id="Menu" onMouseout="shrink()"><a href="http://stackoverflow.com/questions/13837004/#" class="slide" id="slide1" onMouseOver="expand(1)"> <img id="slideimg1" src="http://stackoverflow.com/questions/13837004/home.png" /> <div id="slidediv1"> <h2 id="slidetext1">Home</h2> </div></a><a href="http://stackoverflow.com/questions/13837004/#" class="slide" id="slide2" onMouseOver="expand(2)"> <img id="slideimg2" src="http://stackoverflow.com/questions/13837004/sound.png" /> <div id="slidediv2"> <h2 id="slidetext2">Music</h2> </div></a><a href="http://stackoverflow.com/questions/13837004/#" class="slide" id="slide3" onMouseOver="expand(3)"> <img id="slideimg3" src="http://stackoverflow.com/questions/13837004/blog.png" /> <div id="slidediv3"> <h2 id="slidetext3">Blog</h2> </div></a><a href="http://stackoverflow.com/questions/13837004/#" class="slide" id="slide4" onMouseOver="expand(4)"> <img id="slideimg4" src="http://stackoverflow.com/questions/13837004/note.png" /> <div id="slidediv4"> <h2 id="slidetext4">Bio</h2> </div></a><a href="http://stackoverflow.com/questions/13837004/#" class="slide" id="slide5" onMouseOver="expand(5)"> <img id="slideimg5" src="http://stackoverflow.com/questions/13837004/way.png" /> <div id="slidediv5"> <h2 id="slidetext5">Links</h2> </div></a></div></body>
How did a doctype break my javascript?
- Thread starter eabharoid
- Start date