We Keep Coding

JS - check if element's declared style property is set in vh

Say we have an element
<div class="vh-100">
Content
</div>
.vh-100 { height: 100vh }
How can I get to read that exact value 100vh, because
var computedHeight = window.getComputedStyle(element).height; // will simply return the `window.clientHeight` value in pixels in this case.
var styleAttributeHeight = element.style.height // will return '', which is empty
To put it simply, I need to find a way to determine if the value is set in vh because the child elements of the example <div class="vh-100"> have the box model broken and return incorrect offsetTop and offsetLeft for some reason.
I need a simple solution excluding checking the rules in the CSS file.
Here is a link to hopefully explain why I need this.

Directly no way, but i convert pixels to vh(1vh is 1/100 browser height). Here is code snippet, i hope it will help you.
/*var z = getComputedStyle(document.getElementsByClassName('deneme')[0],null).height.replace('px','');*/
/*var b = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);*/
//deactive variables for detailed usings.
var a = document.getElementsByClassName('sample')[0].clientHeight;
var b = window.innerHeight;
var c = Math.round((a / b) * 100) + "vh";
console.log(a)
console.log(b)
console.log(c)//it's your "vh"
.sample{
width: 10vw;
height: 1vh;
background:dodgerblue;
}
<div class="sample"></div>

if what you want is the unit of the height
yourElement.style.height
Normally it will return a string of height in it unit that you settled for the element (so '100vh' in your case).

How can I add value "auto" to a div?Jquery

CODE JS:
$('.i_admin_user a').click(function(){
var liHeight = $('.subMenu-1 > li').height() - 1;
var subMenuHeight = 344; //here I want auto value;
$(this).parent().siblings('li').children('.subMenu-1').animate({height:0},300);
$(this).siblings('.subMenu-1').animate({ height: subMenuHeight + 'px'},300)
.addClass('active-submenu');
if( $('.subMenu-1').hasClass('active-submenu')){
$(this).siblings('.subMenu-1').removeClass('active-submenu');
}else{
}
});
How can I modify my code so they accept and value "auto".
Basically I want instead of value 344 to put the value auto
I tried the next version but does not work (in this case the height of the return is 0)
var subMenuHeight = "auto";
Can you please tell me a solution to this problem?
Thank you!

If you want to set the height to auto, you'll have to remove px.
Like so:
var subMenuHeight = 'auto'; // auto value here
$(this).siblings('.subMenu-1').animate({ height: subMenuHeight},300).addClass('active-submenu');
If you don't remove px, it won't regonize auto, because the value is then autopx.

You can try this:
$(this).siblings('.subMenu-1').animate( height:auto},300).addClass('active-submenu');

Calculate the true pixel width of a given string

