JavaScript Forum

**Snooper** · 06:14 AM

Hello people,

I have a problem with this sliding div on the bottom of my page. It is 100% width and 500px height div, supported by external jQuery.js (version 1.4.2). The problem is that it slides up automatically when page loads in browser (both IE6 and FF) and it slides down immediately. After that it slides up and down normally when it's button is clicked (toggle function).

I'd like to stop that automatically sliding up and down, and to have that div closed on the bottom of my page till user click the button to open it up.

Here is the code of the page:

***

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head profile="http://gmpg.org/xfn/11">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>sliding div from bottom</title>
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
$(function() {
$('#footerSlideButton').click(function () {
$('#footerSlideContent').slideToggle();
});
$('#footerSlideButton').trigger('click');
});
</script>

<style type="text/css">
body {
margin:0;
padding:0;
}
#footerSlideContainer {
position: absolute;
bottom:0;
width: 100%;
}
#footerSlideButton {
margin: 0 auto 0 60px;
width:120px;
text-align:center;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 500px;
background: black;
color: white;
display:none;
}
</style>

</head>
<body>
<div id="footerSlideContainer">
<div id="footerSlideButton">Click Here!</div>
<div style="display:block" id="footerSlideContent">
Content of the slidin div goes here!!!
</div>
</div>
</body>
</html>

***
Can somebody help with this, please. Thanks in advance.

S