Bar across bottom of page - fixed, using CSS

Tips & Tricks
21

In Safari 9.0.3 it doesn’t show scrollbars - it works in chrome. The problem is the scroll bars, it looks like a frame - I suppose what I want to do isn’t possible. I will revise my design. The imbedded scrollbars go against the design rules of this project, it would have to be the native scroll bars.

Thanks for all of your help everyone, I appreciate your time.

Space

22

a simple but manual mode.
in index.html need to add external code

in Header

<style>
    #footer_fixed {
    	position: fixed;
    	bottom: 0;
    	display: block;
    	padding: 0;
    	margin: 0;
    	width: 100%;
    	height: 50px;
    	background-color: rgba(224,224,224,0.85);
    	border-top: 1px solid #dcdcdc;
    	z-index: 10000;		
    }
    .footer_content {
    	color: #898989;
    	font-size: 16px;
    	text-align: center;
    	margin: 0 auto;
    	padding-top: 14px;
    	width: auto;
    }	
    </style>

in Body

<div id="footer_fixed"> 
   <div class="footer_content"> &nbsp;  <a href="#">menu 1</a> &nbsp; &nbsp; <a href="#">menu 2</a> &nbsp; &nbsp; <a href="#">menu 3</a> &nbsp; my site and credits</div>
</div>
2 Likes
23

Michelangelo - Brilliant! It works perfectly!

You have no idea how much I appreciate it!
Many thanks and a karma boost!

Cheers,
Space

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
25

This helps a lot! You are very kind to have taken the time to do this. I really do appreciate your, and everyones time with this, it will give me a good start for the project indeed!

A gold star for all of you :smile:

All the best,
Space

1 Like
26

While this works perfectly in most situations, I found that this breaks the “on enter viewport”. Even after scrolling and making the object visible on the viewport of the browser, it doesn’t trigger the events.