We Keep Coding

Obtain css value "width: min-content" in px of an element

I'm trying to figure out how to get the value of an element width: 'min-content' in px. How is it calculated? I have a slide selector that modifies the css left property of a relative positioned element inside a div that has a max width of 1200px. I need to know if the difference between 1200px and left value has reached the minimum width of the element to stop it incrementing. Like:
styles.formato.width = 1200
styles.plato.posh contains the slide value for the left attribute
$('.menu-preview .menu-plato').css('max-width', styles.formato.width + 'px');
$('.menu-preview .menu-plato').css('min-width', 'min-content');
$('.menu-preview .menu-plato').css('width', 'calc(' + styles.formato.width + 'px - ' + (styles.plato.posh > 0 ? styles.plato.posh : (-styles.plato.posh)) + 'px)')
$('.menu-preview .menu-plato').css('left', styles.plato.posh + 'px');
This code just shrinks ".menu-plato" width to force break-words if it reachs the end of the parent div. But, as "left" max value is styles.formato.width, ".menu.plato" element just overflow parent.
What I want to achieve is:
if (element."min-width" <= (styles.formato.width - styles.plato.posh)){
//DON'T UPDATE LEFT PROPERTY BECAUSE CHILD IS USING MIN-WIDTH AS WIDTH VALUE
//SO IT CANNOT BE SHRUNK MORE AND LEFT ATTR WILL OVERFLOW THE ELEMENT TO THE RIGHT
}
I've tryed using some element node attrs like clientWidth or offSetWidth but failed because when the element width reachs the min-width value, they both hold the min-width value, but, as it's a slide selector and those attributes depends on the screen rendering, if you slide too fast, the calculations are wrong.
EDIT
There are more than one element with those classes, so what I've tryed is:
$('.menu-preview .menu-plato').each((index, element) => {
element.style.width = ('calc(' + styles.formato.width + 'px - ' + (styles.plato.posh > 0 ? styles.plato.posh : (-styles.plato.posh)) + 'px)');
if (element.offsetWidth <= (styles.formato.width - (styles.plato.posh > 0 ? styles.plato.posh : (-styles.plato.posh)))) {
if (styles.plato.posh >= 0) {
element.style.left = styles.plato.posh + 'px'
}
}
})
Thanks

JS best way to increase size

The problem is therein, that element.style.width returns a string, and not a number.
I want to do increase the width like so:
element.style.width += 100;
, but it remains the same. My solution is to take one of the long ways:
element.style.width = element.offsetWidth + 100;
element.style.width = parseInt(element.style.width) + 100;
(Thankfully, it doesn't require + 'px')
Is there a better way to do this?

You can do so:
var computedStyles = window.getComputedStyle(element, null);
var width = window.parseInt(computedStyles.width, 10);
element.style.width = (width + 100) + 'px';
or with jQuery you can do like this:
$(element).css("width", "+=200");
See more about it http://api.jquery.com/css/

You could also try this, though it is not particularly apposite or compact;
element.setAttribute("style","width:" + (element.offsetWidth + 100) + "px");
A fiddle example

Change margin, width, height, top, left, padding from all elements between a div

I got a design in Full HD resolution, it was planned for a presentation in this solution, now they want that it will be a bit responsive. Now I have to change all these parameters: margin, padding, width, height, top, left on the fly, maybe someone got a solution for me.
I tried following and it works for the images with the width and height:
// Set Array for Resize (0 => width of the window, 1 => resize (yes / no)?, 2 => how much per cent do I have to put away
var resize_pool = new Array(parseInt($(window).width()), false, 0);
if(resize_pool[0] < 1920) {
resize_pool[1] = true;
resize_pool[2] = (100 * resize_pool[0]) / 1920;
resize_pool[2] = 100 - Math.floor(resize_pool[2]);
}
// Do I have to resize?
if(resize_pool[1] == true) {
$("#content img").each(function(index, element) {
$(this).css('width', 'calc(' + $(this).width() + 'px - ' + resize_pool[2] + '%)').css('height', 'calc(' + $(this).height() + 'px - ' + resize_pool[2] + '%)');
});
}
This works fine, but is there a better solution, where I can change all my values? margin, padding etc.
Thanks for your help in advance

CSS Media Queries are what you need to use - e.g.
td {
padding:20px; /* Default padding size for 1920px+ wide */
}
#media screen and (max-width: 1919px) {
td {
padding:10px; /* Smaller padding for screens less than 1920px wide;
}
}

Animating the centering of a div

How do I animate this movement so when I call the function later the item will animate? I usually use $(this).animate but not sure how to wrap this in it, since I'm calculating its position. Thanks.
jQuery.fn.center = function ()
{
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}

Instead of using this.css you can use this.animate as you mentioned.
Example
this.animate({
top : Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px"
},800,function(){ });
Demo

To animate, you'll need to use animate on the left/top values, but first set the position to absolute using css().
// can't easily animate change of css "position"
// so we just set it directly
elt.css('position', 'absolute');
// animate the position
elt.animate({
left: x,
top: y
});
I created a fiddle for this, here: http://jsfiddle.net/lingo/CkRUd/2/
In the fiddle I've also tidied some things up to make sure the plugin is more robust.

JS - set window height using current window size

I have some CSS that needs the body to have a height set, but this needs to be done depending on the user.
I have made some code that kind of works - it calculates the window height but it's not changing the body height. What am I doing wrong?
function setWindowHeight(){
var windowHeight = window.innerHeight;
document.getElementsByTagName('body').style.height = windowHeight + "px";
}

You need to add an eventListener, and you don't need to use the getElementsByTagName because has only 1 body tag:
function setWindowHeight(){
var windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
console.log(document.body.style.height);
}
window.addEventListener("resize",setWindowHeight,false);
Or, if you want to use, you can do this:
function setWindowHeight(){
var windowHeight = window.innerHeight;
document.getElementsByTagName('body')[0].style.height = windowHeight + "px";
console.log(document.body.style.height);
//---------------------------------------´
//will get the first element tagged body
}
window.addEventListener("resize",setWindowHeight,false);
EDIT (Changed the code above): you can check the value in the Firefox Console. Open it(CTRL + SHIFT + K) and resize the window, you will see the event resize be fired when you do it.

try this may work
document.getElementsByTagName('body').height = windowHeight + "px";