jQuery multiple else if statements

Question

I am trying to set a padding on a div based on the window height size. I simply couldn't find a better working way to center my content div vertically in another div with unknown dimensions. My code is as it follows:

<script>
    $(document).ready(function(){ 
        var window_height = $(window).height();
        var home_content = $('#home-content');

            if(window_height <= 600) {
                home_content.css({"padding-top", "13px"});
            } else if(window_height > 600 && window_height <= 768) {
                home_content.css({"padding-top", "97px"});
            } else if(window_height > 768 && window_height <= 800) {
                home_content.css({"padding-top", "113px"});
            } else if(window_height > 800 && window_height <= 900) {
                home_content.css({"padding-top", "163px"});
            } else if(window_height > 900 && window_height <= 1050) {
                home_content.css({"padding-top", "238px"});
            } else if(window_height > 1050 && window_height <= 1080) {
                home_content.css({"padding-top", "253px"});
            } else if(window_height > 1080 && window_height <= 1200) {
                home_content.css({"padding-top", "313px"});
            } else {

            }
     });
    </script>

It is not working. My web site is stuck on the preloader and simply won't load anyhing. Any ideas where am I doing it wrong?

Answer 1

Try changing:

{"padding-top", "13px"}

to:

{"padding-top":"13px"}

and so on...

Note

The thing is that you can assign css style with jquery in two ways:

$("#element").css('padding', '30px');

(if you want to edit/add one style setting), or:

$("#element").css({'padding':'30px'});

(with this method, you can add how many settings as you like, just separate them with , , kudos to @dollarvar for pointing this out).

The problem in your code was that you had an , instead of : .

Answer 2

Try this, You can remove {} and use

 home_content.css("padding-top", "13px");

instead of

home_content.css({"padding-top", "13px"});

Answer 3

As an alternative instead of the JavaScript hack, you could make use of CSS Media Queries to specify the CSS rules to apply ( example ). It does depend on exactly which browsers you need to support, http://caniuse.com/css-mediaqueries .

@media (max-height : 599px) {
    #home-content { padding-top: 13px; }
}

@media (min-height : 768px) {
    #home-content { padding-top: 97px; }
}

@media (min-height : 800px) {
    #home-content { padding-top: 113px; }
}

@media (min-height : 900px) {
    #home-content { padding-top: 163px; }
}

...

This will also change the padding automatically when you resize your browser window, it's the same technique used for Responsive design.

EDIT:

BUT, re-reading your actual question, it looks like your are trying to vertically center a div within a container. You really don't need to use any Javascript, you can do this completely with CSS and it will be much smoother: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

html, body {
  height: 100%; 
  margin: 0;
  padding: 0;
}

.container { 
  height: 100%; 
  position: relative;
}

#home-container { 
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: 1px solid red;
}

codepen example