I want to calculate width in px for given text in span element. I check several answers in Stackoverflow. However nothing work for me :(. I am trying to figure out what I am doing wrong. Here is jsFiddle link. And here is code:
$.fn.textWidth = function(){
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(html_calc).css('font-size', this.css('font-size'));
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
var ts_name = $('span#ts_name');
var ts_name_text=ts_name.text().trim();
var ts_name_p_box_width = $('div#container-testset-name').innerWidth()-100;
var text_width = $(ts_name).textWidth();
My result for text_p_box_width is 737px and for text_width 715px. However it is clear from html view in Chrome browser text size is bigger than its container. SO what is my mistake? Thank you in advance.
P.S. If you need some clarification please leave as comment.
Edit: I saw similar answer of #LeeTaylor in other question. However it doesn't solve my problem. Because in my case text inside of span element. But in your case text inside of div. I can not change span's display property to block. So for my case this does not work. I tried to generate dynamically two elements using jQuery and try to fetch width. But it is 0. I found that since this dynamically created objects does not included to DOM tree and CSS not applied it will work.
`var ts_name=$('span#ts_name').text().trim();
var text_container = $(document.createElement('span')).html(ts_name).attr('id', 'input_text');
var block_container = $(document.createElement('div')).html(text_container).css({display:'block'});
block_container.css({width: '3000px'});
console.log($(block_container).find('span#input_text').width());
console.log($(block_container).find('span#input_text').outerWidth());
console.log($(block_container).find('span#input_text').innerWidth());
I did because I want to use your solution however it does not work. So do you have any idea on that?
SOLUTION: I figure out why my code is not working I just change only one value in css like this:
div#ts_designer>div#container-testset-name.c-group-inner-row span#ts_name
{
position: absolute;
left: 100px;
right: 0;
top: 0px;
bottom: 0;
width: auto!important;
white-space: nowrap; /*This line added*/
}
Here is updated jsFiddle link.
P.S. I will up vote your answers as reward to your answers. However I cannot accept one of them.

Have you tried using scrollWidth?
This might do what you want it to: http://jsfiddle.net/eJMAD/
scrollWidth might not work the same across all browsers though, so maybe someone else has a better solution more cross-browser friendly.

I use this utility function:
HTML:
<div>hello this is a test</div>
jQuery:
$.fn.textWidth = function()
{
var old = $(this).html();
$(this).html( $("<span>").html( $(this).html() ) );
var width = $(this).find("span:first").width();
$(this).html(old);
return width;
};
alert("Width of the text in the div = " + $("div").textWidth());
jsfiddle

Modify external CSS values

Hi I am trying to dynamicly change the height of a division using JavaScript but I can only get the JS to read the Height element of the div if it defined using style tags inside the HTML mark-up.
If its in a separate sheet it returns NaN, I'm assuming because it can't find a value and is actually returning null (I'm using ParseInt to make it work).
Here is the HTML:
<div id="dropdown_container">
<div id="dropdown" style="height:100px;">
a
</div>
</div>
(Wish the HTML stlye markup)
And here is the JS:
function clickDown() {
var el = document.getElementById('dropdown');
var maxHeight = 200;
getHeight = parseInt(el.style.height.substring(0,(el.style.height.length)-2));
console.log(getHeight);
getHeight += 2;
el.style.height = getHeight + 'px';
timeoutHeightInc = setTimeout('clickDown()',15);
if(getHeight >= maxHeight){
clearTimeout(timeoutHeightInc);
}
}
Does anyone know of a reason for this (mis?)functionaility. And a solution for it?
Here is a jsFiddle.
Try moving the height over to the CSS to see the issue i'm having.

ParseInt is missing it's radix.
You say:
I can only get the JS to read the Height element of the div if it
defined using style tags inside the HTML mark-up
Now you are only reading the div's attribute style. Which you set inline. So if you remove that, than you can not read it anymore. Make sense?
You want to get the computed height. Try: .offsetHeight
Basis of test-case to play with inc. fixed radix. this fiddle
UPDATE: tada: fixed, see this updated fiddle
function clickDown() {
var el = document.getElementById('dropdown');
var maxHeight = 200;
getHeight = parseInt(el.offsetHeight,10);
console.log(getHeight);
getHeight += 2;
el.style.height = getHeight + 'px';
timeoutHeightInc = setTimeout('clickDown()',15);
if(getHeight >= maxHeight){
clearTimeout(timeoutHeightInc);
}
}

How can I invoke a javascript function div upon divs overlapping

I have 2 divs, one positioned absolutely right: 0 and the other relatively positioned center screen. When the window's width is too small, they overlap. How can I invoke a javascript function when this happens?
Thanks.
Mike
Edited to make clearer.

To check for overlapping div's you might wanna do a check once the page is loaded, and whenever the window is resized:
window.onload = checkOverlap;
window.onresize = checkOverlap;
And then use some offset-checking:
function checkOverlap() {
var centerBox = document.getElementById('centerDiv');
var rightBox = document.getElementById('rightDiv');
console.log("centerbox offset left: " + centerBox.offsetLeft);
console.log("centerbox width: " + centerBox.offsetWidth);
console.log("rightbox offset left: " + rightBox.offsetLeft);
if ((centerBox.offsetLeft + centerBox.offsetWidth) >= rightBox.offsetLeft) {
centerBox.style.display = "inline-block";
} else {
centerBox.style.display = "block";
}
}
You might wanna do some more checks in the function, e.g. to see if the box is already displayed inline, and such. But that should give you a good place to start.
edit: added some diagnostics and fixed error

Part 1:
Do it like this:
<script type="text/javascript">
document.getElementById('example').style.display = "inline";
</script>
...
<div id="example"> ... </div>

document.getElementById('div_id').style.display = 'inline-block'
document.getElementById('div_id').offsetWidth gives us width of div
offsetHeight, offsetLeft, offsetTop are useful also.