Hearner Hearner - 5 months ago 26
CSS Question

display: none goes weird with iframe timeline

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)

Answer

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');