[jQuery] Noob Q's For SlideUp on a Hidden Footer?
I know, noobie here.
I'm having trouble getting a slideUp effect to work correctly with a
footer. I can easily get a slideDown from the top of the page to
work, but when I try and reverse it the div that slides up covers the
button. Basically I need to know how to bind/attach the activation
button/tab to the div that's sliding up. I know I saw it working
somewhere and wish I had saved the link because I could use it right
about now. I know this is probably an easy one for anyone else, but
I'm admittedly a noob in this area.
Additionally:
After I get it working I want to apply it to a sticky footer. Is that
going to be a problem? Anything special I need to know about a sticky
footer that slides up? Thanks in advance for any assistance!
Here's what I have sofar:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/
jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">document.documentElement.className =
'js';</script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn-slide").click(function(){
$(".inner").slideToggle("slow"); });
});
</script>
<style type="text/css">
.inner {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 400px;
margin-bottom:0px;
background-color: #4c5;
color: #333;
}
.slide {
position:absolute;
display:block;
width:100%;
bottom:4px;
border-bottom: solid 4px #422410;
}
.btn-slide {
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
color: #000;
border:1px solid #000;
text-decoration: none;
}
.js .inner {
display:none;
}
</style>
</head>
<body>
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a>
<div class="inner">
<!-- you can put content here -->
</div>
</body>