This question already has answers here:
Scroll to the top of the page using JavaScript?
(49 answers)
Closed 2 years ago.
So I have the following in my HTML page:
and i intentionally made it so that the "overflow" happens which results in the scrollbar at the right.
So i made a button called "Click to scroll up". So what i wanted was that everytime we click that button, the document would immediately scroll all the way up. Which means if I were to navigate all the way down, and click the button, it would bring me all the way up.
I looked up and there's a method "scrollTop" but it doesn't seemed to work. Would appreciate some help on this.
document.getElementById("scrollup").addEventListener("click", scrollUpmost);
function scrollUpmost() {
$(document).scrollTop();
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
border: 1px solid orange;
}
.big_div {
border: 1px solid black;
height: 1200px;
}
#scrollup {
margin-top: 900px;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>
$("#scrollup").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
border: 1px solid orange;
}
.big_div {
border: 1px solid black;
height: 1200px;
}
#scrollup {
margin-top: 900px;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>
Please try this code
Related
I know we can prevent overflow of child content using CSS overflow property.
But the overflow: scroll property is not preventing overflow.
let zoomInElem = document.getElementById('zoomIn')
let zoomOutElem = document.getElementById('zoomOut')
let contentElement = document.getElementById('content')
zoomInElem.addEventListener('click', function () {
console.log('zoomIn')
contentElement.style.zoom = '200%'
})
zoomOutElem.addEventListener('click', function () {
console.log('zoomOut')
contentElement.style.zoom = '100%'
})
#main {
width: 640px;
height: 360px;
border: solid;
}
#content {
border: .1rem solid red;
overflow: scroll;
}
button {
margin: 1rem;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<style>
</style>
</head>
<body>
<div>
<button id="zoomIn">ZoomIn</button>
<button id="zoomOut">ZoomOut</button>
</div>
<div id="main">
<div id="content">
<h1>Hi</h1>
<h2>Hi</h2>
<h3>Hi</h3>
<h4>Hi</h4>
</div>
</div>
<script>
</script>
</body>
</html>
How can I prevent overflow on changing CSS zoom property by clicking ZoomIn button?
Try To Set overflow: scroll; on outer div
#main { position: relative;overflow: scroll;}
You can either define the width and height of #content, or set the overflow of #main to scroll.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<style>
#main {
width: 640px;
height: 360px;
border: solid;
overflow: scroll;
}
#content {
/*width: 100%;
height: 100%; */
border: .1rem solid red;
/* overflow: scroll; */
}
button {
margin: 1rem;
}
</style>
</head>
<body>
<div>
<button id="zoomIn">ZoomIn</button>
<button id="zoomOut">ZoomOut</button>
</div>
<div id="main">
<div id="content">
<h1>Hi</h1>
<h2>Hi</h2>
<h3>Hi</h3>
<h4>Hi</h4>
</div>
</div>
<script>
let zoomInElem = document.getElementById('zoomIn')
let zoomOutElem = document.getElementById('zoomOut')
let contentElement = document.getElementById('content')
zoomInElem.addEventListener('click', function () {
contentElement.style.zoom = '200%'
})
zoomOutElem.addEventListener('click', function () {
contentElement.style.zoom = '100%'
})
</script>
</body>
</html>
The code is like this:
<!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" />
<title>Document</title>
<style>
html {
border: 1px solid black;
padding: 0;
}
body {
width: 100px;
height: 100px;
border: 10px solid red;
padding: 10px;
margin: 10px;
}
div {
width: 100px;
height: 100px;
border: 10px solid black;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
Why the offsetLeft value of the div element is offsetLeft is 41?
It should be div.leftMargin + body.leftPadding = 20px.
Is this a chrome bug or did I misunderstand offsetLeft?
It does seem as though Chrome and Firefox have interpreted things differently.
From MDN:
The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element. If there is no positioned ancestor element, the nearest ancestor td, th, table will be returned, or the body if there are no ancestor table elements either.
However, it seems that Chrome is not using body as the closest ancestor in this case but is going back to the html element. If you give the body element a position: relative then Chrome gives a leftOffset of 30.
Here's a snippet to play with - try different box-sizing and different positioning, or not, of body.
<!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" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
html {
border: 1px solid black;
padding: 0;
}
body {
width: 100px;
height: 100px;
border: 10px solid red;
padding: 10px;
margin: 10px;
}
#div {
width: 100px;
height: 100px;
border: 10px solid black;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body style="position: relative;">
<div id="div"></div>
<script>
alert(document.querySelector('#div').offsetLeft);
</script>
</body>
</html>
So, I realise this is more an extended comment/observations than a full answer but too long for a comment. Someone else can hopefully fully explain and/or find a reference to a potential Chrome bug/different interpretation.
I am new at web development and facing some problem in creating a web page. Actually, I was creating a loading bar animation at the top of the window and set its width to 100vw but it is taking more space than it should take. Here's a picture to demonstrate:
As you can see in the top-right corner it is overflowing the window. Why is that so?
Here's my code:
<!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">
<title>Loading Bar</title>
<style>
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
Thanks in advance!!
Try adding max-width: 100% to your progress bar css, according to https://caniuse.com/viewport-units
there is a known issue on firefox in which the 100vw considers the entire length of the page including the vertical scrollbar as its width. This vertical scrolls is what making your webpage have an horizontal overflow.
<!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">
<title>Loading Bar</title>
<style>
body{ overflow-x: hidden; }
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
This question already has answers here:
addEventListener calls the function without me even asking it to
(5 answers)
What is the difference between a function call and function reference?
(6 answers)
Closed 1 year ago.
I'm an absolute beginner in javascript I want to open and close the burger menu. I don't know why it doesn't work with me. When I write .open{display:block} it shows up and I can't even open or close the burger menu how I can fix this and why it shows up like this ?
here the code:
let btn = document.getElementById('btn-js');
let sidebar = document.getElementById('side-bar');
btn.addEventListener('click',show());
function show(){
sidebar.classList.toggle('open');
}
*{
margin: 0;
padding:0;
box-sizing: border-box;
list-style: none;
}
.side-bar{
display: none;
background: cornflowerblue;
width: 275px;
text-align: center;
font-size: 19px;
}
.side-links{
padding: 30px 0;
}
.side-links li{
padding: 30px 0;
}
#media all and (max-width:800px) {
.open{
display: block;
}
}
<!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="css.css">
<title>Document</title>
</head>
<body>
<button id="btn-js" class="btn-css">open</button>
<div class="side-bar" id="side-bar">
<ul class="side-links">
<li>home</li>
<li>about</li>
<li>contact</li>
<li>acount</li>
</ul>
</div>
<script src="js.js"></script>
</body>
</html>
Can someone please look at this code and explain why this div is not resizable. I have stripped the code down to bare bones, looking for the error. There must be something obvious that I'm unaware of.
Desired Functionality:
The <div> needs to be resizable. It needs to be something a user can drag with a mouse to increase the width and height of the object.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<style>
.Work{
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object{
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>>
<script>
$(document).ready(function(){
$(function(){
$(".object").resizable();
});
});
</script>
</body>
</html>
In order to make this work, you need to include jquery-ui.css as well. Also, there is no need to include two different versions of jQuery at the same time, so I will just include v3.5.1.
So your final code should be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<style>
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(function() {
$(".object").resizable();
});
});
</script>
</body>
</html>
Consider the following code.
$(function() {
$(".object").resizable();
});
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
background-color: #ccc;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Work">
<div class="object"> </div>
</div>
You had a number of syntax errors and were missing the jQuery UI CSS. Once corrected, the code works as expected.