jQuery height sometimes working others not

1 Views

Hi guys I have a jQuery problem I am stuck with. Sometimes it is working and gives my the right height and others a totally different height. Maybe it has something to do with the order that is loading or maybe I just did something wrong. Could you please take a look and let me know if you see a mistake there or what you would make different? I would appreciate it. It is in a WordPress Site and it’s in the header…. 

 <script type="text/javascript">

jQuery(document).ready(function( $ ) {

// boxen gleiche hoehe

    if($(window).width() >= 1600)  {
        $(".home #fb").height($("#homebox").innerHeight(true) + $("#homebox2").innerHeight(true) - 45) +'px';
        }


    $(".home #twitter, .page-template-homeLayout-php #twitter").height($("#homebox").innerHeight(true) + $("#homebox2").innerHeight(true));
 });

 $(window).resize(function() {

        if($(window).width() >= 1600)  {
        $(".page-id-1235 #fb").height($("#homebox").innerHeight(true) + $("#homebox2").innerHeight(true) - 45) +'px';
        }

        $(".home #twitter, .page-template-homeLayout-php #twitter").height($("#homebox").innerHeight(true) + $("#homebox2").innerHeight(true));


});


});

</script>
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. This is because you are using $(window) as the basis for your width. Instead put your site into a container

    HTML

    <div class="container">
 <div>your content</div>
</div>

    CSS

    .container {
 width: 100%;
 margin: 0 auto;
}

    In your JS then switch $(window) with $(.container) plus the edit from TravisJ

  2. It seems to me that this issue is a result of bad code inside of your if statement which would explain the seemingly random occurrence of this issue.

    This is inaccurate:

    if($(window).width() >= 1600)  {
 $(".home #fb").height( $("#homebox").innerHeight(true) + $("#homebox2").innerHeight(true) - 45) +'px';
}

    It should be this:

    if($(window).width() >= 1600)  {
 $("#fb").height( 
  $("#homebox").innerHeight(true) + 
  $("#homebox2").innerHeight(true) - 45
 );
}

    Note that there is only one id per page allowed, so just using the id will be enough for the selector. And also, height() takes an int value and does not require 'px' like a css property.

    Same goes for 

    if($(window).width() >= 1600)  {
 $(".page-id-1235 #fb").height($("#homebox").innerHeight(true) + $("#homebox2").innerHeight(true) - 45) +'px';
}

    which should be

    if($(window).width() >= 1600)  {
 $("#fb").height(
  $("#homebox").innerHeight(true) + 
  $("#homebox2").innerHeight(true) - 45);
}