I have a PHP form for discussions. Each message has its own response button, which is dynamically generated. I'm using javascript in the button to make a response form visible at the bottom of the page, but I can't for the life of me get the page to jump down to the form once it's visible. This is a problem for pages that have a lot of discussions on it, as some users may not know to scroll down and will just think the button didn't work.
Here's what I have now for my button code:
<a href="#" onClick="changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>
The changeVisibility function looks like this:
function changeVisibility(parentID, elementID) {
document.getElementById(elementID).style.visibility="visible";
document.forms[0].parent_id.value=parentID;
var el = document.getElementById(elementID);
el.scrollIntoView(true);
}
In my form, I have a div whose id is set to responseForm. When clicking the button, the div does bee visible, but the scrollIntoView is not working - I have to manually scroll down to see it. Any ideas?
I have a PHP form for discussions. Each message has its own response button, which is dynamically generated. I'm using javascript in the button to make a response form visible at the bottom of the page, but I can't for the life of me get the page to jump down to the form once it's visible. This is a problem for pages that have a lot of discussions on it, as some users may not know to scroll down and will just think the button didn't work.
Here's what I have now for my button code:
<a href="#" onClick="changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>
The changeVisibility function looks like this:
function changeVisibility(parentID, elementID) {
document.getElementById(elementID).style.visibility="visible";
document.forms[0].parent_id.value=parentID;
var el = document.getElementById(elementID);
el.scrollIntoView(true);
}
In my form, I have a div whose id is set to responseForm. When clicking the button, the div does bee visible, but the scrollIntoView is not working - I have to manually scroll down to see it. Any ideas?
Share Improve this question asked May 14, 2010 at 21:11 EmmySEmmyS 12.1k49 gold badges103 silver badges160 bronze badges5 Answers
Reset to default 3Use window.location.hash
function changeVisibility(parentID, elementID) {
document.getElementById(elementID).style.visibility="visible";
document.forms[0].parent_id.value=parentID;
window.location.hash = '#' + elementID;
return false;
}
<a href="#" onClick="return changeVisibility(3,'responseForm')"><img src="images/reply.jpg" border=0 /></a>
EDIT: I think the issue before was that you weren't returning false, so the default action (going to #) was still occurring.
OK, I finally found something that works. I've been doing what I was taught to do in the Stone Age: when using javascript calls in what needs to be a link, use
a href="#" onClick="yourFunction()"
Apparently it's the # that's killing things for me; if I just use
a href="javascript:yourFunction()"
it works correctly. This may or may not be considered good practice anymore, but it works.
User window.location.hash to redirect to an ID/anchor. E.g.
HTML:
<p id="youranchor">bla bla</p>
JavaScript:
window.location.hash='youranchor';
EmmyS - This code does work. Here's a plete example for you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Some title</title>
<script type="text/javascript">
function jumpToParagraph() {
window.location.hash='paragraphjump';
}
</script>
</head>
<body>
<p onclick='jumpToParagraph();'>Jump to the paragraph at the end! [version 1]</p>
<p><a href="javascript:jumpToParagraph();">Jump to the paragraph at the end! [version 2]</a></p>
<p style="height: 1500px;">Some nonsense</p>
<p id="paragraphjump">You made the jump</p>
</body>
</html>
Put it into a file and test the file in your browser.
Hmm, you could try using document.body.scrollTop = document.getElementById(elementId).offsetTop; (not tested)
Hum, the following JavaScript code works like a charm:
<script type="text/javascript">
function scrollToPos() {
var el = document.getElementById("abc");
el.style.visibility = "visible";
el.style.display = "block";
el.scrollIntoView(true);
}
</script>
When clicking this link <a href="#" onclick="scrollToPos();return false;">scroll</a><br />
the following div get's gets visible and scrolls into view (tested in IE6, IE8, FF3.6.3, Google Chrome 4.1 and Opera 10.5, all on windows)
<div id="abc" style="height:100px;color:red;font-weight:bold;visibility:hidden;display:none;">
abc
</div>