Home/ Questions/Q 7399183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T04:01:33+00:00

I’m learning dhtml using google’s sample http://code.google.com/edu/ajax/tutorials/samples/dhtmltest.html however, when i add below doctype dtd

  • 0

I’m learning dhtml using google’s sample
http://code.google.com/edu/ajax/tutorials/samples/dhtmltest.html

however, when i add below doctype dtd into the source code, the moveup/down will not work any more in firefox 8.0.1

mostly, i think below statement is not working anymore 

myObj.style.top = texttop;

could anyone advise? thx.

below is the source code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html lang="en">
<HEAD>
<TITLE>Example</TITLE>
<STYLE TYPE="text/css">
body {font: 14px arial;
color: #000066;
}
#myText {position: absolute;
top: 100px;
left: 400px;
font: 24px arial;
font-weight: 900;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">


var texttop = 100;
var textleft = 400;
function vanish(flag) {
var myObj = new getObj('myText');
myObj.style.visibility = (flag) ? 'hidden' : 'visible'
}
function moveUpDown(amount) {
var myObj = new getObj('myText');

texttop += amount;
myObj.style.top = texttop;
}
function moveLR(amount) {
var myObj = new getObj('myText');
textleft += amount;
myObj.style.left = textleft;
}
function changeColor(color) {
var myObj = new getObj('myText');
myObj.style.color = color;
}
function changeStyle(style) {
var myObj = new getObj('myText');
myObj.style.fontStyle = style;
}
function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else
return;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="myText">Change Me!</DIV>
<p>
<A CLASS="page" HREF="javascript:moveUpDown(40);">Down</A><BR>
<A CLASS="page" HREF="javascript:moveUpDown(-40);">Up</A><BR>
<A CLASS="page" HREF="javascript:moveLR(-40);">Left</A><BR>
<A CLASS="page" HREF="javascript:moveLR(+40);">Right</A><BR>
<p>
<A CLASS="page" HREF="javascript:changeColor('orange')">Orange</A><BR>
<A CLASS="page" HREF="javascript:changeColor('green')">Green</A><BR>
<A CLASS="page" HREF="javascript:changeColor('purple')">Purple</A><BR>
<P>
<a CLASS="page" HREF="javascript:changeStyle('italic')" class="nohover">Italic</a><br>
<a CLASS="page" HREF="javascript:changeStyle('normal')" class="nohover">Normal</a><br>
<p>
<A CLASS="page" HREF="javascript:vanish(1)">Vanish!</A><BR>
<A CLASS="page" HREF="javascript:vanish(0)">Re-appear</A><BR>
<p>
</BODY>
</HTML>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In quirks mode (without a DOCTYPE declaration), you can get away with giving something a value of, say, “40”, and the browser will assume pixels.

    However, in strict mode (when using a good DOCTYPE declaration), you will need to be explicit and say “40px” for 40 pixels.
    So all you need to do is write 

    myObj.style.top = texttop+'px';

    to be compatible with the standard, and it will work both with and without a DOCTYPE declaration.

    • 0