0

Note: Using a 3rd party tab system is not an option so please don't even recommend that.

On my page, I have several <div>s and several tabs. Each div can belong to multiple tabs. For example, all divs belong to the 'All' tab, and then some divs belong to the tab 'Today', some to 'Tomorrow', etc.

What I want to do is, when the user clicks the Today tab, I want to only show the divs which belong to that tab. When he clicks any other tab, then the previous tab's divs should get hidden and the selected tab's divs should show. Pretty standard tabbing behavior so far.

However where this is different is, one div can be shared between multiple tabs.

I was thinking that, whenever a new tab is selected, I could simply loop through all the divs of the last selected tab, hide them, and then loop through the current tab's divs and show them.

However I'm wondering if there would be any more efficent / less CPU intensive method. Also, this method will cause some divs to be hidden only to then be showered again right away if they're shared between the last tab and current tab. (For example: div_111 could be shared between Today and Tomorrow. User clicks Today, div_111 is shown. Then he clicks Tomorrow, div_111 is hidden at first, only to then be shown again).

Any suggestions?

2
  • how is this not a real question?
    – Ali
    Apr 30, 2012 at 2:28
  • No code + "any suggestions" = Not a Real Question. Post on Meta if you want to appeal. Apr 30, 2012 at 16:36

1 Answer 1

2

The thing you want to watch out for is redraws. When you add or remove an element the browser has to figure out how the change affects every other element on the page, and reposition / resize every element accordingly. This process is almost always the most expensive part of a DOM manipulation - certainly more expensive than figuring out which elements go in which tabs.

Browsers try to optimize redraws - they redraw as little of the page as possible, and sometimes group multiple changes into the same redraw. However, it is best to take matters into your own hands. You can make sure there are no more than two redraws, no matter how many nodes you add or remove, by first removing the parent node from the DOM, then making all your changes, then re-appending it. Here's a simple example:

var container = document.getElementById('container'),
    buffer = document.createDocumentFragment(),
    newNodes = tabs[selection], // an array or object, generated at page load,
                                // containing all divs that show up in this tab
    i, div;
document.body.removeChild(container);
for (i = 0; div = newNodes[i]; i++) {
    buffer.appendChild(div); // if div is in container then it will be
                             // automatically removed
}
container.innerHTML = ''; // probably more efficient to remove nodes individually
container.appendChild(buffer);
document.body.appendChild(container);

Depending on your layout, removing container may cause the content below it to momentarily jump up. If you want a polished appearance you can either fix the height of container's parent or insert a placeholder in its place with container.parentNode.replaceNode().

If you minimize redraws then you shouldn't have any efficiency problems. But if you still want to tweak, sure, optimize your content insertion logic. The simplest way to do that would probably be to segregate content that is tied to a single tab from content that shows up in multiple tabs, possibly by using different containers for each content type. Remember that the best solution is the one that is no more generalized than it needs to be.

4
  • What concerns me a bit about this method is, document.body.removeChild(container); will remove all the divs that have been previously generated. By storing them in ` newNodes = tabs[selection]` we will probably retain a copy of those divs, but all the divs not belonging to the currently selected tab will be removed and will have to be generated again. Any ideas about that?
    – Ali
    Apr 27, 2012 at 15:02
  • Sorry, I think my example wasn't thorough enough. I was thinking that you would generate every div on page load, then put it in the appropriate array - so some divs would be stored in multiple arrays, with each pointing to the same object in memory. Since the arrays would be static after that point, no div would ever be deleted or constructed again. So it's true that divs may end up being removed then re-appended, but since you're not actually creating a new div or redrawing the page, I would say it's a very minor issue - it certainly wouldn't impact performance.
    – st-boost
    Apr 28, 2012 at 4:46
  • I wish this question were open so I could award you a bounty for teaching me about rendering and document.createFragment(), its been very valuable
    – Ali
    Sep 22, 2012 at 9:49
  • @ClickUpvote thanks for coming back to say that. It matters more than the points.
    – st-boost
    Sep 30, 2012 at 23:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.