How do I make `window.scrollTo` more precise? - javascript

When I click on box1, the scroll effect needs to scroll down to box2 (top edge of the blue box). This works fine on web, but I'm not able to replicate the effect at a precise point on mobile.
document.getElementById('box1').addEventListener('click', function() {
window.scrollTo({
top: 507,
behavior: "smooth"
});
});
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
}
.box3 {
width: 100px;
height: 100px;
background-color: green;
}
.gap {
width: 100%;
height: 400px;
background-color: yellow;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body>
<div class="box1" id="box1"></div>
<div class="gap"></div>
<div class="box2" id="box2"></div>
<div class="gap"></div>
<div class="box3" id="box3"></div>
</body>
When clicking on box1 in an IPhone simulator, scrollTo takes me to the bottom half of the yellow box.

You're scrolling to a specific coordinate (top: 507), which is going to be different on mobile.
Use JavaScript to fetch the top of coordinate of the specific element you want to scroll to:
var box2 = document.getElementById("box2");
document.getElementById('box1').addEventListener('click', function() {
window.scrollTo({
top: box2.getBoundingClientRect().top,
behavior: "smooth"
});
});

Related

Using main scrollbar to scroll inner div then scroll rest of page

I have a container div right-col inside of my hero div, that holds two inner divs. The inner divs are sticky and the container div is scrollable to give the illusion of cards sliding up.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="left-col">h</div>
<div class="right-col">
<div class="top">1st card</div>
<div class="bottom">2nd Card</div>
</div>
</div>
<div class="projects">a</div>
<div class="contact-footer"></div>
<div></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
</script>
</html>
CSS:
body{
overflow: auto;
background-color: black;
}
.hero {
display: flex;
flex-direction: row;
}
.left-col{
width: 40vw;
background-color: black;
height: 100vh;
}
.right-col{
min-width: 60vw;
background-color: blue;
overflow: auto;
height: 100vh;
}
.top{
height: 100vh;
background-color: chartreuse;
position: sticky;
top: 0;
}
.bottom{
height: 100vh;
background-color: orange;
position: sticky;
top: 10%;
}
.projects{
height: 100vh;
background-color: crimson;
position: sticky;
top: 0;
}
However, the scroll bar is on the inside of the div right-col and independent from the main scrollbar. Is there a way that I can use the main scrollbar to scroll through the container div till it reaches the bottom then continues to scroll through the rest of the page? Possibly using js or jquery?
You could try adding the following css. It will make the inner scroll bar 0 width, so basically it will be invisible but still work.
.hero ::-webkit-scrollbar {
width: 0px;
}
If you need something more specific you could try using the scroll event to possibly synchronize both scroll bars or something.

Why does direction "rtl" stop the button click event from firing in JavaScript?

I have a demo which is working fine (button click is working fine and it moves to next slide). But when I apply direction property on body it stops working fine. My button click handler is not working. My slide does not change.
function handler() {
document.querySelector(".p").scroll({
left: 100,
behavior: 'smooth'
})
}
document.getElementById("button").addEventListener("click", handler, false)
.rtl {
direction: rtl;
}
.p {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
left: 0%;
}
.b {
width: 100px;
height: 100px;
position: absolute
}
.r {
background-color: red;
left: 0;
}
.bl {
background-color: blue;
left: 100px;
}
.g {
background-color: green;
left: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body class="rtl">
case : 1
<div class="p">
<div class="b r">1</div>
<div class="b g">1</div>
<div class="b bl">1</div>
</div>
<button id="button">move</button>
<hr/>
</body>
</html>
when you comment the class rtl then button click wors. why?
When you use right-to-left, all horizontal positioning is reversed. You need to use right instead of left in all the CSS styles. And the scroll amount should be negative to scroll in the opposite direction.
function handler() {
document.querySelector(".p").scroll({
left: -100,
behavior: 'smooth'
})
}
document.getElementById("button").addEventListener("click", handler, false)
.rtl {
direction: rtl;
}
.p {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
left: 0%;
}
.b {
width: 100px;
height: 100px;
position: absolute
}
.r {
background-color: red;
right: 0;
}
.bl {
background-color: blue;
right: 100px;
}
.g {
background-color: green;
right: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body class="rtl">
case : 1
<div class="p">
<div class="b r">1</div>
<div class="b g">1</div>
<div class="b bl">1</div>
</div>
<button id="button">move</button>
<hr/>
</body>
</html>

Moving a div within a div on mouse move

Can someone help me with a issue I have. So I have two divs div1 needs to be the height and width of the browser screen and over flow hidden.
Within that div I have another div div2 which is twice the width and hight of the first div. I then need to move that div around on mouse move.
#view-window {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#background-wrapper {
background: url('../images/background.png') no-repeat center center;
background-size: 100% 100%;
position: absolute;
}
<div id="view-window">
<div id="background-wrapper">
</div>
</div>
Kind of like this but when my mouse is in the top left corner of the view box the top top of the red box should be in that corner also.
https://codepen.io/anon/pen/bqKogL
Try this code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<style type="text/css">
#move {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
background: green;
}
</style>
<div id="move">
</div>
<script type="text/javascript">
var div = document.getElementById('move');
document.addEventListener('mousemove',function(e) {
div.style.left = e.pageX+"px";
div.style.top = e.pageY+"px";
});
</script>
</body>
</html>
Use below code:
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$moveable.css({'top': e.pageY,'left': e.pageX});
});
$(".outer").height($(window).height());
$(".outer").width($(window).width());
});
.moveAble {
position: absolute;
}
.info {
background-color:red;
height: 50px;
width:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="moveAble">
<div class="info"></div>
</div>
</div>

How to make divs have 100% body height after adding position: absolute div below the page bottom?

Please give me a clue how to achieve that with pure css?
I need to make 2 divs side by side and I have some element that is adding to the one of that divs, but far below it's bottom. The page automatically resizes then, but these 2 divs heights stays unchanged. Is it possible to make them still fit whole page as it is described in the css, or the only solution is to specify their exact heights by script?
Or maybe there's another way to make such a layout with a div added by script?
Let me show it in the fiddle:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
Thank you!
Short update: I just found, that neither html nor body heights were not updated after adding, but browser lets scroll to the newly added div. It's very strange behavior even for the css/html
I'm not sure exactly what you're aiming for, but maybe overflow: hidden is what you need? It will make it so the div won't expand to include that addition...
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
overflow: hidden;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
If you don't need scrolling - try position:fixed instead of absolute.
You don't need all this CSS, all you need to do is to set their height in CSS explicitely:
first to height: 100vh
after you add new element, to height: calc(100vh + X) where X is distance from initial divs bottom to bottom of the added element.
EDIT: Another solution with removed position: absolute:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html {
height: 100%;
}
body
{
display: flex;
min-height: 100%;
margin: 0 5rem 0 0;
}
div#col1
{
background: #eee;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
width: calc(100vw - 10rem);
}
div#dd
{
background: #f99;
border: 2px solid red;
margin-top: 2000px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>

Javascript/ CSS webkit filter - remove blur on specific element

I'm trying to blur the background page and popup a loading box that is NOT blurred. I would think the blur(0px) would remove the blur on the loading div. However, the popup box also remains blurred.
How can I remove the blur for a specific element only?
<script>
document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)");
document.getElementById("loading").setAttribute("style","-webkit-filter: blur(0px)");
</script>
<html>
<body id="blurme">
<h1>Welcome to My Website</h1>
<div id="loading">
Please wait
</div>
</body>
</html>
Here's the CSS the loading box
#loading
{
background:#808080 url(loading.gif) no-repeat center center;
background-size:220px 50px;
height: 270px;
width: 75px;
position: fixed;
left: 50%;
top: 50%;
margin: -175px 0 0 -275px;
z-index: 1000;
border-radius: 15px;
display:none;
}
This is an issue of inheritance. By moving the blurme id to another div, the loading div ceases to be a child of the blurme object: The first letter in CSS is for cascading.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#loading
{
background:#808080 url(loading.gif) no-repeat center center;
background-size:220px 50px;
height: 270px;
width: 75px;
position: fixed;
left: 50%;
top: 50%;
margin: -175px 0 0 -275px;
z-index: 1000;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="blurme">
<h1>Welcome to My Website</h1>
</div>
<div id="loading">
Please wait
</div>
<script>
document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)");
document.getElementById("loading").setAttribute("style","-webkit-filter: blur(0px)");
</script>
</body>
</html>
This should fix the problem.
<body>
<div id="blurme">
<h1>Welcome to My Website</h1>
</div>
<div id="loading">
Please wait
</div>
</body>

Categories