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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Location
    Orlando, FL
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using JS to manipulate an AJAX generated DIV by ID, but it is not working.

    I am attempting to keep a DIV in the viewing window as the user scrolls. The DIV is in HTML generated in an AJAX call via a PHP script. The JS function is in the main HTML where the AJAX call resides. The code is:

    <code>
    <!-- ****** START OF SCRIPT - COMPRESSED TO SAVE SPACE + EASY CUT'n'PASTE *** -->
    <script type="text/javascript">
    /********************************************************************
    * You may use this code for free on any web page provided that *
    * these comment lines and the following credit remain in the code. *
    * Keep In View (c) JavaScript-FX. (www.javascript-fx.com) *
    ********************************************************************/
    JSFX_KeepInView = function(id){
    var getPageY=function(el){return(el==null)?0:el.offsetTop+getPageY(el.offsetParent);};
    var getScrollTop=function(){return document.body.scrollTop||document.documentElement.scrollTop};
    var el=document.getElementById(id);if(el==null)return;
    if(el.style.position=="absolute"){el.startPageTop=-el.offsetTop;el.currentX=el.offsetLeft;el.currentY=el.offsetTop;}
    else{el.style.position="relative";el.startPageTop=getPageY(el);el.currentX=el.currentY=0;};
    el.floatInView=function(){
    var targetY=(getScrollTop()>this.startPageTop)?getScrollTop()-this.startPageTop:0;
    this.currentY+=(targetY-this.currentY)/4;this.style.top=this.currentY+"px";};
    setInterval('document.getElementById("'+id+'").floatInView()',40);
    };
    JSFX_KeepInView ("ShowGoogleMapDiv");
    </script>
    </code>

    When the page fully resolves the div dosen't "keep in view" during scrolling. I use firebug to attempt to put a watch on the script but firebug says the div is not defined. I can see the div in the dom inspector, however.

    If I change the name of the div in the script to the ID of the div that surrounds the AJAX call, all of the content generated in the call stays in view during scrolling. This doesn't work for me though because the user can't see all of the content (only what originally is viewable).

    Is there something special I need to do to access div's generated by AJAX?

    I would really appreciate any help.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a try by changing
    JSFX_KeepInView ("ShowGoogleMapDiv");
    to
    Code:
    window.onload=function(){
    JSFX_KeepInView ("ShowGoogleMapDiv"); 
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Location
    Orlando, FL
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Still not working

    Thank you for your post, but that did not work either. Is there some prefix I need to access the DOM within the response text?

    I tried obj.responseText.document.getElementById(id) but that didn't work either.

    Any thoughts?

  • #4
    New to the CF scene
    Join Date
    Oct 2008
    Location
    Orlando, FL
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I figured out how to make it work

    Thanks to everyone that read my post. I managed to figure out how to make this work. I left the function portion of the script in the main page and then called the function in the generated HTML by refering to it with the parent node:

    <code>parent.JSFX_KeepInView("ShowGoogleMapDiv");</code>


  •  

    Posting Permissions

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