1

I have a timeline in my website which should be displayed only when a button is clicked. In fact, there are 2 pages: one with informations which disappears when the button is clicked, and the other one is the timeline. I want the timeline to be displayed only after the button is clicked. So I put the div that contains the iframe to hidden like : 

var main=function(){
     $('#timeline').on('click',function(){
    /*   $(this).text(function(text) {
            return text === "Timeline mode" ? "Information mode" : "Timeline mode";
        });
     Doesn't work
     */
      $('div').toggle();
    });
};
                  
                  
$(document).ready(main);
div.timeline{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button type="button" class="btn btn-primary" id="timeline">Timeline mode</button>

<div class="timeline">
    <h1>Something</h1>
    <iframe src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&font=Default&lang=en&initial_zoom=2&height=650' 
            width='100%' height='650' frameborder='0'></iframe>
</div>

<div class="container">
informations  
</div>

As you can see, when I display the timeline it is weird because of the display:none;. Titles are upon each other (I read that it's because the browser displays the iframe after blablabla).

I found a solution which is to set the visibility to hidden because the iframe is going to be well displayed by the browser but just hidden.

So I put the div that contains the iframe to hidden. BUT doing that the timeline takes space in the page which I don't want...

Questions: How to display a timeline iframe proprelly ? (visibility:hidden; with no place taken by the timeline / display: none; which works)

(I don't want to use trick like it's displayed but out of screen)

Hearner
  • 2,711
  • 3
  • 17
  • 34

1 Answers1

1

Without getting into the weeds about what is causing the larger issue, what you're really asking is to set it to manage both layout and visiblity at the same time.

.timeline { visibility:hidden; position:absolute; pointer-events:none; }
.timeline.active { visibility: visible; position: static; pointer-events: all }

You can accomplish the toggle with something like this:

$('.timeline').toggleClass('active');
John Green
  • 13,241
  • 3
  • 29
  • 51
  • It perfectly works thank you i would have never found this solution. What does `pointer-events` do here ? The solution was to change the position of absolute to static ? – Hearner Jul 03 '16 at 00:29
  • By making the position absolute, it isn't in the same dom layout system. By setting back to static (the default), it drops it back into the layout. The pointer events is there because while it is absolute, it may interfere with other elements ... for instance, it may disrupt the clickability of the initial button. By setting the pointer events to none, you're telling the browser that you won't accept mouse events until you're ready. – John Green Jul 04 '16 at 08:29
  • So you unaccept the answer and don't provide any details other than a useless "doesn't work". Great. Have fun. – John Green Jul 13 '16 at 17:37
  • Same problem unsolved with Safary. I won't rewrite my question. I just said that your solution perfectly works on Chrome but does not in Safary – Hearner Sep 06 '16 at 16:55