CSS max() function alternative - javascript

I would like to set the min-height of a HTML element to the maximum of two values, but unfortunately css doesn't support max().
Here's my css code:
#content{ min-height:calc( 100% - 100px); }
The other value is constant number (400px). I think I have to use JS, but I cant figure out how to do that.
Here is my JS code:
function layout(){
var y = document.getElementById("content");
y.style.minHeight = Math.max(parseInt(y.style.minHeight), 400).toString + "px";
}
window.onload = layout;
window.onresize = layout;
alert(parseInt(y.style.minHeight)) gives me naN.
What am I doing wrong?
Regards

I can't determine a direct way to get the calculated result of the min-height style.
But the following function assigns it to the height of the element, from which we can get it as the element's new offsetHeight.
The function then restores the original height of the element:
function layout() {
var y = document.getElementById('content'),
h = y.offsetHeight;
y.style.height = getComputedStyle(y).getPropertyValue('min-height');
y.style.minHeight = Math.max(y.offsetHeight, 400) + 'px';
y.style.height = h + 'px';
} //layout
Working Fiddle

Related

How to get sum of many div height using javascript?

HTML div contain dynamic data, For calculate div height i used
var pageSize = 990;
var clientHeight = 300;
clientHeight = document.getElementById('testing1').clientHeight;
var selector_classes = ['career_sum', 'exp_cal', 'ref_cal', 'port_cal', 'curri_cal', 'certi_cal'];
selector_classes.forEach(function(element) {
clientHeight = document.getElementById('testing').clientHeight + clientHeight;
});
Testing is same id for div
That working fine. My question is how can i set style for those div which position greater than pagesize?
Can anyone help me?
You can check clientWidth of body
let pageWidth = document.body.clientWidth;
selector_classes.forEach(function(element) {
clientHeight = document.getElementById('testing').clientHeight + clientHeight;
if(clientHeight > pageWidth) element.style.color = "red";
});

Add to width using setInterval

I am trying to add to the width of the element everytime the setInterval function is invoked
function setProgress(){
var bar = document.getElementById('progress-bar');
var width = 20;
bar.style.width += width + 'px';
//console.log(bar.style.width);
}
window.onload = function(){
setInterval(setProgress, 10);
}
I tried using parseInt(), but everytime I console.log() to the window i see the same width. My end goal is for the width to increase by 20
You need to remove px part from width style and then cast string to number before incrementing it:
function setProgress(){
var bar = document.getElementById('progress-bar');
var width = 20;
bar.style.width = Number(bar.style.width.replace('px', '')) + width + 'px';
//console.log(bar.style.width);
}
Make width a global var, like shown below:
var width = 0;
function setProgress(){
var bar = document.getElementById('progress-bar');
width+= 20;
bar.style.width += width + 'px';
//console.log(bar.style.width);
}
window.onload = function(){setInterval(setProgress, 10);}
Also, you should specify the max width to prevent the progress bar moving outside the working area (for example, modifying the increment line: if(width<500) {width+= 20;} else {return;}).
Alternatively, you can use your original solution by adding couple more statements, namely: removing the "px" unit from style property bar.style.width, then parsing it (converting to Number), then incrementing it and then adding "px" (otherwise, "+" operator will cause a concatenation of strings with output like: 20px20px, 20px20px20px, etc). Such alternative solution will slow down the process and put additional load on CPU (thus, it's not recommended).
Hope this may help. Best regards,
The problem is that width returns a string with units.
Instead, consider storing the number of pixels in a variable:
var bar = document.getElementById('progress-bar'),
width = parseFloat(getComputedStyle(bar).width);
setInterval(function() {
width += 20;
bar.style.width = width + 'px';
}, 10);
var bar = document.getElementById('progress-bar'),
width = parseFloat(getComputedStyle(bar).width);
setInterval(function() {
width += 20;
bar.style.width = width + 'px';
}, 200);
#progress-bar {
background: #0f0;
display: inline-block;
}
<div id='progress-bar'>Progress bar</div>
var width = 0;
function setProgress(){
var bar = document.getElementById('bar');
width+= 20;
bar.style.width = width + 'px';
console.log(bar.style.width);
if(width==200){
width=0;
}
}
window.onload = function(){
setInterval(setProgress, 1000);
}

change margin-left with JS

I want a dynamical margin-left on a given div.
I tried this code :
window.onload = function()
{
var pageWidth = window.innerWidth;
var size = (pageWidth - 200 ) / 2;
$('#search').css('margin-Left', size));
alert(size);
};
which doesn't work (the alert is here just for test purpose), the problem is coming from the ligne $('#search').css('margin-Left', size)); but I can't find out where...
I've tried with a lowercase l on margin-left and didn't work.
Would the following work for you?
document.getElementById("search").style.marginLeft = size + "px";
You need to specify the type of unit you want to use.
$('#search').css('margin-left', size + 'px');
Try using marginLeft, without the hypen.
jQuery.css() documentation: http://api.jquery.com/css/
JAVASCRIPT
$(document).ready(function(e){
alert('test');
var pageWidth = parseInt($(window).innerWidth());
alert(pageWidth);
var size = (pageWidth - 200 ) / 2;
$('#search').css('margin-left', size);
alert(size);
})
HTML
<div id = 'search'></div>
CSS
#search
{
height:100px;
width:100px;
background-color:#F00;
}
FIDDLE LINK

