////////////////////////////////////////////////////////////////////////////// // Show/Hide With a Slide Script // ////////////////////////////////////////////////////////////////////////////// // // This little script allows you to create a section of content and hide it at // the top of your screen for users to open and close as they wish. This is // particularly handy for things like login boxes, supplementary navigation // and content enhancements like tips, tricks and interesting tidbits of // information you don't need showcased within your regular content. // // If a visitor has JavaScript disabled or unavailable, the hidden content box // will simply display itself as if it was always a visible component. // // CONTRIBUTORS: // // Original Creator: // Paul Hirsch // www.paulhirsch.com // // Tested by: // International Web Developers Network (IWDN) // www.iwdn.net - home page // www.iwdn.net/index.php - forums/community where testing took place // // Other Contributors: // Michaeljohn Clement - clued me in on offsetHeight - very handy! // [INSERT YOUR NAME AND BRIEF DESCRIPTION OF YOUR CONTRIBUTION HERE] // // INSTRUCTIONS: // // 1. Place this markup in an external .js page and link to it within the // section of your page. // // 2. Create a div within your page to wrap around the content you wish to hide. // You'll place your hidden content in here. The div MUST be in the following // format:

, where: // // a. "foo" is any word of your choice. // b. "-#" is any number between "-1" and "-9". // c. class ALWAYS equals "hidden". // // The "-#" sets the speed at which the box shows/hides itself, with 1 // being slowest and 9 fastest. If you forget to add your speed number // or add it incorrectly, the script will default to 5. // // Here's a proper example: // // // 3. Add onclick="toggle();" and id="toggle" to whatever element you'd like // to use to toggle the hidden content box. MAKE THE TOGGLED // OBJECT/TEXT/BUTTON display:none WITHIN YOUR STYLESHEET! The script will // unhide it. This is so it will not show up when someone has JavaScript // disabled. // // Here's a proper example: // // // 4. Add onload="setup();" to your tag. // // LICENSE: // // This script is protected under General Public License (GPL). Feel free to // redistribute this script, so long as you do not alter any of the contents // specifying authorship. If you add to or modify this script, you may add // your name to the "Other Contributors" list at the top of this script. As // a courtesy, please email me and let me know how you've improved my script! // You may not profit from the direct sale of this script. You may use this // script in commercial endeavors however (i.e. as part of a commercial site). // // Email me here: http://www.paulhirsch.com/contact_me.php // // Copyright 2006, Paul Hirsch. All rights specified herein and within GPL // documentation: http://www.gnu.org/licenses/gpl.txt // ////////////////////////////////////////////////////////////////////////////// // DO NOT TOUCH ANYTHING BELOW THIS LINE // // unless you know what the heck you're doing! // ////////////////////////////////////////////////////////////////////////////// var Hide = ""; var varHt = 0; var Ht = ""; var x = 0; var y = 10; var z = 4; var foo = new Array(); var Speed = ""; var currentLogin = ""; function setup() { foo = document.getElementsByTagName("div"); for (i=0;i= 20){ document.getElementById(Hide).style.borderBottom=""; document.getElementById(Hide).style.verticalAlign=""; } document.getElementById(Hide).style.height = varHt+'px'; if (((Ht-varHt) < z) && (varHt !== Ht)) { varHt = Ht; } else { varHt = varHt+z; } if (varHt <= Ht) { setTimeout("toggle('"+login+"')",y); } if (varHt > Ht) { varHt = Ht; x = 1; } } else if(login === currentLogin) { document.getElementById(Hide).style.height = varHt+'px'; varHt = varHt-z; if ((Ht-varHt) <= Ht) { setTimeout("toggle('"+login+"')",y); } if ((Ht-varHt) > Ht) { varHt = 0; document.getElementById(Hide).style.height = varHt+'px'; x = 0; } if(varHt == 0) document.getElementById(Hide).style.display = 'none'; if(varHt <= 20){ document.getElementById(Hide).style.borderBottom=""; document.getElementById(Hide).style.verticalAlign=""; } } currentLogin = login; } else{ document.getElementById(Hide).style.height = varHt+'px'; varHt = varHt-z; if ((Ht-varHt) <= Ht) { setTimeout("toggle()",y); } if ((Ht-varHt) > Ht) { varHt = 0; document.getElementById(Hide).style.height = varHt+'px'; x = 0; } if(varHt == 0) document.getElementById(Hide).style.display = 'none'; if(varHt <= 20){ document.getElementById(Hide).style.borderBottom=""; document.getElementById(Hide).style.verticalAlign=""; } } } function loginSwitch(login){ var divColor=''; var divBg=''; var divTitle=''; switch(login){ case 'w': divColor='#66b532'; divBg='/images/wingnut_login-bg.gif'; divTitle='/images/wingnut_login-title.gif'; break; case '10': divColor='#FFCC33'; divBg='/images/v10_login-bg.gif'; divTitle='/images/v10_login-title.gif'; break; case '9': divColor='#FF6633'; divBg='/images/v9_login-bg.gif'; divTitle='/images/v9_login-title.gif'; break; case '8': divColor='#CC3399'; divBg='/images/v8_login-bg.gif'; divTitle='/images/v8_login-title.gif'; break; default: divColor=''; divBg=''; divTitle=''; break; } document.getElementById(Hide).style.background="url("+divBg+") top repeat-x "+divColor; document.getElementById('loginTitle').src=divTitle; } var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; this.JSdisplay = this.checkBrowser(this.browser, this.version); }, checkBrowser: function (dBrowser, dVersion){ if((dBrowser == 'Firefox' && dVersion >1) || (dBrowser == 'Explorer' && dVersion >5) || (dBrowser == 'Netscape' && dVersion >4) || (dBrowser == 'Safari' || dBrowser == 'Camino' || dBrowser == 'Konqueror')) return true; else return true; }, searchString: function (data) { for (var i=0;i