How to get width of dynamic added elements with JavaScript - javascript

I want to make horizontally scrollable container which will keep child elements on the y-line (width more that 100% of the screen).
If the data was fixed I would calculate it before rendering and setup the width of the container. The problem is that my data is dynamic, I don't know the number of the child elements that will be added and their width. So I decided to add them dynamic to the container DOM as a children, but when I try to get their width after appending, the result is 0. What I am doing wrong, or if you have a better idea how to do that I will be glad to see your way.
This is what I am doing now:
GalleryContainer.prototype.addItem = function(newItem) {
var newItemDiv = document.createElement('div');
newItemDiv.className = 'thumbnail';
content = document.createElement('img');
content.setAttribute('src', newItem);
newItemDiv.appendChild(content);
this.galleryDiv.appendChild(newItemDiv);
this.galleryArray.push(newItemDiv);
// width, offsetWidth, all properties are 0
console.log(newItemDiv.style.offsetWidth);
console.log($(content).css('width'));
console.log($(newItemDiv).innerWidth());
}
EDIT:
I made a jsfiddle example with my problem and in the demo the width is not 0, it's the actual size that i need, so I have to look deeper for the problem.
http://jsfiddle.net/valkirilov/QaHn7/1/

bellow code is working, maybe your newItemDiv is not append into HTML Document:
var newItemDiv = document.createElement('div');
newItemDiv.className = 'thumbnail';
$('body').append(newItemDiv);
// width, offsetWidth, all properties are 0
console.log(newItemDiv.style.offsetWidth);
console.log($(content).css('width'));
console.log($(newItemDiv).innerWidth());

Related

How to get full height (including margins) with window.getComputedStyle()?

I am trying to get the full height of a JSX element in ReactJS using window.getComputedStyle, however I'd like to get the full value, height+margin, but I couldn't find a way.
When I use only height I don't get the margin value.
window.getComputedStyle(productsContainerRef.current).height
I know I can get both values separetely and sum them, but is there a straightforward way to do that?
I am getting the element using a ref, so, it wouldn't be possible to use the event to aim the target element and get outerHeight.
Is there a way to do that using getComputedStyle?
One option is to add the margins to the refs current height.
Example:
const outerHeight = (el) => {
var height = el.offsetHeight;
var style = window.getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
};

Height of an element that is not rendert

I found this question to get the height of an element that has not height Attribute. But is it possible to get or calculate the height before it is rendert?
for example I have this Code:
var element = createElement("div");
element.style.width = "20px";
element.innerHTML = "XXXXXXXXXXXXXXXXXXXXXXXXX";
If I know the fontsize and other stuff like padding etc. , is it possible to get the height it would have if it gets rendert?
I need this because I need to know how heigh the element is before it gets rendert to change things that happens after that.

CSS/Jscript height problems

I am trying to make a grid of squares which updates with the size of the window. I am currently using the following js code to do this:
$(window).ready(updateHeight);
$(window).resize(updateHeight);
function updateHeight() {
var div = $('.grid');
var width = div.width();;
div.css('height', width);
var ratio=14.3/126;
div = $('.face');
width = div.width();;
div.css('height', width+(ratio*width));
ratio=30.5/15;
div = $('.cubie');
width = div.width();;
div.css('height', width+(ratio*width));
};
The cubies are nested inside faces, which are nested inside the grid in my html. First i tried setting the height with
div.css('height', width)
..but for some reason that didn't make my faces and cubies square. The ratio thing helps correct it on my screen size, but the smaller i make the window the more noticeable the error becomes, so I'm searching for a different solution right now, and i cant seem to find one. Help appreciated.
PS: if it matters, the .grid width is 50% of the body, the .face are 20% of the .grid, and the .cubie are ~33% of that.

Get Actual CSS Property of element if it dynamically added "!important"

I have a Element with the id="somID";
For Example:
Html:
<div id='somID' ></div>
Css :
#somID{ width:500px;height:500px}
and i have a class named : maximize.
So,
.maximize{width:100% !important; height:100% !important; }
Now dynamically i added the class .maximize to my div #somID
And after that i wanna get the width and height of my #somID by calling with its ID like,
$('#somID').width() or .height()
but i want to take the actual height of element that is defined in its ID but i get the .maximize in result not the height or width that is in #somID.
Any buddy have any idea ? That how to retrieve the height of div#somID if it contains .maximize ??
The problem is, there can be many, many selectors that are applied to a given element, with different specificities. There is no API that allows you to request a property from a selector in CSS - it simply wouldn't make much sense.
Having said that, you can create a hack to solve that issue:
function getOriginalDimensions(id) {
var $a = $("<div>", {id:id});
$("body").append($a);
var width = $a.width();
var height = $a.height();
$a.remove();
return {width:width, height:height};
}
console.log(getOriginalDimensions("somID")); // returns {width:500, height:500}
The above works with your example HTML and CSS.
JSFiddle
This basically creates an element with the same ID, appends it to the body, reads the dimensions and deletes it immediately. This is necessary because the div will have no size if it is just kept as a document fragment and not added to the DOM, because the CSS will not get applied.
In theory you could expand this function to make it work with other selectors.
However bear in mind this is a nasty hack and you should reconsider your approach.
A. Make your measurements and save them as .data attributes of the element :
var $el = $('#somID');
$el.data('original_dims', {
height: $el.height(),
width: $el.width()
}
B. Add class that changes the dimensions of the element :
$el.addClass('maximise');
C. Retrive the original dimensions whenever they are needed
var h = $el.data('original_dims').height;
var w = $el.data('original_dims').width;

Calculating html element (div) width with javascript/dojo?

Normally when you have a div created in html. You can check its width with offsetWidth or style.width (if declared). However if the innerHTML is changed such that the width of the div is also change, neither of those functions work (not sure, but they haven't in my cases).
some code:
var div = document.createElement("div");
div.innerHtml = "asdfasdfasdfasdfsdfasdfasdfad";
alert(div.style.width); // this is nothing
alert(div.offsetWidth); // this is 0
How do you get the width of the div above?
I realize this is an old question, but for the many people landing here from google I'll provide it.
This is the way to do it in dojo 1.7+. With the geometry module you can get and set the width of the content (not including padding or border). This ignores box-sizing.
require(['dojo/dom-geometry'], function(domGeom) {
var myDivNode = dojo.query('div')[0];
var contentBox = domGeom.getContentBox(myDivNode);
alert(contentBox.w);
// This is how to set width/height
domGeom.setContentSize(myDivNode, {w: 100, h: 100});
});
Source: https://dojotoolkit.org/reference-guide/1.7/dojo/contentBox.html
you can't get width value of element that wasn't appended to document.
so you should append it to page, than you can get width,
here is a working demo

Categories

Resources