Html containing simple div element with class container given some height. I want the height to be equal to window height through javascript.
<script >
var container = document.querySelector('.container');
var windowHeight = window.innerHeight;
container.style.height = windowHeight;
</script>
If I change the value with some random number it works but does not show an effect when putting 'windowHeight'.
windowHeight is a number, styles also require a unit.
Try adding px to your code:
container.style.height = windowHeight + 'px';
Working example:
var container = document.querySelector('.container');
var windowHeight = window.innerHeight;
container.style.height = windowHeight + 'px';
html,
body {
margin: 0;
padding: 0;
}
.container {
background-color: #500;
}
<div class='container'></div>
Notes:
If you want this to work after the page has been resized, you will need to listen for the resize event and rerun the code.
If all you need to do is fill the background with a colour, the normal method would be to use CSS, and apply height: 100vh (Which means 100% of the view-port's height) which would work regardless of page resizes.
I am trying to create a scrolling animation with 2 divs and 2 images.
For lack of a better explanation (as you might have guessed from the title) I have made a quick animation showcasing what I am trying to achieve.
here is a hosted version that I made earlier. I tried to create the effect with the help of parallax scrolling, but it's not quite what I want.
It's a Zeit Now deployment, so you can append /_src to the url and take a look at the source code.
Now I am not sure if this is even the correct way to create the animation and to be honest I wouldn't know any other way that I could approach this.
So I am not asking for a fully-fledged answer without any flaws (although it would be much appreciated), but rather a nudge in the right direction.
Made this quickly so there might be some issues, I tried to make the variables somehow general so you can play with things (check this fiddle)
const body = document.body,
html = document.documentElement;
const targetImg = document.querySelector('.second');
// our image's initial height
const imgHeight = targetImg.clientHeight;
// the final value for image height (at scroll end)
const imgTargetHeight = 0;
// total height of our document
const totalHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
// visible window height
const windowHeight = window.innerHeight;
// starting scroll position we want to start calculations from (at this point and before, our image's height should equal its initial height 'imgHeight')
const fromScroll = 0;
// final scroll position (at this point and after, our image's height should equal 'imgTargetHeight')
const toScroll = totalHeight - windowHeight;
window.addEventListener('scroll', function() {
// get current scroll position, these multiple ORs are just to account for browser inconsistencies.
let scrollPos = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
// force the scroll position value used in our calculation to be between 'fromScroll` and 'toScroll'
// In this example this won't have any
// effect since fromScroll is 0 and toScroll is the final possible scroll position 'totalHeight - windowHeight',
// but they don't have to be, try setting fromScroll = 100 and toScroll = totalHeight - windowHeight - 100 for example to see the difference.
// the next line is just a shorthand for:
// if (scrollPos <= fromScroll) {
// scrollPos = fromScroll;
// } else if (scrollPos >= toScroll) {
// scrollPos = toScroll;
// } else {
// scrollPos = scrollPos;
// }
scrollPos = scrollPos <= fromScroll ? fromScroll : (scrollPos >= toScroll ? toScroll : scrollPos);
// our main calculation, how much should we add to the initial image height at our current scroll position.
const value = (imgTargetHeight - imgHeight) * (scrollPos - fromScroll) / (toScroll - fromScroll);
targetImg.style.height = imgHeight + value + "px";
});
.container {
height: 200vh;
}
.img-container {
position: fixed;
width: 100vw;
height: 100vh;
text-align: center;
background: white;
overflow: hidden;
}
.second {
background: tomato;
}
img {
position: absolute;
left: 50vw;
top: 50vh;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="img-container first">
<img src="https://fixedscrollingtest-takidbrplw.now.sh/luigi.png" alt="">
</div>
<div class="img-container second">
<img src="https://fixedscrollingtest-takidbrplw.now.sh/mario.png" alt="">
</div>
</div>
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 would like to add left margin and right margin to the body to hide the width change when I hide the vertical scrollbar.
I have this code that finds the width of the vertical scrollbar:
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
It gives the value "17" (in pixels) for IE11, Chrome 45, and Firefox 39 (desktop).
When I hide the vertical scrollbar, all elements, such as images, jump exactly 17 pixels to the right, which I want to hide.
I have tried:
document.body.style.marginRight = scrollbarwidth + "px";
$('body').css('margin-right', scrollbarwidth);
$(body).css("marginRight", scrollbarwidth + "px");
The last one might be faulty in some way, since other parts of the function stops working when it's enabled. The two others don't seem to work either, as I don't see any margin changes.
EDIT 1: For easier understanding of how I am going to use it, I wanted to mention that it's supposed to trigger on a on scroll function, like this:
var check1 = false;
$(document).bind('scroll', function() {
if(check1 === false && $(window).scrollTop() >= $('#divscrolltester').offset().top + $('#divscrolltester').outerHeight() - window.innerHeight) {
check1 = true;
unloadScrollBars();
disableScroll();
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
//document.body.style.paddingRight = scrollbarwidth + "px"; Temporary disabled.
//$('body').css('padding-right', scrollbarwidth); Temporary disabled.
//$(body).css("marginRight", scrollbarwidth + "px"); Temporary disabled.
setTimeout(function() {
enableScroll();
reloadScrollBars();
//document.body.style.paddingLeft = scrollbarwidth + "px"; Temporary disabled.
//$('body').css('padding-left', scrollbarwidth); Temporary disabled.
//$(body).css("marginLeft", scrollbarwidth + "px"); Temporary disabled.
}, 500);
}
});
EDIT 2:
Here is a Fiddle to show most of the js, html and css: https://jsfiddle.net/tfnwj7dj/10/.
I haven't added the change of css through code yet, as I'm still trying to solve the issue. Also, the scrolling and scrollbar are supposed to be re-enabled in a second, but there seems to be an error in there somewhere, sorry.
EDIT 3:
For your information at this moment, these lines work:
document.body.style.paddingLeft = (scrollbarwidth) + "px";
$('body').css('padding-left', scrollbarwidth);
document.body.style.paddingRight = (scrollbarwidth) + "px";
$('body').css('padding-right', scrollbarwidth);
document.body.style.marginLeft = (scrollbarwidth) + "px";
$('body').css('margin-left', scrollbarwidth);
document.body.style.marginRight = (scrollbarwidth) + "px";
$('body').css('margin-right', scrollbarwidth);
Maybe you have enough information to solve it, if you have the same issue, but unfortunately, this wasn't enough for me. It might be important info to know that I have my content centered with a width / max-width of just 500px, and that I don't actually have a body class. Maybe on designs with width="100%", or elements with absolute positioning, the lines might be enough.
Both javascript and jquery solutions are welcomed.
EDIT 4:
I finally solved it for my own circumstances - feel free to read the answer below. It works for preventing elements to jump when hiding the vertical scrollbar, and with some tinkering, it could probably do for a body class, or other situations.
Is your scrollbarwidth integer? Try this
var scrollbarwidth = 100;
$('body').css('margin-right', scrollbarwidth);
Maybe you have wrong value at scrollbarwidth ? In my ff this code works.
I managed to solve it - I'd like to clarify that my css actually don't contain a body class, and that I just centered all elements with a width / max-width of 500px and margin-left/right auto.
For my and other, similar cases, here is the answer:
/* First 5 lines for finding the scrollbar width. */
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
var scrollbarwidthadjustment = scrollbarwidth / 2; /* For centered elements, divide the scrollbar width by 2. */
var element = document.getElementById('element');
element.style.right = (scrollbarwidthadjustment) + "px";
And when you re-enable the vertical scrollbar, simply add:
element.style.right = "0px";
Also, the element must have a css position stated, otherwise it won't trigger. Here is an example of a css style that works:
.examplestyle {
color: white;
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 100%;
display: block;
}
EDIT 1:
To prevent some unsightly css errors on mobile devices, add these lines:
/* ... */
var scrollbarwidthadjustment = scrollbarwidth / 2;
var windowWidth = $(window).width(); /* Get current window width on click/scroll etc. */
var window1 = windowWidth + scrollbarwidth; /* Window width + scrollbar width. */
var element = document.getElementById('element');
if(window1 >= widthofelement) {element.style.right = (scrollbarwidthadjustment) + "px";}
else {}
EDIT 2:
Fix for image resized smaller than its original size:
var offsetwidth = element.offsetWidth;
var widthadjustment = offsetwidth - scrollbarwidth; /* Get full width of image when scrollbar hidden, and then remove the scrollbar width. */
if(window1 < widthofelement && scrollbarwidth > 0) {
element.style.width = widthadjustment + "px";
element.style.right = (scrollbarwidthadjustment) + "px";
}
And then this code when showing the Y-scrollbar again:
if(window1 < widthofelement && scrollbarwidth > 0) {
element.style.width = "OriginalSizepx";
element.style.right = "0px";
}
If you want to use every edit that I have added, here is the full code:
/* First 5 lines for finding the scrollbar width. */
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
var scrollbarwidthadjustment = scrollbarwidth / 2; /* For centered elements, divide the scrollbar width by 2. */
var element = document.getElementById('element'); /* Put element ID into a variable for easier use, and consecutive uses without re-identifying it. */
var window1 = windowWidth + scrollbarwidth; /* Window width + scrollbar width. */
var offsetwidth = element.offsetWidth; /* Get exact element size in current window. Shows shown dimensions when the window is resized. */
var widthadjustment = offsetwidth - scrollbarwidth; /* Get full width of image when scrollbar hidden, and then remove the scrollbar width. */
if(window1 >= widthofelement) {element.style.right = (scrollbarwidthadjustment) + "px";} /* If current window is equal to or greater than element width... */
if(window1 < widthofelement && scrollbarwidth > 0) { /* If current windows is smaller than the element width, and the window has a scrollbar greater than 0 pixels in width. */
element.style.width = widthadjustment + "px";
element.style.right = (scrollbarwidthadjustment) + "px";
}
/* When re-enabling the Y-scrollbar again; */
if(window1 >= widthofelement) {element.style.right = "0px";}
if(window1 < widthofelement && scrollbarwidth > 0) {
element.style.width = "OriginalSizepx";
element.style.right = "0px";
}
For further clarification, this code will prevent elements from jumping to the right when you hide the vertical scrollbar.
padding is your answer, as Shikkediel said. Just change margin to that and it'll work.
The items move because you change the default margin body has, so the whole body moves to the left (in case we are modifying margin-right).
If you remove the scroll bar, the default margin will go right behind it, and then you need to "buffer" the rest, left of the margin, and that's what padding does.
I really enjoy working with the Inspecting tool Chrome supplies (Ctrl + Shift + I) and then in the Styles tab on the right scorll down until you see the measurements. It really helps understand the CSS box model.
Did you add 'px' here..
$('body').css('margin-right', scrollbarwidth+'px')??
Just nowI tried in w3schools. If you add 'px' to above syntax, it is working for me.
Refer the thread : Div at the browser bottom
Problem image :
http://i.imgur.com/I9vVv.png
http://i.stack.imgur.com/jTU5U.png
I used all the methods and it all went in wain. Is there any method in Jquery to place a div at the bottom if even the page is scrolled ?
Thanks in Advance
For browsers other than IE6, use position: fixed is enough:
#footer {
position: fixed !important; /* IE6 hack */
position: absolute;
right: 0;
bottom: 0;
background: yellow;
}
For IE6, a general approach is to register the scroll event and dynamically change the top style property of #footer
var footer = document.getElementById('footer');
// Test IE6
if (footer.currentStyle &&
footer.currentStyle.position !== 'fixed') {
// Set bottom to 'auto' because we would use top property
footer.style.bottom = 'auto';
// Only for IE6, so use window.attachEvent
window.attachEvent(
'onscroll',
function() {
var scrollTop = document.documentElement.scrollTop;
var pageHeight = document.documentElement.offsetHeight;
var height = footer.offsetHeight;
footer.style.top = (scrollTop + pageHeight - height) + 'px';
}
);
}