"Reveal" footer effect?

Hi Devin,

Sure. Since it’s based on motion it’s a little hard to put to words. There’s actually a good article on it that illustrates the principle with a little demo. Take a look at the article Pure CSS Hidden Footer.

Hope that can clarify it.

Kind regards,
Lucas

Dear Dude,

Thank you for that code sample. Actually, it can be done with it. A working example can be found here:
http://www.tweekeertwee.nl/handleidingen/reveal-footer-test/.

The only weird things are that the width of the #footer goes to waste when it gets the position:fixed property, although a simple width:100% already seemed to be the right remedy. Also, it seems the z-index of the footer must be set to -1 for it to work. The only thing that’s tricky is get the socket down at the bottom, but you can actually use the same trick for that. When all that is implemented, you get:

<style type="text/css">

#wrap_all{
	z-index:2 !important;
	position:relative !important;
}

#main{
	/* It appears in the newer versions of Enfold you can't set the margin to the #wrap_all. It gets me a grey streak and no footer. */
	/* Unless you're working with a lot of Color Sections at the bottom of your content this shouldn't be a problem. */
	/* The dynamic solution using JavaScript listed next actually does take care of that. Then you can forget this #main selector */
	margin-bottom:509px !important; /* Hard coded. Not ideal. */
}

#footer{
	bottom:0 !important;
	margin-bottom:51px !important; /* Hard coded. Not ideal. */
	position:fixed !important;
	z-index:-1 !important;
	height:458px !important; /* Hard coded. Not ideal. */
	width:100% !important;
}

#socket{
	bottom:0 !important;
	position:fixed !important;
	width:100% !important;
	z-index:-1 !important;
}

</style>

Adding that to the Custom CSS works, although you have to hard-code the heights in. I based these values on the Enfold demo site, but depending on how a client might choose to shape the footer or even socket, this can cause problems. You could set the heights dynamically though with some JavaScript after the whole thing is loaded. Adding something like this to a footer Text widget does the trick:

<script type="text/javascript">
window.onload = function(){
	var footerr = document.getElementById("footer"); // Weird names to easily dodge variable-naming conflicts
	var sockett = document.getElementById("socket");
	var mainn = document.getElementById("main");
	var wrapalll = document.getElementById("wrap_all");
	var deltaMainn = wrapalll.offsetHeight - mainn.offsetHeight; // Margin needs to be on the #main but must take #wrap_all into account

	footerr.style.marginBottom = sockett.offsetHeight + "px"; // Set the footer margin to reveal the socket

	mainn.style.marginBottom = (footerr.offsetHeight + sockett.offsetHeight) + "px"; // Set the main margin to reveal footer + socket
}
</script>

The risk is of course that you get a code jungle, something that Google probably doesn’t like either (is it actually so paranoid as to always recognize footer code as bad news?). But it is a working solution to get this effect up and running.

Kind regards,
Lucas

• This reply was modified 10 years, 2 months ago by Lucas van Heerikhuizen.