CODEWITHSUNDEEP
jquery
Andreea Tirgovatu
Andreea Tirgovatu

Reputation: 111

Div height depending to client screen

I have a div with the class YB_full_content_img_header. I want to change the height div with 60% from current height depending to client screen width.

var screen = jQuery(window).width();
    var div= jQuery(".YB_full_content_img_header");
    div.css('height',60%???);

My code didn't work. Thanks.

Upvotes: 1

Views: 268

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196142

Pass the value as a string to the .css method

div.css('height','60%');

if it is depended on the window width you will have to make a test

if (screen < 500){ /*500 is an example here*/
    div.css('height','60%');
}

Update of answer due to the comments

The OP wanted to keep a fixed ration of width/height on some element.

The solution was to resize the div as the browser width changed

in terms of the OP's code the update is 

$(function() {
    var div = $('.YB_full_content_img_header');

    $(window).resize(function(){
        var width = div.width();
        div.css('height', width * 60/100);
    }).trigger('resize');
});

but an alternate option is to use the CSS padding trick (Maintain the aspect ratio of a div with CSS)

Upvotes: 1

user3815508
user3815508

Reputation: 399

I think, you intend depending the height of browser, determine the height and the width of your image. If this is correct, then you can do it e.g. as follows:

$('#Your_Div').css({'width':(parseInt((60*screen.availWidth)/100)+'px'),'height':(parseInt((60*screen.availHeight)/100)+'px') });

You cah get the 60% the height of your div as follows: parseInt((60*$('#Your_Div_Id').height())/100)

Upvotes: 0

Sharry India
Sharry India

Reputation: 351

Try this code:

    <script>
            $(document).ready(function(){               
                windowHeight=$(window).height();
                newHeight=Math.round((60/100)*windowHeight);    //60 % OF CURRENT WINDOW HEIGHT                         
                $('.YB_full_content_img_header').css('height',newHeight);               
            });
    </script>

This may be helpful.

Upvotes: 0

Related Questions