Hi,
I'm trying to slide up a DIV with content inside from the bottom of
the browser. My entire webpage fits inside the browser window with no
scrolling. The effect is similar to what is seen in this flash
template:
http://www.templatemonster.com/flash-templates/23054.html
I tried the code below, but it's pushing the menu down and creating a
scrollbar for the browser window. Can anyone help me figure this out?
<html>
<head>
<title>Summit demo</title>
<script src="../js/jquery.js"></script>
<script src="../js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$(document).ready(function() {
$('#toggleButton').bind('click', function(e) {
$('#expandingFooter').toggle('slide', {easing:
'easeOutQuint',
direction: 'down'}, 1000);
});
});
</script>
<style type="text/css">
html, body, #holder { min-height: 100%; width: 100%; height: 100%;}
html>body, html>body #holder { height: auto;}
body { margin: 0; padding:0; }
#holder { position: absolute; top: 0; left: 0;}
#header {height: 2em; background: #CCC; border: none; width: 100%;}
#nav {width: 150px; float: left; padding-bottom: 3em; height: auto;}
#content {margin-left: 150px; padding-bottom: 3em; height: auto;}
#footer {clear: both; height: 2em; position: absolute; bottom: 0;
left: 0; background: #999; border: none; width: 100%;}
#footer2 {clear: both; height: 2em; position: absolute; bottom: 2em;
left: 0; background: #CCC; border: none; width: 100%;}
#nav p, #content p {margin: 1em;}
#nav ul {margin-left: 0; padding-left: 0;}
#nav li {margin: 0 1em 0 2em;}
#toggleButton {
background-color: #666;
width: 100px;
text-align: center;
margin: auto;
}
#expandingFooter {
height: 200px;
background-color:#CCC;
display: none;
}
</style>
</head>
<body>
<div id="holder">
<div id="header">header</div>
<div id="footer2">
<div id="toggleButton">
<a href="#" class="button-slide">Open</a>
</div>
<div id="expandingFooter">This is some hidden content</
div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Many thanks,
psivadasan
