Set height of div but keep fluid - javascript

I have a situation where I need to make a div the same size as an absolutely positioned sidebar. I sorted that using this bit of jQuery;
$('#main').height('auto');
top_height = $('.toolbar').outerHeight();
side_height = $('#RightSideBar').height();
body_height = $('#main').innerHeight();
console.log(body_height + ' ' + side_height);
if (body_height < side_height){
$('#main').height(side_height + top_height);
}
else {
$('#main').height(body_height);
}
I have ran into a new problem due to the dynamic nature of some content on some pages. Since the height of #main is absolutely set if the size of its content increases the size of the div will not increase with it and vice versa.
I need the div to be set the same height as the sidebar and remain fluid with its content. So the div would increase and decrease in height up to the height of the sidebar.
I hope that is easily understandable, if its not please say so.

instead of setting the height of #main with your calculations, try setting the min-height:
if (body_height < side_height){
$('#main').css('min-height', side_height + top_height);
}
else {
$('#main').css('min-height', body_height);
}

You can do this without javascript. You need a relative positioned parent that will auto size to side bar and then an absolute positioned div that adopts 100% height of parent. Never is there a set height, always fluid.
DEMO http://jsfiddle.net/nSBaA/1/
#wrapper {
position: relative;
}
#main {
position: absolute;
height: 100%;
width: 70%;
}
#sidebar {
float: right;
width: 20%;
}

Related

How to implement this sticky-header scroll-down component?

I have a div container that is about 70% of the height of the page. The 30% which is outside the div is dim lighted (greyed out).
I am trying to implement a functionality where scrolling down within this container div causes the container div to fill up more of the page (less vertical space is greyed out) and eventually all of it (so 100% height).
Vica versa, when scrolling upward within the container and reaching the top should cause of the greyed out space to become bigger. What is the easiest way to implement this, possibly with the help of a library?
Using the scroll event and a combination of scrollTop, scrollHeight and clientHeight properties, we could get something that resembles your need:
let elem = document.querySelector('div');
elem.addEventListener('scroll', () => {
if(elem.scrollTop == 0) {
elem.style.height = `${elem.clientHeight + 10}px`;
}
if(elem.scrollHeight - elem.clientHeight == elem.scrollTop) {
elem.style.height = `${elem.clientHeight + 1}px`;
}
});
body {
background: #555;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
overflow-y: hidden;
}
div {
background: #ccc;
height: 70%;
width: 100%;
overflow-y: scroll;
}
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>

Change marginLeft to child div inside a scrolling parent div

I am trying to place a position: absolute div inside a scrolling div and make it stay on the left when scrolling left or right. This is because I want the div to move like one unit (when scrolling left, right, top, bottom). It's working great on screen that lower then 2K but on HD screens (ie. 2k, 3k, 4k...) the child div is jumping around and looks bad.
Is there a better way to do it? What change should I make to the CSS for HD screens?
#parent {
overflow: auto;
width: 100%;
height: 100%;
position: relative;
}
#child {
overflow: hidden;
width: 20%;
height: 100%;
z-index:1;
position: absolute;
}
<div id="parent">
<div id="child"></div>
</div>
$("#parent").on('scroll', function (event) {
$("#child")[0].style.marginLeft = this.scrollLeft+"px";
});
You can use jQuery's css function to set the value. And use the parent element as jQuery object to use scrollLeft() function:
$("#parent").on("scroll", function() {
$("#child").css("margin-left", $(this).scrollLeft() + "px");
});
But I would not use jQuery for this at all. Why not use a fixed position in css for this? Like in this example. It should not flicker on any screen.

How to get the height and width of window in bootstrap

