I am trying to create a container div with a fixed height which has two divs inside, a header div and a content div. The header can grow dynamically and I want the content div to take the rest of the space. The container div should not exceed the specified size and if the content grow to much then content div should scroll.
My current code is as follows but is not working:
<div id="container">
<div id="header">
<button id="btnHeader" type="button">Increase Header</button>MY HEADER</div>
<div id="content">
<button id="btnContent" type="button">Increase Content</button>MY CONTENT</div>
</div>
#container {
height: 300px;
width: 400px;
max-height: 300px;
background-color: grey;
}
#header {
width: 100%;
height: auto;
background-color: blue;
}
#content {
width: 100%;
height: 100%;
overflow-y: scroll;
background-color: red;
}
Example here: http://jsfiddle.net/ep1qab0v/
What is happening is that the content div always stays the same size and hence make the container div to grow. Any ideas?
http://jsfiddle.net/ep1qab0v/3/ ,
I have updated the fiddle with overflow:hidden on the container div. which keeps it the same size. increase in content adds scroll bar to the content div and increase in header pushes the content div down. If I have understood your requirement correctly this is what you are looking for ?
I have made a fiddle with the answer, but I will also try to explain. jsfiddle Example
For that level of dynamic sizing you will have to use javascript. Since the content is scrollable and the header is not, you will have to create an object or function that is called everytime the header size changes. This way you can test the height of the header against the main container, and change the content box to fit.
I created a simple object that you can use to initialize the boxes when the page loads. Also, that you can call every time the page is resized or the header size is changed.
var sizing = {
height: null,
header: null,
content: null,
//Initializes whatever you need
//just cacheing the header and content
//and setting the height restriction
init: function(){
//Set the height of the users window
//you can change this to whatever you want
//but this is dynamic to the browser window
this.height = window.innerHeight ? window.innerHeight : $(window).height();
//Set header and content elements
//for later use
this.header = $('#header');
this.content = $('#content');
this.resize();
},
//Ressize the boxes to fit
//this needs to be called after
// every change to the header
resize: function(){
this.content.css({
height: (this.height - this.header.height()) + "px"
});
}
};
You need to call the .init() to initialize the object when the page loads
$(document).ready(function(){
//Whatever you need to do
//Initialize the sizing
sizing.init();
});
then you can call it from inside events
$('body').on('click', '#some-element', function(e){
//Do some stuff
//Then resize the divs
sizing.resize();
});
Hope that helps!
Related
I have a horizontal scrollbar which will only show when hover. But the problem is when it shows, it will increase the height of it's container and push the following elements down.
the demo examle.you can see the two div will be pushed down when the scrollbar shows
<div class="wrapper">
<div class="one">
<div class="oneChild">the height is unknown,the height is unknown,the height is unknown,the height is unknown</div>
</div>
<div class="two">I'm two</div>
There are are some rules:
The wrapper and one height can't be fixed,because the *oneChild * content height is unkonwn.And the height of both are all decided by their children.
The scroball only show when hover.you can use js or css to control it's visible.
Any js/css solution will be welcome.
If jquery is an option:
$(document).ready(function() {
height = $('.one').height();
$('.two').css('marginTop', height + 'px');
});
css:
.one {
width: 100px;
border: 1px seagreen solid;
position:relative;
}
.one:hover {
overflow: scroll;
}
.two {
position: absolute;
top:30px;
}
If the child of one will never change, then you could get the height of the element after a height has been set, and then fix it at that height.
var $one = $('.one');
var height = $one.height();
$one.css('height', height);
If the height of the child of one may change, you could fix the height when you are hovering over the element, and set it to auto when you stop hovering.
var $one = $('.one');
var height = $one.height();
$one.on('mouseenter', function() {
$one.css('height', height);
});
$one.on('mouseleave', function() {
$one.css('height', 'auto');
});
You can set the height of the div on hover to the height when the scrollbar isn't there. Assuming that jQuery is ok:
$(document).ready(function() {
var oneHeight = $('.one').height();
$('.one').hover(
function(){ $(this).height(oneHeight); },
function(){ $(this).height(oneHeight); }
);
});
This does add an unfortunate vertical scrollbar, but if you want the vertical position to stay the same, you need to have the vertical bar to see the content that the horizontal scroll bar.
My solution is:add padding-bottom first ,it is as high as horizontal scroball,then when mouseover event happen,padding-bottom set zero.
I have 2 divs. Since div 1 could be longer, i.e. infinite scroll div, I want to make div 2 the same height with div 1 using javascript. I tried to use the code below, but it does not work. Why?
javascript:
<script type="text/javascript">
document.getElementById("div2").setAttribute("height",document.getElementById("div1").clientHeight);
</script>
my divs:
#div1 {
width: 700px;
background: #FFF;
overflow: hidden;
float: left;
}
#div2 {
width: 300px;
background-image: url(../images/user_panel.png);
background-repeat:repeat-y;
}
What about this:
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.style.height = div1.style.height; // Might have to add +"px" here.
Just from the top of my head.
This should do the trick:
document.getElementById("div2").style.height=document.getElementById("div1").clientHeight+'px';
the setAttribute function is a DOM function to add a new attribute to an HTML element. You are trying to add the height on a div. That would have the effect:
<div id="div2" height="...">...</div>
But HTML does not define such an height HTML element attribute.
What you are looking for is to set the style of the DOM element. That would be the style DOM element property. And inside the style you have the height property that you must set:
document.getElementById("div2").style.height = document.getElementById("div1").clientHeight + "px";
In the above code sample you might also think about div1's padding (probably bringing it into the computation). This is because clientHeight includes the padding but style.height does not.
The code I have below is supposed to find the height of the largest column (.border) and adjust the height of any other columns found within the .container div to equal it. Unfortunately, I haven't been able to get this code to work as intended so I'm hoping someone wiser than I could can help me out.
It's also worth mentioning that column height should be recalculated and columns resized respectively whenever the window has been resized.
<script type="text/javascript">
$(document).ready(function(){
//Bind the window onresize event
$(window).bind('resize', resizeWindow);
//Call resizeWindow() function immediately to intiially set elements
resizeWindow();
});
function resizeWindow(){
//Find all the container parent objects
$('.container').each(function(){
//Initialize the height variable
var maxHeight = 0;
//Cache the jQuery object for faster DOM access and performance
var $borders = $(this).find('.border');
//Find all the border child elements within this specific container
$borders.each(function(){
//Get current element's height
var thisHeight = $(this).height();
//Check if the current height is greater than the max height thus far
//If so, change max height to this height
if (thisHeight>maxHeight) maxHeight = thisHeight;
});
//Now that we have the maximum height of the elements,
//set that height for all the .border child elements inside the parent element
$borders.height(maxHeight);
});
}
</script>
<div class="container">
<a href="#" class="border">
<div class="column">
<div class="content">asdf</div>
</div>
</a>
<a href="#" class="border">
<div class="column">
<div class="content">asdf</div>
</div>
</a>
</div>
Use the jQuery equalHeights plugin:
http://www.cssnewbie.com/equalheights-jquery-plugin
$('.container .border').equalHeights(); // make all .border the same height
$(window).resize(function(){$('.container .border').equalHeights();});
See: http://jsfiddle.net/rZU35/
This is not exactly a solution to your JavaScript problem. This is a CSS solution, that doesn't need any JavaScript. Using those styles with your markup, both columns will always have the same height:
div.container {
display: table;
width: 100px;
}
div.container > a {
display: table-cell;
border: 1px solid red;
}
Demo
http://jsfiddle.net/wmbcr/
This will work upon resize too, if no fixed width is set.
I think you should provide an height to your DIV not the <a>.
Try this fiddle:
http://jsfiddle.net/ddFtX/1/
The JS code below is meant to get the height of the browser and the height of the .banner div. If the banner height is greater than the browser height, append two divs (.title and .social) to the body otherwise don't do anything and leave .title and .social divs where they are.
I'm also wanting the .title and .social divs to fade out when a user scrolls down the page and fade in when they get back to the top of the page.
The problem
This code does work but not all the time. Sometimes it will display correctly other times it won't. By that I mean the height of div.banner can be greater than the height of the browser window yet .title and .social will not be appended to the body. Is there anything wrong with this code that could cause this issue to occur?
$(document).ready(function () {
// fade in/fade out banner titles
$(window).trigger('scroll');
var divs = $('.social, div.banner .title');
$(window).scroll(function(){
if($(window).scrollTop() < 10){
divs.fadeIn("fast");
} else {
divs.fadeOut("fast");
}
});
// Position feature image title and social icons according to browser window height
var windowHeight = $(window).height(); // Gets browser viewport height
var bannerHeight = $(".banner").height(); // Gets .banner height
if (bannerHeight > windowHeight) {
$("body").append($('.banner .title'));
$("body").append($('.social'));
}
else {
//Display .title and .social in .banner div (as originally in HTML)
}
});
My HTML code that is on page load for reference:
<div class="banner y1">
<div class="title" id="feature-title">
<!-- title content here -->
</div>
<div class="social" id="feature-social">
<!-- social content here -->
</div>
</div>
If height changes on images you should use onload method.
http://api.jquery.com/load-event/
I'm writing my own small pager control in Javascript and jQuery and having trouble positioning it properly.
The pager is set to only be a specific width (340px in this case) which allows it to display roughly ten page buttons. If the user has selected a higher page, I'd like the reel to slide to the left and show the selected page in the center. Since the number of pages is set dynamically (I build the pager in js when the page is loaded) and their width is not constant (double-digit page number buttons are wider than single-digit buttons) how can I determine and then set the pager to the correct position?
I was attempting to use the following code:
(where my buttons are labeled "#Nav1", "#Nav2", etc...)
if (currentPage < 7) {
newPos = 0;
}
else {
newPos = $('#Nav' + (currentPage-5)).position().left;
}
$('#reel').animate({left: newPos*-1}, 700);
But the #reel div is wrapping so position().left doesn't return the position I need.
Suggestions?
Here is my HTML/CSS markup:
<style type="text/css">
div#pager div
{
display: inline-block;
}
#navContainer
{
width: 340px;
height: 28px;
overflow: hidden;
position: relative;
}
#reel
{
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="pager" class="buttons">
<div id="preButtons"></div>
<div id="navContainer">
<div id="reel">
</div>
</div>
<div id="postButtons"></div>
</div>
You'll need to manually give #reel a width equivalent to the number of items * the width of each item.
A dynamic way to do this is to load in all of the items, place them in a hidden, unbounded div, then set the width of #reel equal to the width of that div.
Try this before your carousel code:
var dummyDiv = $('<div id="dummy" class="buttons" style="position:absolute;display:none"></div>');
dummyDiv.appendTo('body');
dummyDiv.html($('#reel').html());
var reelWidth = dummyDiv.css('width');
$('#reel').css({'width':reelWidth});
This will allow you to dynamically set the width of the #reel div so it doesn't wrap without knowing the exact size of the contents statically.