SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    0 Post(s)
    0 Thread(s)

    Question How can I fire off some AJAX to PHP when a scroll point is met?

    This is a hard one to explain, so bear with me here...

    I have 2 DIVs (one next to the other) and let's say both have a max height of about 80% of the entire page. It might be done with em units, it might be done with percentages, but figuratively-speaking, both consume 80% of the page height. Okay, so the DIV on the left of the page has overflowing text which causes overflow:hidden to generate a scroll bar. Still with me? This text is generated inside this DIV using a back-end PHP engine (these pieces of text are actually Drupal nodes, in fact). Each page (node) has a corresponding image over in the right-side DIV that changes whenever a new node is scrolled to. Understand? A good example would be 2 browser windows side-by-side where in one you have a long Wikipedia article and in the other, the corresponding images of each paragraph pertaining to that article. When a given paragraph is scrolled to, its corresponding image over in the right-side would be displayed. Next paragraph, next image... So forth and so on...

    The above is what I'm trying to do, but I'm having a hard time getting this "scrolling feature" to work--correctly. The current pseudo-solution I've implemented makes use of unnecessary jQuery in the form of "waypoints" combined with "data-value" attributes that tell the jQuery processor to swap the images in the right-side DIV whenever the next page (node) is scrolled to. Otherwise, it makes use of a "prev()" function that changes it back to what the image was beforehand... It kind of works with how I have it now, but something I've noticed is that A.) it's very chaotic and inconsistent between multiple browsers--too much so to be acceptable "validation concerns" that one usually goes back to fix later on and B.) the buffer seems to be acting weird upon loading the images because they sometimes get blacked-out entirely. Chrome doesn't even show anything it seems... Long story short, it's a messy bunch of code that's using too much jQuery and not enough common sense. Ha.

    Is it possible to activate some sort of PHP back-end event through the use of JavaScript IF and only IF a certain point is reached in a scrollable content? Say, for example, you have a DIV that displays a bunch of subsequent DIVs whereby each subsequent DIV has it's own CSS class attribute. Would it be possible to have a PHP function "do something" when the beginning (or end) of a subsequent DIV INSIDE the scrolling DIV is scrolled to?

    (Sorry. I know this is hairy... This project I'm working on has been fun, but it's reaching a point where I'm growing tired of all the jQuery crap. I'd like to figure out what specific JavaScript is responsible for activating an AJAX call capable of doing a PHP action so that I can eliminate the jQuery I don't need and free up some resources while providing the scrolling action I need.)

    Any help or insight into this is greatly appreciated. I'll try to provide an example of where I am sometime tomorrow if and when I can...

  2. #2
    SitePoint Member
    Join Date
    Nov 2011
    0 Post(s)
    0 Thread(s)
    I think this link is what you are looking for.


Posting Permissions

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