How do I get the offset of an element from the right side, relative to the window?
I can only find jQuery solutions but I need a solution using vanilla JavaScript.
This is the solution using jQuery
var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
How do I translate this to vanilla JavaScript?
You could try using element.getBoundingClientRect() to achieve that behavior. If you wrote your code to use this instead of jQuery, it would look something like:
var rt = window.innerWidth - element.getBoundingClientRect().right;
You can get the width of an element using .innerWidth
You can get the offset values of a element using getBoundingClientRect()
You can get the outerWidth using offsetWidth
Porting your solution would be something like this:
window.innerWidth - (element.getBoundingClientRect().left + element.offsetWidth)
For more info you can check this link
You can get the offset left position using the .offsetLeft attribute on an element.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
For outer width see this answer:
outerWidth without jquery
So it would be written something like:
var rt = function() {
var someElement = document.getElementById('someID');
return window.innerWidth - (someElement.offsetLeft + someElement.offsetWidth);
}
Just grab the window size and subtract the x offset plus the width of the element you want to get the offset for.
function windowOffsetRight (ele) {
let rect = ele.getBoundingClientRect ();
let width = document.documentElement.getBoundingClientRect().width;
return width - ( rect.x + rect.width)
}
You just need to translate the jQuery functions in vanilla JS.
$window() // jQuery
window // Vanilla JS
$whatever // jQuery (probably a variable of $('.whatever'))
document.querySelectorAll('.whatever') // Vanilla JS
offset().left // jQuery
offsetLeft // Vanilla JS
outerWidth() // jQuery
offsetWidth // Vanilla JS
const el = document.getElementById('test');
console.log(window.innerWidth - (el.offsetLeft + el.offsetWidth));
<div id="test"></div>
Of course there are many other ways how to do it.
None of the above answers returned the correct value in my case, if there was scrolling involved. Here's what did the trick in my case:
var clientRect = document.querySelector("#element").getBoundingClientRect();
var offset = {
top: clientRect.top + window.scrollY,
left: clientRect.left + window.scrollX,
};
console.log(offset);
Related
I'm trying to code a scroll indicator progress bar in React. I have it working with Jquery but would like to know how to do it with pure Javascript.
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
handleScroll() {
var winHeight = $(window).height(),
docHeight = $(document).height(),
value = $(window).scrollTop(),
max, percent;
max = docHeight - winHeight;
percent = (value / max) * 100;
this.props.updatePercent(percent);
}
Also, should I bother doing this in pure Javascript? I've been told that Jquery should not be used used in React.
Is this the only place you used JQuery? If so, I'd recommend ditching it for pure javascript. Everything you can do with JQuery you can also do with React and pure JavaScript, and it's not worth the overhead here.
Here's a pure JavaScript version of your handleScroll function. Note that document height is notoriously annoying to compute, but I've taken the approach of this question (which just reproduces JQuery's implementation).
handleScroll() {
var winHeight = window.innerHeight;
// Annoying to compute doc height due to browser inconsistency
var body = document.body;
var html = document.documentElement;
var docHeight = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var value = document.body.scrollTop;
...
}
Update
If you want to get the scroll position within an element, you'll need something like
var el = document.getElementById('story_body');
var minPixel = el.offsetTop;
var maxPixel = minPixel + el.scrollHeight;
var value = document.body.scrollTop;
// respect bounds of element
var percent = (value - minPixel)/(maxPixel - minPixel);
percent = Math.min(1,Math.max(percent, 0))*100;
To answer your second question: In this particular case, you could just stick to jQuery (although I prefer the vanilla javascript version).
With react, it is perfectly OK to use jQuery for:
reading info from the real DOM, which are unknown to react (such as component height in the DOM, or scroll position in your case)
ajax stuff
With React, you should NOT use jQuery for:
Manipulating the DOM directly: only manipulate the DOM through react. (manipulating DOM with jQuery in react is a guarantee for big trouble)
Reading DOM info that can and should be known to react, such as value of an input field. (things do not really break, but it makes your react code harder to debug if you use jQuery to circumvent react's strict design guidelines)
In jQuery, I can very easily get the current computed height for an element that includes padding, border, and optionally margin by using outerHeight()...
// returns height of element + border + padding + margin
$('.my-element').outerHeight(true);
How would I do this in YUI? I'm currently using version 2.8.1.
Similar to this question, I can always do getComputedStyle() for height, border, padding, and margin, but that is a lot of manual labor which includes parsing the return values and grabbing the correct values that are needed and doing the math myself.
Isn't there some equivalent function to jQuery's outerHeight() in YUI that does all of this for me?
Solution
I ended up writing my own solution since I couldn't find a jQuery outerheight() equivalent. I've posted the solution as an answer here.
There is no built-in way of getting the outer width of an element with its margin in YUI. Like #jshirley mentions, there is offsetWidth, but it doesn't take margins into account. You can however create a function that adds the margin very easily:
Y.Node.ATTRS.outerHeight = {
getter: function () {
return this.get('offsetHeight') +
parseFloat(this.getComputedStyle('marginTop')) +
parseFloat(this.getComputedStyle('marginBottom'));
}
};
Y.Node.ATTRS.outerWidth = {
getter: function () {
return this.get('offsetWidth') +
parseFloat(this.getComputedStyle('marginLeft')) +
parseFloat(this.getComputedStyle('marginRight'));
}
};
Then you can get the outer width by doing Y.one(selector).get('outerWidth'). Here's an example based on #jshirley's code: http://jsbin.com/aretab/4/.
Just keep in mind that dimensions are usually a source of bugs in browsers and this doesn't take into account some stuff (ie: dimensions of the document) jQuery tries to catch (see https://github.com/jquery/jquery/blob/master/src/dimensions.js).
If you wanted to avoid the manual labor, wrap the element in a div and get the computed style of that.
If it's something you're doing more than once, create a function/plugin to reuse.
According to http://www.jsrosettastone.com/, you should be using .get('offsetHeight').
This example shows the equivalency: http://jsbin.com/aretab/1/edit
I ended up writing my own little utility function for this:
/**
* Calculates the outer height for the given DOM element, including the
* contributions of padding, border, and margin.
*
* #param el - the element of which to calculate the outer height
*/
function calculateElementOuterHeight(el) {
var height = 0;
var attributeHeight = 0;
var attributes = [
'height',
'border-top-width',
'border-bottom-width',
'padding-top',
'padding-bottom',
'margin-top',
'margin-bottom'
];
for (var i = 0; i < attributes.length; i++) {
// for most browsers, getStyle() will get us a value for the attribute
// that is parse-able into a number
attributeHeight = parseInt(YAHOO.util.Dom.getStyle(el, attributes[i]), 10);
// if the browser returns something that is not parse-able, like "auto",
// try getComputedStyle(); should get us what we need
if (isNaN(attributeHeight)) {
attributeHeight = parseInt(YAHOO.util.Dom.getComputedStyle(el, attributes[i]), 10);
}
// if we have an actual numeric value now, add it to the height,
// otherwise ignore it
if (!isNaN(attributeHeight)) {
height += attributeHeight;
}
}
return isNaN(height) ? 0 : height;
}
This seems to work across all modern browsers. I've tested it in Chrome, Firefox (idk about 3.6, but the latest version works), Safari, Opera, & IE 7,8,9. Let me know what you guys think!
I'm trying to get the value of an inherited CSS property using Javascript. I haven't been able to find a comprehensive answer.
Example CSS:
div {
width: 80%;
}
Example Markup:
<div id="mydiv"> Some text </div>
Using javascript (jQuery, or native), I need to get the width of the element-- not in pixels, but the string "80%".
$('#mydiv').css('width'); // returns in px
$('#mydiv')[0].style.width // empty string
getComputedStyle($('#mydiv')[0]).width // returns in px
The reason I need the value as a string is because I need to copy the style to another element. If it's declared as a percent, the other value needs to be a percent. If it's declared in px, the other value needs to be in px.
The real trick is that this property could be inherited, not declared explicitly on the element (as in my example).
Does anyone have any ideas?
What you are searching for is this quirksmode.org article. It proposes the function
function getStyle(el, styleProp) {
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}
Still, you should read that article carefully. They names of the styleProps are not really cross-browser, and you will see how different browsers handle this. Opera seems to have the best support for reporting the correct values.
There's no way to get the percentage value I'm afraid. You can try something like this:
var widthpx = getComputedStyle($('#mydiv')[0]).width;
var parentWidth = $('#mydiv').parent().css('width')
var width = ( 100 * parseFloat(widthpx) / parseFloat(parentWidth) ) + '%';
get the offSetWidth of the element, and the offsetWidth of its offsetParent, and calculate the percentage from the two integers.
This binds an event handler to an element for the click event and alerts the element's relative width compared to it's parent element.
$('#mydiv').on('click', function () {
//element width divided by parent width times 100 to make a percentage
alert(Math.round($(this).width() / $(this).parent().width() * 100) + '%');
});
Here is a demo: http://jsfiddle.net/X67p5/
I'm wondering how I can get the scale value of an element?
I have tried $(element).css('-webkit-transform'); which returns matrix(scaleX,0,0,scaleY,0,0); Is there a way of getting scaleX and scaleY only?
The simplest solution to find out the scale factor between the document and an element is the following:
var element = document.querySelector('...');
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;
This works because getBoundingClientRect returns the actual dimension while offsetWidth/Height is the unscaled size.
If it was specified by a matrix I guess you can't with a straightforward way, but you can easily parse the value:
var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,
matches = $(element).css('-webkit-transform').match(matrixRegex);
matches[1] will contain scaleX and matches[2] will contain scaleY. If it's possible that other transformations have also been applied, you'd need to slightly tweak the regex, because now it assumes that all other parameters are 0.
A way to just get the scale values might be to remove any transforms, measure the computed width/height of the element and then add them back and measure again. Then divide new/old values. Haven't tried it, but it might work. jQuery itself uses a similar approach for many measurements, it even has an undocumented $.swap() function just for this.
PS: You are using -o-transform -moz-transform and -ms-transform too, right?
If you need to target webkit only (because it's for the iPhone, or iPad) the most reliable and fast way is using the native javascript webkit provides:
node = $("#yourid")[0];
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
alert(curTransform.a); // curTransform is an object,
alert(curTransform.d); // a through f represent all values of the transformation matrix
You can view a demo here:
http://jsfiddle.net/umZHA/
You could use the following:
var element = document.getElementById("elementID");
// returns matrix(1,0,0,1,0,0)
var matrix = window.getComputedStyle(element).transform;
var matrixArray = matrix.replace("matrix(", "").split(",");
var scaleX = parseFloat(matrixArray[0]); // convert from string to number
var scaleY = parseFloat(matrixArray[3]);
// bonus round - gets translate values
var translateX = parseFloat(matrixArray[4]);
var translateY = parseFloat(matrixArray[5]); // parseFloat ignores ")"
Too late for the OP but might be useful in the future. There is a straightforward way to do it using splits:
function getTransformValue(element,property){
var values = element[0].style.webkitTransform.split(")");
for (var key in values){
var val = values[key];
var prop = val.split("(");
if (prop[0].trim() == property)
return prop[1];
}
return false;
}
This is webkit specific, but can easily be extended for more browsers modifying the fist line.
A more robust and generic way to get the scale :
const { width, height } = element.getBoundingClientRect()
const scale = { x : element.offsetWidth / width, y : element.offsetHeight / height }
It compares the visual dimensions with the non-scaled dimensions. So it will work even with nested scaled elements.
Using regex
element.style.transform.match(/scale\(([1-9\.])\)/)[1]
I am paging an HTML page. In order to compute the page break offsets more efficiently, I was wondering if it is possible to get the element containing a certain coordinate offset from the beginning of the page.
Thanks a lot in advance for your help,
Cheers!
You could do something like:
var offset = 100;
$(document.body).find('[offsetTop = '+offset']');
or
var offset = 100;
$("body *").filter(function () {
return this.offsetTop == offset;
});
since you said they're all top level elements, the following should also work:
$(document.body).children().filter(function () {
return this.offsetTop == offset;
});
You can also $(this).offset() to get the offsets. Using the offsetTop property only gets the offset from the parent I believe. But it may not matter since they are all top level elements.