Develop Reference

Using Vanilla JS to add inline CSS property and fallback value

The problem I am trying to solve is basically the issue with Safari iOs and Vh calculations.
Here is the function:
function overflowHandler() {
const header = document.querySelector('.header-container').getBoundingClientRect().height;
const regionTop = document.querySelector('.region-top').getBoundingClientRect().height;
const totalHeaderHeight = header + regionTop;
if (window.innerWidth < 1080) {
flyout.style.height = 'calc(100vh - ' + totalHeaderHeight + 'px)';
}
}
But I need to be able to also pass in height: webkit-fill-available as a style as well to fix the bug on iOS where the user can't scroll completely to the bottom of the nav.
I've tried using element.style.cssText to set both height properties, but whatever is the rightmost value is what gets rendered in the browser.
Example of what I mean would be:
element.style.cssText = 'height: calc(100vh - ' + totalHeaderHeight + 'px); height: -webkit-fill-available;'
would render as height: -webkit-fill-available;
I am at a loss on any other way to make it work or how else to ensure the full height of the menu can be scrolled on iOS.

Use element.setAttribute('style', 'height: -webkit-fill-available;')

Using JS to modify a style element with math operations

I am trying to use a JS sheet to make a button that when pressed, grows a square by 50 pixels (both height and width). I want to do this by a math operator (addition) and not by declaring a new value, so the button can be depressed multiple times.
This is for an exercise in combining multiple coding languages. I am allowed to change the HTML as needed to make it work. Also, the original exercise is just to make the button only work once (so setting a new pixel size works easily for that)
Here is the HTML and JavaScript I am working with:
document.getElementById("button1").addEventListener("click", growByFifty);
function growByFifty() {
document.getElementById("box").style.height += 50 + "px";
document.getElementById("box").style.width += 50 + "px";
};
<div id="box" style="height:150px; width: 150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>
When the button is clicked, nothing happens.

Using the "offsetHeight" you can get the height of the element.
Try this:
document.getElementById("box").style.height = document.getElementById("box").offsetHeight +50+'px'

The problem is style.height and style.width don't return the element's dimensions. You need to use offsetHeight and offsetWidth for that. I corrected your JavaScript code:
document.getElementById("button1").addEventListener("click", growByFifty);
function growByFifty() {
let currentHeight = document.getElementById("box").offsetHeight,
currentWidth = document.getElementById("box").offsetWidth;
document.getElementById("box").style.height = (currentHeight + 50) + "px";
document.getElementById("box").style.width = (currentWidth + 50) + "px";
};

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

How to change the left attribute on page resize (jQuery)

I'm having slight troubles with my code. What I'm trying to do is make these element's css property 'left' update according to the difference of it's current left value, and the amount the page resizes. This way, when the page resizes and the background moves over, the elements will move too. Take a look at the code below and I'll describe the issue:
$(window).resize(function() {
var docWidth = $(window).width();
if (docWidth < 1000) {
var difference = 1000-docWidth;
$('#headNav a,#icons div').each(function() {
var left = $(this).position().left;
var newLeft = left - difference;
$(this).css({ 'left' : newLeft });
});
}
});
So the issue that I'm getting is the elements are being given left values of wild numbers, while the value of the variable 'newLeft' is the reasonable, desired value. The each function I think is collecting the sums of these values and running them for each element x amount of times that the elements found exist (so if there's 5 elements it runs 5 times, I mean.) What I want is this code to execute uniquely for each element, but just once each, not each element 10 times! (that's how many elements are in the html).
So my question is, how can this be achieved? I hope I explained myself well enough, this was tough to iterate. Any help is extremely appreciated. Thank you!

Here's a fun trick: Include += in your .css() call:
$(this).css({left: "+=" + difference});
jQuery does the math for you to get the new value.

Try this:
$(window).resize(function() {
var docWidth = $(window).width();
if (docWidth < 1000) {
var difference = 1000-docWidth;
$('#headNav a,#icons div').each(function(iconInst) {
var left = $("#" + iconInst).position().left;
var newLeft = left - difference;
$("#" + iconInst).css({ 'left' : newLeft });
});
}
});