Hide fixed footer?
Hi I was wondering if there is a way to hide the fixed footer with a button, so it can be closed by the user if they want to see more of the screen and vice versa. Is there a way to do this with css or would it require javascript?
greetings.
JavaScript
<input type="button" id="myButton" onclick="HideFooter()" />
function HideFooter()
{
var display = document.getElementById("myFooter").style.display;
if(display=="none")
document.getElementById("myFooter").style.display="block";
else
document.getElementById("myFooter").style.display="none";
}
JQuery
$("#myButton").click(function(){
if($("#myFooter").is(":visible"))
$("#myFooter").hide();
else
$("#myFooter").show();
});
If you want other nice effects
$("#myFooter").fadeOut(500);
$("#myFooter").slideUp(500);
$("#myFooter").slideToggle(500); //Hide and Show
Another method like Bram Vanroy :
$("#myButton").click(function(){
$("#myFooter").toggle();
});
This will require JavaScript
. The button click event handler should change the display
footer property to none
.
There is only a javascript version available with a button and id "button" and footer "footer". This method will allow you to show the footer after hiding it if the user wants to see it again.
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('footer');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
Or with jQuery:
$("#button").click(function() {
$("#footer").toggle();
});
A good tutsplus video tutorial for what you need. This is a simple bit of jQuery.