Jump to content
xisto Community
toby

Javascript Changes Aren't Working.

Recommended Posts

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:


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

To


#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.


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

To


<html>

You can view it in action at DHTML Example. Best regards,


Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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


It should be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://forums.xisto.com/no_longer_exists/;  <html xmlns="http://forums.xisto.com/no_longer_exists/; 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

Share this post


Link to post
Share on other sites

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/; 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,

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.