Header

From Dxx

(Difference between revisions)
Line 291: Line 291:
}
}
</script>
</script>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
===Common.js===
 +
<source lang="javascript">
 +
/** Collapsible tables *********************************************************
 +
*
 +
*  Description: Allows tables to be collapsed, showing only the header. See
 +
*              [[Wikipedia:NavFrame]].
 +
*  Maintainers: [[User:R. Koot]]
 +
*/
 +
 +
var autoCollapse = 2;
 +
var collapseCaption = "hide";
 +
var expandCaption = "show";
 +
 +
function collapseTable( tableIndex ) {
 +
var Button = document.getElementById( "collapseButton" + tableIndex );
 +
var Table = document.getElementById( "collapsibleTable" + tableIndex );
 +
 +
if ( !Table || !Button ) {
 +
return false;
 +
}
 +
 +
var Rows = Table.rows;
 +
 +
if ( Button.firstChild.data == collapseCaption ) {
 +
for ( var i = 1; i < Rows.length; i++ ) {
 +
Rows[i].style.display = "none";
 +
}
 +
Button.firstChild.data = expandCaption;
 +
} else {
 +
for ( var i = 1; i < Rows.length; i++ ) {
 +
Rows[i].style.display = Rows[0].style.display;
 +
}
 +
Button.firstChild.data = collapseCaption;
 +
}
 +
}
 +
 +
function createCollapseButtons() {
 +
var tableIndex = 0;
 +
var NavigationBoxes = new Object();
 +
var Tables = document.getElementsByTagName( "table" );
 +
 +
for ( var i = 0; i < Tables.length; i++ ) {
 +
if ( hasClass( Tables[i], "collapsible" ) ) {
 +
 +
/* only add button and increment count if there is a header row to work with */
 +
var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0];
 +
if (!HeaderRow) continue;
 +
var Header = HeaderRow.getElementsByTagName( "th" )[0];
 +
if (!Header) continue;
 +
 +
NavigationBoxes[ tableIndex ] = Tables[i];
 +
Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );
 +
 +
var Button    = document.createElement( "span" );
 +
var ButtonLink = document.createElement( "a" );
 +
var ButtonText = document.createTextNode( collapseCaption );
 +
 +
Button.style.styleFloat = "right";
 +
Button.style.cssFloat = "right";
 +
Button.style.fontWeight = "normal";
 +
Button.style.textAlign = "right";
 +
Button.style.width = "6em";
 +
 +
ButtonLink.style.color = Header.style.color;
 +
ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
 +
ButtonLink.setAttribute( "href", "javascript:collapseTable(" + tableIndex + ");" );
 +
ButtonLink.appendChild( ButtonText );
 +
 +
Button.appendChild( document.createTextNode( "[" ) );
 +
Button.appendChild( ButtonLink );
 +
Button.appendChild( document.createTextNode( "]" ) );
 +
 +
Header.insertBefore( Button, Header.childNodes[0] );
 +
tableIndex++;
 +
}
 +
}
 +
 +
for ( var i = 0;  i < tableIndex; i++ ) {
 +
if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) {
 +
collapseTable( i );
 +
}
 +
}
 +
}
 +
 +
addOnloadHook( createCollapseButtons );
 +
 +
/** Dynamic Navigation Bars (experimental) *************************************
 +
  *
 +
  *  Description: See [[Wikipedia:NavFrame]].
 +
  *  Maintainers: UNMAINTAINED
 +
  */
 +
 +
// set up the words in your language
 +
var NavigationBarHide = '[' + collapseCaption + ']';
 +
var NavigationBarShow = '[' + expandCaption + ']';
 +
 +
// shows and hides content and picture (if available) of navigation bars
 +
// Parameters:
 +
//    indexNavigationBar: the index of navigation bar to be toggled
 +
