I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below.
<script>
$(document).foundation();
</script>
<script>
if(!(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent) )) {
jQuery(document).ready(function($){
var inHeight = $("#wrapper").innerHeight();
$("#wrapper .col").each(function(){
$(this).height(inHeight+"px");
$(this).find('.content').height((inHeight-60)+"px");
});
});
}
</script>
The problem is that the column height adjustment only works when I refresh the page, and sometimes it takes multiple refreshes for it to take effect. Is there a way to resolve this issue? Thank you!
This is how my JavaScript code is structured:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script>
if(!(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent) )) {
jQuery(document).ready(function($){
var inHeight = $("#wrapper").innerHeight();
$("#wrapper .col").each(function(){
$(this).height(inHeight+"px");
$(this).find('.content').height((inHeight-60)+"px");
});
});
}
</script>