CODEWITHSUNDEEP
javascriptjqueryhtmlcss
drake035
drake035

Reputation: 2877

Partially hiding fixed footer on click

My fixed footer has an arrow icon on top of it. Clicking the arrow should "lower" the footer below the page until only the arrow is visible. Clicking it again should bring back the footer.

I tried playing with the bottom value but it doesn't hide the footer, only pushes it below while the page becomes taller to make room for it:

$('#footer_arrow').toggle(function() {
    $('#footer_wrap').css('bottom', '-84px');
}, function() {
    $('#footer_wrap').css('bottom', '0');
});

I want the same but with the footer actually disappearing below the page with just the arrow visible on top of it.

enter image description here

MARKUP:

<div id='footer_wrap'>          
    <footer>    
        <div id='footer_arrow'></div>
        <div>       
            content
        </div>      
    </footer>   
</div>

CSS:

#footer_wrap {
    position: absolute;
    bottom: 0;
    height: 84px;
}
footer {
    position: absolute;
    bottom: 0;
    z-index: 9999;    
    position: relative; 
}
#footer_arrow {
    position: absolute;
    width: 61px;
    height: 23px;
    top: -23px;
    left: 50%;
    background: url(images/footer_arrow.jpg) 0 0 no-repeat;
    z-index: 9999;
    cursor: pointer;
}

Upvotes: 1

Views: 2059

Answers (3)

Brandon Anzaldi
Brandon Anzaldi

Reputation: 7270

A couple things. First off, I recommend using toggleClass() instead of toggle(). That way, you can just add a class with the required CSS, and toggle it using toggleClass(). This way, you can change any styles necessary from pure CSS, instead of making the modifications in the JavaScript code. However, the toggle() from jQuery's event handling suite that you are currently using will work just fine nonetheless.

Secondly, to move the footer off screen, you'll need to use fixed positioning instead of absolute on #footer_wrap. Otherwise, the bottom is moving relative to the page, which means it just extends it. However, with fixed, the element is positioned at a fixed point in the viewport, which can be moved off screen without extending the page.

$('#footer_arrow').click(function() {
    $('#footer_wrap').toggleClass('down');
});
#footer_wrap {
    position: fixed;
    bottom: 0;
    height: 84px;
}
footer {
    position: absolute;
    bottom: 0;
    z-index: 9999;    
    position: relative; 
}
#footer_arrow {
    position: absolute;
    width: 61px;
    height: 23px;
    top: -23px;
    left: 50%;
    background: url(http://www.placehold.it/61x23) 0 0 no-repeat;
    z-index: 9999;
    cursor: pointer;
}

.down {
    bottom: -84px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='footer_wrap'>          
    <footer>    
        <div id='footer_arrow'></div>
        <div>       
            content
        </div>      
    </footer>   
</div>

Upvotes: 2

Michał Kutra
Michał Kutra

Reputation: 1202

What You have to do imho is not .toggle() a #footer_arrow element. You need to .toggle() a #footer_wrap element after clicking on #footer_arrow

Look into this fiddle: http://jsfiddle.net/tdcrsn2j/

I've changed Your HTML & CSS a little, but You can bring it back. It was done just to show case.

Upvotes: 1

Mr. Go
Mr. Go

Reputation: 577

go with this

when you want to show

$('#footer_wrap').css({"display":"block"});

when you want to hide

$('#footer_wrap').css({"display":"none"});

Upvotes: 0

Related Questions