1

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.

Andreea Tirgovatu
  • 111
  • 10
  • 1
    Can you make a jsFiddle please? – Andy Holmes Oct 09 '14 at 08:48
  • try `$div.css('height','60%');` – Reporter Oct 09 '14 at 08:49
  • 1
    @reporter `div` is a variable so $ isn't needed is it? – Andy Holmes Oct 09 '14 at 08:50
  • @AndyHolmes div contains a jquery object. This is different to plain Javascript. Most of the methods works, though not all. – Reporter Oct 09 '14 at 08:52
  • 1
    @reporter, andy means that the variable is named `div` in the code, not `$div` (*as in your comment*). – Gabriele Petrioli Oct 09 '14 at 08:53
  • @AndyHolmes you seem to have a wrong understanding of how variables work in js. the $ in front of variables is just a convention to help the developer. If you name the variable `div` then only `div` exists, and `$div` will cause an error as that variable is not defined. – Gabriele Petrioli Oct 09 '14 at 09:01
  • @GabyakaG.Petrioli In all my time I developed with Jquery (V1.x) I could use this way and as I had written before. If you don't use $ some Jquery method could not apply. – Reporter Oct 09 '14 at 09:05
  • @GabyakaG.Petrioli haha no i do understand, i just didn't explain my point very well :P – Andy Holmes Oct 09 '14 at 09:11
  • 1
    @AndyHolmes oups.. sorry that comment was directed to reporter.. sorry for the confusion. – Gabriele Petrioli Oct 09 '14 at 09:21
  • 1
    @reporter that is just wrong. what you describe cannot happen. the `$` is a function you call for creating the jquery object object. it has nothing to do with how you name the variable in which you store that jquery object. – Gabriele Petrioli Oct 09 '14 at 09:25

3 Answers3

1

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)

Community
  • 1
  • 1
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
0

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)

user3815508
  • 369
  • 4
  • 20
0

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.

Sharry India
  • 341
  • 1
  • 9