function toggleNavigationBar(indexNavigationBar) {
 +
var NavToggle = document.getElementById("NavToggle" + indexNavigationBar);
 +
var NavFrame = document.getElementById("NavFrame" + indexNavigationBar);
 +
 +
if (!NavFrame || !NavToggle) {
 +
return false;
 +
}
 +
 +
// if shown now
 +
if (NavToggle.firstChild.data == NavigationBarHide) {
 +
for (
 +
var NavChild = NavFrame.firstChild;
 +
NavChild != null;
 +
NavChild = NavChild.nextSibling
 +
) {
 +
if ( hasClass( NavChild, 'NavPic' ) ) {
 +
NavChild.style.display = 'none';
 +
}
 +
if ( hasClass( NavChild, 'NavContent') ) {
 +
NavChild.style.display = 'none';
 +
}
 +
}
 +
NavToggle.firstChild.data = NavigationBarShow;
 +
 +
// if hidden now
 +
} else if (NavToggle.firstChild.data == NavigationBarShow) {
 +
for (
 +
var NavChild = NavFrame.firstChild;
 +
NavChild != null;
 +
NavChild = NavChild.nextSibling
 +
) {
 +
if( hasClass(NavChild, 'NavPic') ) {
 +
NavChild.style.display = 'block';
 +
}
 +
if( hasClass(NavChild, 'NavContent') ) {
 +
NavChild.style.display = 'block';
 +
}
 +
}
 +
NavToggle.firstChild.data = NavigationBarHide;
 +
}
 +
}
 +
 +
// adds show/hide-button to navigation bars
 +
function createNavigationBarToggleButton() {
 +
var indexNavigationBar = 0;
 +
// iterate over all < div >-elements
 +
var divs = document.getElementsByTagName("div");
 +
for(
 +
var i=0;
 +
NavFrame = divs[i];
 +
i++
 +
) {
 +
// if found a navigation bar
 +
if( hasClass(NavFrame, "NavFrame") ) {
 +
 +
indexNavigationBar++;
 +
var NavToggle = document.createElement("a");
 +
NavToggle.className = 'NavToggle';
 +
NavToggle.setAttribute('id', 'NavToggle' + indexNavigationBar);
 +
NavToggle.setAttribute('href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');');
 +
 +
var NavToggleText = document.createTextNode(NavigationBarHide);
 +
for (
 +
var NavChild = NavFrame.firstChild;
 +
NavChild != null;
 +
NavChild = NavChild.nextSibling
 +
) {
 +
if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) {
 +
if (NavChild.style.display == 'none') {
 +
NavToggleText = document.createTextNode(NavigationBarShow);
 +
break;
 +
}
 +
}
 +
}
 +
 +
NavToggle.appendChild(NavToggleText);
 +
// Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked)
 +
for(
 +
var j=0;
 +
j < NavFrame.childNodes.length;
 +
j++
 +
) {
 +
if( hasClass(NavFrame.childNodes[j], "NavHead") ) {
 +
NavFrame.childNodes[j].appendChild(NavToggle);
 +
}
 +
}
 +
NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar);
 +
}
 +
}
 +
}
 +
 +
addOnloadHook( createNavigationBarToggleButton );
 +
 +
 +
/** Test if an element has a certain class **************************************
 +
  *
 +
  * Description: Uses regular expressions and caching for better performance.
 +
  * Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
 +
  */
 +
 +
var hasClass = (function () {
 +
var reCache = {};
 +
return function (element, className) {
 +
return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\\\s|^)" + className + "(?:\\\\s|$)"))).test(element.className);
 +
};
 +
})();
 +
</source>

Revision as of 13:57, 6 January 2009

