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)
Related
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);
I'm using meteor for a quick site and I'm trying to make this div '#box' fit the viewport and then have the top cut off '#wrapping'. But all of these methods error or they fill the entire page instead of just the page size... So it'd be as tall as the viewport height is but you can scroll to the next page, (I'm doing a single page design) :)
var viewPortHeight = $(window).height();
$ '#box'.height() = $(Math.viewPortHeight - '#wrapping'.offset.top);
Firstly, as I pointed out in my comment. There are some syntax errors in your code here:
$ '#box'.height() = $(Math.viewPortHeight - '#wrapping'.offset.top);
We need parentheses around '#box' and '#wrapping', and you will want to user viewPortHeight other than Math.viewPortHeight (since there is no such property in the Math object):
$('#box').height() = $(viewPortHeight - $('#wrapping').offset.top);
There are still a few problems here. In jQuery when you assign a property like height you do it like so .height(newValue) and to get the height you do this .height():
$(...).height(newValue); // Sets the height to 'newValue'
$(...).height(); // Returns the height
What your doing in the code is this: $(...).height() = ... ; is not assignment, which is why you have your error. So you want to do it like in the example above:
var viewPortHeight = $(window).height();
$('#box').height( viewPortHeight - $('#wrapping').offset().top );
Here is an example with multiple pages
I'm working on a jQuery function to set the height of a div based on the height of the window and some other elements, and I noticed something strange. The outerHeight() function seems to accept an integer parameter, even though the documentation doesn't specify that one is allowed.
So this seems to work in both Chrome and Firefox:
var o_height = $("#content").outerHeight();
var n_height = $(window).outerHeight() - $("#nav").outerHeight();
if (n_height > o_height) {
$("#content").outerHeight(n_height);
}
The alternative is to calculate the padding and then subtract it, which is a few lines longer:
var o_height = $("#content").outerHeight();
var n_height = $(window).outerHeight() - $("#nav").outerHeight();
if (n_height > o_height) {
var padding = $("#content").outerHeight() - $("#content").height();
$("#content").height(n_height - padding);
}
What I'm wondering is whether it's safe to use the shorter version. I'll be doing stuff like this several times, so I'd rather cut down on the length of the script, but not at the cost of stability. Is this a stable, but undocumented feature, or do I just need to accept the extra weight in the function?
In case anybody else stumbles upon this, it appears that this functionality was actually added all the way back in 1.8.0 for both outerHeight and outerWidth, but that despite frequent reports, the documentation still hasn't been updated.
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 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.