doing math with margins and width in jquery

What I am trying to do is have content always be in the center of a container even if the margin size and content size change. This also means that the container size must change on it's own given the amount of margin and width of the content. Here is a js fiddle that has a general set-up of a function and an alert that gives the output: http://jsfiddle.net/jpY5n/
function resizeContainer(size, distance) {
var postWidth = size;
var postApart = distance * 3;
return postWidth + postApart;
};
$(document).ready(function () {
$('#container').width(resizeContainer($("#content").width(),$("#content").css("margin-left"));
});
I could theoretically use the function I have set up in order to change the width of the posts, but it can't take in the math of the margins because, as you can see in the alert, the margin is 10px, not 10, so the math comes back as NaN...Is there a way to to make the margin settings let us say ßpx to just ß?
You can get the numeric value of the margin by parsing the string into a Number after replacing 'px' with '':
var margin = Number($('#content').css('margin-left').replace('px',''));
Here's the updated Fiddle.
HTML
<div id="container">
<div id="content"></div>
</div>
JavaScript (jQuery)
function resizeContainer(size, distance) {
var postWidth = size * 2;
var postApart = distance * 3;
return postWidth + postApart;
};
$(document).ready(function () {
alert("Container width should be set to " + $("#content").width() + " times 2 plus " + $("#content").css("margin-left") + " times 3");
var width = Number($('#content').width());
var margin = Number($('#content').css('margin-left').replace('px',''));
$('#content').width(resizeContainer(width,margin));
});

Real image width with JavaScript

I have the next function:
function setImagesWidth(id,width) {
var images = document.getElementById(id).getElementsByTagName("img");
for(var i = 0; i < images.length;i++) {
// If the real width is bigger than width parameter
images[i].style.width=width;
//}
}
}
I would like to set the css width attribute of all my img tags to a particular value only when the image real width is bigger than the attribute value. If it is possible, i would like a solution which does not use any particular framework.
images[i].offsetWidth returns 111 for an image of 109px width. Is this because 1px each side border?
Here is, hopefully, enough sample code to give you what you want:
var myImage = document.getElementById("myImagesId");
var imageWidth = myImage.offsetWidth;
var imageHeight = myImage.offsetHeight;
That should give you the numbers you need to derive the solution you want. I think you can write the rest of the code yourself. :)
EDIT: Here, I couldn't help myself - is this what you are after?
function setImagesWidth(id,width) {
var images = document.getElementById(id).getElementsByTagName("img");
for(var i = 0; i < images.length;i++) {
if(images[i].offsetWidth > width) {
images[i].style.width= (width + "px");
}
}
}
#Sergio del Amo: Indeed, if you check out my link you'll see that you want clientWidth instead.
#Sergio del Amo: You cannot, unfortunately, accept your own answer. But you do have an extraneous period in the "px" suffix, so let's go with this, including the clientWidth change:
// width in pixels
function setImagesWidth(id, width)
{
var images = document.getElementById(id).getElementsByTagName("img");
var newWidth = width + "px";
for (var i = 0; i < images.length; ++i)
{
if (images[i].clientWidth > width)
{
images[i].style.width = newWidth;
}
}
}
Careful, it looks like you might rather want clientWidth:
http://developer.mozilla.org/en/Determining_the_dimensions_of_elements
EDIT: Can i accept somehow this answer as the final one?
Since offsetWidth does not return any unit, the .px ending must be concatenated for the css attribute.
// width in pixels
function setImagesWidth(id,width) {
var images = document.getElementById(id).getElementsByTagName("img");
for(var i = 0; i < images.length;i++) {
if(images[i].offsetWidth > width) {
images[i].style.width= (width+".px");
}
}
}
Just in case you, the reader, came here from google looking for a way to tell what is actual image file pixel width and height, this is how:
var img = new Image("path...");
var width = image.naturalWidth;
var height = image.naturalHeight;
This becomes quite usefull when dealing with all kinds of drawing on scaled images.
var img = document.getElementById("img");
var width = img.naturalWidth;
var height = img.naturalHeight;
document.getElementById("info").innerHTML = "HTML Dimensions: "+img.width+" x "+img.height +
"\nReal pixel dimensions:"+
width+" x "+height;
<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/0/03/Circle-withsegments.svg" width="100">
<pre id="info">
</pre>

Categories

Resources