You have to click a button for SlideIn

Hey,

I've got this script that works fine.
But it opens every time you open the page. But I want it only to open if you click on a button.

This is the script:

<div id="slideIn" style="position:absolute;width:500px;left:0;top:-600px;z-index:100;border:1px solid gray;padding:20px;">
	<div style="text-align:right"><input type="button" value="X" onclick="f_slideOut()"></div>
	your text here
</div>
<div id="slideInShade" style="position:absolute;z-index:99;visibility:hidden;"></div>
<script>
var s_userAgent = navigator.userAgent.toLowerCase(),
	s_location = String(window.location).toLowerCase(); // copyright protection

var b_mac = s_userAgent.indexOf('mac') != -1,
	b_ie5    = s_userAgent.indexOf('msie 5') != -1,
	b_ie6    = s_userAgent.indexOf('msie 6') != -1 && s_userAgent.indexOf('opera') == -1,
	b_ieMac  = b_mac && b_ie5,
	b_safari = b_mac && s_userAgent.indexOf('safari') != -1,
	b_opera6 = s_userAgent.indexOf('opera 6') != -1;

var e_slideIn = document.getElementById('slideIn');
var e_slideInShade = document.getElementById('slideInShade');

function f_slideIn() {
	if (!window.e_slideIn) return;
	var n_width  = e_slideIn.offsetWidth;
	var n_height = e_slideIn.offsetHeight;
	var n_left   = (f_clientWidth() - n_width) / 2;
	var n_top    = parseInt(e_slideIn.style.top);
	var n_moveTo = (f_clientHeight() - n_height) / 2;

	e_slideIn.style.left = n_left + 'px';
	e_slideIn.style.visibility = 'visible';
	f_customShade(n_width, n_height, n_left, n_top);
	e_slideInShade.style.visibility = 'visible';

	n_slideMove (n_top, n_moveTo);
}

function n_slideMove (n_top, n_moveTo) {
	n_inc = Math.round((n_moveTo - n_top) / 20);
	if (!n_inc) return;
	n_top += n_inc;
	f_customShade(null, null, null, n_top);
	e_slideIn.style.top  = n_top + 'px';
	setTimeout('n_slideMove(' + n_top + ',' + n_moveTo + ')', 10);
}

function f_slideOut() {
	if (!window.e_slideIn) return;
	e_slideIn.style.visibility = 'hidden';
	e_slideInShade.style.visibility = 'hidden';
}