To get a DXXPedia account (which you'll need to create and edit anything here) please PM Assassin on the DXX Forum

<style type="text/css"> 

  /*
     Notes: 
      -You must log as admin to edit this page
      -Whatever you enter in this page will be added to the html in the header after the standard style sheet, so you can override styles. 
      -if you want your code to look nice on this page, put a space at the beginning of each line
      -This is the default style sheet that you can override : http://editthis.info/wiki/skins/monobook/main.css 
      
      For example uncomment this next section to turn all the text green:
  */
 /*
body {
   color: green;
}
 */ 
</style>



  <script language="javascript" type="text/javascript">
  
  function move_ads() {
      var ads = document.getElementsByTagName('iframe')[0];
      var footer = document.getElementById('footer');
      ads.parentNode.removeChild(ads);
      ads.style.visibility = 'visible';
      footer.appendChild(ads);
  }
  
  function alter_page() {
      change_title();
      move_ads();
  }
  
  if (document.addEventListener)
      document.addEventListener("DOMContentLoaded", alter_page, false);
  else
      window.onload = alter_page;
  
  </script>




<style type="text/css"> 

  /* Positioning */
  
  #globalWrapper {
      position: relative;
      width: 950px;
      margin: 50px auto 0;
      padding: 0 5px 4px;
  }

<style type="text/css">

/* Orange "You have new messages" changed to use that nice icon of a rotary phone and complimenting colors */ .usermessage { 

   background-color: transparent;
   background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Exquisite-Modem_cropped.png/32px-Exquisite-Modem_cropped.png') no-repeat left;
   color: #444444;
   border: none;
   font-weight: bold;
   margin: 2em 0em 1em 0em;
   padding-left: 3.5em;
   vertical-align: middle;

}

.usermessage a { 

   color:#444444;

}

/* "From Wikipedia, the free encyclopedia" modification */

  1. siteSub { 
   font-family:Trebuchet MS;
   font-size: 95%;

}

/* Text alignment */ body.mediawiki { 

   text-align: left;

}

/* Tab rounding */

  1. p-cactions ul

{ 

       overflow:visible;

}

  1. p-cactions li

{ 

       border: 2px solid lightgrey;
       position: relative;
       float: left;
       -moz-border-radius-topleft: .5em;
       -moz-border-radius-topright: .5em;

}

/* Get rid of the border in the page title */ .firstHeading { 

   border-bottom:none;

}

hr#hrTitleModification { 

   width:0%;

}

/* Replace dotted borders on pre with a solid one. */

  1. bodyContent pre { 
   border: 1px solid #aaa;

}

/* Miscellaneous Corner-rounding */ div.pBody { 

   -moz-border-radius-topright:0.5em;
   -moz-border-radius-bottomright:0.5em;

}

  1. content { 
   -moz-border-radius-topleft: 0.75em;
   -moz-border-radius-bottomleft: 0.75em;
   border:1px solid #AAAAAA;

}

  1. footer { 
   -moz-border-radius: 6px;
   border:1px solid #fabd23;

}

/* Link customization */

  1. bodyContent a:active { font-weight: normal; }
  2. bodyContent a.interwiki, a.external { color: #002bb8; background:none; }}
  3. bodyContent a.text { background: display; }

/* Some editing screen modifications */

  1. editpage-copywarn3, #editpage-copywarn2, #editpage-copywarn { 
   display: none;

}

input#wpSummary { 

   width: 50%;
   margin-top: 12px;

}

.editHelp { 

   margin-top:1.25em;
   margin-bottom:6px;

}

  1. wpSave, #wpPreview { 
   margin-right:1px;

}

  1. previewnote { 
   text-decoration: blink;

}

  1. toolbar { 
   display: none;

}

textarea#wpTextbox1 { 

   background-color: #FFFFFF; /* Kill the horrible new background color for certain pages */
   border: 1px solid #AAAAAA;

}

  1. longpagewarning { 
   display:none

}

/* Get RID of that annoying fund raiser advert */

  1. siteNotice { 
   display:none

}

/* Admin tools link fixer */

  1. adminbarlinks a:visited { 
   color:#002BB8

}

/* Patrolled pages fixer */ .patrollink { 

   display:none

} li.not-patrolled { 

   background-color:transparent

}


