0

I have a DIV which is of a fixed width/height, is "Overflow: Hidden" and contains a lot of IMGs which are "Display: Inline" and "Float: Left"

Obviously only the first few images are 'visible' - the rest disappear off into the 'hidden' area of what is a very, very wide DIV.

If this were a scrollable DIV with non-inline elements, I could easily implement a system whereby the IMGs don't load their 'src' until they become 'visible' - but I can't find a way of determining the 'real' position of inline'd and float:left'd images - e.g. there's no way to tell if they're in the 'visible' part of the DIV?

Any ideas? Things like Offset and CSS Left/Top are all 0 (obviously)??

p.s. to enhance the question - what I want to do (in jQuery because I think in that!) is

$("#container img").each(function() {
  if ($(this).isinthevisiblepartofthecontainer) ...
});

p.p.s. it occurs to me that I could just 'count widths' - assuming I can get the elements in order - so something like this

var width = $("#container").width();
var sofar = 0;
var imgs = $("#container img");
var idx = 0;
while (sofar < width) {
  var img = $(imgs[idx]);
  img.dowhatsoeverIwanthere
  sofar += img.width();
  idx++;
}

It's crude but assuming it returns the elements in the right order (and it seems to) it would work...

  • 1
    http://stackoverflow.com/questions/143815/how-to-determine-using-javascript-if-html-element-has-overflowing-content – Rajat Singhal Sep 23 '12 at 10:32
  • That only tells me IF I have overflowing elements - not which ones they are... –  Sep 23 '12 at 11:15

2 Answers2

0

did you try position absolute? i mean, for what i understood you want to scroll in x?

because you could tell through jQuery to images with left more than x and less than x - x to be display none till they reach that condition...

I dont have clear how you want to scroll if with the div scroll-x or with jQuery .css(), .fadeIn(), .hide(), etc

I think Rajat commented what you need

Santiago Rebella
  • 2,399
  • 2
  • 22
  • 29
  • I have no control over the content of the div but I shouldn't need to re-layout the content just to find out 'where' elements actually are!? –  Sep 23 '12 at 12:28
  • you can find where elements actually are just with .attr() or with .css() without re-layout – Santiago Rebella Sep 23 '12 at 12:39
  • no you can't - they're inline/float:left elements, they have no css left/top - no offset - no position (other than relative 0,0 to the item to their left) –  Sep 23 '12 at 14:53
0

After much investigation I'm concluding that you cannot determine whether FLOAT:ed elements are within the visible portion of a scrolling div via any attribute they may have.

You can calculate their position by adding-up their widths/heights and then see if this 'position' is within the visible area but there's no other way to determine their 'visibility'.

Not entirely surprising - they're dynamically layed-out for a reason - and it's not hard to calculate their position...