Log in

View Full Version : Resolved Gray div area but scroll back up!


dodoecchi
05-14-2009, 04:02 PM
Hi,

I would like to prevent my link not to scroll back to the top right after I click the link to gray a div

here is a test file :



<html>
<head>
<style type="text/css">
p {
margin-bottom: 300px;
}
#dark {
width: 1px;
height: 1px;
opacity:.50;
background-color: black;
z-index:10;
display : none;
position: absolute;
}
</style>
<script type="text/javascript">
function BlackOut(targetDiv, theDarker) {
document.getElementById(theDarker).style.display = "block";
document.getElementById(theDarker).style.height = document.getElementById(targetDiv).offsetHeight+'px';
document.getElementById(theDarker).style.width = document.getElementById(targetDiv).offsetWidth+'px';
document.getElementById(theDarker).style.top = document.getElementById(targetDiv).offsetTop+'px';
document.getElementById(theDarker).style.left = document.getElementById(targetDiv).offsetLeft+'px';
}
</script>
</head>
<body>
<h1>This is my test page</h1>
<p>Paragraph, let's skip some text</p>
<p>Once more</p>
<div id="dark"></div>
<div id="mydiv">my div <a href="#" onClick="BlackOut('mydiv', 'dark')">click to darken</a></div>
<p>.</p>
</body>
</html>


any suggestions?

Dorian -from France
vwphillips
05-14-2009, 04:38 PM
<html>
<head>
<style type="text/css">
p {
margin-bottom: 300px;
}
#dark {
width: 1px;
height: 1px;
opacity:.50;
background-color: black;
z-index:10;
display : none;
position: absolute;
}
</style>
<script type="text/javascript">
function BlackOut(targetDiv, theDarker) {
var obj1=document.getElementById(theDarker),obj2=document.getElementById(targetDiv)
obj1.style.display = "block";
obj1.style.height = obj2.offsetHeight+'px';
obj1.style.width = obj2.offsetWidth+'px';
obj1.style.top = obj2.offsetTop+'px';
obj1.style.left = obj2.offsetLeft+'px';
}
</script>
</head>
<body>
<h1>This is my test page</h1>
<p>Paragraph, let's skip some text</p>
<p>Once more</p>
<div id="dark"></div>
<div id="mydiv">my div <a href="#" onClick="BlackOut('mydiv', 'dark'); return false;">click to darken</a></div>
<p>.</p>
</body>
</html>
dodoecchi
05-14-2009, 08:03 PM
thanks, that's working

href="javascript:;" also works, after more research

Dorian