Forum Moderators: open
Here is my JS
function show(divID){
var tDiv = document.getElementById(divID);
tDiv.style.display="block";
}//show
function hide(divID){
var tDiv = document.getElementById(divID);
tDiv.style.display="none";
}//show
Here is my HTML
<a href = "#" onclick="show('{showDivID}')">New Job</a>
<div id = "div53" class = "newDiv" style="display: none;">
<input type = "submit" name = "newSubmit" value = "submit" onclick="hide('div53')">
</div>
And here is my css
.newDiv{
background-image: url("images/br_paper.jpg");
position: absolute;
left: 30%;
height: 30em;
width: 30em;
border: grey groove 3px;
z-index: 9;
}
I tried using anchors, but then it still jumps around the page even if they are placed right. I also tried taking out the # but then it just displays really fast and then disappears again. Any ideas? Thanks,
Does anyone know how I can keep my current spot in the page?
Many form or page elements have a natural action. For hyperlinks, it's navigate, for forms, it's submit the form. To tell the browser to let JS manage the action and not perform the natural action, return false from your function.
This has the added benefit of giving you a way to make the form/link work if Javascript is disabled. If JS is disabled, it won't "get" the return false and revert to the natural action, allowing users to access your content whether or not JS is enabled.
In your example (in which I've economized the show/hide into one function:):
function showHide(divID){
var tDiv document.getElementById(divID);
tDiv.style.display = (tDiv.style.display=='block')?'none':'block';
return false;
}
<a href="link_to_alternate_content.html" onclick="return showHide('div1')">New Job</a>
Working example, an exact duplicate of the solution posed in another thread [webmasterworld.com] sans the unnecessary window.onload()!:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<!-- doctype on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
.hideme { display: none; }
</style>
<script type="text/javascript">
function showHide(divID){
var tDiv = document.getElementById(divID);
tDiv.style.display = (tDiv.style.display=='block')?'none':'block';
return false;
}
</script>
</head>
<body>
<p><a href="link_to_alternate_content.html" onclick="return showHide('div1')">New Job</a> </p>
<p><a href="link_to_alternate_content2.html" onclick="return showHide('div2')">Old Job</a> </p>
<p><a href="link_to_alternate_content3.html" onclick="return showHide('div3')">Bad Job</a> </p>
<p id="div1" class="hideme">Div 1 content goes here.</p>
<p id="div2" class="hideme">Div 2 content goes here.</p>
<p id="div3" class="hideme">Div 3 content goes here.</p>
</body>
</html>
