CODEWITHSUNDEEP
javascriptcss
Parlanchina
Parlanchina

Reputation: 157

Adjusting widths of panels using JS

My site is www.to-hawaii.com. The length of the right panel is controlled by the length of the middle panel. In other words the middle panel will adjust to the length of the right panel which is naturally shorter. In some cases though the right panel is longer, see here http://www.to-hawaii.com/bg/ and this creates a strange scroll on the right. Is there a way to fix that? In other words if there is a way to have the script work like this: if the middle panel is longer than the right panel, match the right's panel width so it is as long as the middle panel and if the right panel is longer, match the middle panel's width so it is the same length as the right panel.

The function I am currently using to make the right panel width match the middle panel width is:

$(document).on('ready',function(){

    if($(window).width() > 768){
        var heightLeft = $(".leftpanel").height();
        var heightMiddle = $(".midpanel").height();
            if(heightLeft >= heightMiddle){
                $(".rightpanel").css("height",heightLeft - 10);
                $(".midpanel").css("height",heightLeft - 10);   
            }else{
                $(".rightpanel").css("height",heightMiddle +2);
            }                   
    } 


    $(window).resize(function(){  

    if($(window).width() >= 768){
        $(".rightpanel").css("height", "auto");
        $(".midpanel").css("height", "auto"); 
        var heightLeft = $(".leftpanel").height();
        var heightMiddle = $(".midpanel").height();
            if(heightLeft >= heightMiddle){
                $(".rightpanel").css("height",heightLeft - 10);
                $(".midpanel").css("height",heightLeft - 10);   
            }if(heightLeft < heightMiddle){
                $(".rightpanel").css("height",heightMiddle +2);
            }                 
    }
    if($(window).width() < 561){
        $(".rightpanel").css("height", "auto");
        $(".midpanel").css("height", "auto");
    }

    })
})

Upvotes: 0

Views: 60

Answers (1)

Evan Bechtol
Evan Bechtol

Reputation: 2865

you could try something like this:

$(document).on('ready',function(){
    var rightHeight = $('.rightPanel').height();
    var leftHeight  = $('.leftPanel').height();
    var midHeight   = $('.midPanel').height();

    if (rightHeight > midHeight) {
       midHeight = rightHeight; 
       $('.midPanel').css('height', midHeight);
    }
    else if (midHeight > rightHeight) {
       rightHeight = midHeight;
       $('.rightPanel').css('height', rightHeight);
    }

    // If window is resized
    window.addEventListener("resize", adjustPanes);

    function adjustPanes(rightHeight, midHeight) {
        if (rightHeight > midHeight) {
           midHeight = rightHeight;
           $('.midPanel').css('height', midHeight); 
        }
        else if (midHeight > rightHeight) {
           rightHeight = midHeight;
           $('.rightPanel').css('height', rightHeight);
        }
    }
});

Alternatively, you could set all three panels to the height of the wrapper div that you have created.

This would make them each the same length.

   $(document).on('ready',function(){
       var wrapperHeight = $('#wrapper').height();
       $('.midPanel').height(wrapperHeight);
       $('.leftPanel').height(wrapperHeight);
       $('.righttPanel').height(wrapperHeight);

  });

Upvotes: 2

Related Questions