Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Java Script

  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Location
    Central California
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Java Script

    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
    Code:
    <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

    Code:
    <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

    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Robthemanbob (06-24-2008)

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Location
    Central California
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Why the XML CD DATA?


    Quote Originally Posted by vwphillips View Post


    Code:
    <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>

  • #4
    New to the CF scene
    Join Date
    Oct 2006
    Location
    Central California
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Confirmation

    It does work indeed.


    Thanks

  • #5
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by Robthemanbob View Post
    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.
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •