I am facing a challenge with a third-party application where I need to retrieve element information without access to their core JS engine. The application has a slideshow feature that does not mark the current element with a specific "current" class when it enters the main container view.
The slideshow functionality involves AJAX calls through PHP to fetch objects from a database and dynamically add them to the DOM within the container. As a result, determining the currently visible element in the container using traditional methods like classes or IDs is not feasible since the elements are added with offset positioning instead of being hidden.
The slideshow uses an 'offset' variable to adjust the position based on next/previous button selections.
As I cannot identify the current element directly, due to the dynamic nature of the slideshow and lack of distinguishing identifiers, I need to extract a property from the current element's view space and send it to Google Analytics as part of the 'Send' property for proper tracking.
I am seeking a solution to accurately pinpoint the current element within the container despite the absence of clear identifiers. Your insights or suggestions would be greatly appreciated.
<div class="container">
<div class="slide" offset="1" style="position:absolute; top:0; left:0"><p class="objTitle">Some object title 1</p></div>
<div class="slide" offset="2" style="position:absolute; top:0; left:1000"><p class="objTitle">Some object title 2</p></div>
<div class="slide" offset="3" style="position:absolute; top:0; left:2000"><p class="objTitle">Some object title 3</p></div>
<div class="slide" offset="4" style="position:absolute; top:0; left:3000"><p class="objTitle">Some object title 4</p></div>
<div class="slide" offset="5" style="position:absolute; top:0; left:4000"><p class="objTitle">Some object title 5</p></div>
</div>
The left positioning is dynamic based on viewport size. While the JavaScript involved is complex with custom libraries, my primary focus is to determine whether the current slide is visible within the container's view area. Any guidance on achieving this task would be highly valuable.
Please note that I haven't included the actual JavaScript code, as it consists of multiple custom libraries.
Thank you for your assistance.