Forum Moderators: open
New to JavaScript so please don't be to harsh with me ... there is probably something silly happening here but I cant see it.
I have created some code to load text into a related element. It seemed to work fine. However when I tested with a page larger than the browser window, it jumps to the top of the page.
If you load the below, scroll down the page a bit, it jumps to the top of the page as if the page was being reloaded.
I want it to do what it does, but, I dont want it to jump to the top of the page.
Any help would be appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
<!--
var roomDetails = // as testforSecondclicks are in an object they can be changed form anywhere in the code. There is no need to rerutn values from any functions to reflect the change.
[
{'nodeID':'room0',
'amenities':'room0 information here',
'clickTest':false},
{'nodeID':'room1',
'amenities':'room1 information here',
'clickTest':false},
{'nodeID':'room2',
'amenities':'<p>snip url from code</p>',
'clickTest':false} // a url should really be tested for as it may cause problems as will any other html if quotes are used in it. eg 'amenities':'htmlvaluewith''twosinglequotes' will cause a problem
];
function secondClicktest(roomID) {
if (roomDetails[roomID]["clickTest"] == false) {
document.getElementById(roomDetails[roomID]["nodeID"]).innerHTML=roomDetails[roomID]["amenities"];
//alert(roomID + " " + roomDetails[roomID]["clickTest"]);
return roomDetails[roomID]["clickTest"] = true;
} else {
document.getElementById(roomDetails[roomID]["nodeID"]).innerHTML="";;
return roomDetails[roomID]["clickTest"] = false;
}
}
-->
</script>
</head>
<body>
<table style="border: 2px solid #000000" width="100%" cellpadding="4" cellspacing="0" align="center">"""
<tr>
<td valign="top" align="left" bgcolor="#CC9999"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p style="border: solid #000000 1px; display: inline; float: left;" class="bolder">$$$ROOMNAME$$$</p><!--Remove this comment: if there is room information available then place link here with NO white space.--><p style="border: solid #000000 1px; display: inline; margin-left: 8px;"><a rel="nofollow" href="#" onclick="secondClicktest(0);">Room Details</a></p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFCC"><br><br><br><br><br><br><p style="border: solid #000000 1px; display: inline; float: left;">$$$EXEC_ROOMIMAGE$$$</p><span style="border: solid #000000 1px; margin-left: 8px;" id="room0">X </span>ZZZ</td><!-- Remove this comment: space must be there to start with so the same node can be replaced all the time.-->
</tr>
<tr>
<td valign="top" align="left" bgcolor="#CC9999"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p style="border: solid #000000 1px; display: inline; float: left;" class="bolder">$$$ROOMNAME$$$</p><!--Remove this comment: if there is room information available then place link here with NO white space.--><p style="border: solid #000000 1px; display: inline; margin-left: 8px;"><a rel="nofollow" href="#" onclick="secondClicktest(1);">Room Details</a></p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFCC"><p style="border: solid #000000 1px; display: inline; float: left;">$$$EXEC_ROOMIMAGE$$$</p><span style="border: solid #000000 1px; margin-left: 8px;" id="room1">X </span>ZZZ</td>
</tr>
<tr>
<td valign="top" align="left" bgcolor="#CC9999">
<p style="border: solid #000000 1px; display: inline; float: left;" class="bolder">$$$ROOMNAME$$$</p><!--Remove this comment: if there is room information available then place link here with NO white space.--><p style="border: solid #000000 1px; display: inline; margin-left: 8px;"><a rel="nofollow" href="#" onclick="secondClicktest(2);">Room Details</a></p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFCC"><p style="border: solid #000000 1px; display: inline; float: left;">$$$EXEC_ROOMIMAGE$$$</p><span style="border: solid #000000 1px; margin-left: 8px;" id="room2">X </span>ZZZ</td>
</tr>
</table>
</body>
</html>
This will stop the href being acted upon after the onclick.
return false;<edit>Someone already replied while I was still reading post.</edit>
.
Additionally, get all of that inline CSS code bloat out into an external CSS file and use some classes instead.
Get rid of all the
<br><br><br>
Do all inline events attached to a href trigger a http request without a return false;?
This seems like something I should have read about, but as you can see if I have it has slip my mind. I should be taking away with me and making sure use it with most onclick events?
</is just about to make onclick= return false; a mental snippet>
And thanks for the notes on removal of css to an external. This was just a prototype. Separation of css style and html / xhtml structure is something I do do.
