Develop Reference

How to reproduce the `.width()` jQuery behavior in pure JavaScript, without another library/framework

I know the method .width() from jQuery returns the element's width without padding, border and margin.
In the accepted answer Table with vertical scroll, in which I can't comment, such method is used to get the width of the td elements of the first row of the table.
One of the jsFiddle in the answer there can be used to see the values returned by the method.
I tried to reproduce the behavior with this piece of code:
let colunas = document.querySelector('.scroll tbody tr:first-child').children;
let colunasWidth = [];
for (let i = 0, length = colunas.length; i < length; i++) {
colunasWidth.push(colunas[i].offsetWidth);//Width/clientWidth
}
I tried the various widths (offsetWidth, width, clientWidth), none gave the same result as jQuery and then I tried to get the border and padding width to subtract from such various widths, but I can't think of a way to get the math or right properties right.
Is there a simple and straightfoward way to do it?

You want window.getComputedStyle and .getPropertyValue
What it does is, it gets the styles used and then gets the actual width value of the element.
Here's a jsfiddle to show you: http://jsfiddle.net/u9d27wno/1/
var jquerywidth = $("#container").width();
var jqueryishwidth = window.getComputedStyle(document.getElementById("container"));
var offsetWidth = document.getElementById('container').offsetWidth;
var clientWidth = document.getElementById('container').clientWidth;
var msg = "offsetWidth: " + offsetWidth + "<br>\n";
msg += "clientWidth: " + clientWidth + "<br>\n";
msg += "jQuery width: " + jquerywidth + "<br>\n";
msg += "jQueryish width: " + jqueryishwidth.getPropertyValue("width") + "<br>\n";
document.getElementById('msg').innerHTML = msg;
//alert(document.getElementById('msg').innerHTML);
Let me know if that's the solution you needed!

You can use element.clientWidth and getComputedStyle together, to obtain teh value you are looking for...
element.clientWidth
The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.
window.getComputedStyle
The window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain.
function width(el){
// get element computed styles
let styles=getComputedStyle(el);
// remove the 'px' from the returned values
let paddingLeft = styles['padding-left'].slice(0,-2);
let paddingRight= styles['padding-right'].slice(0,-2);
// substract paddings from value returned by clientWidth, and return value
return el.clientWidth - paddingLeft - paddingRight;
}
// test
let w = width(document.getElementById('test'))
console.log( 'VanillaJS:' , w )
console.log( 'JQuery : ', $('#test').width())
#test{
border:10px solid red;
width:200px;
margin:10px;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
I'm 200px + <br>
10px padding + <br>
10px border +<br>
10px margin
</div>

How to get position of a square div jQuery/JavaScript

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());

setting min-height via jquery

This is the code I'm trying to use in order to set the height of a background div to always cover at least the background of the maindiv + the footer I have set up.
var bgheight = $('.maindiv').css("height");
$('#background').css('min-height', bgheight+'75px');
For some reason the code won't even apply to the #background div and I'm starting to run out of ideas.
When I do something like this
var bgheight = $('.maindiv').height();
$('#background').css({'min-height':beheight+'75px'});
The style is applied but the min-height is gigantic, like almost 50000px tall.
Any ideas?

You are making a string concatenation, not a sum.
Try this:
var bgheight = $('.maindiv').height();
$('#background').css({'min-height': (beheight + 75) + 'px'});
To ensure you are not concatenating strings, you can set Number() function.
var bgheight = Number($('.maindiv').height());
$('#background').css({'min-height': (beheight + 75) + 'px'});
OR (two parameters instead of object)
$('#background').css('min-height', (beheight + 75) + 'px');

How to check really width with "auto" value on css

I have a loop:
var takediv = document.getElementById('eye');
for(var i=0; i<categories.length; i++){
takediv.innerHTML +=^
'<img alt="'+(categories.length-i)+'" '+
'onclick="changef(this.alt)" '+
'src="mobile/img/pic/'+loc+"/mini/"+categories[categories.length-i-1][0]+'" '+
'style="cursor: pointer;"/>';
}
All images are having this css:
height: 80px;
width: auto;
And finally after loop I need to give the div this css
document.getElementById('eye').style.width
which will be sum of all inner img widhts
It is my first post here so sorry for mistakes.
Please help, and thanks!

You can use several approaches, for example getBoundingClientRect() which returns absolute values for position and width/height:
var width = document.getElementById('eye').getBoundingClientRect().width;
Just note it does not include border or padding, only the inner box.
Then there is getComputedStyle() - this will return a string suffixed with "px" so we also need to parse it using parseInt():
var width = parseInt(getComputedStyle(document
.getElementById('eye'))
.getPropertyValue("width"), 10);
Both returns size in pixels.
And as in #Rudi's answer, there is offsetWidth, and also clientWidth. This won't include margin.

Maybe you're looking for this:
var width = document.getElementById('eye').offsetWidth;

Draw an image as an HTML table

This is my JSFiddle : http://jsfiddle.net/0r16e802/4/
What I am trying to do is taking the image and draw it as an HTML table
2 big problem in my algorithm
I can seem to be able to draw the images and only the first image is loaded in the first row
big problem in the size and the background-position
var Append="";
$(document).ready(function(){
var row=2;
var ItemPerRow=10;
CreateEmojiTable(row, ItemPerRow);
function CreateEmojiTable(row, ItemsPerRow){
Append+="<table width='99%' style='padding-top:3px;'>";
for(var i=0;i<row;i++)
{
Append+="<tr>";
DrawEmoji(ItemsPerRow, i);
Append+="</tr>";
}
Append+="</table>";
$("#emoji_container").html(Append);
}
function DrawEmoji(ItemsPerRow, r){
var size=16;
for(var i=0;i<ItemsPerRow;i++){
Append+="<td>"
Append+="<div class='emoji' style='background-position:0px -"+parseInt(r*i*size)+"px;'></div>";
Append+="</td>";
}
}
});

EDIT: corrected indexing
As suggested by Jovan, the indexing should be as he says:
(r*ItemsPerRow + i) * size
But it's still misaligned so you'll have to correct it like this:
(r*ItemsPerRow + i) * size - 2
Then, you don't want to go beyond the actual maximum index, which is 262, or you'll have repetitions and misalignments as I told in the comment above.
Here is the full solution. It fixes indexing, alignment and maximum index: http://jsfiddle.net/0r16e802/12/
The emojis in the image are aligned to 17 pixels, not 16.
var size=17;
This aligns them to one another, but you'll still have to solve the border conditions, which are 1 pixel off.
To do this, fix the CSS by 1 pixel:
height:16px;
Finally, fix the size computation by subtracting 1:
parseInt(r*i*size - 1)
Here is the solution: http://jsfiddle.net/0r16e802/5/

I don't think any of the previously posted answers are correct, even if they do happen to work for the first two rows.
The way your sprite is organized, you are looking for:
parseInt( (r*ItemsPerRow + i) * size)

As #pid already said, the sizing was somewhat out by a pixel but also the first row repeats because of i=0 The offset height of the first row ends up being worked out as 0. You also have a 'squidgy' factor for whatever reason of needing to -2 from the height to make them align properly, probably an issue with the original image.
function DrawEmoji(ItemsPerRow, r) {
var size = 17;
for (var i = 0; i < ItemsPerRow; i++) {
Append += "<td>"
Append += "<div class='emoji' style='background-position:0px -" + parseInt((r + 1) * (i + 1) * size - 2) + "px;'></div>";
Append += "</td>";
}
}
});
http://jsfiddle.net/0r16e802/9/