Testing content aware position absolute

by Augustus Yuan

HTML

<div class="wrapper">
    <div class="js-content-section red">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium doloremque est hic, natus officia minus.</div>
    <div class="js-content-section blue hide">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium doloremque est hic, natus officia minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium doloremque est hic, natus officia minus.</div>
    <div class="js-content-section green hide">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium doloremque est hic, natus officia minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium doloremque est hic, natus officia minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium doloremque est hic, natus officia minus.</div>
</div>
<div class="wrapper">
    This block should always be dynamically aware of what is above.
</div>
<a href="#" class="change-content">Click</a>

CSS

.wrapper {
    height: 100px;
    display: block;
    position: relative;
    border: 1px dashed black;
}

.js-content-section {
    position: absolute;
}

.hide {
    display: none;
}

.blue {
    color: blue;
}

.red {
    color: red;
}

.green {
    color: green;
}

JavaScript

$('.js-content-section').each(function(index) {
    $('.js-content-section').fadeOut();
    $(this).fadeIn(); 
});

setInterval(function(e)