////////////////////////////////////////////////////////////////////////////// // 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 show = 0; function showHideSetup() { foo = document.getElementsByTagName("div"); for (i=0;i<=foo.length;i++) { if (foo[i].className == "hidden") { Hide = foo[i].id; Ht = document.getElementById(Hide).offsetHeight; Speed = Hide.substring(Hide.lastIndexOf('-')+1); 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; } if(show == 1) { varHt = Ht; x = 1; } else { document.getElementById(Hide).style.height = '0px'; } } } } function showHide(ID) { if (!ID) ID = Hide; if (x === 0) { document.getElementById(ID).style.height = varHt+'px'; if (((Ht-varHt) < z) && (varHt !== Ht)) { varHt = Ht; } else { varHt = varHt+z; } if (varHt <= Ht) { setTimeout('showHide()',y); } if (varHt > Ht) { varHt = Ht; x = 1; } } else { document.getElementById(ID).style.height = varHt+'px'; varHt = varHt-z; if ((Ht-varHt) <= Ht) { setTimeout('showHide()',y); } if ((Ht-varHt) > Ht) { varHt = 0; document.getElementById(ID).style.height = varHt+'px'; x = 0; } } } function visible() { show = 1; } /******************************************************************************* ******************************************************************************/ // Modal Dialog Box // copyright 8th July 2006 by Stephen Chapman // http://javascript.about.com/ // permission to use this Javascript on your web page is granted // provided that all of the code in this script (including these // comments) is used without any alteration function pageWidth() { return window.innerWidth != null ? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth: document.body != null ? document.body.clientWidth:null; } function pageHeight() { return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body != null? document.body.clientHeight:null; } function posLeft() { return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement && document.documentElement.scrollLeft? document.documentElement.scrollLeft: document.body.scrollLeft? document.body.scrollLeft:0; } function posTop() { return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement && document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0; } function $(x) { return document.getElementById(x); } function scrollFix() { var obol=$('ol'); obol.style.top=posTop()+'px';obol.style.left=posLeft()+'px'; } function sizeFix(){ var obol=$('ol'); obol.style.height=pageHeight()+'px';obol.style.width=pageWidth()+'px'; } function kp(e){ ky=e?e.which:event.keyCode;if(ky==88||ky==120)hm(); return false } function inf(h){ tag=document.getElementsByTagName('select'); for(i=tag.length-1;i>=0;i--) tag[i].style.visibility=h; tag=document.getElementsByTagName('iframe'); for(i=tag.length-1;i>=0;i--) tag[i].style.visibility=h; tag=document.getElementsByTagName('object'); for(i=tag.length-1;i>=0;i--)tag[i].style.visibility=h; } function sm(obl, wd, ht) { var h='hidden'; var b='block'; var p='px'; var obol=$('ol'); var obbxd = $('mbd'); obbxd.innerHTML = $(obl).innerHTML; obol.style.height=pageHeight()+p; obol.style.width=pageWidth()+p; obol.style.top=posTop()+p; obol.style.left=posLeft()+p; obol.style.display=b; var tp=posTop()+((pageHeight()-ht)/2)-12;var lt=posLeft()+((pageWidth()-wd)/2)-12; var obbx=$('mbox'); obbx.style.top=(tp<0?0:tp)+p; obbx.style.left=(lt<0?0:lt)+p; obbx.style.width=wd+p; obbx.style.height=ht+p;inf(h); obbx.style.display=b; return false; } function hm() { var v='visible';var n='none'; $('ol').style.display=n; $('mbox').style.display=n; inf(v); document.onkeypress='' } function initmb() { var ab='absolute'; var n='none'; var obody=document.getElementsByTagName('body')[0]; var frag=document.createDocumentFragment(); var obol=document.createElement('div'); obol.setAttribute('id','ol'); obol.style.display=n; obol.style.position=ab; obol.style.top=0; obol.style.left=0; obol.style.zIndex=998; obol.style.width='100%'; frag.appendChild(obol); var obbx=document.createElement('div'); obbx.setAttribute('id','mbox'); obbx.style.display=n; obbx.style.position=ab; obbx.style.zIndex=999; var obl=document.createElement('span'); obbx.appendChild(obl); var obbxd=document.createElement('div'); obbxd.setAttribute('id','mbd'); obl.appendChild(obbxd); frag.insertBefore(obbx,obol.nextSibling); obody.insertBefore(frag,obody.firstChild); window.onscroll = scrollFix; window.onresize = sizeFix; } window.onload = initmb; /******************************************************************************* ******************************************************************************/ function scrollDown(id) { document.getElementById(id).scrollTop = document.getElementById(id).scrollHeight; } /******************************************************************************* *ONLOAD SETUP ******************************************************************************/ function init() { initmb(); showHideSetup(); }