function f_clientWidth() {
	if (typeof(window.innerWidth) == 'number')
		return window.innerWidth;
	if (document.documentElement && document.documentElement.clientWidth)
		return document.documentElement.clientWidth;
	if (document.body && document.body.clientWidth)
		return document.body.clientWidth;
	return null;
}
function f_clientHeight() {
	if (typeof(window.innerHeight) == 'number')
		return window.innerHeight;
	if (document.documentElement && document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
	if (document.body && document.body.clientHeight)
		return document.body.clientHeight;
	return null;
}
function f_customShade (n_width, n_height, n_left, n_top) {
	if (!e_slideInShade) return;
	if (n_width != null) e_slideInShade.style.width = (n_width + 8) + 'px';
	if (n_left != null) e_slideInShade.style.left = (n_left - 1) + 'px';
	e_slideInShade.style.top = (n_top - 1) + 'px';
	if (!e_slideInShade.innerHTML) {
		if (b_ie5 || b_ie6)
			e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" colspan="2" width="6"><img src="images/pixel.gif"></td><td width="7" height="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_tr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td height="' + (n_height - 7) + '" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_mr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td width="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bl.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bm.png\', sizingMethod=\'scale\');" height="7" align="left"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_br.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr></table>';
		else
			e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" width="6"><img src="images/pixel.gif"></td><td rowspan="2"><img src="images/pixel.gif"></td><td width="7" height="7"><img src="images/shade_tr.png"></td></tr><tr><td background="images/shade_mr.png" height="' + (n_height - 7) + '"><img src="images/pixel.gif"></td></tr><tr><td><img src="images/shade_bl.png"></td><td background="images/shade_bm.png" height="7" align="left"><img src="images/pixel.gif"></td><td><img src="images/shade_br.png"></td></tr></table>';
	}
}
f_slideIn();
</script>

Code (markup):

Thanks.

 

im lazy to inspect your code but at least try to remove the "f_slideIn();" at the end of the script and
execute it on your button's click instead

 

Let me try

 

maybe:

<div id="slideIn" style="position:absolute;width:500px;left:0;top:-600px;z-index:100;border:1px solid gray;padding:20px;">
	<div style="text-align:right">
<input type="button" value="Slide In" onclick="f_slideIn();">&nbsp;
<input type="button" value="X" onclick="f_slideOut()"></div>
	your text here
</div>
<div id="slideInShade" style="position:absolute;z-index:99;visibility:hidden;"></div>
<script>
var s_userAgent = navigator.userAgent.toLowerCase(),
	s_location = String(window.location).toLowerCase(); // copyright protection

var b_mac = s_userAgent.indexOf('mac') != -1,
	b_ie5    = s_userAgent.indexOf('msie 5') != -1,
	b_ie6    = s_userAgent.indexOf('msie 6') != -1 && s_userAgent.indexOf('opera') == -1,
	b_ieMac  = b_mac && b_ie5,
	b_safari = b_mac && s_userAgent.indexOf('safari') != -1,
	b_opera6 = s_userAgent.indexOf('opera 6') != -1;

var e_slideIn = document.getElementById('slideIn');
var e_slideInShade = document.getElementById('slideInShade');

function f_slideIn() {
	if (!window.e_slideIn) return;
	var n_width  = e_slideIn.offsetWidth;
	var n_height = e_slideIn.offsetHeight;
	var n_left   = (f_clientWidth() - n_width) / 2;
	var n_top    = parseInt(e_slideIn.style.top);
	var n_moveTo = (f_clientHeight() - n_height) / 2;

	e_slideIn.style.left = n_left + 'px';
	e_slideIn.style.visibility = 'visible';
	f_customShade(n_width, n_height, n_left, n_top);
	e_slideInShade.style.visibility = 'visible';

	n_slideMove (n_top, n_moveTo);
}

function n_slideMove (n_top, n_moveTo) {
	n_inc = Math.round((n_moveTo - n_top) / 20);
	if (!n_inc) return;
	n_top += n_inc;
	f_customShade(null, null, null, n_top);
	e_slideIn.style.top  = n_top + 'px';
	setTimeout('n_slideMove(' + n_top + ',' + n_moveTo + ')', 10);
}

function f_slideOut() {
	if (!window.e_slideIn) return;
	e_slideIn.style.visibility = 'hidden';
	e_slideInShade.style.visibility = 'hidden';
}

function f_clientWidth() {
	if (typeof(window.innerWidth) == 'number')
		return window.innerWidth;
	if (document.documentElement && document.documentElement.clientWidth)
		return document.documentElement.clientWidth;
	if (document.body && document.body.clientWidth)
		return document.body.clientWidth;
	return null;
}
function f_clientHeight() {
	if (typeof(window.innerHeight) == 'number')
		return window.innerHeight;
	if (document.documentElement && document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
	if (document.body && document.body.clientHeight)
		return document.body.clientHeight;
	return null;
}
function f_customShade (n_width, n_height, n_left, n_top) {
	if (!e_slideInShade) return;
	if (n_width != null) e_slideInShade.style.width = (n_width + 8) + 'px';
	if (n_left != null) e_slideInShade.style.left = (n_left - 1) + 'px';
	e_slideInShade.style.top = (n_top - 1) + 'px';
	if (!e_slideInShade.innerHTML) {
		if (b_ie5 || b_ie6)
			e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" colspan="2" width="6"><img src="images/pixel.gif"></td><td width="7" height="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_tr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td height="' + (n_height - 7) + '" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_mr.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr><tr><td width="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bl.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_bm.png\', sizingMethod=\'scale\');" height="7" align="left"><img src="images/pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/shade_br.png\', sizingMethod=\'scale\');"><img src="images/pixel.gif"></td></tr></table>';
		else
			e_slideInShade.innerHTML = '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td rowspan="2" width="6"><img src="images/pixel.gif"></td><td rowspan="2"><img src="images/pixel.gif"></td><td width="7" height="7"><img src="images/shade_tr.png"></td></tr><tr><td background="images/shade_mr.png" height="' + (n_height - 7) + '"><img src="images/pixel.gif"></td></tr><tr><td><img src="images/shade_bl.png"></td><td background="images/shade_bm.png" height="7" align="left"><img src="images/pixel.gif"></td><td><img src="images/shade_br.png"></td></tr></table>';
	}
}
</script>

Code (markup):