In javascript, can I assign like this:
var tempHeight = document.getElementById("header").offsetHeight;
document.getElementById("content").style.top = tempHeight;
After running above script, will the div "content" have "top" propery = tempHeight?
I tried but it does not work, any suggestions?
Thanks!
You just need a unit
document.getElementById("content").style.top = String(tempHeight) + "px";
The top CSS property expects a unit along with the value. Adding px should work:
document.getElementById("content").style.top = tempHeight + "px";
You have to add + 'px' or some unit to the end of the style.top statement.
Also, #content must have the position style set
http://jsfiddle.net/BshuC/
CSS
#header {
height: 200px;
}
#content { position: absolute; }
JS
var tempHeight = document.getElementById("header").offsetHeight;
document.getElementById("content").style.top = tempHeight + 'px';
Related
I removed the body scrollbar and then must compensate for its lack with padding. To do this, I try to calculate the width of the scrollbar of the div block that appears after removing the body scrollbar and pass the resulting value as padding. This works in Chrome, but does not work in other browsers. Here is my code:
element = document.getElementById('div');
var scrollBarWidth = element.offsetWidth - element.clientWidth;
document.body.style.paddingRight = scrollBarWidth + 'px';
I would really appreciate a suitable solution.
It seems to work, but maybe there is a simpler solution that works in all browsers?
// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac: 15
// Delete the DIV
document.body.removeChild(scrollDiv);
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
document.body.style.paddingRight = (scrollbarWidth) + 'px';
What I am trying to do is to my button size is 35% of my div width. I add dynamically elements to my div, and in JavaScript I add attributes. So here is my div in .js file:
var div2= document.createElement('div');
div2.className = "div2" ;
div2.id = "div2";
div2.style.color= ButtonColor;
div2.style.height = ButtonHeight;
div2.style.width = ButtonWidth;
div2.style.backgroundColor = BackgroundColor;
then I create elements and add on this way:
div2.appendChild(h2) + "\n";
div2.appendChild(linebreak);
div2.appendChild(pic) + "\n";
div2.appendChild(linebreak);
var parentDiv = document.getElementById("surveybot-button");
var sp2 = document.getElementById("surveybot-link");
parentDiv.insertBefore(div2,sp2);
div2.appendChild(linebreak);
div2.appendChild(sp2);
Then I do next in my index.php
<div id="surveybot-button">
<a id="surveybot-link" class="button-1" href="https://gosurveybot.com/liberty-moving-video-chat-estimate/">SCHEDULE VIRTUAL ESTIMATE USIGN SURVEYBOT</a><br>
</div>
<script id="buttons-script" src="button.js" button-variant="<img src='img/button-icons-2.png'>" button-color="green" button-width="600px" button-height="355px" background-color="#11ff11">
</script>
<script>
var divWidth = document.getElementById("div2").offsetWidth + "px";
var divHeight = document.getElementById("div2").offsetHeight + 'px';
alert(divWidth);
alert(divHeight);
document.getElementsByClassName("button-1").style.width = divWidth / 3.2 + "%";
//document.getElementsByClassName("button-1").style.width = divWidth - 100px;
So here is what I tried:
document.getElementsByClassName("button-1").style.width = divWidth / 3.2 + "%";<br>
document.getElementsByClassName("button-1").style.width = divWidth * 0.3;
And css on the end:
a.button-1 {
width: 300px;
height: 100px;
background: url(img/button-button-1.png) top center no-repeat;
background-size: 100% auto;
text-indent: -999999px;
color: transparent;
float: left;
cursor: pointer;
position: absolute;
}
So can someone tell me what I am doing wrong. So to repeat my goal is if div is 100 px button should be 35px(35% of div width) and picture90px(90% of div width).
All advice and solutions are welcome.
Thanks in advance.
i have read your code but i have not implemented it.apparently i can see 2 mistakes you are making.
1: var divWidth = document.getElementById("div2").offsetWidth + "px"; returns a string , lets say 100px and you can't divide a string with numeric value so
100px/3.2 returns undefined result.
2:document.getElementsByClassName("button-1").style doesn't work because document.getElementsByClassName returns to you an array of all the elements with specified class name. if you want to add the style onto these elements you have to loop through the array returned by this function.
You can alternatively use document.getElementById() instead and add the style to specific element.
for your first problem you could use the following approach
var divWidth = document.getElementById("div2").offsetWidth;
var btnWidth = divWidth * 0.35;
//alert(btnWidth);
document.getElementById("btn").style.width = btnWidth+"px";
Hope it helps.
I find out other solution so now I am using Element.getBoundingClientRect(); So if someone have same problem it can be fixed on this way.
Element.getBoundingClientRect() gives to you bot,height, left, right, top and width of certain element. So example = xxx.Element.getBoundingClientRect().width;
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);
}
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 have a few elements positioned in my HTML. The body has a max-width from 1280px with margin auto. And there are a few elements, which I floated right. In the middle of the page there should be 70 images go from left to right (and then dissapear). I have tried to make those elements position absolute with display: inline, but since the start and the end position should always be the same, and the images have a width and a height, I didn't know how to make it dynamically.. Thats my code so far:
HTML
<body>
<h1>Sweets</h1>
<div class="images"></div>
<div id="display"></div>
<div class="clear"></div>
<div id="maracons"></div>
<div id="cupCake"></div>
</body>
JQUERY
for (var i = 0; i < 10; i++) {
$('.images').append('<img class="image' + i.toString() + '" src="img/' + arr[i][5] + '">');
}
CSS
$leftPos: 1100px;
$widthImage: 200px;
.images{
width: $widthProducts;
height: 200px;
position: absolute;
left: 1100px;
top: 0px;
}
.image-1{
left: $leftPos;
}
.image-2{
left: $leftPos - $widthImage;
}
.image-3{
left: $leftPos - $widthImage*2;
}
Here is how it looks like:
Confusing question but from what I gather you want the images to have dynamic height/width when you are appending them? If so what do you want to make the width/height equal?
If thats the case here is the answer:
var imgWidth = 10, imgHeight = 10;
for (var i = 0; i < 10; i++) {
imgWidth = 100; //Set width
imgHeight = 100; //Set height
$('.images').append('<img style="width:' + imgWidth +'px!important; height:' + imgHeight + 'px !important; " class="image' + i.toString() + '" src="img/' + arr[i][5] +'">');
}
the !important keyword will force the width/height specified to ignore the width/height specified in the class..
sorry if this is not what you mean, a jsfiddle would be great.
UPDATE
Check this fiddle:
http://jsfiddle.net/xP8Qb/
Here is the kinda thing you were looking for:
$(document).ready(function () {
var endpoint = 800; //you can set left+top endpoints and ref them in loop below..
for (var i = 0; i < 3; i++) {
var html = '<div class="imgs img'+i+'"></div>';
setTimeout(function() {
$('.images').append(html);
$('.images>.imgs:last').animate({"left" : "300px"}, endpoint);
}, i * 1000);
}
});
i can work on it more if needed, but hopefully this is enough to put you on the right track..