I am trying to adjust a box width and height according to the following rules:
Whenever the window is resized, the box size needs to be recalculated
The box needs to be the height of the body with slightest margin, but no scrollbars
The box needs to be 1/2 as wide as it is high in pixels
I am restricted to HTML5, CSS3, and vanilla JS (no jQuery)
I think I've got a pretty good working model, that works except for a small annoyance. Resizing the browser horizontally only fires the resizeWindow() once, and only at the start. Once the first horizontal resize fires, no amount of horizontal resizing triggers an update to the box text. Resizing the window in the vertical direction causes the desired behavior.
I would like to see the text update (via the resizeWindow() call), even if the size of the box doesn't have to change.
Snippet only seems to work in full page mode :/
function resizeWindow() {
ht = window.innerHeight;
wd = window.innerWidth;
elPreview = document.getElementById("preview");
elPreview.style.height = "98.5vh";
elPreview.style.width = (ht / 2) + "px";
elPreviewText = document.querySelector("#preview p");
elPreviewText.textContent = "Width: " + (ht / 2) + ", Height: " + ht;
}
window.addEventListener('resize', resizeWindow, true);
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.box {
background-color: black;
border-radius: 20px;
color: white;
padding: 5px 0;
font-size: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index_proto.css">
</head>
<body>
<div class="box" id="preview">
<p>Preview</p>
</div>
<script src="index_proto.js"></script>
</body>
</html>
You could always use the css #media to change the width and height of your elements.
For Example:
#media only screen and (max-width: 720px) {
.DivElementClassName {
width: 300px;
margin-left:25%;
}
}
function resizeWindow() {
ht = window.innerHeight;
wd = window.innerWidth;
elPreview = document.getElementById("preview");
elPreview.style.height = "98.5vh";
elPreview.style.width = (ht / 2) + "px";
elPreviewText = document.querySelector("#preview p");
elPreviewText.textContent = "Width: " + wd + ", Height: " + ht;
}
window.addEventListener('resize', resizeWindow, true);
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.box {
background-color: black;
border-radius: 20px;
color: white;
padding: 5px 0;
font-size: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index_proto.css">
</head>
<body>
<div class="box" id="preview">
<p>Preview</p>
</div>
<script src="index_proto.js"></script>
</body>
</html>
As I said above, please disregard. Some chucklehead of a programmer (me) was putting a number that would never change into an output that he expected to change.
Related
This question already has an answer here:
scroll events: requestAnimationFrame VS requestIdleCallback VS passive event listeners
(1 answer)
Closed 8 months ago.
Sorry if this is a dumb question, I am super new to programming in html and Javascript.
I know, that I can change some transformation with the scrollpositon, but right now I'm a bit lost. I want to increase the height of a box, when the user scrolls down.
It starts with
"height: 60px;"
and then I'd like it to grow like "height ="60 + scrollY * a very small number + px".
Is there any way to achieve this?
Kind regards and greetings!
let height = 60;//default height
document.addEventListener("mousewheel", function(event){
if(event.wheelDelta >= 0){
height--
element.style.height = `${height}px`
}else{
height++
element.style.height = `${height}px`
}
})
You can use the scroll_event to enlarge the box when a user scrolls.
Here is an example of how to change the box height on scroll using dynamic calculation.
<html lang="en">
<head>
<title>Scroll large demo</title>
<style>
body {
min-height: 1000px;
background: aliceblue;
}
#box {
height: 60px;
background: red;
color: white;
vertical-align: middle;
text-align: center;
position: fixed;
margin: 0 auto;
padding: 15px;
}
</style>
</head>
<body>
<div id="box">
I am going to enlarge when you scroll
</div>
<script>
let lastKnownScrollPosition = 0;
let ticking = false;
function doSomething(scrollPos) {
document.getElementById("box").style.height = 60 + (scrollPos * 0.25) + "px";
}
document.addEventListener('scroll', function (e) {
lastKnownScrollPosition = window.scrollY;
doSomething(lastKnownScrollPosition);
if (!ticking) {
window.requestAnimationFrame(function () {
doSomething(lastKnownScrollPosition);
ticking = false;
});
ticking = true;
}
});
</script>
</body>
</html>
I want to implement a vertical resizable div such that it increases height in certain fixed intervals. I don't want to use any libraries and looking for plain JS implementation. Here is jquery version: https://jqueryui.com/resizable/#snap-to-grid
This code works good but increases height by one pixel on each mousemove (vertically).
When I try to increase height by 10, the height increases but the mouse pointer does not stick to the base of div..,
https://plnkr.co/edit/3VesixHE2B7N46f8N7Bg?p=preview
const divElement = document.querySelector('.ns-resize');
const element = document.querySelector('.resizable');
let original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
let original_Y = element.getBoundingClientRect().top;
divElement.onmousedown = function(mouseDownEvent) {
mouseDownEvent.preventDefault();
var original_mouse_y = mouseDownEvent.pageY;
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', stopResize);
function resize(mouseUpEvent) {
//cmp.increment = cmp.increment + 15;
const height = original_height + (mouseUpEvent.pageY - original_mouse_y);
if (height > 15 && height < 900) {
mouseUpEvent.pageY = mouseUpEvent.pageY ;
element.style.height = height + 'px';
divElement.innerHTML = element.style.height;
}
}
function stopResize() {
document.removeEventListener('mousemove', resize)
}
}
/* Styles go here */
.resizable {
width: 100px;
height : 100px;
border:1px solid red;
position: absolute;
}
.container {
position : relative;
}
.ns-resize {
position: absolute;
bottom: 0px;
cursor: ns-resize;
width: 100%;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="resizable">
<div class="ns-resize">
<span> </span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
}
I could increase height by one pixel on every mousemove event, but what I really want is to increase by 10px each time.
As indicated in my comment, CSS already has a resize property you can use to make an element resizable. The only thing you need to do after a resize, is round the current height to the nearest 10px.
document.querySelector( '.resizable' ).addEventListener( 'mouseup', event => {
const current_height = parseInt( event.target.style.height, 10 );
event.target.style.height = Math.round( current_height / 10 ) * 10 + 'px';
console.log( `changed height from ${ current_height }px to ${ event.target.style.height }` );
});
.resizable {
border: 1px solid red;
height: 100px;
overflow: hidden;
resize: vertical;
width: 100px;
}
<div class="resizable"></div>
Only mighty want to add a check now to not run the function when something else inside the div is clicked.
I'm trying to make a sample where when the user click on the window, the circle (div) will move to that place with a transition. However, it does not work on the first click, but all the others. So I wonder what's making it do that.
<!doctype html>
<html>
<head>
<title>Hover</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/mystyles.css" >
</head>
<body>
<div id = "divGroup" class = 'group'>
</div>
<script src="JS/code.js"></script>
</body>
</html>
the javascript (i'm using javascript to receive the values and define new values:
var divGroup = document.getElementById("divGroup");
window.onclick = function(evt) {
divGroup.style.left = (evt.clientX - 25) + "px";
divGroup.style.top = (evt.clientY - 25) + "px";
}
the css:
#divGroup {
width: 50px;
height:50px;
background-color:lightblue;
border-radius:50%;
position: absolute;
transition: all 0.5s;
}
You should add initial left and top values in css for #divGroup
var divGroup = document.getElementById("divGroup");
window.onclick = function(evt) {
divGroup.style.left = (evt.clientX - 25) + "px";
divGroup.style.top = (evt.clientY - 25) + "px";
}
#divGroup {
width: 50px;
height: 50px;
background-color: lightblue;
border-radius: 50%;
position: absolute;
transition: all 0.5s;
left: 0;
top: 0;
}
<div id="divGroup" class='group'>
I have created a button which should shift the window's Y to "BOX - 5" div's Y middle through onclick. So in other words I want to set the "Box - 5" div in the middle of the window. I have tried many methods using window.scrollTo and using elements.innerHeight/2, but I still cannot center the element to the middle of the window/screen. Please Help.
I wish to only use Javascript, but if its not possible with it then I would accept jQuery script.
index.html:
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y=0;y<10;y++) {
var box = document.createElement("div");
box.id = "box";
box.innerHTML = "Box - " + (y+1);
content.appendChild(box);
}
document.querySelector("BUTTON").onclick = function() {
var box_5 = document.querySelectorAll("#box")[4];
/*
NEED HELP HERE
*/
}
body {
margin: 0;
}
#box {
position: relative;
height: 500px;
width: 100%;
margin: 5% auto 5% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
<div id="content"></div>
</body>
</html>
Updated your snippet as below. You can use DOM element property offsetTop to check its Y position and use window.scroll to scroll the view to that element. Another sidenote, it's better to not assign the same id to multiple elements, so I change the id property to class and added identifier _{index} for the class name.
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y=0;y<10;y++) {
var box = document.createElement("div");
box.className += "box _" + (y+1);
box.innerHTML = "Box - " + (y+1);
content.appendChild(box);
}
document.querySelector("BUTTON").onclick = function() {
var box_5 = document.querySelectorAll(".box._5")[0];
if (box_5) {
// scroll the window view to the element
window.scroll({
top: box_5.offsetTop,
behavior: 'smooth',
})
}
}
body {
margin: 0;
}
.box {
height: 500px;
width: 100%;
margin: 5% auto 5% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
<div id="content"></div>
</body>
</html>
I am trying to practice JavaScript with basic DOM manipulation but I keep getting 2 errors:
1.SyntaxError: missing ; before statement
2.TypeError: size is not a function
function size() {
var height = document.body.getElementById('hover1').style.height: 500 px;
var width = document.body.getElementById('hover1').style.width: 500 px;
}
console.log(hover);
<!DOCTYPE html>
<html>
<head>
<title>javascript practice</title>
<meta charset="utf-8" />
<style>
body {
margin: 7em auto;
background-color: green;
width: 90%;
}
#size1 {
background-color: blue;
width: 150px;
height: 150px;
margin: 3em auto;
}
</style>
</head>
<body>
<div id="size1"></div>
<input type="button" value="size" onclick="size();">
</body>
your error is here:
var height = document.body.getElementById('hover1').style.height: 500px;
var width = document.body.getElementById('hover1').style.width: 500px;
// -------------------^ and -------------------------------------^
replace those lines with these:
var height = document.getElementById('hover1').style.height;
var width = document.getElementById('hover1').style.width;
There is nothing called document.body.getElementById instead change this to document.getElementById use as below
var height = (document.getElementById('hover1'))?document.getElementById('hover1').style.height: "500px";
var width = (document.getElementById('hover1'))?document.getElementById('hover1').style.width: "500px";
function size1() {
console.log("test")
var height = (document.getElementById('hover1'))?document.getElementById('hover1').style.height: "500px";
var width = (document.getElementById('hover1'))?document.getElementById('hover1').style.width: "500px";
}
//console.log(hover);
<!DOCTYPE html>
<html>
<head>
<title>javascript practice</title>
<meta charset="utf-8"/>
<style>
body {
margin: 7em auto;
background-color: green;
width: 90%;
}
#size1 {
background-color: blue;
width: 150px;
height: 150px;
margin: 3em auto;
}
</style>
</head>
<body>
<div id="size1">
</div>
<input type="button" value="size" onclick="size1()">
</body>
If you are going to set the height of the element and assign the height to var height then you need to do the following:
var height = document.getElementById("size1").style.height = "500px";
If you are going to just assign the height of the element to var height then you need to do the following:
var height = document.getElementById("size1").style.height;
If you are just going to set the height of the element then you just need to do:
document.getElementById("size1").style.height = "500px";
You should also make your 500px with quotes as numbers do not need " " around them but once you add text...it all becomes text. So either way you should have "500px"
I would also make your button into this:
<button type="button" value="size" onclick="size()">Size</button>
Based on a belief that you are trying to make the div larger onclick of Size button then you should have the following:
Style
body {
margin: 7em auto;
background-color: green;
width: 90%;
}
#size1 {
background-color: blue;
width: 150px;
height: 150px;
margin: 3em auto;
}
HTML
<div id="size1"></div>
<button type="button" value="size" onclick="size()">Size</button>
JavaScript
function size() {
document.getElementById('size1').style.height = "500px";
document.getElementById('size1').style.width = "500px";
}