Question

I apologize up front if this question was asked before. I tried researching my problem but couldn’t seem to find an answer. I have two arrow images that when clicked will “slide” a div either 60 px to the left or right depending on which arrow is clicked. What I would like to do is record the position of the first img inside the div. Everytime the image changes I would like to compare the images position on the X axis and depending on the number provide a certain action. I wrote a script that does not seem to work (most likely my logic is completely off) and alerts out a position of 0 every time.

var p = $("#hd_Thumbs img:first");
var offset = p.offset().left;


alert(offset);

if(offset >= 60) {
alert("No Bueno");

}

Could anyone point me in the right direction or possibly provide a url I could read up on this. I feel like my logic and plan of attack for this is all wrong. Thanks in advance.

Answer 1

Thank you zerkms as I found the answer out by taking another look at my HTML file. I had another div named thumbs_Container inside the div that was harvesting my images. Once I changed my code it worked. To anyone running into the same problem the logic seems to be correct. He is my corrected code:

var p = $("#thumbs_Container img:first");
var offset = p.offset().left;


alert(offset);

if(offset >= 60) {
alert("No Bueno");

}

Any my HTML was:

<div id="hd_Thumbs">

<div id="thumb_Left"><img src="images/prev_Thumb.png" alt="Previous Thumbnail" width="60px" height="60px" onclick="prevThumb()" id="lefty"  /></div>
<div id="thumb_Right"><img src="images/next_Thumb.png" alt="Next Thumbnail" width="60px" height="60px" onclick="nextThumb()" id="righty"  /></div>
<div id="thumbs_Container">
<?php echo $xmlData; ?>
</div>
</div>