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.
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.
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 …
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:
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
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.
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)
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!
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.
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 …
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.
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-->
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!
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.