I have a code similar to this:
var a = document.createElement('div');
a.style.width = '200px';
a.style.fontSize = fontSize(a.offsetWidth, 5);
a.innerHTML = 'Example';
document.body.appendChild(a);
function fontSize(reference, factor){
return (reference*factor)/100 + 'px';
}
However when I run it, the element font size appears to be 0px. The console.log returns expected value tho.
Similar code works on an javascript object that I tried:
var Object = function(target){
var default = {
fontSize: fontSize(target.clientWidth, 5);
}
}
jsFiddle here
What did I do wrong?
The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.
Your newly created div element has not been appended to the document when you try to read the offsetWidth, consequently it has a layout width of 0 so you end up with a font-size of 0px.
You need to put the div in the document before you measure how much space it takes up in the document.
Alternatively, you need to use a value other than offsetWidth (such as style.width.
Your logic is good, but you should append your element to the DOM before trying to retrieve its size:
var a = document.createElement('div');
a.style.width = '200px';
a.innerHTML = 'Example';
document.body.appendChild(a);
a.style.fontSize = fontSize(a.offsetWidth, 5);
function fontSize(reference, factor) {
return (reference * factor) / 100 + 'px';
}
Forked your Fiddle here
Just put a.style.fontSize = fontSize(a.offsetWidth, 5); after document.body.appendChild(a);.
var a = document.createElement('div');
a.style.width = '200px';
a.innerHTML = 'Example';
document.body.appendChild(a);
a.style.fontSize = fontSize(a.offsetWidth, 5); // <--- Move here
function fontSize(reference, factor){
return (reference*factor)/100 + 'px';
}
In fact, there's CSS properties you can't edit while the element is not added to the DOM. Font-size is one of them.
You need to append "a" to document first before you calculate its offsetWidth.
Refer - http://www.w3schools.com/jsref/prop_element_offsetwidth.asp
var a = document.createElement('div');
a.style.width = '200px';
document.body.appendChild(a);
a.style.fontSize = fontSize(a.offsetWidth, 5);
a.innerHTML = 'Example';
function fontSize(reference, factor){
return (reference*factor)/100 + 'px';
}
Related
So I created a DIV and tried to re-position it with this code:
var element = document.createElement("div")
element.id = "botinfo"
document.body.appendChild(element)
div = document.getElementById("botinfo")
div.style.position = "absolute"
div.style.top = 100
I create it fine and all but when I try re-position it nothing happens. I run
div.style.top = 100
Again at the console but still nothing. What's wrong?
Try setting 100px instead.
div.style.top = "100px";
Of course, so easy, use this function look:
function RePosition(a,b,c) {
a = document.getElementById(a);
a.style.position = c;
a.style.top = b+'px';
return a;
}
how to use?, look:
RePosition('botinfo',x,'absolute'); //replace x with the number of the you new position
good, luck.
You need to provide the unit as well when specifying the offset.
For example:
div.style.top = "100px"
div.style.top = "50%"
https://www.w3schools.com/cssref/css_units.asp
Hope this helps.
There is another question asking how to calculate the browser's scrollbar sizes.
My question is about the solution implemented in the npm package scrollbar-wdith. Can somebody explain why it works?
For reference, here is the relevant code (.coffee):
scrollbarWidth = null
getScrollbarWidth = (recalculate = false) ->
return scrollbarWidth if scrollbarWidth? and not recalculate
return null if document.readyState is 'loading'
div1 = document.createElement 'div'
div2 = document.createElement 'div'
div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px'
div1.style.overflow = 'scroll'
div2.style.overflow = 'hidden'
document.body.appendChild div1
document.body.appendChild div2
scrollbarWidth = Math.abs div1.scrollHeight - div2.scrollHeight
document.body.removeChild div1
document.body.removeChild div2
scrollbarWidth
Here's what i did. Took the crux of the code and simplified it a bit.
<html>
<head>
</head>
<body>
</body>
<script>
var scrollbarWidth;
scrollbarWidth = null;
getScrollbarWidth = function(recalculate) {
var div1, div2;
div1 = document.createElement('div');
div2 = document.createElement('div');
div1.id = "div1";
div2.id = "div2";
div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px';
div1.style.overflow = 'scroll';
div2.style.overflow = 'hidden';
document.body.appendChild(div1);
document.body.appendChild(div2);
scrollbarWidth = Math.abs(div1.scrollHeight - div2.scrollHeight);
alert(scrollbarWidth);
return scrollbarWidth;
};
getScrollbarWidth();
</script>
<html>
This let me play around with the elements.
what happens is that they create two identical divs, one with a scroll bar and another without a scrollbar and then they query the scrollHeight property for both of them, which ignores the scrollbar (just the element and padding).. see here - http://www.w3schools.com/jsref/prop_element_scrollheight.asp
The scrollHeight property returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin.
the difference in the scrollHeights yields the required scrollbar's height (since one of the elements has a scrollbar and the other one does not)
as it turns out, div2 scrollHeight = 100 px (=height) while div1's scrollHeight was only 83px and so chrome has a scrollbar of height 17px
Let me know if that makes sense to you
Here's a simpler snipped that also sets the scrollbar's pixel size to a CSS custom property of --scrollbar (if your browser supports the spec):
(function(node, body){
node.style.display = 'inline-block';
node.style.position = 'absolute';
node.style.height = '0';
node.style.overflow = 'scroll';
body.appendChild(node);
body.style.setProperty('--scrollbar', node.offsetWidth + 'px');
body.removeChild(node);
})(document.createElement('scrollbartester'), document.body);
function sizeChange() {
var container = document.getElementById('container');
var main = document.getElementById('main');
var content = document.getElementById('content');
var h = window.innerHeight;
container.style.height = h;
main.style.height = h*.9;
content.style.height = (h*.9)*.9;
}
document.addEventListener("resize", sizeChange);
I'm trying to manipulate the items in my html so the height of the container is constantly the height of the window and that when it's scaled, the height of the container scales. I have it set up so it gets the ID of each element it's going to manipulate and then adjusts by a % of what I want it to be. Does anyone have any feedback on why this is happening?
I would think most of what you are doing could be done with CSS. If you want to stick with JS, then you need to add units to your values. So change the code to something like
container.style.height = h+"px";
main.style.height = Math.floor(h*.9)+"px";
content.style.height = Math.floor((h*.9)*.9)+"px";
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
I'm trying to edit an images height that is repeating in a for loop in javascript but I can't figure out where I would need to add it in.
Here are the variables if it's important:
var i;
var start = 1;
var seg = document.getElementById("selSegs").value;
var parent = document.getElementById("divInch"), //parent for appendChild
imagePath = 'InchwormSegment.gif', //variable for image
img; //adding img element
Here is my loop:
for(i = start; i<=seg; i++) {
img = new Image(); //creating new image object
img.src = imagePath; // element src = imagePath
img.style.height = "215px"; // sets the height of all in loop
// img.style.height = (img.style.height * .9) + "px"; - does nothing
parent.appendChild(img); //appendChild adds another child (img) object
}
I've tried adding in some math but I just can't figure out where it is supposed to go
Let me know if this fiddle accomplishes what you are trying to do: http://jsfiddle.net/AyNY5/. A few things to remember:
You can edit the image "height" attribute directly, no need to go through style (You don't even need to add px!)
Don't use new Image() - use document.createElement('img'). That's the W3C supported standard.
If I'm off let me know - otherwise, you were on the right track!
JS Code in Fiddle:
var parent = document.getElementById("imgholder")
for (i=0;i<3;i++) {
var img = document.createElement('img');
img.src = "http://bit.ly/1975WKA"
img.height = "200"
parent.appendChild(img)
}
At this point image does not have style.height assigned. It does have height attribute though.
Instead of
img.style.height = (img.style.height * .9) + "px";
try
img.style.height = (img.height * .9) + "px";