So my objective is to get the height of an element whith the px.
I already know my height value, but does not bring the xp.
This is what i have done to get my value :
let elemHeight = document.querySelector(".user-name").clientHeight;
console.log(elemHeight);
I need some help figuring out how to get the px.
Thank you !
Try this:
var css = document.querySelector('.user-name');
console.log(window.getComputedStyle(css).height);
The clientHeight is the px value so using concatenation you can just do the following:
let elemHeight = document.querySelector(".user-name").clientHeight;
let elemHeightPx = elemHeight + 'px';
console.log(elemHeightPx);
<div class="user-name">
Show me the px value in the box below!
</div>
Related
I have a input type text
<input type="text">
Basically I am using javascript ClientRect to get caret details. ClientRect looks like this
[object ClientRect]
{
[functions]: ,
__proto__: { },
bottom: 540.7999877929687,
constructor: { },
height: 24,
left: 1034.5399169921875,
right: 1034.5399169921875,
top: 516.7999877929687,
width: 0
}
This is generated on everytext input.
left: 1034.5399169921875,
left: 1065.5399169921875,
left: 1078.5399169921875,
I want to convert this number to CSS units like px/%/rem/vh. So that I can put dynamic css. How to do it?
Try accessing the left position of your input and subtract the left position of your caret. This should give you an approximate width of the text in the input, if that's what you are looking for. You'll need to add an id or create a selector for your text input.
var inputElementRect = document.getElementById('YOURINPUTID').getBoundingClientRect()
var width = inputElementRect.left - caretRect.left
Those values are px by default .. so just add suffix as px to that value and use it.
<input type="text">
to get that value
let text = document.querySelector('input');
let values = text.getBoundingClientRect();
let top_value = values.top + 'px';
let bottom_value = values.bottom + 'px';
let width_value = values.width + 'px';
let height_value = values.height + 'px';
console.log('top: '+ top_value);
console.log('bottom: '+ bottom_value);
console.log('width: '+ width_value);
console.log('height: '+ height_value);
here properties other than width and height are relative to the view port ( top, bottom, left, right ) ,
so if scroll this values will changes ..
to get the perfect values even if scroll add this values with window.scrollX , window.scrollY or can use window.pageXOffset , window.pageYOffset
So if I understand the question correctly, you have position values for the cursor inside of the input and you want to convert it into different types of CSS units, presumably so you can do something to the input or related things
The first thing to understand is that ClientRect positions are relative to the viewport. So as vhutchinson pointed out, if you want the width of text you need to compare to the input's "left" value as defined by getBoundingClientRects. That's a good start, but if you're not just influencing left but also care about top, you need to account for scrolling. If your window/page is the only scrolling container, you should be able to do this simply by adding window.scrollY to top, and window.scrollX to left to understand your offset relative to the window.
All of these units are pixels by default... if you want to convert to rem it's pretty straightforward, 1 rem = the font-size of your root element, so to convert to rem you can do something like
var remBase = parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size'), 10);
var remValue = (myComputedPixelValue / remBase) + "rem";
Doing VW is similar using the answer in Get the browser viewport dimensions with JavaScript for cross-browser window dimensions, you'd end up with something that looks like
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var vwValue = (myComputedPixelValue / viewportWidth) + "vw";
Percentages are trickier, because you'd need to compute it based on the parent of the element you're applying the css value to, but the general idea follows the same principle.
setInterval(function() {
var divPosition = $('div').position();
console.log('X: ' + divPosition.left + ", Y: " + divPosition.top");
}, 500);
So I can get the x and y position of this div. left/top but it's a square div on the page. I'm also tracking a section tag that flies around the page, I want to basically do if (_thesectiontag_.left == _thesquarediv_.left || _thesectiontag_.top == _thesquarediv_.top) ... do something so if the section tag is within the div coordinates on the page do something.
But I need to get the full dimensions of the square to be able to do that. I'm a bit lost on where to start and how to go about it.
Can anyone offer some help? Thank you!
Use this two code :
For the Width and Height includes padding :
var Height = document.getElementById('square').clientHeight;
var Width = document.getElementById('square').clientWidth;
For the Width and Height includes padding, scrollBar and borders :
var Height = document.getElementById('square').offsetHeight;
var Width = document.getElementById('square').offsetWidth;
$('div').height($('div').width());
I have used two div element. The below structure I have used.
<div id="firstelement" style="width:681px; height:401px">
<div id="secondelement" style="width:50%;height:50%;"></div>
</div>
I need to get the exact width("340.5px") of second div in IE8. How can I get it using JavaScript?
Tried like below
$("#getWidth").click(function(){
var ele = document.getElementById("secondelement");
var box = ele.getBoundingClientRect();
alert("Width = "+ box.right - box.left); // Integer value returned.
});
Can you please give your suggestion to resolve this issue?
Try this:
var rect = $("#secondelement")[0].getBoundingClientRect();
var width;
if (rect.width) {
// `width` is available for IE9+
width = rect.width;
alert(width)
} else {
// Calculate width for IE8 and below
width = rect.right - rect.left;
alert(width)
}
DEMO: http://jsfiddle.net/ishandemon/7s6Lta50/
This is my progress bar http://jsfiddle.net/vjNpj/2247/ , I want the span (percentage value) can change together when the width of the div changed. like when the width is 50%, the span will display 50%..
what I can think of is attr(), but how to get its value?
I tried this but not working
var percent = $('#progressbar > div').attr('width');
alert(percent);
Lets understand this first
The difference between .css(width) and .width() is that the latter
returns a unit-less pixel value (for example, 400) while the former
returns a value with units intact (for example, 400px). The .width()
method is recommended when an element's width needs to be used in a
mathematical calculation.
So you can do,
alert($('#progressbar > div').css("width")); // 388
alert($('#progressbar > div').prop("width")); // 388px;
Fiddle for more understanding
Here is a JSFIDDLE that achieves what you are after
$progress_bar = $('#progressbar');
var progressbar_width = Math.floor(100 * ($progress_bar.find('div').width()) / $progress_bar.width())
$progress_bar.find('span').text(progressbar_width + '%')
You will have to call this code everytime you update the width of the progress bar.
var percent = $('#progressbar > div').width();
or
var percent = $('#progressbar > div').css('width');
alert(percent);
demo
Hey width is an attribute just like value is an attribute, so you may only want to get width not value of width.And for that I recommend answer by amit aggarwal.
You need to do some mathematical calculation for this work -
var percent = $('#progressbar div').width();
var Percent_Load = parseInt((percent * 100)/ $('#progressbar').width(), 10)
alert(Percent_Load);
Try This
I'm thinking of implementing a custom auto-complete feature so basically my idea now is that i will make an abs positioned div and give it the position here:
(image) http://i.stack.imgur.com/3c5BH.gif
So my question is with a variable referencing the textbox, how do i get the x and y position directly under the left bottom side of the input rectangle?
My script must work in latest versions of IE / FF / Safari / Opera / Chrome
I know i can use a library to do it, but no i'm interested in learning how do they do it (or maybe better ways)?
This question is a lot more complicated than it seems and involves getting the position of the element relative to the document. The code to do so can be pulled from the jquery source (http://code.jquery.com/jquery-1.6.1.js -- search for "jQuery.fn.offset")
in jQuery:
var node = $('#textbox'),
pos = box.offset(); // the complicated piece I'm using jQuery for
node.top += node.height(); // node.offsetHeight without jQuery
node.left += node.width(); // node.offsetWidth without jQuery
The answer can be extremely simplified if you don't care about FF2 or Safari3:
var box = document.getElementById('yourTextBox').getBoundingClientRect(),
left = box.left,
bottom = box.bottom;
x = x offset
y = y offset - ( textbox height +
padding-top + padding-bottom )
Good comments! For my scenario, there is always an offset parent (which is why I use position - http://api.jquery.com/position/). In hopes that it might help someone else wanting a quick fix, here's the code:
// I have a parent item (item) and a div (detail)
// that pops up at the bottom left corner of the parent:
var jItem = $(item);
var pos = jItem.position();
var marginTop = parseInt(jItem.css('margin-top'));
if (isNaN(marginTop)) {
marginTop = 0;
}
$(detail).css("top", pos.top + jItem.outerHeight() + marginTop)
.css("left", pos.left);
$(detail).show();
Just give the box a defined width and height. Then, get its top and left property and add it with the width and height. Simple. I am gonna give you Pseodocode.
<STYLE>
object{width: 100px; height: 20px;}
</STYLE>
<SCRIPT>
x = object.left;
y = object.top;
x = x + object.width;
y = y + object.height;
</SCRIPT>