CODEWITHSUNDEEP
jquerycssheight
admiva
admiva

Reputation: 17

If element size is smaller than X, then

I would like to change attributes of element if the height is less than 700px. So I tried this code:

if ($('.content').height() < 700) {
    $( "#footer" ).css( "position", "absolute" ); 
};

Unfortunately, it doesn't work. Where am I making mistake? Thank you.

Upvotes: 0

Views: 990

Answers (4)

Sky
Sky

Reputation: 36

Try using: .style.height

Inner height: document.getElementById("id").clientHeight

Outer height: document.getElementById("id").offsetHeight

Upvotes: 0

Harish V
Harish V

Reputation: 681

As I tried your example provided above, its working fine.

I need more details on what exactly you want to achieve.

As I understood you want to add and remove position absolute based on the content height on page load and page resize if I am not wrong. If this is the case then try the below code.

function handleFooter () {
  if ($('.content').height() < 250) {
    $( "#footer" ).css( "position", "absolute" );
  } else {
    $( "#footer" ).css( "position", "static" );
  }
}

handleFooter();

$(window).resize(function() {
  handleFooter();
});

If this is not solving your problem then give more info or extra code snippets so that I can help you better

Upvotes: 0

nightlycan
nightlycan

Reputation: 1

The code is correct. You just need to check if the condition is true or not. you can check it either using console.log("it works") or alert("it is true").

I believe you want to change the attribute after some event.

$("btn").on("click", function(){

   //to check if event is fired or not
   alert("clicked");
   //if you want to check your condition in console
   console.log($('.content').height() < 700)

  if ($('.content').height() < 700) {
     $( "#footer" ).css( "position", "absolute" );
  }

});

Upvotes: 0

KristiK
KristiK

Reputation: 26

try it :)

outerHeight - http://api.jquery.com/outerheight/ 

$(document).ready(function(){    
        var contentHeight = $('.content').outerHeight();    
        if ( contentHeight < 700) {    
            $( "#footer" ).css( "position", "absolute" );    
        };
    });

Upvotes: 1

Related Questions