User:Erutuon/der3

der3 with classes applied to list items

• beer and skittles
• beer belly
• beer-bust
• beer and skittles
• beer belly
• beer-bust
• beer can
• beered-up
• beer garden
• beer goggles
• beer gut
• beer hall
• beerily
• beerish
• beerless
• beer mat
• beer muscles
• beer o'clock
• beer parlour
• beerstone
• beery
• bock beer
• champagne taste on a beer budget
• craft beer
• cry in one's beer
• ginger beer
• keg beer
• ice beer
• near beer
• root beer

 

List switcher

To try this, add importScript("User:Erutuon/scripts/listSwitcher.js") to your common.js.

• beer and skittles
• beer belly
• beer-bust
• beer and skittles
• beer belly
• beer-bust
• beer can
• beered-up
• beer garden
• beer goggles
• beer gut
• beer hall
• beerily
• beerish
• beerless
• beer mat
• beer muscles
• beer o'clock
• beer parlour
• beerstone
• beery
• bock beer
• champagne taste on a beer budget
• craft beer
• cry in one's beer
• ginger beer
• keg beer
• ice beer
• near beer
• root beer

 

Implementations

Terminology: shown state is state resulting from clicking "more" button, hidden state is state resulting from clicking "less" button.

1. two separate lists, one in shown state, one in hidden state (link)
   • cons: duplicates list items
2. classes on individual list items in page source (link)
   • pros:
     1. doesn't require list items to be duplicated in two separate lists (one for shown state, one for hidden state); this is also true of several other implementations
     2. doesn't require setting any classes on individual list items initially (though this feature can be added to some of the other implementations)
   • cons: have to add class in module; can't customize number of items in shown state as neatly
3. "list switcher": have JavaScript show a certain number of items from beginning of list in hidden state (link)
   • cons: list items change position between shown and hidden state
4. Victar Example #2 (link): ??
5. attempt to calculate height of each row of the list and have an element cut off a certain number of rows (link)
   • impossible to reliably get the height because it depends on the details of text rendering
6. use math to figure out which items will be in each column and add .vsHide class to all but the first certain number of rows so they will be hidden (link)
   • pros: if math works, list items don't change position between shown and hidden state
   • cons: the math isn't always correct