Dynamic elements above FixedHeader leads to chaos, anarchy!

raddevon

As stated in the title, I have a dynamic collapsible element above my DataTable which has a FixedHeader. I figured out I needed to call fnUpdate() after my animations ended, and I did so thusly:
[code]
$('#filters').on('hidden', function () {
ticketHeader.fnUpdate();
});
$('#filters').on('shown', function () {
ticketHeader.fnUpdate();
});
[/code]

It seems to properly update the position of the header, but it is not redrawn until the page is scrolled or resized. As a result, the former (and no longer appropriate) position of the FixedHeader is intact until I scroll the page a bit. At that point, the old header pops out of existence, and the correct header functions properly. Any ideas?

rgvcorley

Is it possible to supply a link, or setup a test case?

http://live.datatables.net/#javascript,html,live

raddevon

@rgvcorley You can try this for now:
http://raddevon.dyndns.tv:8000/ticket/

Click the More link next to the filter input and watch the magic.

rgvcorley

Thanks for the link

'hidden' and 'shown' are not valid events:-
http://www.w3.org/TR/DOM-Level-3-Events/#event-types-list

Try attaching to the click event for 'more' link instead

I haven't actually used the fixed header plugin myself, however a very similar problem actually appears on the example page for the fixedheader plugin on Chrome (double header, then once you scroll the two header rows re-align):-

http://datatables.net/extras/fixedheader/

raddevon

I probably should have mentioned I'm using Twitter Bootstrap's collapse plugin. That's where my 'hidden' and 'shown' are coming from.
http://twitter.github.com/bootstrap/javascript.html#collapse

I see that on the FixedHeader page. Oddly, I didn't have the problem until I added the collapsible element above it.

raddevon

I'm taking my server down for now. If anyone else needs to see, I'll be glad to put it back online.

Thanks to rgvcorley for the help so far.

allan

I haven't seen it, so I'm guessing a little, but I suspect you need to call fnUpdate on the FixedHeader's instance when the DOM is reflowed so that FixedHeader can reposition the fixed header element based on the new layout of the document.

The real difficulty is in having this work with the animation. If there is a 'step' function that you can use, that might work, but is very heavy handed, since there are a lot of calculations going on that probably don't need to. I've yet to work out a good way of having this work in FixedHeader - DOM mutation events might offer an option, but it will probably be 2020 before we can use that in ball browsers...

Allan

raddevon

Here's a description of the "shown" event from Twitter Bootstrap's Collapse plugin documentation:
[quote]This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).[/quote]
The "hidden" event is predictably similar. It seems like it would be the perfect event for firing fnUpdate.

I'll start my server back up for a few hours in the event you have an opportunity to look at it, Allan.
http://raddevon.dyndns.tv:8000/ticket/

raddevon

Shutting it down for tonight, gentlemen.

allan

Heh - missed it - but yes I would agree - the event fired by Bootstrap is where to call the fnUpdate API method of FixedHeader. That should solve the issue ultimately, but it will not take slide the fixed header with the animation I'm afraid. For that we would need access to the step function for the animation (which I'm not sure that there is one given that Bootstrap using CSS animations!) or we'd need to calculate where the FixedHeader will end up when the Bootstrap animation is complete and slide it there. Not particularly easy that I think :-(.

Allan

raddevon

Thanks for your feedback, Allan.