JS only works when refreshing the page a few times

Question

I have 3 columns that extend to equal height

and this is the JS that makes those 3 columns work: SEE DEMO

<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 this only works when I refresh the page. Sometimes I even need to refresh the page a couple of times to make it work. Is there any way to fix this issue? Thanks!

This is my JS structure:

<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>

just a note : instead of ugly regex. use modernizer. it was designed specially for such things. — Eugene P., Mar 05 '14 at 11:56
You don't need $.each since you are not using specifics for each element (column) — enapupe, Mar 05 '14 at 11:56

NoobEditor · Accepted Answer · 2014-03-05T12:22:56.087

1

If as per your comment, you need IE8+ support, lets try solving your problem pure HTML way, no JS required!! :)

demo here

Remove all the JS and float from your code, then, see the comments in markup below :

#wrapper {
    height: 100%;
    width:  100%;
    margin: 20px auto;
    display:table; /* added, so your div will behave like css-table */
    overflow: hidden;
}
#wrapper > .col {
    display: table-cell; /* abra-ka-dabra, equal height for all divs!!*/
    width: 30.3%;
    border:1px solid red;
    margin: 0 15px 3px;
    background-color: #fff;
    text-align: center;
    position: relative; /* required, because we need to place button @ he bottom of div*/
    height: 100%;
    -moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    -webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
}

    div.btn-align-bottom {
        position:absolute; /* place button at the bottom of div */
        bottom:50px; /* placing at proper position */
        left:0; /* needed for centering */
        right:0;/* needed for centering */
        border:1px solid yellow /* just to show you */
    }

EDIT

If as per comment you have image in you markup,make sure to mention :

img{
    vertical-align:top; /* change default of baseline to top*/
}

working demo

edited Mar 05 '14 at 12:22

answered Mar 05 '14 at 12:10

NoobEditor

15,563
19
81
112

it will...i assume u just dont know how to fine tune things.... and better come up with an answer rather than just downvoting answers in serial!!! :) – NoobEditor Mar 05 '14 at 12:16
I haven't downvoted your answer.. I just went to the fiddle and added an image, it broke it, so I came here to tell you, but I didn't downvoted. – enapupe Mar 05 '14 at 12:17
i'll upload the fiddle with image in some time.....and btw, OP hasnt got image in his question!! – NoobEditor Mar 05 '14 at 12:18
Did you see the demos? His problem is the fact that he has images and they are not loaded when the script runs.. Would you take a look at his demos and my answer? – enapupe Mar 05 '14 at 12:20
Also, I got downvoted by the same nazi that downvoted you.. that's a shame. – enapupe Mar 05 '14 at 12:21
Sorry I thought the images wouldn't make any difference. I've tested your solution on my actual pages and I see that the buttons are not aligned and overlap the text. – Nesta Mar 05 '14 at 12:21
@user1628193 : can you replicate taht in fiddle? – NoobEditor Mar 05 '14 at 12:23
I've just realised this doesn't work on Safari and Firefox :'( Any idea on how to fix it? – Nesta Apr 09 '14 at 14:53
@user1628193 : this is the compatibility => http://caniuse.com/#search=table-cell – NoobEditor Apr 09 '14 at 15:26
I see. So there's no way to make it compatible? – Nesta Apr 09 '14 at 15:28
nope...none that i know of!! :( have u tried the below answer from *enapupe* ? – NoobEditor Apr 09 '14 at 15:38
Sure I'll do that no worries. Thanks! – Nesta Apr 09 '14 at 15:41
I've actually posted this question http://stackoverflow.com/questions/22967392/equal-height-columns-width-issue. In the meantime I've made some changes on the code and now I'm facing an issue related to the columns widths. – Nesta Apr 09 '14 at 15:44

score 0 · Answer 2 · answered Mar 05 '14 at 11:53

0

window.onload = function() {
    if(!window.location.hash) {
        window.location = window.location + '#';
        window.location.reload();
    }
}

This snippet reloads your pace once

answered Mar 05 '14 at 11:53

miny1997

469
3
13

Thanks but where shall I place that snippet? Sorry I don't know much about JS. – Nesta Mar 05 '14 at 11:57
At the end of the script – miny1997 Mar 05 '14 at 15:16

enapupe · Answer 3 · 2014-03-05T12:10:13.407

This happens because you are triggering your script before the images are loaded, so you cannot know the real innerHeight of #wrapper.

You options are specifying the image height on the DOM

OR

Triggering this function on window onLoad.

Also, you don't need $.each:

var inHeight = $("#wrapper").innerHeight();
$("#wrapper .col").css("height", inHeight+"px");
$("#wrapper .col .content").css("height", (inHeight-60)+"px");

An optimized way (caching wrapper):

var $wrapper = $("#wrapper");
var inHeight = $wrapper.innerHeight();
$wrapper.find(".col").css("height", inHeight+"px");
$wrapper.find(".col .content").css("height", (inHeight-60)+"px");

score 0 · Answer 4 · answered Mar 05 '14 at 12:07

The problem occurs because your elements are being floated and therefore the DOM doesn't see them as solid objects.

You'll need to make a couple of edits to the CSS to fix the problem.

#wrapper {
    height: 100%;
    width: 100%;
    margin: 20px auto;
    overflow: auto;
}

#wrapper > .col {
    display: inline-block;
    float: left;
    width: 30.3%;
    margin: 0 15px 3px;
    background-color: #fff;
    text-align: center;
    position: relative;
    height: 100%;
    -moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    -webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    overflow: auto;
}
#wrapper > .col > .content {
    padding: 0 0 35px;
    overflow: auto;
}

And for the jQuery side of it, you'll need to change it to this:

var inHeight = $("#wrapper").innerHeight();
$("#wrapper .col").each(function(){
    $(this).height(inHeight+"px").css('overflow', 'hidden');
    $(this).find('.content').height((inHeight-60)+"px").css('overflow', 'hidden');
});

If you want to give that a try.

Why declaring overflow hidden on this context, not the css itself? What about images that have no height on script runtime ? — enapupe, Mar 05 '14 at 12:08
Also, there is no reason to set overflow hidden in the JS rather than the css. — enapupe, Mar 05 '14 at 12:16
Triggering a css change on dom ready is almost the same as setting it on the css, you may have a blink between both.The images are not necessarily loaded when document is Ready. DOM ready means that the whole HTML was downloaded and the DOM tree was built. That is when the image resources are called, so, they probably are not done yet. The full document load happens on window onLoad, which is triggered when everything is done. — enapupe, Mar 05 '14 at 12:29

JS only works when refreshing the page a few times

4 Answers4