User:Dispenser/Navbox

Discuss this script

On Wikipedia many of the navboxes are using either class="toccolours" or id="toc". These are not very specific classes to be using and in the case of the latter is illegal in the HTML spec. Using the more specific navbox class will allow site admins to better control the appear navboxes as well as allowing user styles for navboxes.

Here's this script comes in, it allows me to edit many more navboxes a day than I could otherwise. The script modify the wikitext so that it retains as much of the original appear. It is likely the most complicated single AWB script with over 100 rules. The following is a summary of its basic functions:

Converts HTML attributes to CSS
Adds {{navbar-header}} or {{navbar-collapsible}} and removes old edit links
Fixes many common coding mistakes and error from copying and pasting malformed code
Adds {{Uncategorized template}} where needed

There are some limitations to what the script can do. So some of the things still need to be corrected by hand. Moreover .toccolours and .navbox class are not identical to each other. This is further complicated with the collapsible table class which messes up when there's no automatic width specified.

Differences in toccolours and navbox classes

.toccolours {                     table.navbox {
  background-color: #f9f9f9;        background-color: #f9f9f9;
  border: 1px solid #aaa;           border: 1px solid #aaa;
                               >    clear: both;
  font-size: 95%;              |    font-size: 90%;                 
                               >    margin: 1em 0em 0em;            
  padding: 5px;                |    padding: 2px;                   
                               >    text-align: center;             
                               >    width: 100%;                    
}                                 }
                               >  @media print {
                               >      .navbox {
                               >          display: none;
                               >      }
                               >  }

Fixes to common complaints

Font size is too small/large: Add font-size:95%; to set it to the size as previously with class="toccolous". If the page was sprinkled with font-size:90%; a better choice for a base font-size might be font-size:85%; (0.90×0.90)
How do I control the collapsing?

The collapsing is controlled through the class tag, collapsible will add the ability for the table to collapsible. collapsed and autocollapse will dictate when the table collapse, always and when 2 or more tables are the same page, respectively.

If desired the collapsing can be controlled from the article itself. Replace autocollapse with {{{state|autocollapse}}}, then when using that template inside an article you can set its state like so: {{name of template|state=open}}.

The collapsing doesn't work, it becomes scrunched up!

This is because there isn't any fixed wide set, thus collapsed it attempts to have a minimum width. Use a fixed value in ems or percent.

How do I set the width?

Add to the style attribute the margin and width properties, like such: style="margin-left:auto; margin-right:auto; width:15em;". Removing one of those values cause that value to the mirror of the other side. Use auto for the side to allow the table to center across the page. Avoid using PIXEL unit as they DO NOT SCALE.

50em is recommend as a pseudo-standard for fixed width as it fit on well on a 800x600 display and typically provides enough space with the default font-size.

Resolution	Max width^[1]	Valve Usage^[2]	w3school Usage^[3]
640 x 480	37em	N/A	0%
800 x 600	52em	2.00%	14%
1024 x 768	71em	36.99%	54%
1152 x 864	82em	6.25%	26%
1280 x 800	93em	41.49%
1440 x 900	107em	4.77%
1600 x 1200	120em	1.72%
1680 x 1050	N/A	4.42%
1920 x 1200	N/A	1.22%
Other	N/A	1.14%	6%

Notes

^ Tested in sandbox using Internet Explorer 6 in Windows XP with the default font family and size.
^ Valve Survey Summary last updated 2:03pm PST (22:03 GMT), July 06 2007
^ Browser Display Statistics January 2007 readings