Jump to content

<!doctype> Problem

gongpex

By gongpex
in JavaScript

Recommended Posts

gongpex Member

gongpex

Posted
Posted

Hello everyone, Yesterday I got javascript code from w3schools DHTML, and this is the code: 

<html><head><style>body{font-family:arial;}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightblue}table.nav{background:black;position:relative;font: bold 80% arial;top:0px;left:-135px;margin-left:3px;}</style><script type="text/javascript">var i=-135;var c=0;var intHide;var speed=3;function show_hide_menu(){if (c==0){c=1;clearInterval(intHide);intShow=setInterval("show()",10);}else{c=0;clearInterval(intShow);intHide=setInterval("hide()",10);}}function show(){if (i<-12){i=i+speed;document.getElementById('myMenu').style.left=i;}}function hide(){if (i>-135){i=i-speed;document.getElementById('myMenu').style.left=i;}}</script></head><body><table id="myMenu" class="nav" width="150" onclick="show_hide_menu()"><tr><td class="menu"><a href="/default.asp">HOME</a></td><td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr><tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr><tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr><tr><td class="menu"><a href="default.asp">DHTML</a></td></tr><tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr></table><p>Click on the MENU to show/hide the menu</p><p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p></body></html>

This code was run successfully but when it pasted at the <!DOCTYPE>, like this: 

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title> <style type="text/css">body{font-family:arial;}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightblue} table.nav{background:black;position:relative;font: bold 80% arial;top:0px;left:-135px;}</style></head> <script type="text/javascript">var i=-135;var intHide;var speed=3;function showmenu(){clearInterval(intHide);intShow=setInterval("show()",10);}function hidemenu(){clearInterval(intShow);intHide=setInterval("hide()",10);}function show(){if (i<-12){i=i+speed;document.getElementById('myMenu').style.left=i;}}function hide(){if (i>-135){i=i-speed;document.getElementById('myMenu').style.left=i;}}</script> <body><table id="myMenu" class="nav" width="150" onMouseOver="showmenu()" onMouseOut="hidemenu()"><tr><td class="menu"><a href="/default.asp">HOME</a></td><td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr><tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr><tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr><tr><td class="menu"><a href="default.asp">DHTML</a></td></tr><tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr></table><p>Mouse over the MENU to show/hide the menu</p><p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p></body></html>

the code cannot run, why it can be such? please explain to me thank you

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

That's because when the browser detects a DOCTYPE is expects you to code properly. It won't fix your mistakes for you anymore. Values in CSS require units. If you don't specify units, the browser doesn't know if you mean pixels, centimeters or inches. (In quirksmode it assumes pixels but that's non-standard) document.getElementById('myMenu').style.left=i + "px";

Link to comment
Share on other sites
gongpex Member

gongpex

Posted
  • Author
Posted
That's because when the browser detects a DOCTYPE is expects you to code properly. It won't fix your mistakes for you anymore. Values in CSS require units. If you don't specify units, the browser doesn't know if you mean pixels, centimeters or inches. (In quirksmode it assumes pixels but that's non-standard) document.getElementById('myMenu').style.left=i + "px";
you right, thank you , by the way : 
<!--[if IE 6]>Special instructions for IE 6 here<![endif]-->

this just command taqs or have function? because if the code or taqs like this: 

<!--taqs-->

it can disable script, so, are both same? please tell me, thank's for response

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...