////////////////////////////////////////////////////////////////////////////// // 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, making it the VERY FIRST ELEMENT in // your markup. 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". // // 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 = ""; var Ht = ""; var x = 0; // On/Off switch. 0 = off. 1 = on. Keep it at 0. var y = 10; // Milliseconds. This is explained farther down. var z = 1; // Pixel increments. This is explained farther down. var foo = new Array(); var Speed = ""; function setup() { // These lines allow you to name your

whatever you want, extracting your name for use in the rest of the script. foo = document.getElementsByTagName("div"); Hide = foo[0].id; // These lines set a couple variables to the height of the hidden object by finding the object's height on-the-fly. Ht = document.getElementById(Hide).offsetHeight; varHt = Ht; Speed = Hide.substring(Hide.lastIndexOf('-')+1); // This line extracts the speed you set in your

ID. // These lines hide the object by giving it a negative margin equal to it's height. document.getElementById(Hide).style.marginTop = '-'+document.getElementById(Hide).offsetHeight+'px'; document.getElementById(Hide).style.height = document.getElementById(Hide).offsetHeight+'px'; document.getElementById('toggle').style.display = "inline"; // This line makes the toggling mechanism visible. It should be set to display:none within your style sheet by default, so it does not show up on the page when someone is browsing with JavaScript disabled or unavailable. // This series of statements sets parameters necessary for the toggle() function to determine show/hide speed. y equates to milliseconds and z equates to pixel increments. if (Speed == 1) { y = 100; z = 1; } if (Speed == 2) { y = 70; z = 1; } if (Speed == 3) { y = 40; z = 1; } if (Speed == 4) { y = 20; z = 1; } if (Speed == 5) { y = 10; z = 1; } if (Speed == 6) { y = 10; z = 2; } if (Speed == 7) { y = 10; z = 4; } if (Speed == 8) { y = 10; z = 7; } if (Speed == 9) { y = 10; z = 10; } } function toggle() { if (x === 0) { // If the script detects the element is hidden... document.getElementById(Hide).style.marginTop = "-"+varHt+"px"; // Sets the element's negative margin, initially to be equal to its height. if ((varHt < z) && (varHt !== 0)) { // If the nagetive margin is less than the pixel increment of each jump, and if it is not equal to 0... varHt = 0; // ...make the negative margin equal to 0. The sliding effect is complete. } else { varHt = varHt-z; // Reduces the negative margin by the pixel increment specified by z. } if (varHt >= 0) { // If the negative margin is greater than 0 (read: if any of the hidden div is still hidden)... setTimeout('toggle()',y); // ...do this operation again, waiting y milliseconds before doing so. } if (varHt < 0) { // If for some reason the nagative margin pops into the positive realm... varHt = 0; // ...set it to 0. x = 1; // Sets a marker that tells the script that the hidden element is now showing. } } else { // The script detected x was set to something other than 0, meaning the toggle should be used to hide the object in question, not show it. Therefore... document.getElementById(Hide).style.marginTop = "-"+varHt+"px"; // Sets the element's negative margin, initially equal to 0, but will increment shortly. varHt = varHt+z; // Adds negative margin at a rate equal to z. if (varHt <= Ht) { // As long as the negative margin is less than or equal to the height of the element... setTimeout('toggle()',y); // ...do this operation again, waiting y milliseconds before doing so. } if (varHt > Ht) { // If the negative margin exceeds the height of the object... varHt = Ht; // ...make the variables equal, to they're ready to toggle again... document.getElementById(Hide).style.marginTop = "-"+varHt+"px"; // ...and make certain the negative margin and height of the hide/show object are the same. x = 0; // Sets a marker that tells the script that the hidden element is now hidden. } } }