/* Nice borders for (almost) all boxes */ input[type="radio"], input[type="checkbox"] { border:none; } input[type="submit"] { 

   border: 1px solid #aaa !important;
   background-color: #f9f9f9 !important;

} /* make round corners for the rest */ input[type="submit"] { 

  -moz-border-radius-topleft: 2px !important; 
  -moz-border-radius-topright: 2px !important;
  -moz-border-radius-bottomleft: 2px;
  -moz-border-radius-bottomright: 2px;

} input[type="submit"] {color: #aaa !important;} input[type="submit"]:hover, input[type="submit"]:focus {background-color: #fff !important; color: #000 !important; cursor: pointer !important;}

/* For use with my monobook */ .ns-0 * .tabmenu ul li { 

   background: white !important;

}

/* Prettify the headers of the quickbar (left-hand column of boxes) */

  1. p-navigation h5, #p-interaction h5, #p-search h5, #p-tb h5, #p-navclone h5, #p-lang h5 { 
   display: inline;
   height: 1em;
   font-size: 85%;
   font-weight: normal;
   white-space: nowrap;
   border-color:#aaa; 
   border-width:1px;
   border-style: solid solid none solid;
   padding: 0 1em 1px 1em;
   text-transform: lowercase;
   background: white;
   -moz-border-radius-topright:1em

}

  1. p-navigation, #p-interaction, #p-search, #p-tb, #p-navclone, #p-lang { 
   padding-top: 2px;

}

/* Diff screen changes */

del.diffchange.diffchange-inline, ins.diffchange.diffchange-inline { 

   border:none;

}

/* Works in conjunction with my monobook.js */

li#ca-userrights, li#ca-stats6, li#ca-rts { 

   display:none;


}

/* Space below is for testing */

</style>





<script language=javascript type='text/javascript'> function hideDiv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideshow').style.visibility = 'hidden'; } else { if (document.layers) { // Netscape 4 document.hideshow.visibility = 'hidden'; } else { // IE 4 document.all.hideshow.style.visibility = 'hidden'; } } }

function showDiv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideshow').style.visibility = 'visible'; } else { if (document.layers) { // Netscape 4 document.hideshow.visibility = 'visible'; } else { // IE 4 document.all.hideshow.style.visibility = 'visible'; } } } </script>







Common.js

<source lang="javascript"> /** Collapsible tables ********************************************************* 

*
*  Description: Allows tables to be collapsed, showing only the header. See
*               Wikipedia:NavFrame.
*  Maintainers: User:R. Koot
*/

var autoCollapse = 2; var collapseCaption = "hide"; var expandCaption = "show";

function collapseTable( tableIndex ) { var Button = document.getElementById( "collapseButton" + tableIndex ); var Table = document.getElementById( "collapsibleTable" + tableIndex );

if ( !Table || !Button ) { return false; }

var Rows = Table.rows;

if ( Button.firstChild.data == collapseCaption ) { for ( var i = 1; i < Rows.length; i++ ) { Rows[i].style.display = "none"; } Button.firstChild.data = expandCaption; } else { for ( var i = 1; i < Rows.length; i++ ) { Rows[i].style.display = Rows[0].style.display; } Button.firstChild.data = collapseCaption; } }

