I have a parent div with a fixed width and a fixed height.
The contents how ever might exceed this, so I am wondering is there a way in Javascript to calculate if the content exceeds the fixed dimensions?
An example would be like this:
<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">
A sentence that exceeds the width!
</div>
In the above case it does exceed the width. How would this be achieved in Javascript?
make a parent for your content:
<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">
<div id="parent">
A sentence that exceeds the width!
</div>
</div>
now you can get width and height of the parent and compare it with your main div:
var h = document.getElementById("parent").offsetHeight;
var w = document.getElementById("parent").offsetWidth;
You can use DOM properties of the div and text nodes. If you can wrap the text in a <span> element, it seems like it will be easier to work with the dimension properties.
html
<div id="container">
<span>A sentence that exceeds the width!</span>
</div>
css
div {
width:50px;
overflow:hidden;
white-space: nowrap;
}
js
var cont = document.getElementById('container');
var spn = cont.getElementsByTagName('span')[0];
//alert(cont.clientWidth);
//alert(spn.offsetWidth);
if(spn.offsetWidth > cont.clientWidth) {
alert("content exceeds width of parent div");
}
http://jsfiddle.net/Bn2Uc/2/
Related
Consider the following code segment:
<div class="col-md-12">
<div class="row">
<div class="col-md-9">
<div id="leftContentDiv" style="height:125px;">
...
</div>
</div>
<div class="col-md-3">
<div id="rightContentDiv">
...
</div>
</div>
</div>
</div>
The div container with id 'leftContentDiv' has a fixed height size; therefore the div container with id 'rightContentDiv' will adjust to the height size of the div container with id 'leftContentDiv' provided the div container with id 'rightContentDiv' does not have content that exceeds the height size of the div container with id 'leftContentDiv', since these div containers are on the same row.
That being said, may one display a overflow-y when the div container with id 'rightContentDiv' begins to exceed the height size of div container with id 'leftContentDiv' instead of adjusting these div containers to the height size of the div container with the greatest height size.
For example:
HTML:
//replace <div id="rightContentDiv"> with <div id="rightContentDiv" [ngClass]="displayVerticalScroll">
CSS:
.vertical-scroll {
overflow-y: scroll;
}
TS:
public displayVerticalScroll(): string {
let leftContentDivHeight = document.getElementById('leftContentDiv').clientHeight;
let rightContentDivHeight = document.getElementById('rightContentDiv').clientHeight;
if (leftContentDivHeight < rightContentDivHeight) {
return 'vertical-scroll'
}
}
Please advice if this is feasible or perhaps I should approach this differently.
Declare one variable in the component
verticalScroll:boolean = false;
public displayVerticalScroll(): string {
let leftContentDivHeight = document.getElementById('leftContentDiv').clientHeight;
let rightContentDivHeight = document.getElementById('rightContentDiv').clientHeight;
if (leftContentDivHeight < rightContentDivHeight) {
this.verticalScroll = true;
}
}
In your HTML
<div id="rightContentDiv" [ngClass]="{overflowclass:verticalScroll}">
I have main div(parent) with class .box and in which more than one (no limit)child div with class .abc,
so how can we only select those child div which are occur after 400px height of parent div.
Means,no all child div are select but only select those are after 400px height of parent div.
though,parent div height is not fix.
<div class="box">
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
.......Unlimited div occure
</div>
One suggestion is to add a class name to them by taking their .position().top:
$('.box').find('.abc').addClass(function(){
return $(this).position().top >== 400 ? "pick" : "";
});
var picks = $('.box').find('.abc.pick'); // gives you all the divs whose
// position top is >= 400px
You can use position() to detect top position of an element depending on its parent.
$(".box .abc").each(function(){
var topPos = $(this).position().top;
if(topPos>400){
$(this).addClass("masked")
}
});
Please see this Fiddle
I have a div element with vertical scrolling. It has span elements with text in it. How can I get the coordinates of these span elements. But I don't want it relative to the scroll position.
For example, in the div, lets say its 400px width, 1000px in height (but the view height is 500px), and its scrolled half way vertically. Then in the center of the view, I see a text, and if I click on it, I want the coordinate like (200, 250)
How can I get coordinates that are absolute to the div container?
Use element.getBoundingClientRect? (Subtract the container's top if you want it relative to the container.)
function client() {
alert(document.getElementById('child').getBoundingClientRect().top);
}
function local() {
var container = document.getElementById('container');
var containerRect = container.getBoundingClientRect();
var child = document.getElementById('child');
var childRect = child.getBoundingClientRect();
localTop = childRect.top - containerRect.top;
alert(localTop);
}
#container {
height: 100px;
overflow:scroll;
border:1px solid red;
margin-top:100px;
}
#child {
background: yellow;
}
<div id="container">
<div>Test</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div>
<div id="child">Item of interest</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div>
</div>
<button onclick="client()">Global top</button>
<button onclick="local()">Local top</button>
Let's say the scrollable div has an id of 'myDiv' and one element inside the div has an id of 'element1'. To find its true 'top' value in javascript try this:
alert($('myDiv').css('top') + $('element1').css('top'));
Here is my sample code
<div id="one">
height based on screen
<div id="two">
height based on id="one"
<div>
height based on id="two"
</div>
</div>"
</div>
html, body { height:100%; }
#one { height:some%; }
#two { height:some%; }
CSS - no JS needed here (unless you want to change the heights later).
Simply use $(this).parent().height(); for every div
Set Height and width in %. It will take the parent div's Height and Width.
My page is divided into left and right divs, the right div has a border left partitioning the two. if the height of the right box is bigger then left, it works fine. However if the left box height is more, then the border is only halfway.
How can i resize the height of the right box based on the height of entire screen so that the border runs all the way to the end.
You can provide height to your right div like, place a id ( like rightDiv ) there if not (in jQuery).
$('#rightDiv').height($(window).height());
if you want to height of your entire document use:
$('#rightDiv').height($(document).height());
$(window).height() will retrun available browser window height.
$(document).height() will retrun document height.
or you can make a comparison:
var doc = $(document);
var win = $(window);
var maxHeight = doc.height() > win.height() ? doc.height() : win.height() ;
$('#rightDiv').height(maxHeight);
You have min-height, for animate height you can try:
$('#rightDiv').animate( { height : maxHeight}, <duration>);
<duration> is optional, you can provide here 'slow', 'fast', miliseconds
Another solution would be this pure CSS one: http://jsfiddle.net/zgMv5/
You put around the left and the right div another <div> and use it as CSS table row. Then the 2 containing <div> will be the same height.
<div id="outer">
<div id="left">This is some text.</div>
<div id="right">This is some text.</div>
</div>
The corresponding CSS would look like this:
div#outer {
display:table-row; }
div#outer > div {
display:table-cell; }
div#left {
border-right:1px solid red; }
I am not sure about the compatibility with old browsers...