For those of you using the very flexible AJAX-S for slideshows, I have now created a little add-on script to hide the footer and only showing it when moving your mouse pointer over it.

Basically, what you need to do is:

Download the footer-add-on JavaScript file.

Add this code to the HTML file:

    // Path to the JavaScript file
    <script type="text/javascript" src="js/footer-add-on.js"></script>

Add these classes to the CSS file you’re using:

	.hidden-footer{
    		position: absolute;
    		bottom: 0;
    		height: 1% !important;
    		overflow: hidden;
	}

	.visible-footer{
    		height: 10%;
	}

The result now is that you will get a small colored line at the bottom (depending on how you customize it, of course), and when you hover it, the bottom navigation bar will be shown. When you move your mouse pointer away again, it will be hidden.