CODEWITHSUNDEEP
javascriptjqueryhtml
user4759415
user4759415

Reputation:

$(document).height and $(window).height both return the same value - proper doctype in use

I'm working on setting up a floating action button, like in Google's new Material Design. This is the jQuery I'm using right now:

$(document).ready(function () {
    var doc = $(document).height();
    var height = $(window).height();
    var offset = height - 20 ;
    console.log(doc);
    console.log(height);
    console.log(offset);
    $("#floating_nav_container").css("top",""+ offset +"px");   
});

I want to be able to detect the height of the viewport and have my action button display 20px above the bottom.

My "floating_nav_container" is an absolute positioned div within a bootstrap "col-md-6" parent div that I've set a fixed height for testing purposes of 900px.

Sometimes the $(document).height() gets the 900 right, and other times it doesn't; the $(window).height is always the same as the document one.

My doctype is:

<!DOCTYPE html>

which I've read on here is the usual fix when these two methods return the same value.

EDIT: I'm trying to accomplish this within a 3 column layout. The "floating_nav_container" is only applicable to the middle column. Setting it's CSS to fixed position with a bottom of 20px doesn't work because depending on the viewport size the action button might show on the third column or outside of the columns altogether.

If the "floating_nav_container" is set as fixed with the code set for it to be a child of the middle column it behaves the same as if it was set up at the top of the DOM.

I've opted for having it absolutely positioned within the middle column because then no matter how the browser is re-sized it stays within the parent container. The problem is when the page runs beyond the height of the viewport the button is gone.

My hope is to find a way to calculate the height and have it dynamically determine what the offset from the bottom of the viewport should be for any device.

Upvotes: 0

Views: 502

Answers (4)

user4759415
user4759415

Reputation:

I figured out a solution that worked best for me using some of the proposed solutions here. In case anyone else comes across a similar problem in the future here is everything I did that got it to work the simplest.

I moved the "#floating_nav_container" out of the middle column so that it wasn't a child of anything.

The CSS on the "#floating_nav_container" is this:

#floating_nav_container {
position:fixed;
bottom:20px;
right:40px;
z-index:10;
}

This gets it positioned properly for mobile use, but doesn't keep the button within the middle column once the design is scaled to desktop size.

To ensure that the button always stays within the middle column I used media queries to set it's "right" to 31%.

@media (min-width: 992px) {
  #floating_nav_container {
    right:31%;
  }
}

My layout is made with bootstrap and the 3rd column is a "col-md-3" which is always 25% of the available width of the viewport. By setting my right on the "#floating_nav_container" to 31% I've enabled it to always stay tucked inside the middle column as the design scales.

Once the right column is dropped and only the middle column remains then the default css for the "#floating_nav_container" kicks in and handles the display.

This completely eliminated my need to use jQuery.

Upvotes: 0

Mr. X
Mr. X

Reputation: 274

For viewport-aware positioning of elements, use CSS instead of jQuery or js like this:

#floating_nav_container {
    position: fixed;
    bottom: 20px;
}

Upvotes: 0

Nick Delaney
Nick Delaney

Reputation: 601

Move the #floating_nav_container outside of the parent div, and use @floribon's solution. Also if you want it to always be 20px from the bottom, even when scrolling set the position to fixed.

#floating_nav_container{
  position:fixed;
  bottom:20px;
}

I've added a fiddle here for you https://jsfiddle.net/9v9u8ybp/

Upvotes: 2

floribon
floribon

Reputation: 19193

I suggest you do it fully in CSS to prevent any bug:

#floating_nav_container {
  position: absolute;
  bottom: 20px;
}

Upvotes: 0

Related Questions