Javascript resize function

Question

I run into a problem with javascript that resize elements according screen size. I would like to translate this code with same functionality to css simple class.

$(window).resize(function(){ // On resize
   $('item2').css({'height':(($(window).height()))+'px'});
});

I have tried

.test2 {
    height: 100%;
}

But doesn`t work - if I delete script part elements are not the desired with (full screen height).

Problem with script is that it implement the style to markup, which can`t be changed with media queries unless using !important...

item2 is an tag name ?

gurvinder372
– gurvinder372

2017-04-20 08:04:12 +00:00
Commented Apr 20, 2017 at 8:04 — gurvinder372
– gurvinder372, Commented Apr 20, 2017 at 8:04

Mamun · Accepted Answer · 2017-04-20 08:21:23Z

2

If item2 is a class then you need to add . in the selector.

$(window).resize(function(){ // On resize
  //$('.item2').css({'height':(($(window).height()))+'px'});
  $('.item2').height($(window).height());
});

edited Apr 20, 2017 at 8:21

answered Apr 20, 2017 at 8:04

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tomáš Tom Haverla Over a year ago

I see I forgot . but it doesnt solve the problem of replacing the script with pure css. Is it possible to replace $(window).resize(function(){ // On resize $('.item2').css({'height':(($(window).height()))+'px'}); }); Only with css ?

Mamun Over a year ago

Please add the html.

Mamun Over a year ago

Try the updated code by using jQuerys height() method.

n1kkou · Accepted Answer · 2017-04-20 08:42:12Z

1

For you to have an element with height equal to screen height, you either have to set the position:fixed to that element and add height:100%, or, if you want to keep the document flow, you also need to set the document height to 100%, also all the parents of the child element have to be 100% height.

The easiest way is obviously the first approach, but that option will pull your element from the natural document flow.

.test2{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    z-index:2;
}

$(window).resize(function(){
     $('item2').addClass('test2);
});

Keep in mind that this function is running on every resize event, which is performance costly.

To understand the issue, you can check this explanation about debouncing: https://davidwalsh.name/javascript-debounce-function

edited Apr 20, 2017 at 8:42

answered Apr 20, 2017 at 8:25

n1kkou

3,1402 gold badges26 silver badges34 bronze badges

1 Comment

Tomáš Tom Haverla Over a year ago

I used min-height:100%;. with fixed position as you mention and it works. Thank you

Collectives™ on Stack Overflow

Javascript resize function

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related