I'm trying to create a custom div scroller.
See DEMO
So close! How can I keep the scroller within the confines of the container?
I am trying to avoid JavaScript libraries like jQuery for this.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
#content {
height: 500px;
width: 500px;
overflow: hidden;
border: solid 1px red;
}
#scr {
height: 100px;
width: 100px;
top: 100px;
left: 50px;
position: absolute;
border: solid 1px black;
background-color: #26a0eb;
z-index: 3;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="content" style="margin-top:100px;">
<div id="scr">
</div>
<div id="container">
see demo above for scrollable content
</div>
</div>
</form>
<script type="text/javascript">
window.onload = function () {
//help from http://stackoverflow.com/a/13152737/139698
draggable('scr');
};
var dragObj = null;
function draggable(id) {
var obj = document.getElementById(id);
obj.style.position = "absolute";
obj.onmousedown = function () {
dragObj = obj;
}
}
document.onmouseup = function (e) {
dragObj = null;
};
document.onmousemove = function (e) {
var y = e.pageY; //scroller
if (dragObj == null)
return;
var c = document.getElementById('content');
//var b = document.getElementById('scrbox');
/*
1. scr.top - scrbox.top = x
2. x / scrbox height = pct
3. scroll top = scroll height * pct
*/
var x = y - c.offsetTop;
var pct = x / c.clientHeight;
c.scrollTop = Math.floor(c.scrollHeight * pct);
dragObj.style.top = (y-50) + 'px'; //50 is an offset
};
</script>
</body>
</html>
it won't work on touchscreen in some browsers, use touchbegin, touchmove, touchend events to improve touch support, also try to use as much static positioning as it's possible, absolute or relative positioning will cause heavy performance drop while scrolling. i'd recommend also wheel support
Related
I'm trying to make my div element move back and forth inside a container infinitely.
The goal is to use Java Script only, no CSS animations, jQuery, etc.
const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
function move() {
box.style.left = pos + 'px';
box.style.top = pos + 'px';
pos++;
if (pos === 150) {
clearInterval(t)
}
}
#container{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link href="animation.css" rel="stylesheet">
<script defer src="animation.js"></script>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
So here the code. As you see, I've used position relative/absolute to make the element move with setInterval function. But when I try to reverse it back to "it's corner", it just won't work. To be honest, I've tried some stuff already, but I really can't find the solution of doing it without using any other instruments.
Thanks in advance.
You need to increase/decrease the values considering a boolean variable like below:
const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
let test = true;
function move() {
box.style.left = pos + 'px';
box.style.top = pos + 'px';
if (test)
pos++; /* move down */
else
pos--; /* move up */
/* update the direction when you reach the top or bottom limit*/
if (pos >= 150)
test = false
else if (pos <= 0)
test = true;
}
#container {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
<div id="container">
<div id="box"></div>
</div>
An alternative to get the same results
const box = document.getElementById('box');
let jump = 1;
let pos = 0;
window.setInterval(() => {
pos = pos + jump;
if (pos > 150 || pos < 0) {
jump = jump * (-1);
}
box.style.left = pos + 'px';
box.style.top = pos + 'px';
}, 1);
#container{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link href="animation.css" rel="stylesheet">
<script defer src="animation.js"></script>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
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'm trying to achieve a Glass Magnifier in JS.But something wrong when I try to set the position of my glass regarding to the cursor position: if I try to set the glass position to the center of the cursor, lags happened and I can't figure out why.
I've tried to set a transform : translation (-50%, -50%) to my glass, but results are the same.
More than my glass position is far from the center of the cursor, less is bugged.
let img = document.querySelector('.longboard');
let glass = document.querySelector('#zoom');
let displayCoor = document.querySelector('.coordonnees');
let a = glass.offsetWidth / 2;
let b = glass.offsetHeight / 2;
img.onmousemove = function(e) {zoomMovement(e)};
function mousemovement(e) {
let x = e.pageX;
let y = e.pageY;
let coor = "Coordinates: (" + x + "," + y + ")";
displayCoor.innerHTML = coor;
return {x : x, y : y};
};
function zoomMovement (e){
var pos = mousemovement(e);
glass.style.top = (pos.y-b) +'px'; //<-- increase b to avoid the lag
glass.style.left = (pos.x-a) +'px';//<-- increase a to avoid the lag
}
/*img.addEventListener('mouseenter', function () {
document.getElementById('zoom').className = "visible";
});
img.addEventListener('mouseleave', function () {
document.getElementById('zoom').className = "invisible";
});*/
.visible{
display: block;
box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
}
.invisible{
display: none;
}
#zoom{
position: absolute;
background-image: url("https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg");
background-repeat: no-repeat;
width: 150px;
height: 150px;
border-radius: 100px;
z-index: 2;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Loupe</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<img class="longboard" src="https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg" style="position: relative; display: block;margin: 100px auto; width: 30%;"/>
</div>
<div class="coordonnees" style="display: block;margin: 30px auto"></div>
<div id="zoom" class="visible"> </div>
<script src="js/zoom3.js"></script>
</body>
</html>
I will really appreciate if someone could explain me why.
Thanks for your help!
I'm not sure I understand what you mean by "lag". But one issue I've found is that you're only listening to the mousemove event on your img. So, if you're moving your cursor inside your zoom, the glass manifier is not moving. This is because your glass has a higher z-index than your img. So, the mousemove event is not triggered as long as you don't move your cursor out of the glass.
To solve this, I only attached your event listener to the glass element and it seems smoother.
EDIT : I've found a much better solution using CSS pointer-events:none on your glass element.
Then, you can uncomment your eventListener that are showing and hiding your magnifier when your leave / enter the img
let img = document.querySelector('.longboard');
let glass = document.querySelector('#zoom');
let displayCoor = document.querySelector('.coordonnees');
let a = glass.offsetWidth / 2;
let b = glass.offsetHeight / 2;
img.onmousemove = function(e) {zoomMovement(e)};
// previous solution : listening to mousemove on the magnifier :
// glass.onmousemove = function(e) {zoomMovement(e)};
function mousemovement(e) {
let x = e.pageX;
let y = e.pageY;
let coor = "Coordinates: (" + x + "," + y + ")";
displayCoor.innerHTML = coor;
return {x : x, y : y};
};
function zoomMovement (e){
var pos = mousemovement(e);
glass.style.top = (pos.y-b) +'px'; //<-- increase b to avoid the lag
glass.style.left = (pos.x-a) +'px';//<-- increase a to avoid the lag
}
img.addEventListener('mouseenter', function () {
document.getElementById('zoom').className = "visible";
});
img.addEventListener('mouseleave', function () {
document.getElementById('zoom').className = "invisible";
});
.visible{
display: block;
box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
}
.invisible{
display: none;
}
#zoom{
position: absolute;
background-image: url("https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg");
background-repeat: no-repeat;
width: 150px;
height: 150px;
border-radius: 100px;
z-index: 2;
pointer-events:none;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Loupe</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<img class="longboard" src="https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg" style="position: relative; display: block;margin: 100px auto; width: 30%;"/>
</div>
<div class="coordonnees" style="display: block;margin: 30px auto"></div>
<div id="zoom" class="visible"> </div>
<script src="js/zoom3.js"></script>
</body>
</html>
Sorry for the ambiguous title, not sure how to phrase it.
I have an html page that has 2 iframes side by side with 100% height. I'm trying to set the maximum width of the iframe on right.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<div id="content-wrapper">
<div id="content">
<div id="holder_Iframe1">
<iframe id="iframe1" src="https://en.wikipedia.org/wiki/Mercedes-Benz"></iframe>
<div id="drag"></div>
</div>
<div id="holder_Iframe2">
<iframe id="iframe2" src="http://www.dictionary.com/browse/mercedes?s=t"></iframe>
</div>
</div>
</div>
</body>
</html>
Both iframes are wrapped by divs. Hover the mouse between the iframes to be see the re-size cursor.
I'm setting a maximum width of the iframe2 (the one on the right) of 560px, but when resizing, sometimes it passes that maximum width so I can't resize it back. I'm trying to fix that.
function Resize(e) {
var rightPanePx = document.documentElement.clientWidth - parseInt(holder_Iframe1.style.width, 10);
console.log(rightPanePx);
if ((rightPanePx >= 25) && (rightPanePx <= 560)) {
holder_Iframe1.style.width = (e.clientX - holder_Iframe1.offsetLeft) + "px";
iframe1.style.width = Math.max((holder_Iframe1.style.width.replace("px", "") - 4), 0) + "px";
holder_Iframe2.style.width = (document.documentElement.clientWidth - holder_Iframe1.style.width.replace("px", "")) + "px";
iframe2.style.width = holder_Iframe2.style.width;
}
}
I have attached the code that demonstrates my problem.
var iframe1 = document.getElementById("iframe1");
var iframe2 = document.getElementById("iframe2");
var holder_Iframe1 = document.getElementById("holder_Iframe1");
var holder_Iframe2 = document.getElementById("holder_Iframe2");
var dragEl = document.getElementById("drag");
holder_Iframe1.style.width = (Math.max(document.documentElement.clientWidth, window.innerWidth || 0) * 0.8) + "px";
iframe1.style.cssText = 'width:' + ((Math.max(document.documentElement.clientWidth, window.innerWidth || 0) * 0.8) - 5) + 'px;height:100%;';
dragEl.addEventListener('mousedown', function(e) {
//create overlay so we will always get event notification even though the pointer is hovering iframes
var overlay = document.createElement('div');
overlay.id = "overlay";
document.body.insertBefore(overlay, document.body.firstChild);
window.addEventListener('mousemove', Resize, false);
window.addEventListener('mouseup', stopResize, false);
}, false);
function Resize(e) {
var rightPanePx = document.documentElement.clientWidth - parseInt(holder_Iframe1.style.width, 10);
console.log(rightPanePx);
if ((rightPanePx >= 25) && (rightPanePx <= 560)) {
holder_Iframe1.style.width = (e.clientX - holder_Iframe1.offsetLeft) + "px";
iframe1.style.width = Math.max((holder_Iframe1.style.width.replace("px", "") - 4), 0) + "px";
holder_Iframe2.style.width = (document.documentElement.clientWidth - holder_Iframe1.style.width.replace("px", "")) + "px";
iframe2.style.width = holder_Iframe2.style.width;
}
}
function stopResize(e) {
//remove event listeners from improved performance
window.removeEventListener('mousemove', Resize, false);
window.removeEventListener('mouseup', stopResize, false);
//remove fake overlay
document.getElementById("overlay").remove();
}
html {
overflow-y: hidden;
}
body {
width: 100%;
}
iframe,
#holder_Iframe1,
#holder_Iframe2 {
margin: 0;
padding: 0;
border: 0;
}
iframe {
width: 100%;
height: 100%;
min-width: 0;
}
#content-wrapper {
display: table;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
}
#content {
display: table-row;
}
#holder_Iframe1,
#holder_Iframe2 {
display: table-cell;
min-width: 0 !important;
}
#holder_Iframe1 {
width: 80%;
}
#drag {
height: 100%;
width: 3px;
cursor: col-resize;
background-color: rgb(255, 0, 0);
float: right;
}
#drag:hover {
background-color: rgb(0, 255, 0);
}
#drag:active {
background-color: rgb(0, 0, 255);
}
#overlay {
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
cursor: col-resize;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<div id="content-wrapper">
<div id="content">
<div id="holder_Iframe1">
<iframe id="iframe1" src="https://en.wikipedia.org/wiki/Mercedes-Benz"></iframe>
<div id="drag"></div>
</div>
<div id="holder_Iframe2">
<iframe id="iframe2" src="http://www.dictionary.com/browse/mercedes?s=t"></iframe>
</div>
</div>
</div>
</body>
</html>
You need to use cursor's position to detect where the direction is.
By adding e.pageX to your function to determine whether resize it or not.
In your sample this may be if (window_size - e.pageX < 560) go resize it, otherwise don't resize.
I want to dynamically create 6 boxes when the page is loaded. They should be inline-block, so eventually it will look like 3 lines, with 2 boxes on each line.
I tried the code below without any JavaScript (just used some static HTML and CSS), and it seemed to work fine.
Generally, the script looks fine to me -- however, it does nothing. What am I doing wrong? Is it something about the order of the CSS and the JavaScript?
style1.css:
* {
margin:0;
padding:0;
}
header,section,nav,aside,footer{
display:block;
}
.wrapper{
position: relative;
height: 2150px;
width: 900px;
background-color: #336b98;
margin: 0 auto;
}
section#contentSection_layout3{
position: absolute;
top:193px;
height: 1957px;
width: 900px;
border-right: solid 1px #FFF;
}
HTML & JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="includes/style1.css">
<script src="includes/JavaScript.js"></script>
<title> EX </title>
<script>
window.onload = function(){
var boxesNum = 6;
for(var i = 0; i < boxesNum; i++){
var rect = new rect();
rect.setAttribute('display', 'inline-block');
rect.setAttribute('margin-left', '200');
rect.setAttribute('margin-top', '100');
rect.setAttribute('height', '150');
rect.setAttribute('width', '150');
rect.setAttribute('background-color', '#FFF');
document.getElementById('contentSection_layout3').appendChild(rect);
}
};
</script>
</head>
<body>
<div class="wrapper">
<section id="contentSection_layout3"></section>
</div>
</body>
</html>
var rect = new rect();
Unless you have defined rect elsewhere, you want:
var rect = document.createElement('div');
Also, setAttribute is not for styles, style is for styles.
rect.style.display = 'inline-block';
rect.style.marginLeft '200px';
rect.style.marginTop = '100px';
rect.style.height = '150px';
rect.style.width = '150px';
rect.style.backgroundColor = '#FFF';
Also, don't forget your pxs.