Bar across bottom of page - fixed, using CSS

Tips & Tricks
24

UPDATE!:
Added CSS to all links

Added CSS3 @media Rule to chance the style in small devices

@media only screen and (max-width: 680px) {  /* Extra Feature: Change behavior with mediaquery */
.footer_content a {font-size: 80%;}
#footer_fixed {	background-color: rgba(255,77,65,0.52);}
}

Note: with this Rule you can hide/show (none/block) the navbar

   @media only screen and (max-width: 480px) {  
 #footer_fixed {display: none;}
    }

Added javascript to show tre scene name in the Project

var checkHash = function() { 
var hash = window.location.hash.substring(1); 
for(var i = 0; i < hypeDocument.sceneNames().length; i++) {
if(hypeDocument.sceneNames()[i] == hash) {
hypeDocument.showSceneNamed(hash);
break;
}
}
}; 

if (window.loadedHashLocation != true) { 
window.loadedHashLocation = true; 
checkHash(); 
window.onhashchange = checkHash; 
}

window.location.hash = "#" + hypeDocument.currentSceneName();

MANUAL EDITING:

Edit the index.html with the commented code.
Add your url + scene name to all links
Note: update your links also in Hype (to reuse it)

   <!-- ADD YOUR URL AND PASTE THIS CODE AFTER <body>
    
 <div id="footer_fixed"> 
     <div class="footer_content"> <a href="http://www.yoururl.com/index.html#scene1">menu 1</a>  <a href="http://www.yoururl.com/index.html#scene2">menu 2</a> <a href="http://www.yoururl.com/index.html#scene3">menu 3</a> &nbsp; my site and credits</div>
  </div>
 
 END-->

LIVE EXAMPLE

fixed_footer_external_code.zip (1.3 MB)

hope this helps
Michelangelo

@Daniel @stephen Div on the fly, It would be a great addition to solve problems like this

3 Likes