Jump to content

The mystery of the moving text.


george

Recommended Posts

It happens sometimes. I'll have a perfectly placed line of text on my page. And a javascript function will come along and move it to another place on the page!?! I just wanted to replace the contents of the text with some other text, not move the cheese! All my troubles can be summed up in the following 30 lines of code:

<!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=iso-8859-1" /><title>Untitled Document</title>	<style type="text/css">		#msgOn { color:#009933; display:inline; font-style:italic; cursor:hand; }	</style>	<script type="text/javascript" ><!--		L='off';		function switchEmail(L) {			if (L=="on") {				document.getElementById("msgOn").style.display  = "none";				document.getElementById("msgOn").innerHTML = '<a href="java script:switchEmail(\'off\');">You may turn <b>off</b> email notification of new messages by clicking here.</a>';				document.getElementById("msgOn").style.display = "block";			} else {				document.getElementById("msgOn").style.display  = "none";				document.getElementById("msgOn").innerHTML = '<a href="java script:switchEmail(\'on\'); ">You may turn <b>on</b> email notification of new messages by clicking here.</a>';				document.getElementById("msgOn").style.display = "block";			}		}		-->	</script></head><body><table><tr><td>  <span id="msgOn" ><a href="java script:switchEmail('on'); ">You may turn <b>on</b> email notification of new messages by clicking here.</a></span></td></tr></table></body></html>

The first instance of my text appears in one place. But click the link, and it moves to another place. If I am changing the content of the innerHTML attribute of an element, why should that move the element? And is there any way I can stop it? I have heard that a DIV tag will throw an un-asked for <br /> at cha, or a CRLF pair, as we older folks used to call it. But I want my swapable text to stay in the same place. How do I just say no to a rouge <br />?

Link to comment
Share on other sites

It moves because you are changing it from display:inline to display:block in your JavaScript.Change the

document.getElementById("msgOn").style.display = "block";

bits to

document.getElementById("msgOn").style.display = "inline";

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...