Geek Answers Handbook

Floating elements: fill in the bottom line first

One project I'm working on uses tabbed navigation. Since the number of tabs is dynamically calculated and can reach large numbers, sometimes these tabs (which are essentially elements <li>with a style declaration float: left;) overflow on the next line, using [###]a tab to display, the final result looks something like this:

[###] [###] [###] [###] [###] [###]
[###] [###]
[Rest of the content..............]

Since the last 4 elements on the top line do not have the element to which they connect, it looks awful.

Is it possible with Javascript (frameworks such as jQuery or MooTools, acceptable if they provide a shorter / simpler solution) to fill the bottom line first and put the remaining elements on top?

Like this:

[###] [###]
[###] [###] [###] [###] [###] [###]
[Rest of the content..............]

(Question tagged MooTools, JS-, . , , , , , MT)

+5
4

, . , JS, ( ) . , clear: both ( ).

var allTabs = $$('#tab-container li');
var tabNum = allTabs.length;
var tabWidth = allTabs[0].offsetWidth;
var oWidth = $('tab-container').offsetWidth;
var tabRowNum = Math.floor(oWidth/tabWidth);
var tabRowOffset = (tabNum % tabRowNum);

for(var i = 0; i < tabNum; i++) {
    if((i % tabRowNum) == tabRowOffset) {
        allTabs[i].setStyle('clear', 'both');
    }
    else {
        allTabs[i].setStyle('clear', 'none');
    }
}
+1

, , . - . " " javascript, position:absolute. .

. - css . , javascript. , , max-width . overflow: scroll , :)

0

JS. :

  • div ()
  • ul
  • li , " "
  • div html-, id
  • , div, .
0

( ) . ( , , .)

, , , , , , ?

  • , ( ),
  • ( ), , ,
  • You rearrange the tabs to place the selected one at the bottom, which creates a mess of navigation (the user cannot find out where the tabs are).
0
source

More articles:


All Articles