CODEWITHSUNDEEP
javascriptjqueryhtmlcss
aw crud
aw crud

Reputation: 8891

How can I change the CSS visibility style for elements that are not on the screen?

I have a lot of data being placed into a <DIV> with the overflow: auto style. Firefox handles this gracefully but IE becomes very sluggish both when scrolling the div and when executing any Javascript on the page.

At first I thought IE just couldn't handle that much data in its DOM, but then I did a simple test where I applied the visibility: hidden style to every element past the first 100. They still take up space and cause the scrollbars to appear. IE no longer had a problem with the data when I did this.

So, I'd like to have a "smart" div that hides all the nested div elements which are not currently visible on the screen. Is there a simple solution to this or will I need to have an infinite loop which calculates the location of the scrollbar? If not, is there a particular event that I can hook into where I could do this? Is there a jQuery selector or plugin that will allow me to select all elements not currently visible on the screen?

Upvotes: 1

Views: 598

Answers (2)

aw crud
aw crud

Reputation: 8891

I was able to achieve the goal in my question but it did not deliver much of a performance gain in IE. I reworked my whole page but here's the unfinished code in case anybody else wants to do something like this and wants to know where to start:

//Where 'child' = element inside of a div ('parent') having overflow: auto style 

function isChildOnScreen(child, parent) { 
  var topOfChild = child.offsetTop;
  var bottomOfChild = child.offsetTop + child.offsetHeight;
  var topOfParent = parent.scrollTop;
  var bottomOfParent = parent.scrollTop + parent.offsetHeight;

  var makeVisible = (topOfChild >= topOfParent && topOfChild <= bottomOfParent)
    ||
    (bottomOfChild >= topOfParent && bottomOfChild <= bottomOfParent)
    ||
    (topOfChild < topOfParent && bottomOfChild > bottomOfParent);

  return makeVisible;
}

Upvotes: 0

racerror
racerror

Reputation: 1629

You want to use display: none instead of visibility: hidden

Elements that are hidden using visibility: hidden will still claim their space in the viewport.

As far as using a "smart" div, as you describe it. You may be interested in something like the jQuery autopager plugin.

Upvotes: 1

Related Questions