Here is a quick re-creation of the page basics. I created a bar across the top and a bar across the bottom, labeled as such. Notice the bottom bar is missing / invisible… If you go to the timeline and select it, you can see the group outline. If you go to the class name and erase it, you will see that it returns.
I’m confused - please let me know what I am doing wrong 
top_bottom.zip (11.2 KB)
Does removing this CSS from your header fix it?..
bottom: 0;
left: 0;
width: 100%;it does keep it from disappearing, but it doesn’t place it at the bottom of the page. I used the same CSS for the top and it works fine, and in theory I should be able to use the same CSS for the bottom (without the sections you mentioned) but it doesn’t work on the bottom.
.top{
position: fixed !important;
}
works fine.
It’s strange how when I specify the other parameters it just disappears, but the group indicator (box) is still there, just the contents goes bye bye.
Not sure if is my CSS, but I have tried just about every variant, and no luck with the bottom, just luck with the top.
Thanks!
I don’t think it actually disappears, but it does push the groups elements past the viewport of your scene. If you look at you demo at 25% in Hype, you’ll see the text and rectangle below the scene. Your scene is set to 400px high and any element that is more than 400px to the top will not be visible in the scene.
I missed that - thanks!
But, I still don’t understand what is going on. There must be something going wrong because ‘fixed’ should be relative to the viewport, not absolute.
I need it to stick to the bottom of the page, at all times, regardless of the size of the viewport.
Let me know if I am missing something with the CSS but I think it is correct.
Thank you for your time with this!
This thread may help…
http://forums.tumult.com/t/position-fixed-css/4172?source_topic_id=5850
hi,
your document has got a fix height.
hypes scene and document have the property overflow hidden.
so the bottom-class will be hidden …
didn’t test it though …
Hi,
A fixed height shouldn’t matter, and the document overflow is set to visible. changing the height to scale doesn’t help either. If you look at this bit of code, it works properly:
test<body bgcolor="#ffffff">
<div id="bottom">
Test 123 - 123...
</div>
<style>
#bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
background-color: #cccccc;
</style>
</body>
The problem arises when I try to use part of it and assign it as a class name. using fixed is relative to the viewport, not the page size, that is why scale shouldn’t matter. It is working for the top, just not the bottom. Also, the disappearing that it does, jumping down the page, that should’t happen either. The viewport should dictate it’s position. When I fiddle with it’s position where it is, all the way down, it scales strangely…
Either I am totally missing something obvious, or this can’t be done.
BTW: can’t follow the above link Greg, it says “I don’t have access to that topic” - not sure what that means either 
Thanks!
Sorry about that…
When using this CSS for position fixed in the Head HTML…
<style>
#box {position: fixed !important;}
</style>
Your element will be ‘fixed’ to the Hype window if you have not checked the “Position with CSS top/left” box in the Doc Inspector. If you have checked it, you element will ‘fixed’ to the browser window and therefore show to the left of its position in the Hype stage.
still not working - not sure if it is me or what, but I think when you have a fixed bar at the top you have to do some calculation at the bottom, not sure.
BTW: if you are able to get this to work, please post a file so I can look it over.
Thanks though!
In Hype, the bottom of the page and the bottom of a scene are two different things. Maybe that is what is confusing. An element that is at the bottom of a scene will only be visible if its top does not go past the height of the scene. So, if your scene is 400px in height and your element’s top is placed at 401px it will go past the bounds of the scene and not be seen on the webpage even if your webpage is 1000px in height.
Heres one that seems to work…
TB.hype.zip (13.4 KB)
Thank you Greg!
While this does to what I hoped, what is the issue now is that if I have paragraphs of text in the center, there is no scrolling. Content overflow changes didn’t help. Perhaps what I am trying to achieve is best suited for frames (but frames feel like the wrong tech - it feels 90s).
Thank you again for all your time with this. I am just getting acquainted with Hype. Your help has been very useful!
Space
Sorry,
But what is it you are actually trying to accomplish .
Is it something like this…
TB.hype 2.zip (79.8 KB)
That is similar, but it only works in chrome from here - at least not in safari
The basic idea is to have nav on top (fixed) and some info on a thin bar on the bottom (fixed) but to have the content of the website between these 2 elements. So, if someone scrolls the page, because there will be paragraphs of text, the bottom bar stays there and the top nav stays there too. -regardless of the viewport size. I know this would be easy with frames, but I am trying to avoid them.
Thanks for any input you may have.
Space
I tested it on Safari & Chrome and it works for both,
Are you using an old version of Safari?
Also do you mean stays at the bottom of the viewport or of the page.
the only way to achieve this with builtin (!) capabilities is to use a vertical flexible layout and place the content within a overflown container. any solution with custom css and / or js would make it complicated and hard to handle …
TB.hype.zip (35.9 KB)
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
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"> <a href="#">menu 1</a> <a href="#">menu 2</a> <a href="#">menu 3</a> my site and credits</div>
</div>
Michelangelo - Brilliant! It works perfectly!
You have no idea how much I appreciate it!
Many thanks and a karma boost!
Cheers,
Space
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> my site and credits</div>
</div>
END-->
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