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>
Related
I have a basic html document with a sticky header and footer. I also have a div below the header that sticks to the header because it will eventually contain some tabs above a form. I have tried to align the form below this vertically but they don't line up. The problem is the tab div does not have a scrollbar but the form does. This means the width of the form is different to the width of the tabs. I tried to set them to 70% of the width and center but, because of the scrollbar they don't line up. I've tried some javascript to get the width of the scrollbar and then add this to the current right margin but it doesn't work. You will see the form is not as wide as the tabs div. I have spent hours on this.
Also, I tried adding a margin-bottom to the form but no margin appears below the border.
$(document).ready(function () {
setFormsWidth();
});
function setFormsWidth() {
let scrollbox = document.createElement('div');
// Make box scrollable
scrollbox.style.overflow = 'scroll';
// Append box to document
document.body.appendChild(scrollbox);
// Measure inner width of box
scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
// Remove box
document.body.removeChild(scrollbox);
// Get current width of right margin, which should be 30% of the
// width of the form-panel parent (the content class).
var formPanel = document.getElementById("main-form");
// Get the current right margin and remove the px at end of number
var style = window.getComputedStyle(formPanel);
var marginRightString = style.getPropertyValue('margin-right');
var marginRight = marginRightString.slice(0,-2);
// now addthe scrollBarWidth to the right margin
var newMargin = marginRight + scrollBarWidth;
formPanel.style.marginRight = newMargin + "px";
}
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 1000px;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
}
<!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>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:1000px;">
<div class="content">
<form class="form-panel" id="main-form">THIS IS FORM</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
I suggest to show the scrollbar besides .form-panel element but not .page div, so it will not affect centering .form-panel element.
Here is how to change the css.
Set height to 100% for all elements between .page and .form-panel elements, including .form-panel itself, so that scrollbar for .page will not be shown
Set box-sizing: border-box; for .form-panel, so that the border is drawn inside .form-panel
move .footer outside .page element
If you would like to set a specific height for .form-panel, you can create a div inside it and set its height like below:
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;
height: 100%;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 100%;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
padding-bottom: 7px;
box-sizing: border-box;
}
<!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>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:100%;">
<div class="content">
<form class="form-panel" id="main-form">
<div style="height:1000px">
THIS IS FORM
</div>
</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I have a test HTML file in which I toggle the class 'hide' with JavaScript but the content does not hide, I can't understand why, what can be done in order to get the content to toggle between hide/show.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.hide {
display: none;
}
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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>
</head>
<body>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
When you add the hide class, the element has two classes, and they both specify different display properties. The property from .content is taking precedence.
Make your selector more specific so it will take precedence, use .content.hide.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.content.hide {
display: none;
}
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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>
</head>
<body>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
Another possibility is to use !important in the .hide CSS to make it override other styles.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.hide {
display: none !important;
}
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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>
</head>
<body>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
When you do toggle, the classes are being toggled this way:
"content"
and
"content hide"
Now, both content and hide set display property. When there's such conflict, the rule that is defined later (either within <style> or in a further stylesheet) takes precedence.
You could see #Barmar's answer which shows !important and .content.hide to force higher precedence.
Or you could just define .hide after .content which gives it higher precedence.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.hide {
display: none;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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>
</head>
<body>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
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>
I am trying to increase height of div on button click. I am facing an issue my div is increase from bottom (default behaviour). But I want my div bottom with remain contain. It show from top.
In my example I have two div yellow and white. On button click, I am increasing the height of white box. But it is increase from down direction. I need it grows from top.
Here is my code:
https://codesandbox.io/s/still-lake-lw07u?file=/index.html
<body>
<div class="parent">
<div class="abc">
<div class="img"></div>
<div class="content"></div>
</div>
</div>
<button onclick="abc()">click</button>
<script>
function abc() {
document.querySelector(".content").style.height = "300px";
}
</script>
</body>
Unclear of final design, but you might try this:
function abc() {
const sel = document.querySelector(".content");
sel.style.height = "300px";
sel.style.position = 'absolute';
sel.style.bottom = '0px';
}
You can use the transform: scaleY(val) and transform-origin: bottom to resize and from where your element.
.abc {
width: 80%;
margin: auto;
display: grid;
grid-template-columns: repeat(10, [col-start] 1fr);
grid-template-rows: repeat(8, [row-start] 1fr);
padding-top: 3.4em;
padding-bottom: 3.4em;
}
.img {
grid-column: col-start / span 8;
grid-row: row-start / span 6;
background-size: cover;
max-width: 1074px;
max-height: 200px;
background-color: #ee0;
}
.content {
grid-column: col-start 6 / span 6;
grid-row: row-start 2 / span 6;
background: #fff;
min-height: 100px;
border: 1px solid blue;
padding: 3em;
}
.bigger {
transform: scaleY(2);
transform-origin:bottom;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
</style>
</head>
<body>
<div class="parent">
<div class="abc">
<div class="img"></div>
<div class="content"></div>
</div>
</div>
<button onclick="abc()">click</button>
<script>
function abc() {
document.querySelector(".content").classList.add('bigger');
}
</script>
</body>
</html>
Another version:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Test Page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<!-- From: https://stackoverflow.com/questions/69050335/how-to-increase-height-of-div-from-top-not-from-bottom/69050592#69050592 -->
<style>
.content { background-color: pink; width: 10em; }
.asterisk { height: 300px; }
</style>
</head><body>
<div class="parent">
<div class="abc">
<div class="img">Image</div>
<div class="content">Content</div>
</div>
</div>
<button onclick="abc()">click</button>
<script>
function abc() {
const sel = document.querySelector(".content");
var div = document.createElement('div');
// div.innerHTML = '*';
div.className = 'asterisk';
sel.parentNode.insertBefore(div, sel);
}
</script>
</body></html>
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