CODEWITHSUNDEEP
javascriptjquery
wharfdale
wharfdale

Reputation: 752

jQuery compare height not running on reduction of height

I've got the following piece of jQuery checking the height of the left and right side columns. If the alert list (left) increases in height, the sidebar row then also increases in height to match. However, once this has increased, and the alert list is decreased (by selecting a different area or a lower number of alerts) the sidebar and overall row containing everything does not reduce in height, leaving huge space below.

To replicate the issue:
Select ST HELENS area.
Choose 100 alerts
Now choose WIRRAL area.
The containing height does not reduce.

http://178.62.45.247/areas.php

*Note, this must work from IE7 and above *

function areasRowHeight() {
    $height1 = $('.nopr').height();
    $height2 = $('.nopl').height();
    if($height1 > $height2) {
        $('.areasrow').height($height1);
    }
    else {
        $('.areasrow').height($height2);
    }
}

$(document).ready(function(){     
    $( window ).resize(function() { 
        maxHeight('.nopr', '.nopl');
    });
    $( window).scroll(function(){
        maxHeight('.nopr', '.nopl');
    });
    $( window ).on( "orientationchange", function( event ) {
        maxHeight('.nopr', '.nopl');
    });
    $('.burgermenu').on('click', function(event){
        $(this).css('display', 'none');
        $('.cancel').css('display', 'inline-block');
        $('.smnav').css('display', 'block');
        // $('.burgermenu').attr('class', 'burgermenu-open')         
        event.preventDefault();
    });
    $('.cancel').on('click', function(event){
        $(this).css('display', 'none');
        $('.burgermenu').css('display', 'inline-block');
        $('.smnav').css('display', 'none');
        // $('.burgermenu').attr('class', 'burgermenu-open')         
        event.preventDefault();
    });

    $('.show5').on('click', function(event){
        hide('.latestalerts ul', 5);
        maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();

    });

    $('.show10').on('click', function(event){
        hide('.latestalerts ul', 10);
         maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();

    });
    $('.show100').on('click', function(event){
        hide('.latestalerts ul', 50);
         maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();

    });
    $('.showall').on('click', function(event){
        resetHide();
         maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();

    });        

    var trigger = $('.button li a'),
    container = $('.latestalerts');      
    trigger.on('click', function(event){
    windowAnchor();
    event.preventDefault();       
      var $this = $(this),
      target = $this.data('target');
      $('#content').load('controllers/areaload/' + target + '.php');   
        areasRowHeight();
    });

    maxHeight('.nopr', '.nopl');

});

Upvotes: 0

Views: 57

Answers (1)

CrazyCrow
CrazyCrow

Reputation: 4235

I have no IE7 but if I right understand you should remove from your style.css

.areasrow .nopr {
    height: 100% !important;
}
.areasrow .nopl {
    height: 100% !important;
}

.areasrow .nopr .inner-content {
    height: 100% !important;
}

.areasrow .nopl .sidebarbg {
    height: 100%;
}

Then change in main.js

$('#content').load('controllers/areaload/' + target + '.php');
areasRowHeight();

to

$('#content').load('controllers/areaload/' + target + '.php', function(){
  maxHeight('.nopr', '.nopl');
});

A bit dirty but with this document structure this is all what I can suggest.

Upvotes: 1

Related Questions