The IWDN

the_pm · November 15th, 2006, 21:54

I was challenged a few weeks ago to create a script that allow a Webmaster to place a box of content onto a page, but make it so that it was hidden by default and would slide into view and back off the page smoothly.

The challenge was extended somewhat by requirements that the user could set the speed that the box slid in and out of view, and all parameters had to be set outside of the actual script, to make the API as easy as possible.

The end result is a script that allows you to place practically anything into a hidden portion of the page and allow your visitors to make it appear and disappear as they see fit. The script doesn't care about the height of the object (it reads this information dynamically), and it will show the object by default if JavaScript is disabled or unavailable, meaning it degrades gracefully and is quite accessible.

Plus, since the script wraps around whatever objects you want to hide from view, you can style your hidden content area in practically any manner to suit the look of your site.

If you have any questions, comments or just want to show off your version of this script, please feel free to post. Enjoy the script!

Live Demo

Download the script

Download the script with line-by-line notes for academic purposes

Full Script

Code:

//////////////////////////////////////////////////////////////////////////////
//                      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
//     <head> 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: <div id="foo-#">, 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:
//     <div id="login-7">
//        [The stuff you want to show/hide]
//     </div>
//
// 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:
//     <input type="button" id="toggle" onclick="toggle();" value="ON/OFF" />
//
// 4.  Add onload="setup();" to your <body> 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;
var y = 10;
var z = 1;
var foo = new Array();
var Speed = "";

function setup() {
	foo = document.getElementsByTagName("div");
	Hide = foo[0].id;
	Ht = document.getElementById(Hide).offsetHeight;
	varHt = Ht;
	Speed = Hide.substring(Hide.lastIndexOf('-')+1);
	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";
	
	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) {
		document.getElementById(Hide).style.marginTop = "-"+varHt+"px";
		if ((varHt < z) && (varHt !== 0)) {
			varHt = 0;
		} else {
			varHt = varHt-z;
		}
		if (varHt >= 0) {
			setTimeout('toggle()',y);
		}
		if (varHt < 0) {
			varHt = 0;
			x = 1;
		}
	} else {
		document.getElementById(Hide).style.marginTop = "-"+varHt+"px";
		varHt = varHt+z;
		if (varHt <= Ht) {
			setTimeout('toggle()',y);
		}
		if (varHt > Ht) {
			varHt = Ht;
			document.getElementById(Hide).style.marginTop = "-"+varHt+"px";
			x = 0;
		}
	}
}

HTML Page Utilizing The Script

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Show/Hide/Slide Example</title>
	<style type="text/css">
	* { margin:0 ; padding:0 }
	#hidden-5 { background:#036 ; color:#FFF ; text-align:center }
	#toggle { display:none }
	</style>
	<script type="text/javascript" src="show_hide_slide.js"></script>
</head>

<body onload="setup();">

<div id="hidden-5">
	<p>Testing.  1, 2, 3, testing.</p>
	<p>Testing.  1, 2, 3, testing.</p>
	<p>Testing.  1, 2, 3, testing.</p>
	<p>Testing.  1, 2, 3, testing.</p>
</div>

<p><a href="#" onclick="toggle();" id="toggle">Toggle the header</a></p>

</body>
</html>

Jamie · November 17th, 2006, 23:03

Well, I guess I'll be the first one to say what a good job you did with this Paul.

It degrades perfectly when JS is disabled, so you never have to worry about search engines not picking up the content within the sliding element.

As the one who presented this task to you, I guess I should go and find a use for a very cool, Web 2.0 fancy slidey div.

Thanks!

gailw20 · January 3rd, 2007, 04:39

hi,
seeing ur "Show/Hide With a Slide Script" is a big safe for me!
got some problems w modifying the code though. how do i change it's position? say if i want the initial position at x:100, y:100, and slide dwn from it. could u halp me on it? thank u so much!!

Jamie · January 3rd, 2007, 11:31

Welcome to IWDN gailw20.

Paul will correct me if I'm wrong, but IIRC, the way to position this is to use absolute positioning. You still have to place the div as the very first element on the page, but then use absolute positioning to position that <div> like so:

Code:

position: absolute;
left: 100px;
top: 100px;

gailw20 · January 3rd, 2007, 16:19

hello

i included the position into style; it works but not completely though. it still slides dwn/up, but the blue area(hiding area) doesn't hide in default...

thank u!!

gail

Jamie · January 3rd, 2007, 16:26

Is the page online where you are trying to get it to work, Gail? It will be easier for us to see what is causing the problem if we can see the page.

mlindi · January 3rd, 2007, 16:28

Jeezum, Paul! You've outdone yourself. I can think of a number of splendid applications for this! Splendid!!!!

gailw20 · January 3rd, 2007, 16:46

well.. i don't have it online. pls c my attachment

btw, 1 other problem is the "toggle the header" button doesn't move along the blue area.

thank u so much for the help!!

gail

Jamie · January 3rd, 2007, 16:58

I'm really not sure why that is happening Gail.

Removing the absolute positioning makes the hidden div go back to its standard hidden state. Adding the positioning to the hidden div makes it appear rather than still being hidden.

I'm sure I used absolute positioning when I was testing the script to position it half way down the page.

I think I'm going to have to let somebody else figure this out. For anybody who wants a go, here is the page: http://www.jamieharrop.com/gail/

mlindi · January 3rd, 2007, 18:04

I believe both id positions need to be set to 'relative'.

checks:

yup. www.mattlindi.com/junk/

the_pm · January 3rd, 2007, 18:27

Hello gailw20

The exact script as shown here will only hide properly with edges of the screen. However, I have created a version that will allow you to show and hide objects anywhere on the screen. The script is very similar to what I've already posted, except the new version changes the height of the container in increments, and with overflow:hidden in effect, it makes it appear out of thin air, nice and smooth.

I created it for someone as a paid request, so I'll see about creating a generic version that y'all can take and customize as you see fit.

gailw20 · January 4th, 2007, 03:16

thx everyone! paul, could u post the script if u don't mind?!

thank u!!

gail

the_pm · January 4th, 2007, 17:29

I completed the script

I'm cleaning it up now and preparing to post it. I'll start a new article for it - Pt. II

gailw20 · January 5th, 2007, 03:31

thx a lot, paul!!

really appreciated.

gail

mrkhush · January 24th, 2007, 15:16

Hi..
thanks for the great effect. But in my case toggle does not work in Mozilla Firefox... I checked your example on Mozilla Firefox, it works but mine does not work..

One of the reason might be the minus (-) sign.. mozilla does not support that ...

and in my case the div is not at the top... it's in middle of the page so

any suggestion ?

here is my modified code...

function setup() {

foo = document.getElementsByTagName("div");

Hide = foo[9].id;
Ht = document.getElementById(Hide).offsetHeight;
varHt = Ht;
Speed = Hide.substring(Hide.lastIndexOf('-')+1);

if(navigator.appName == "Netscape")
{
document.getElementById(Hide).style.marginTop = document.getElementById(Hide).offsetHeight-180+'px';
document.getElementById(Hide).style.height = document.getElementById(Hide).offsetHeight+'px';
alert(document.getElementById(Hide).style.marginTo p);
alert(document.getElementById(Hide).style.height);
}
if(navigator.appName == "Microsoft Internet Explorer")
{
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";

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) {
document.getElementById("lnkSearch").innerHTML = "Basic Search";
document.getElementById(Hide).style.marginTop = "-"+varHt+"px";
if ((varHt < z) && (varHt !== 0)) {
varHt = 0;
} else {
varHt = varHt-z;
}
if (varHt >= 0) {
setTimeout('toggle()',y);
}
if (varHt < 0) {
varHt = 0;
x = 1;

}
} else {

document.getElementById(Hide).style.marginTop = "-"+varHt+"px";

varHt = varHt+z;
if (varHt <= Ht) {
setTimeout('toggle()',y);
}
if (varHt > Ht) {
varHt = Ht;
document.getElementById(Hide).style.marginTop = "-"+varHt+"px";
x = 0;
}
document.getElementById("lnkSearch").innerHTML = "Advanced Search";
}
}

help me out...
thanks...

The IWDN

Forum Menu