I am having a div with a class name not having that id.
i need to set that div with browser window height usig Javascript or jquery..
<div class="abc">
some content
</div>
how i set height of the div?..
You can do this with jQuery and .height():
Specific height of 100px:
$('.abc').height(100);
For browser inner height, do:
$('.abc').height(window.innerHeight);
$('.abc').height($(window).height());
To make that responsive to changes in the browser height, do:
$(window).on('resize load', setHeight);
function setHeight() {
$('.abc').height($(window).height());
}
Use this:
$('.abc').height(value);
Just do-
$(document).ready(function(){
var height = $(window).height();
$(".abc").height(height);
});
Also make change in css -
.abc{
overflow: auto;
}
Used to css as like this
html, body{
height:100%;
}
.abc{
height:100%;
}
[Live demo][1]
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.
My div has a styling position:absolute, and as a result, it doesn't expand if the content is higher than it's height.
Therefore, I thought that a solution would be if I find what the is the actual content's height, and assign the height to the div with the position:absolute styling.
Any idea how to do it? or maybe an idea how to make an absolute div to expand according to its content.
Thanks in advance!
Element.scrollHeight should do the job.
Here's an awful way to get the height of the container. We're basically cloning the whole div, setting the position so that it has height, checking that height, and then removing it:
$(function () {
var clone = null;
alert( clone = $('.test').clone().css('position', 'static').appendTo(".container").height());
clone.remove();
});
Here's the fiddle: http://jsfiddle.net/vPMDh/1/
It should expand even if being absolute.
check you don't have a height: xxpx
if so, change it to min-height
As you've said "it doesn't expand if the content is higher than it's height." I guess you have a fixed height set on it.. if you do need this for some reason try using min-height instead.
Have a look at this fiddle.
<div class="classname">
Some content....
<p style="clear:both"> </p>
</div>
use a clearfix hack. heres the link
and add clearfix to you div
example
in your style sheet
<style>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
...
and in your div add clearfix the class
<div class="clearfix">
//some html tags
</div>
Thanks for contributing your question. If you use this:
$(document).ready(function(){
var x = $("#container").height();
alert(x);
//if not works then
var y = $("#container").outerHeight();
alert(y);
});
I think it is easy as clean code to find the height of any div if you do not apply the div's height too.
similar solution to #MattDiamant, but with vanilla JS and without creating a clone:
function getDivHeight(posAbsoluteDiv) {
const heightBackup = posAbsoluteDiv.style.height;
posAbsoluteDiv.style.height = 'auto';
const contentHeight = posAbsoluteDiv.getBoundingClientRect().height;
posAbsoluteDiv.style.height = heightBackup;
return contentHeight;
}
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/
I'm currently building a popup box script using css/jquery and i can't seem to get the div centered on the screen on all cases. It it possible to center it without knowing the div width?
Instead of posting all the code here i put up a live example at http://goo.gl/N45cp
Any kind of help is much appreciated!
Best Regards
John
<div id="wrapper">
<div id="child"></div>
</div>
If the position of the #child is not absolute, you can set left and right margins to auto:
#child {
margin: 0 auto;
}
Or if the position is absolute you can try the following:
$("#child").css("left", function(){
return ($("#wrapper").width() - $(this).width()) / 2;
});
You can achieve this with pure CSS if you have a containing div:
HTML
<div id="outer">
<div id="inner">some content here</div>
</div>
CSS
body, html, div#outer { height:100%; }
div#outer { text-align:center; }
div#inner { display:inline-block; }
http://jsfiddle.net/NjZbW/