Give your divs a class, and surround with a div. Use a CSS file that
looks something like this:
#containerDiv.showing .entityDiv { display: block; }
#containerDiv.hiding .entityDiv { display: none; }
Now when you want to show your entity divs, you can just say
$('#containerDiv').removeClass('hiding').addClass('showing');
and vice-versa to hide them.
You can also statically instert all your clearing divs, and when you
don't want them to have that effect you can use a similar CSS
technique.
On Sun, Sep 27, 2009 at 12:25 AM, Sid <nikhil...@gmail.com> wrote:
>
> I have a page with about 3000 (expected to grow to around 5000)
> floating divs. It's a list of entities.
>
> The page also has filters to allow the user to narrow down (no one
> wants to see 3000 items, of course).
>
> When all filters are removed, I want to show all 3000 divs. After
> every 2 of these divs, I also need to insert an additional div to
> "clear" the float. The problem is that $("div.mydivclass").show(); is
> taking a really long time. Any performance tips?
>
> The other interesting thing that's happening is this:
> $("body").append(waitingdiv);//Positioned in the center of the screen
> with a wait gif and "Please wait" message
> if(appliedfilters.length==0) //No filters. Show all divs
> $("div.mydivclass").show();
> else {
> .. show only divs that meet filter criteria..
> }
> insertClearingDivs();//Insert a div to clear the float after every 2
> visible divs
> $("div#waitingdiv).remove();
>
> You would expect the "waitingdiv" to appear instantaneously because
> the bottleneck is in show()ing all 3000 divs. But for some reason it
> takes a really long time for it to show up. And then it's gone in a
> flash and all 3000 divs appear. Incidentally, this also happens when
> the first filter is applied. In that case, the filter usually narrows
> down 3000 items to about 100.
>
--
Turtle, turtle, on the ground,
Pink and shiny, turn around.