function createCollapseButtons() { var tableIndex = 0; var NavigationBoxes = new Object(); var Tables = document.getElementsByTagName( "table" );

for ( var i = 0; i < Tables.length; i++ ) { if ( hasClass( Tables[i], "collapsible" ) ) {

/* only add button and increment count if there is a header row to work with */ var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0]; if (!HeaderRow) continue; var Header = HeaderRow.getElementsByTagName( "th" )[0]; if (!Header) continue;

NavigationBoxes[ tableIndex ] = Tables[i]; Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );

var Button = document.createElement( "span" ); var ButtonLink = document.createElement( "a" ); var ButtonText = document.createTextNode( collapseCaption );

Button.style.styleFloat = "right"; Button.style.cssFloat = "right"; Button.style.fontWeight = "normal"; Button.style.textAlign = "right"; Button.style.width = "6em";

ButtonLink.style.color = Header.style.color; ButtonLink.setAttribute( "id", "collapseButton" + tableIndex ); ButtonLink.setAttribute( "href", "javascript:collapseTable(" + tableIndex + ");" ); ButtonLink.appendChild( ButtonText );

Button.appendChild( document.createTextNode( "[" ) ); Button.appendChild( ButtonLink ); Button.appendChild( document.createTextNode( "]" ) );

Header.insertBefore( Button, Header.childNodes[0] ); tableIndex++; } }

for ( var i = 0; i < tableIndex; i++ ) { if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) { collapseTable( i ); } } }

addOnloadHook( createCollapseButtons ); 

/** Dynamic Navigation Bars (experimental) *************************************
 *
 *  Description: See Wikipedia:NavFrame.
 *  Maintainers: UNMAINTAINED
 */

// set up the words in your language var NavigationBarHide = '[' + collapseCaption + ']'; var NavigationBarShow = '[' + expandCaption + ']';

// shows and hides content and picture (if available) of navigation bars // Parameters: // indexNavigationBar: the index of navigation bar to be toggled function toggleNavigationBar(indexNavigationBar) { var NavToggle = document.getElementById("NavToggle" + indexNavigationBar); var NavFrame = document.getElementById("NavFrame" + indexNavigationBar);

if (!NavFrame || !NavToggle) { return false; }

// if shown now if (NavToggle.firstChild.data == NavigationBarHide) { for ( var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) { if ( hasClass( NavChild, 'NavPic' ) ) { NavChild.style.display = 'none'; } if ( hasClass( NavChild, 'NavContent') ) { NavChild.style.display = 'none'; } } NavToggle.firstChild.data = NavigationBarShow;

// if hidden now } else if (NavToggle.firstChild.data == NavigationBarShow) { for ( var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) { if( hasClass(NavChild, 'NavPic') ) { NavChild.style.display = 'block'; } if( hasClass(NavChild, 'NavContent') ) { NavChild.style.display = 'block'; } } NavToggle.firstChild.data = NavigationBarHide; } }

// adds show/hide-button to navigation bars function createNavigationBarToggleButton() { var indexNavigationBar = 0; // iterate over all < div >-elements var divs = document.getElementsByTagName("div"); for( var i=0; NavFrame = divs[i]; i++ ) { // if found a navigation bar if( hasClass(NavFrame, "NavFrame") ) {

indexNavigationBar++; var NavToggle = document.createElement("a"); NavToggle.className = 'NavToggle'; NavToggle.setAttribute('id', 'NavToggle' + indexNavigationBar); NavToggle.setAttribute('href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');');

var NavToggleText = document.createTextNode(NavigationBarHide); for ( var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) { if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) { if (NavChild.style.display == 'none') { NavToggleText = document.createTextNode(NavigationBarShow); break; } } }

NavToggle.appendChild(NavToggleText); // Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked) for( var j=0; j < NavFrame.childNodes.length; j++ ) { if( hasClass(NavFrame.childNodes[j], "NavHead") ) { NavFrame.childNodes[j].appendChild(NavToggle); } } NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar); } } }

addOnloadHook( createNavigationBarToggleButton );


/** Test if an element has a certain class ************************************** 

 *
 * Description: Uses regular expressions and caching for better performance.
 * Maintainers: User:Mike Dillon, User:R. Koot, User:SG
 */

var hasClass = (function () { var reCache = {}; return function (element, className) { return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\\\s|^)" + className + "(?:\\\\s|$)"))).test(element.className); }; })(); </source>

Retrieved from "http://editthis.info/dxx/Header"
Personal tools
DXX Roster