seo Question posted in
Some basic information to get you started with this can be found here.

Place a div over another div without position: absolute or relative and variable height and width – SEO

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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 🙁 )

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search