Javascript Changes Aren't Working.

toby

Feb 24 2008, 05:27 PM

The link is where I got it from, the code is my attempt at changing it, which has the identical javascript, but it doesn't work. Can anyone fix it for me?

http://code.google.com/edu/client/samples/dhtmltest.html

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><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 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>
<ul>
<li><a class="page" href="java script:moveUpDown(40);">down</a></li>
<li><a class="page" href="java script:moveUpDown(-40);">up</a></li>
<li><a class="page" href="java script:moveLR(-40);">left</a></li>
<li><a class="page" href="java script:moveLR(+40);">right</a></li>
</ul>
<ul>
<li><a class="page" href="java script:changeColor('orange')">orange</a></li>
<li><a class="page" href="java script:changeColor('green')">green</a></li>
<li><a class="page" href="java script:changeColor('purple')">purple</a></li>
</ul>
<ul>
<li><a class="page" href="java script:changeStyle('italic')">italic</a></li>
<li><a class="page" href="java script:changeStyle('normal')">normal</a></li>
</ul>
<ul>
<li><a class="page" href="java script:vanish(1)">vanish!</a></li>
<li><a class="page" href="java script:vanish(0)">re-appear</a></li>
</ul>
</body>
</html>

Comment/Reply (w/o sign-up)

TavoxPeru

Feb 24 2008, 08:28 PM

Well, one thing you must take in consideration is that if you define a div element with an ID you must use the same id name in your javascript code and in your CSS rules, in your case, you use mytext and myText, that's why it doesn't work. So, simply change:

CODE

#mytext {position: absolute; top: 100px; left: 400px; font: 24px arial; font-weight: 900; }

CODE

#myText {position: absolute; top: 100px; left: 400px; font: 24px arial; font-weight: 900; }

in your CSS code.

With that simple change your code almost works because if you test it with Firefox the moveUpDown and the moveLR functions do not work but if you test it with Internet Explorer these functions work fine. However, if you remove the DOCTYPE declaration and replace the html tag with the simplest <HTML> it works in both browsers.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

CODE

<html>

You can view it in action at DHTML Example.

Best regards,

Comment/Reply (w/o sign-up)

toby

Feb 24 2008, 09:28 PM

Thank you. In Opera, if I change the doctype and html to an empty <html>, the text size changes a bit (quirks mode?), but it still doesn't work. With the doctype in, IE7 accepts it after the CSS change.

So its just Opera's quirks that break some js? It's a program bug?

Comment/Reply (w/o sign-up)

mastercomputers

Feb 24 2008, 11:20 PM

This is probably not working because you've thrown the browser into quirks mode by not specifying the correct DTD.

It should be:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

I know this doctype declaration is correct as I only write in XHTML 1.1.

You could definitely clean up your Javascript a bit by making the element 'myText' a global variable and altering it by calling the functions, instead of continuing to make a new variable of it, each function call, eventually you'll run out of memory this way if too many requests are made.

Cheers,

MC

Comment/Reply (w/o sign-up)

TavoxPeru

Feb 25 2008, 06:38 AM

toby: You're welcome, but i can't answer your questions and also i can't test the code with Opera right now because last friday i uninstall it, tomorrow when i reinstall Opera i will check it.

MC: You are right, that's the correct XHTML doctype declaration.

So what i do is to follow MC's instructions and change the code again, the new code that works perfectly with Internet Explorer 6 and Firefox 2.0.0.12 is the following:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>DHTML 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 type="text/javascript">
var texttop = 100;
var textleft = 400;
//var myObj = new getObj('myText'); here don't work because the div don't exists on the dom.
function vanish(flag) {
    myObj.style.visibility = (flag) ? 'hidden' : 'visible';
}
function moveUpDown(amount) {
    texttop += amount;
    myObj.style.top = texttop+"px";
}
function moveLR(amount) {
    textleft += amount;
    myObj.style.left = textleft+"px";
}
function changeColor(color) {
    myObj.style.color = color;
}
function changeStyle(style) {
    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>
<ul>
<li><a class="page" href="java script:moveUpDown(40);">down</a></li>
<li><a class="page" href="java script:moveUpDown(-40);">up</a></li>
<li><a class="page" href="java script:moveLR(-40);">left</a></li>
<li><a class="page" href="java script:moveLR(+40);">right</a></li>
</ul>
<ul>
<li><a class="page" href="java script:changeColor('orange')">orange</a></li>
<li><a class="page" href="java script:changeColor('green')">green</a></li>
<li><a class="page" href="java script:changeColor('purple')">purple</a></li>
</ul>
<ul>
<li><a class="page" href="java script:changeStyle('italic')">italic</a></li>
<li><a class="page" href="java script:changeStyle('normal')">normal</a></li>
</ul>
<ul>
<li><a class="page" href="java script:vanish(1)">vanish!</a></li>
<li><a class="page" href="java script:vanish(0)">re-appear</a></li>
</ul>
</body>
<script type="text/javascript">
var myObj = new getObj('myText');
</script>
</html>

Best regards,

Comment/Reply (w/o sign-up)

toby

Feb 25 2008, 09:35 AM

Thank you, I'm also used to Xhtml1.1, it's overlooked when I'm not paying enough attention.

Comment/Reply (w/o sign-up)

TavoxPeru

Feb 26 2008, 01:35 AM

toby i jUst reinstall Opera today and the first thing i do is testing the code and it works perfect with Opera too.

Best regards,

Comment/Reply (w/o sign-up)