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></p>
<div class="inner">
        <!-- you can put content here -->
</div>

</body>

Reply via email to