Welcome Guest ( Log In | Register )



 
 Reply to this topicStart new topic
> Javascript Changes Aren't Working.
toby
post Feb 24 2008, 05:27 PM
Post #1


Super Member
Group Icon

Group: Members
Posts: 515
Joined: 29-September 06
Member No.: 16,228
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>
Go to the top of the page
 
+Quote Post
TavoxPeru
post Feb 24 2008, 08:28 PM
Post #2


Super Member
Group Icon

Group: [HOSTED]
Posts: 763
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
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; }

To
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">

To
CODE
<html>

You can view it in action at DHTML Example.

Best regards,
Go to the top of the page
 
+Quote Post
toby
post Feb 24 2008, 09:28 PM
Post #3


Super Member
Group Icon

Group: Members
Posts: 515
Joined: 29-September 06
Member No.: 16,228
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?
Go to the top of the page
 
+Quote Post
mastercomputers
post Feb 24 2008, 11:20 PM
Post #4


PESTICIDAL MANIAC
Group Icon

Group: Members
Posts: 626
Joined: 1-September 04
From: Auckland, New Zealand
Member No.: 27
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
Go to the top of the page
 
+Quote Post
TavoxPeru
post Feb 25 2008, 06:38 AM
Post #5


Super Member
Group Icon

Group: [HOSTED]
Posts: 763
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
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>
&lt;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>
&lt;script type="text/javascript">
var myObj = new getObj('myText');
</script>
</html>

Best regards,
Go to the top of the page
 
+Quote Post
toby
post Feb 25 2008, 09:35 AM
Post #6


Super Member
Group Icon

Group: Members
Posts: 515
Joined: 29-September 06
Member No.: 16,228
Thank you, I'm also used to Xhtml1.1, it's overlooked when I'm not paying enough attention.
Go to the top of the page
 
+Quote Post
TavoxPeru
post Feb 26 2008, 01:35 AM
Post #7


Super Member
Group Icon

Group: [HOSTED]
Posts: 763
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
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,
Go to the top of the page
 
+Quote Post
« Next Oldest · JavaScript · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Getting Screen Resolution using Javascript.(8)
  2. How To Create A Popup Window With Javascript?(19)
  3. javascript vs java(12)
  4. Javascript: Disable Mouse Right-click In Browser(16)
  5. Best Way To Learn Javascript(9)
  6. Javascript: Text To Texbox And Back To Text(2)
  7. Dynamicdrive: Good Site For JavaScript Codes(5)
  8. Downloads With Javascript?(7)
  9. Javascript: Simple Slidedown Menu(2)
  10. JavaScript: Simple Dropdown Menu(1)
  11. Calling Of Functions Between Mulitple External Javascript Files(2)
  12. Javascript: Browser Detection Script(0)
  13. JavaScript: Hide And Show Any Element With CSS(5)
  14. Ever Needs To Find Out A Table Height Or With With JavaScript(2)
  15. Create And Import JavaScript Modules For A Large Script(2)
  1. Vertical Marquee Using JavaScript(0)
  2. JavaScript Frames & Querystring(4)
  3. JavaScript Off Redirect Script(2)
  4. I Need Help With Javascript.(7)
  5. Problems With Dynamically Loading Javascript(2)
  6. Add Text To Textarea(6)
  7. Javascript Question(4)
  8. Javascript: How Do I Create Embedded Pop-up Windows?(7)
  9. Problem With Javascript Alert();(9)
  10. Include Function For Javascript(7)
  11. Fun With Javascript And Forms(2)
  12. Settimeout() & Focus() Not Working With Firefox(1)
  13. Javascript Help Needed : Alert(z) Works Fine But Document.write Not(2)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 14th October 2008 - 03:38 AM
Powered By IP.Board 2.2.1 © 2008  IPS, Inc.
Licensed to: Xisto Corporation