Width attribute not acting properly on my webpage - javascript

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>

Related

How to prevent child div overflow out of parent div on changing CSS zoom property?

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>

how to set background image using css?

I am trying to set background image .but I am background image come forward or above to current image . how to set background image ? background image mean it always behind the current image ?
here is my code
https://codesandbox.io/s/aged-lake-wx0tf?file=/index.html
<!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>
.abc::after {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url("/a.png");
background-size: 100% 100%;
width: 100%;
height: 50vh;
}
</style>
</head>
<body>
<div class="abc">
<img
src="data:image/jpeg;base64,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"
/>
</div>
</body>
</html>
my background image come above the glass image.
Expected output. it should come behind the glass image
https://codesandbox.io/s/aged-lake-wx0tf?file=/index.html:0-5825

In css add this:
.abc img {
z-index: 100
}
and this:
.abc::after {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url("/a.png");
background-size: 100% 100%;
width: 100%;
height: 50vh;
z-index: 1;
}
The z-index property specifies the stack order of an element.
Also, visit: https://www.w3schools.com/cssref/pr_pos_z-index.asp

<!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>
.abc::after {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url(/a.png);
background-size: 100% 100%;
width: 100%;
height: 50vh;
}
</style>
</head>
<body>
<div class="abc">
<img
src="data:image/jpeg;base64,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"
/>
</div>
</body>
</html>

How to make HTML page scroll all the way up when clicking a button? [duplicate]

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

I can't understand why my div won't act resizable?

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.

How to make a picture float over particles-js script?

sorry for this dumb question but i can't figure it out, can someone help me to make the picture float over the particle effect?
If a link can be added to this image it will be nicer.
Here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Particles.js Example Page</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 { position:absolute; top:30px; left:100px; color:#fff;}
.jquery-script-ads { position:absolute; top:150px; left:100px;}
canvas {
position: absolute;
}
.background {
background-image: url('1.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body class="background">
<h1>jQuery Particles.js Example Page</h1>
<canvas class="canvas"></canvas>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="dist/jquery.particles.js"></script>
<script>
$(document).ready(function() {
$('.canvas').particles({
connectParticles: true,
color: '#ffffff',
size: 3,
maxParticles: 80,
speed: 1.8
});
});
</script>
<IMG class="displayed" src="image.png" height="400" width="400">
</body>
</html>

I find a way by adding :
IMG.displayed {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}

Categories

Resources