...

View Full Version : Java Script



Robthemanbob
06-21-2008, 12:26 AM
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>

vwphillips
06-21-2008, 11:30 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function Tst(obj,id){
if (obj.scrollHeight-obj.offsetHeight-obj.scrollTop==0) document.getElementById(id).style.display='block';

}
/*]]>*/
</script></head>

<body>
<div id="div1" name="div1" style="width : 500px; height : 300px; overflow : auto; " onscroll="Tst(this,'div2');" >
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
Line<br />
</div>
<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>
</body>

</html>

Robthemanbob
06-24-2008, 07:59 PM
Why the XML CD DATA?









<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function Tst(obj,id){
if (obj.scrollHeight-obj.offsetHeight-obj.scrollTop==0) document.getElementById(id).style.display='block';

}
/*]]>*/
</script></head>

Robthemanbob
06-24-2008, 08:41 PM
It does work indeed.


Thanks

Basscyst
06-25-2008, 12:02 AM
Why the XML CD DATA?

So that the code is not parsed as xml data. You can remove it and place your script in an external javascript file if you so desire.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum