Robthemanbob
06-20-2008, 11:26 PM
Hi all,
I am having some trouble removing the hidden aspect from div and having it display when the end-user scrolls to the bottom of the div. The code works well in IE however it does not work in FF.
Here is the div that always display
<div id="div1" name="div1" style="width : 500px; height : 300px; overflow : auto; ">
<?php echo $eula; ?>
</div>
Now here is the java script which monitors the form for the scroll bar to reach the bottom of the div
<script language="JavaScript" type="text/javascript">
function startScrollingDetector()
{
setInterval("scrollingDetector()", 500);
}
function startPolling(){
setInterval("poll()", 500);}
function poll(){
//function dothis() {
var el;
el = document.getElementById("div1");
var h=el.scrollHeight;
//alert ("this is h " + h);
var y=el.scrollTop;
//alert ("this is y " + y);
var c=el.clientHeight;
//alert ("this is c " + c);
var scrollbottom= h-(y + c);
//alert ("this is scroll " + scrollbottom);
if (scrollbottom < 2) {
div2.style.display = 'table';
}
}
</script>
Here is the div which should be displayed in FF and IE after the scroll bar reaches the bottom
<div id="div2" style="display:none;" valign="top">
<table><tr><td><form action="eula.php" method="POST">
<input type="hidden" value="test">
<input type="submit" value="Accept" name="submit">
</form></td><td><form action="eula.php" method="POST" >
<input type="submit" value="Decline" id="Decline" name="submit">
</form></td></tr></table>
</div>
I am having some trouble removing the hidden aspect from div and having it display when the end-user scrolls to the bottom of the div. The code works well in IE however it does not work in FF.
Here is the div that always display
<div id="div1" name="div1" style="width : 500px; height : 300px; overflow : auto; ">
<?php echo $eula; ?>
</div>
Now here is the java script which monitors the form for the scroll bar to reach the bottom of the div
<script language="JavaScript" type="text/javascript">
function startScrollingDetector()
{
setInterval("scrollingDetector()", 500);
}
function startPolling(){
setInterval("poll()", 500);}
function poll(){
//function dothis() {
var el;
el = document.getElementById("div1");
var h=el.scrollHeight;
//alert ("this is h " + h);
var y=el.scrollTop;
//alert ("this is y " + y);
var c=el.clientHeight;
//alert ("this is c " + c);
var scrollbottom= h-(y + c);
//alert ("this is scroll " + scrollbottom);
if (scrollbottom < 2) {
div2.style.display = 'table';
}
}
</script>
Here is the div which should be displayed in FF and IE after the scroll bar reaches the bottom
<div id="div2" style="display:none;" valign="top">
<table><tr><td><form action="eula.php" method="POST">
<input type="hidden" value="test">
<input type="submit" value="Accept" name="submit">
</form></td><td><form action="eula.php" method="POST" >
<input type="submit" value="Decline" id="Decline" name="submit">
</form></td></tr></table>
</div>