In bootstrap I have a fixed top nav bar and fixed bottom nav bar. I want to show a large image in the background between the space of those two nav bars and I also want to cover the width of the window. How can I dynamically get the height between the navbars and the width of the window? The window size may change depending on device.So I need it dynamic
Requires jquery:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
//can access dimensions like this:
//viewport.height
Though you won't always get perfect results, different devices behave differently and this gives the viewport dimensions, not the screen dimensions.
Alternatively you could check the width of a data-role="page" element to find the device-width (since it's set to 100% of the device-width):
var deviceWidth = 0;
$(window).bind('resize', function () {
deviceWidth = $('[data-role="page"]').first().width();
}).trigger('resize');​​​
$(window).resize(function() {
var top_nav_height = $("#id_of_top_nav").height();
var bottom_nav_height = $("#id_of_bottom_nav").height();
var window_height = $(window).height();
var height_of_open_space = window_height - (top_nav_height+bottom_nav_height);
$("#id_of_img").css({
height:height_of_open_space+'px';
});
});
this will be fine with if 0px padding and margin, if not also get that values and subtract from height_of_open_space before applying to img height
It is a bit hard to tell without seeing any of your markup, but it should be feasable with pure css. I set up a very basic example to demonstrate:
http://codepen.io/anon/pen/XbGJJO
HTML:
<div class='top'>
top navbar
</div>
<div class='content'>
<p> some content </p>
</div>
<div class='bottom'>
bottom navbar
</div>
CSS:
.top, .bottom {
height: 40px;
background: red;
position: fixed;
width: 100%;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
.content {
margin: 40px 0;
min-height: calc(100vh - 80px);
background: green; /* background goes here */
}
The trick lies in the following line:
min-height: calc(100vh - 80px);
This tells your content to at least take up 100% of the vertical height, minus the height of the top and bottom bar. Let me know if you want me to explain further.

Bootstrap navbar overlapping content when using affix

I want
A site banner with a navbar below
The banner to disappear when scrolling down, but the navbar to
remain fixed
I found this jsfiddle which provides the above solution:
http://jsfiddle.net/DTcHh/541/
Two main points of code:
//js
$('#topnavbar').affix({
offset: {
top: $('#banner').height()
}
});
//css
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}
My problem now is when you scroll down to the point where the 'affix' happens. If you look carefully at that point it kinda jumps, and now the navbar is overlapping the first 4 lines in the paragraph
Any ideas how to get rid of that overlap?
You need to displace the fixed .navbar element by adding padding-top to the body element equal to the height of the fixed element.
You can listen to the affix.bs.affix/affix-top.bs.affix events and then determine whether the padding should be equal to the element's height or removed:
Updated Example - the jump you were seeing no longer occurs.
$('#topnavbar').on('affix.bs.affix affix-top.bs.affix', function (e) {
var padding = e.type === 'affix' ? $(this).height() : '';
$('body').css('padding-top', padding);
});
Add "z-index:10;" to your topnavbar.affix class in css.
position: fixed;
top: 0;
width: 100%;
z-index:10;

Changing footer position to be at the bottom of page until it hits content

(I am looking for an HTML/CSS fix but if there really is none then JS (prefereably JQuery) works for me)
I have two main divs inside my page, I have the #maincontent and the #footer.
Basically, I want the footer to always sit at the bottom on the page:
#footer{
position:fixed;
bottom:0;
}
BUT I do not want it to overflow on the #maincontent when the page is too small.
For the sake of the question the page can be thought of as simple as:
<body>
<div id="maincontent">Dynamic Content</div>
<div id="footer">StaticContent</div>
</body>
My problem is that I can do one or the other, either I fix it to the bottom of the page but when I make the viewport < (footer + maincontent) the footer sits on top of the content. I want the footer to always be at the bottom of the page but disappear off page before it overtakes the main content.
Add a class to the footer with jQuery that changes it to position: absolute when the viewport is too small.
$(document).ready(function() {
var height = $(window).height();
function windowHeight() {
height = $(window).height();
}
windowHeight();
$(window).resize(function() {
windowHeight();
});
if (height < 600) { //arbitrary height value you can set yourself
$('#footer').addClass('not-fixed');
} else {
$('#footer').removeClass('not-fixed');
}
});
If you know your footer's height whatever happens to the window height, or its content :
Just add a "padding-bottom" to your body or main content that matches the footer's height.
If you don't know your footer's height. This is trickier, as you will probably need some javascript to calculate the height of the footer, the height of the main content, compare the sum of both with the window height, and if it doesn't fit, add some adequate bottom padding to the body / main content.
EDIT :
Ok I understand, I think this jsfiddle should do the trick : http://jsfiddle.net/ah4XA/2/
The javascript would be :
$(document).ready(function () {
function updateFooter () {
var footerH = $("#main-footer").height();
var contentH = $("#main-content").height();
var windowH = $(window).height();
if ( contentH + footerH > windowH) {
$("#main-footer").removeClass("fixed");
} else {
$("#main-footer").addClass("fixed");
}
}
$(window).resize(function () {
updateFooter();
});
updateFooter();
});
If I understand what you're looking for, you want the footer to stay on the bottom of the window regardless of the page content, but also not overlap the page as the window is resized vertically.
One possible solution is to switch between position:absolute; and position: fixed; with a media query. So past a certain height it's fixed, but below that the footer position:absolute;.
EXAMPLE FIDDLE
CSS:
#media all and (max-height:300px) {
#footer {
background: red; <- added for testing
position: absolute;
}
}
The only drawback to this approach is that you need to know the height to set the switchover to. This may be tricky, but position:fixed;.
The simplest solution would be to position footer at the bottom permanently and increase the z-index of your maincontent so that it comes over the footer if window size is decreased.
NOTE: This is not the only way to do this.
JSFIDDLE DEMO
Sample CSS
#maincontent{
height : 400px;
background-color : green;
/*
position : relative is added to enable z-index.
*/
position:relative;
/*
z-index will bring it above footer,
if window size is reduced.
*/
z-index: 1;
width : 100%;
}
#footer{
height : 100px;
width : 100%;
background-color : black;
/* Below two properties will
postion footer at the bottom of the page.
*/
position : fixed;
bottom : 0;
color : white;
}
You should play with CSS position property to get this done.
EDIT:
Here is another CSS solution :
The maincontent and footer are wrapped in a bodyContainer div its position is set to relative and then footer is positioned w.r.t it.
JSFIDDLE DEMO 1 Footer is below body and not shown.
JSFIDDLE DEMO 2 Footer is shown since body height is less.
HTML
<div id="bodyContainer">
<div id="maincontent">Dynamic Content
</div>
<div id="footer">StaticContent</div>
</div>
CSS
#bodyContainer {
min-height: 100%;
position: relative;
}
#maincontent{
height : 800px;
background-color : green;
padding-bottom: 60px;
width : 100%;
}
#footer{
background-color: black;
bottom: 0;
color: #FFFFFF;
height: 48px;
position: absolute;
width: 100%;
}

Categories