I'm experimenting with some touch integration with my web app and i'm noticing that with the code posted below the block that moves on touch has a costant offset and I can temporarly remove it by going in f11 mode. How do i remove it such that the block is always under the finger?
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<head>
<title>A title</title>
</head>
<style>
body {
width: 100vw;
height: 100vh;
position: absolute;
top: -8px;
left: -8px;
overflow: hidden;
}
</style>
<body>
<div id="bup" style="position:absolute; background-color:blue;width:100px;height:100px;"></div>
<script>
var touch = [];
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
touch = event.touches;
document.getElementById('bup').style.top= (touch[0].screenY-50) + 'px';
document.getElementById('bup').style.left= (touch[0].screenX-50) + 'px';
}, false);
</script>
</body>
</html>
(the -50 is there just to center the block on my finger considering that the block it self is 100x100px)
ty
Alright i solved it my self.
the issue was the touch[0].screenX. I shoud have used touch[0].clientX, same for the Y.
Hope this helps someone, see ya
Related
I asked this question to answer it because there is no clear info or question about this. I found the solution in a comment, not in an answer. so I hope this will help others.
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>
btn
<div class="box" id="box"></div>
</body>
</html>
CSS
.btn{
width: 150px;
height: 50px;
cursor: pointer;
margin: 10px;
background: black;
color: white;
}
.box{
width: 200px;
height: 200px;
background: orange;
margin: 5px;
}
javascript
var box = document.getElementById("box");
function clickBtn() {
if (box.style.background = "orange"){
box.style.background = "blue";
} else {
box.style.background = "green";
}
}
use href="javascript:void(0)" in a tag. The javascript:void(0) can be used when we don't want to refresh or load a new page in the browser on clicking a hyperlink.
1- If you use <a> as a button, it will refresh the page as long as it has href="". so remove href and it will work without refreshing the page.
2- if you want to keep the href, then change the <a> to button. it worked for me.
PROBLEM
I could only find answers showing how to use vw/vh to get the current size of the window, which is not what I need.
WHAT I ACTUALLY NEED
I need the full width of the monitor screen independently of the browser window being maximized or not.
Is there a way to do this using pure CSS? If not, can it be done using JavaScript + CSS? If so, how?
CSS can only give you the viewport width, i.e. the window width. However, you can use screen.width to get the screen's width with JavaScript.
console.log(screen.width);
do you want the content of a tag to take up the entire screen space or do you want to specifically get the height and width value in pixels? If it's the first option, I think I've found a solution.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
background: blue;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<!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>
<main></main>
<script src="./script.js"></script>
</body>
</html>
another way to solve it would be using the innerWidth and innerHeight values of the window
const width = window.innerWidth;
const height = window.innerHeight;
const main = document.querySelector("main");
main.style.width = `${width}px`;
main.style.height = `${height}px`;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
background: blue;
}
<!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>
<main></main>
<script src="./script.js"></script>
</body>
</html>
A reference used: https://tutorial.tips/how-to-get-viewport-width-and-height-using-javascript/
I'm trying to recreate this simple jquery image zoom scroll effect in vanilla javascript with no success:
I'm looking online and all tutorials seems to use jquery or skrollr library which is not being supported since 2014.
This is a tutorial of this effect on youtube:
https://www.youtube.com/watch?v=hjeS8HxH3k0
<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>Image Zoom Scroll Effect</title>
<style>
body {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
div img {
width: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
}
/* BLANK SPACE, JUST TO TRY OUT THE SCROLL EFFECT */
.whitespace {
width: 100%;
height: 100vh;
}
</style>
<!-- JQUERY CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="img-area">
<img
src="https://images.pexels.com/photos/775201/pexels-photo-775201.jpeg"
/>
</div>
<!-- BLANK SPACE, JUST TO TRY OUT THE SCROLL EFFECT -->
<div class="whitespace"></div>
<script>
// JQUERY
$(window).scroll(() => {
let scroll = $(window).scrollTop();
$('.img-area img').css({
width: 100 + scroll / 5 + '%',
});
});
// VANILLA JS
// window.addEventListener('scroll', () => {
// let scroll = window.scrollTop;
// document.querySelector('.img-area img').style.width =
// 100 + scroll / 5 + '%';
// });
</script>
</body>
</html>
I've commented out my vanilla javascript code.
There is no property scrollTop for the window object. Use document.documentElement:
window.addEventListener('scroll', () => {
let scrollTop = document.documentElement.scrollTop;
document.getElementById('test').style.width = 100 + scrollTop / 5 + '%';
});
See working fiddle: https://jsfiddle.net/z3hux1ra/5/
i just wanna know how i can zoom in and out in the div zoom with an Javascript Code.
So i have an DIV. In the DIV is another DIV which ist much larger than the div which is superordinated. Just like an MAP.
I wanna Scroll in and out in this div however i want.
I don't need the full code i just wanna know where i have to search for.
HERE are the IMAGES what i wanna do:ZOOM ZOOMIN ZOOMOUT
You can emulate a "zoom" into a div with CSS transform: scale() property. Here's some JS code that toggles between a zoomed in/out state on click.
<!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>Testing</title>
<style>
#zoom {
height: 50px;
width: 50px;
margin: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div id="zoom"><p>Test</p></div>
</div>
<script>
// On click, scale up or down
document.getElementById("zoom").addEventListener("click", function() {
this.style.transform === "scale(2)"
? (this.style.transform = "scale(1)")
: (this.style.transform = "scale(2)");
});
</script>
</body>
</html>
You can add transition CSS for smooth zoom in/out.
transition: transform 2s;
-webkit-transition: transform 2s;
I have been attempting to have a tab in my cordova app in which a map is shown. I want users to be able to pinch to zoom in and out of the image and pan. I used the latest iScroll build and I wasn't able to get anything to work correctly. I have recently come across this demo
http://lab.cubiq.org/iscroll/examples/zoom/
Which does exactly what I want my app to do and works in my phone's browser. However, when I copied the iscroll.js and source of this demo and pasted it into my app to test it through cordova, I was not able to zoom on my android phone or ios emulator, only pan around. I have achieved the same on the page I actually want to apply this to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
zoom:true,
onBeforeScrollStart:null,
zoomMin:0.25,
zoomStart:0.5,
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css">
html {
-ms-touch-action: none;
}
body {
overflow: hidden;
}
#wrapper {
position: absolute;
z-index: 1;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
background: #ccc;
overflow: auto;
}
#scroller {
position:relative;
background: #ccc;
/*-webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:725px;
padding:0;
}
img {
-webkit-transform:translate3d(0,0,0);
}
</style>
</head>
<body Onload="loaded()">
<ons-screen>
<ons-navigator title="Map">
<div id="wrapper">
<div id="scroller">
<!--<iframe src="thing.html" style="width:100%; height:100%"></iframe>-->
<img src="img/map.png"></img>
</ons-page>
</div>
</ons-navigator>
</ons-screen>
</body>
<!--<script src="js/hammer.min.js"></script>
<script src="js/myLogic.js"></script>-->
</html>
If anyone can help me figure out why this works in browser, but not when translated to native code, or how to make it work, I will be forever in your debt.