This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Determine whether element has fixed or percentage width using JavaScript
I need to know if an element has a fluid width or not. I can go into the hairy details of why if it's really needed, but I dont think it is.
Basically, is the element N% width or Npx|pt|em|etc width? Right now I only see ways to get the current computed width. So, even if an element is 100% wide, getting the value in JS returns, like, 500px or however wide it is at that moment.
Are there any hacks or JS API's I dont know about to know this or to get the original CSS value?
Also, please no jQuery. This is for a JS library of mine.
You need to use window.getComputedStyle for those browsers that support it, and element.currentStyle for those that support that. Or you could use jQuery $(element).css('width') which should abstract the difference (although I haven't tested the latter).
It seems the following does not do what I had thought it would, at least not for width and height. After searching around I found this other SO question where it is stated to be impossible (at least not without parsing the Stylesheet?!). Seems mad to me, I shall keep looking just in case.
get CSS rule's percentage value in jQuery
if( window.getComputedStyle ) {
value = window.getComputedStyle(element,null).width;
} else if( element.currentStyle ) {
value = element.currentStyle.width;
}
update
I've found that this works...! but only for firefox :( To me it would make sense that if the element has nothing to compute it's width against (i.e. it's not part of the document flow) it should return it's original value:
function isElementFluid(elm){
var clone = elm.cloneNode(false);
if( window.getComputedStyle ) {
value = window.getComputedStyle(clone,null).width;
} else if( clone.currentStyle ) {
value = clone.currentStyle.width;
}
return (value && String(value).indexOf('%') != -1 );
}
(have not tested for IE)
Yet again another instance of where I agree with FireFox's implementation and frown at Chrome or Safari.
update 2
Ok, not a fan of being defeated by computers ;) so have come up with this function -- totally over the top, but it does seem to work. Again I have yet to test this on IE as I don't have a Windows machine to hand at the moment. It's annoying when the original FF only version is quite succinct, but the logic here is sound - it falls back to what a normal human would do in testing if something is stretchy.
function isElementFluid(elm){
var wrapper, clone = elm.cloneNode(false), ow, p1, p2;
if( window.getComputedStyle ) {
value = window.getComputedStyle(clone,null).width;
} else if( clone.currentStyle ) {
value = clone.currentStyle.width;
}
/// the browsers that fail to work as Firefox does
/// return an empty width value, so here we fall back.
if ( !value ) {
/// remove styles that can get in the way
clone.style.margin = '0';
clone.style.padding = '0';
clone.style.maxWidth = 'none';
clone.style.minWidth = 'none';
/// create a wrapper that we can control, my reason for
/// using an unknown element is that it stands less chance
/// of being affected by stylesheets - this could be improved
/// to avoid possible erroneous results by overriding more css
/// attributes with inline styles.
wrapper = document.createElement('wrapper');
wrapper.style.display = 'block';
wrapper.style.width = '500px';
wrapper.style.padding = '0';
wrapper.style.margin = '0';
wrapper.appendChild(clone);
/// insert the element in the same location as our target
elm.parentNode.insertBefore(wrapper,elm);
/// store the clone's calculated width
ow = clone.offsetWidth;
/// change the wrapper size once more
wrapper.style.width = '600px';
/// if the new width is the same as before, most likely a fixed width
if( clone.offsetWidth == ow ){
/// tidy up
elm.parentNode.removeChild(wrapper);
return false;
}
/// otherwise, calculate the percentages each time - if they
/// match then it's likely this is a fluid element
else {
p1 = Math.floor(100/500*ow);
p2 = Math.floor(100/600*clone.offsetWidth);
/// tidy up
elm.parentNode.removeChild(wrapper);
return (p1 == p2) ? Math.round(p1)+'%' : false;
}
}
else {
p1 = (value && String(value).indexOf('%') != -1);
return p1 ? value : false;
}
}
You can retrieve the CSS value with:
element.style.width
which will return:
auto - The browser sets the width. This is default
length - Defines the width in length units
% - Defines the width in % of the parent element
inherit - The value of the width property is inherited from parent element
Return values pasted from: http://www.w3schools.com/jsref/prop_style_width.asp
i think what your looking for is getComputedStyle
it isn't supported in IE8 and below, but u can emulate it IE see: http://snipplr.com/view/13523/
Related
Short version of the question
Is it possible to find only elements on a page that have a background-image or background: url set (including in stylesheets) without looping through every element on the page and using getComputedStyle(el);.
If not is it possible to optimise the elements I look through to reduce JS execution time?
Longer version of the question
As part of this related question I am trying to find a solution to gathering the size of all elements above the fold that may impact the "visually complete" state of the page.
The related question covers checking all CSS etc. is loaded so I am left with images (including background images) to check.
I am looking to make the following functions as performant as possible (as I may have to call it multiple times if I am unable to solve the main problem in the other question).
The main function is getRects(). I have included the checkRectangle function for completeness but the main concern is the way I am gathering candidates for the checkRectangle function (having to loop through every element on the page).
var doc = window.document;
var browserWidth = window.innerWidth || doc.documentElement.clientWidth;
var browserHeight = window.innerHeight || doc.documentElement.clientHeight;
function checkRectangle(el){
var rtrn = false;
if (el.getBoundingClientRect) {
var rect = el.getBoundingClientRect();
//check if the bottom is above the top to ensure the element has height, same for width.
//Then the last 4 checks are to see if the element is in the above the fold viewport.
if (rect.bottom <= rect.top || rect.right <= rect.left || rect.right < 0 || rect.left > browserWidth || rect.bottom < 0 || rect.top > browserHeight) {
rtrn = false;
}else{
rtrn = {};
rtrn.bot = rect.bottom;
rtrn.top = rect.top;
rtrn.left = rect.left;
rtrn.right = rect.right;
}
}
return rtrn;
}
//function to get the rectangles above the fold (I do other things to check fonts are loaded etc. so images are the only thing left to check)
function getRects(){
var rects = [];
var elements = doc.getElementsByTagName('*');
var re = /url\(.*(http.*)\)/ig;
for (var i = 0; i < elements.length; i++) {
var el = elements[i];
var style = getComputedStyle(el);
if(el.tagName == "IMG"){
var rect = checkRectangle(el);
if(rect){
//The URL is stored here for later processing where I match performance timings to the element, it is not relevant other than to show why I convert the `getBoundingClientRect()` to a simple object.
rect.url = el.src;
rects.push(rect);
}
}
//I also need to check for background images set in either CSS or with inline styles.
if (style['background-image']) {
var rect = checkRectangle(el);
if(rect){
var matches = re.exec(style['background-image']);
if (matches && matches.length > 1){
rect.url = matches[1].replace('"', '');
rects.push(rect);
}
}
}
}
Concerns / things that I can't work out
I see no way of not looping through all elements on the page and using getComputedStyle(el) to check if they have a background-image set. If I can reduce the candidates sufficiently that would solve my problems.
At the moment (due to having to call the function multiple times) I am not doing a check for background: url but that needs adding in as an efficient way as possible.
Is there a way of discarding some elements on the page that I can guarantee are not "above the fold" that wouldn't carry a massive performance penalty (bearing in mind anything could be position: fixed at the top of the page?).
Things I know I can do
If I can find a better way of checking for background and background-image then I know images become easier as I can use querySelectorAll and limit that list.
Additional information / thoughts
I am already tracking every network request using PerformanceObserver.
Is there perhaps a way I could look at every request, grab the file name if it is an image and then use the filename to work out where that image is displayed on the page, even if it is a background-image or background: url set in external CSS?
Alternative way of phrasing the question.
How could I possibly limit a list of elements that can make a network call for an image and how can I then check if they are above the fold as efficiently as possible?
EDIT: I've simplified the code (below and in fiddle) down to the major problem needed to be solved in hope of creating more readability.
I've implemented Bader's solution for correctly using getBoundingClientRect value and using document.querySelector for getting both the class name and the html tag needed for the function. I'd now like to move on to the last five lines of the code beginning with var = style.
I've now corrected the math for the final two variables.
→ I'm trying to achieve creating a snapping function for use alongside Plumber, a baseline-grid Sass plugin.
Basically, I have a vertically centered flex item that needs to -- instead of being perfectly centered -- snap in an upward direction to the closest grid line. This will allow me to have a consistent vertical rhythm between slides in a custom mobile-based experience.
I'm using getBoundingClientRect to calculate the distance between the bottom of an object, and the top of the window.
Then I use Math.floor to round down to the nearest multiple of my rem value.
Then I use this new value to create a CSS bottom margin on the flex-centered container for the alignment fix.
(Then to finish, I'd like to have this function load on $(document).ready and on window resize.)
function() {
var box = document.querySelector('.box-1');
var rect = box.getBoundingClientRect();
var bottomOrig = rect.bottom;
var htmlRoot = document.querySelector('html');
var style = getComputedStyle(htmlRoot);
var remValue = style.getPropertyValue('font-size');
var bottomNew = Math.floor(bottomOrig / remValue) * remValue;
var fix = bottomOrig - bottomNew;
$('.container-2').css("margin-bottom", "fix + 'px'");
}
Here's the fiddle.
I most likely have a syntax problem here, and would greatly appreciate help.
Thanks!
Here are some errors / corrections.
GetBoundingClientRect() is a JS function, not jQuery, so it must be used on a javascript element, not a jquery selector. Using the [0] accessor on the jquery selector (if that's how you want to get it) will give you the JS element.
Also noticed that you were trying to select the "html" tag by id, but it doesn't have any Id. Changed it to getElementsByTagName.
var offsetYOrig = $('.box-1')[0].getBoundingClientRect().bottom;
// or, without jQuery:
// var offsetYOrig = document.getElementsByClassName('box-1')[0].getBoundingClientRect().bottom;
var html = document.getElementsByTagName("html")[0];
var style = window.getComputedStyle(html);
var remValue = style.getPropertyValue('font-size');
Edit: Regarding your edit, if you need to call the javascript to recompute on window resize, you may want to try something like this. I'm not sure if it achieves what you want fully (I don't completely understand your 'snapping' requirements, but this will at least call the code again. You may still have to edit the code in the snapFunction if it doesn't suit your needs.
I added some console logs that might help you check your math as it seemed a bit problematic to me, though I was unsure how to fix it because I don't understand your goal.
function snapFunction ()
{
var box = document.querySelector('.box-1');
var rect = box.getBoundingClientRect();
var bottomOrig = rect.bottom;
var htmlRoot = document.querySelector('html');
var style = getComputedStyle(htmlRoot);
var remValue = style.getPropertyValue('font-size');
var bottomNew = Math.floor(bottomOrig / remValue) * remValue;
var fix = bottomOrig - bottomNew;
// open your browser console and check the value of these to check your math and what values you're getting
console.log("bottomOrig: " + bottomOrig )
console.log("remValue: " + remValue)
console.log("bottomNew: " + bottomNew )
// note: no quotes around your variable name fix here
$('.container-2').css("margin-bottom", fix + "px");
};
// call on load
(function() {
snapFunction();
})();
// call on resize
$( window ).resize(function() {
snapFunction();
});
I did notice that the value of your bottomNew variable was logging as "NaN" (Not a Number) so I think something is going wrong there.
I think you're getting a font-size like "36px" instead of just "36". Maybe you could try
var remValue = parseInt(style.getPropertyValue('font-size'), 10);
The 10 in that parseInt function is just specifying we want to use base 10 numbers.
I hope this will help you
Here's the edited fiddle
jsfiddle.net/ztf64mwg/82/
I just edited some variables and fixed some of the errors
I ended up jumping on HackHands and, with help, came up with a great working solution.
This will snap any vertically flex-centered object to a grid with its size set as 1rem.
All you need to do is give the object that is being measured for distance the id attribute "measure", making sure that this object is aligned correctly with a 1rem grid from the top of its own container.
Then give the parent container (or any container higher in the DOM tree) that you'd like to snap to the grid the class of "snap".
If anyone ever finds a use for this and needs further explanation, just let me know.
function snap(object){
var rect = object.getBoundingClientRect();
var bottomOrig = rect.bottom;
var htmlRoot = document.querySelector('html');
var style = getComputedStyle(htmlRoot);
var remValue = parseInt(style.getPropertyValue('font-size'));
var bottomNew = Math.floor(bottomOrig / remValue) * remValue;
var topFixPositive = bottomNew - bottomOrig;
var topFixNegative = -Math.abs(topFixPositive);
$(object).closest('.snap').css("margin-top", topFixNegative);
}
function snapClear(object){
$(object).closest('.snap').css("margin-top", "0");
}
var measureHome = document.querySelector('#measure');
snap(measureHome);
$(window).on('resize', function() {
snapClear(measureHome);
snap(measureHome);
});
i have this script for virtual scroll and for some reason after about 68500 rows it breaks in Internet Explorer 11,but works in FF and Chrome...
https://jsfiddle.net/dLq2284r/5/
at the end you can see the rows overlap .., but only after over 65k rows
i think something is wrong here:
positionPage: function(inPage)
t is getting quite big :) over 1535274
so i think setting a css top : 1535274px; or more is the problem, but i might be wrong :D
positionPage: function(inPage) {
var pn = inPage.pageNum;
if (this.fixedHeight) {
t = pn * this.rowHeight * this.pageSize;
} else {
if (this.pageTops[pn]) {
t = this.pageTops[pn];
} else {
var n = 0, t = 0;
while (n < pn) {
t += this.getPageHeight(n);
n++;
}
}
}
var t0 = inPage.style[this.horiz ? 'left' : 'top'].slice(0, -2);
// update pageTops cache
this.pageTops[pn] = t;
this.pageTops[pn+1] = t + this.getPageHeight(pn);
// set the page's top
inPage.style[this.horiz ? 'left' : 'top'] = t + 'px';
if (t0) {
return t0 - t;
}
}
I have tried everything... any help, hints or anything will be appreciated.
I use this for a database with over 90k rows and i would love it to work on IE for at least 100k rows.
Also don't suggest frameworks or anything else, i have tried them all
Thanks
IE has a long way to go before can compete with other browsers .. So to answer my own question, based on #Sam Segers comment and my research it seems that after a specific height IE has a height miscalculation, based on
Determine Maximum Possible DIV Height
IE can handle about 10M pixels, but after about 1.5M it is not accurate, for example my element had a style top: 1535274px; and the browser was adding the content at 1534484px, so 790px higher, and my js stop working after that point. And since until that height everything was ok i concluded that my script is doing it's job.
I just added a warning in my script to let the IE users know that after that height results are not accurate and to use another browser.
Thank you for your help
I'm try to get the browser viewport size.
When the page initially loads (in jQuery(function() { .. });) , both these show the correct value (eg: 560):
console.log($(window).height());
console.log(document.documentElement.clientHeight);
But later when I do the same thing, it shows the height of the whole docoument (eg: 11675).
There's a lot of HTML and JS and it would take a while to figure out what's going on, I was just wondering, did anyone see anything like this, if so, what can cause it and how can I get the correct size of the viewport? All google hits show that's the correct way to retrieve the value.
Note: I'm using chrome.
I recently bumped into the same problem in one of my projects. I didn't have time to dig and isolate this weird bug, and I ended up using this function (adapted from this answer) to correctly get the viewport dimensions :
var getViewportSize = (function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
return function(){
return {
w : Math.max(w.innerWidth || e.clientWidth || g.clientWidth, app.config.minWidth),
h : Math.max(w.innerHeight|| e.clientHeight|| g.clientHeight, app.config.minHeight)
};
}
})();
From what I've tested, jQuery returned the incorrect size when the console or some other browser extension/toolbar was occupying some of the viewport space.
Hope this helps, but I'm also curious and trying to figure this one out, because it's hard to think that a mature lib such as jQuery 2.0 has these kind of bugs.
I'm trying to detect the position of the browser's scrollbar with JavaScript to decide where in the page the current view is.
My guess is that I have to detect where the thumb on the track is, and then the height of the thumb as a percentage of the total height of the track. Am I over-complicating it, or does JavaScript offer an easier solution than that? What would some code look like?
You can use element.scrollTop and element.scrollLeft to get the vertical and horizontal offset, respectively, that has been scrolled. element can be document.body if you care about the whole page. You can compare it to element.offsetHeight and element.offsetWidth (again, element may be the body) if you need percentages.
I did this for a <div> on Chrome.
element.scrollTop - is the pixels hidden in top due to the scroll. With no scroll its value is 0.
element.scrollHeight - is the pixels of the whole div.
element.clientHeight - is the pixels that you see in your browser.
var a = element.scrollTop;
will be the position.
var b = element.scrollHeight - element.clientHeight;
will be the maximum value for scrollTop.
var c = a / b;
will be the percent of scroll [from 0 to 1].
document.getScroll = function() {
if (window.pageYOffset != undefined) {
return [pageXOffset, pageYOffset];
} else {
var sx, sy, d = document,
r = d.documentElement,
b = d.body;
sx = r.scrollLeft || b.scrollLeft || 0;
sy = r.scrollTop || b.scrollTop || 0;
return [sx, sy];
}
}
returns an array with two integers- [scrollLeft, scrollTop]
It's like this :)
window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
console.log(scroll)
});
Answer for 2018:
The best way to do things like that is to use the Intersection Observer API.
The Intersection Observer API provides a way to asynchronously observe
changes in the intersection of a target element with an ancestor
element or with a top-level document's viewport.
Historically, detecting visibility of an element, or the relative
visibility of two elements in relation to each other, has been a
difficult task for which solutions have been unreliable and prone to
causing the browser and the sites the user is accessing to become
sluggish. Unfortunately, as the web has matured, the need for this
kind of information has grown. Intersection information is needed for
many reasons, such as:
Lazy-loading of images or other content as a page is scrolled.
Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't
have to flip through pages.
Reporting of visibility of advertisements in order to calculate ad revenues.
Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.
Implementing intersection detection in the past involved event
handlers and loops calling methods like
Element.getBoundingClientRect() to build up the needed information for
every element affected. Since all this code runs on the main thread,
even one of these can cause performance problems. When a site is
loaded with these tests, things can get downright ugly.
See the following code example:
var options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
var target = document.querySelector('#listItem');
observer.observe(target);
Most modern browsers support the IntersectionObserver, but you should use the polyfill for backward-compatibility.
If you care for the whole page, you can use this:
document.body.getBoundingClientRect().top
Snippets
The read-only scrollY property of the Window interface returns the
number of pixels that the document is currently scrolled vertically.
window.addEventListener('scroll', function(){console.log(this.scrollY)})
html{height:5000px}
Shorter version using anonymous arrow function (ES6) and avoiding the use of this
window.addEventListener('scroll', () => console.log(scrollY))
html{height:5000px}
Here is the other way to get the scroll position:
const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
If you are using jQuery there is a perfect function for you: .scrollTop()
doc here -> http://api.jquery.com/scrollTop/
note: you can use this function to retrieve OR set the position.
see also: http://api.jquery.com/?s=scroll
I think the following function can help to have scroll coordinate values:
const getScrollCoordinate = (el = window) => ({
x: el.pageXOffset || el.scrollLeft,
y: el.pageYOffset || el.scrollTop,
});
I got this idea from this answer with a little change.