I am faced with a challenge involving four thumbnail divs labeled .jobs within a #job-wrap container. When a .job is clicked, I want the #job-wrap to fade out, clear its contents, load information from the selected .job, and then fade back in. However, when I empty the #job-wrap, the rest of my website shifts abruptly because the .jobs no longer occupy any space. How can I maintain the height of #job-wrap after the content is cleared and new content is loaded?
$('.job').click(function(){
var job = $(this).attr("name");
var jh = $('#job-wrap').height();
$('#job-wrap').css('height', jh);
alert(jh);
$('#job-wrap').fadeOut(700, function(){
$(this).empty();
$(this).load("content.html#" + job, function(){
$(this).fadeIn(700);
});
});
});
I've attempted to set the current height of #job-wrap to itself before clearing the contents, but it hasn't been successful. The alert does show the varying height due to the site's responsiveness.
<div id="job-wrap">
<a class="link">
<div class="job" name="eventuall">
<div class="job-img">
<img src="images/thumb-eventuall.png" />
</div>
<div class="job-blurb">
<h3>Eventuall</h3>
<p>UX Design, Front End </p>
</div>
</div>
</a>
<a class="link">
<div class="job">
<div class="job-img">
<img src="images/thumb-audivy.png" />
</div>
<div class="job-blurb">
<h3>Audivy</h3>
<p>UX Design</p>
</div>
</div>
</a>
</div>
This is the HTML structure that the function is targeting. Any assistance would be highly appreciated.