I am making an application that uses a website as an interface.
The html look like the following:
setTimeout(function() {
$('#page-1').removeClass("show-me");
$('#page-2').addClass("show-me");
}, 1000);
setTimeout(function() {
$('#page-2').removeClass("show-me");
$('#page-3').addClass("show-me");
}, 2000);
div#main {
position: absolute;
min-width: 300px;
width: 100%;
height: 100%;
background-color: #ffa;
}
div#main > div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition-delay: 0s;
transition-duration: 200ms;
transition-property: "opacity,visibility";
transition-timing-function: ease;
}
#page-1 {
background-color: #00f;
}
#page-2 {
background-color: #0f0;
}
#page-3 {
background-color: #f00;
}
div#main > div.show-me {
opacity: 1;
visibility: visible;
}
<div id="main">
<div id="page-1" class="show-me">Page 1</div>
<div id="page-2">Page 2</div>
<div id="page-3">Page 3</div>
</div>
Each page
contains data the same way as you would navigate to www.example.com/page-1
, www.example.com/page-2
or www.example.com/page-3
.
However I want to stay at www.example.com
and navigate trough pages by fading them in and out.
I got them placed over one another with position: absolute;top:0;left:0;
but this way main
won’t know the height of the page
since it’s content is absolute.
Therefore i’d like a way to make them fade in and out wiouth the use of position
or negative margins (since the height of each page is dynamic due to content)
Or maybe you have another way of achieving this effect?
This is for an application, not a webpage that should be indexed by google or something else. So no SEO worries 🙂
EDIT:
Added a better example.
2
Answers
Solved the problem by adding
position: static;
to the 'show-me' class. This way the main knows the height of it's 'active' child!When navigating first the active page class 'show-me' is removed, so it becomes position absolute again and starts to fade-out. The next page gets the class 'show-me'. Now becomes static so the main knows the new page's height and follows it. And the new page fade's in as it should!
For a short moment (which you cannot see as far as I tested) the main div has no content and becomes small again. If it contains a background image you may see a little flicker but I think it's to fast for that so it shouldn't be noticeable.
I would have to recomend jQuery Mobile library for this. It’s pretty much what it was built for. I have been using it recently to make a custom app for our company and it’s really quite good. Although a little bit tricky to pick up initially it’s not as steep a learning curve as some other libraries I have used in the past.
(would have made this a comment, but I cant 🙁 )