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;
Related
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 want to make responsive page using react JS. I have some problems making it. I don't really know how media query CSS works, but for #media(max-width:1024) and #media(max-width:768px) sizes it works as I expected.
I guess for size #media (max-width:425px) will also work as where #media(max-width:768px) works. But apparently starting from #media(max-width:425px) it follows the previous breakpoint(#media(max-width:768px)) and #media(max-width:375px) following the #media(max-width:425px) style. At breakpoint 320px back to my expectations.
This is my html:
<!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="index.css">
</head>
<body>
<div class="container">
This is content
</div>
</body>
</html>
And this is my CSS code:
.container{
background-color: red;
height: 100vh;
}
#media(max-width:1024px){
.container{
background-color: yellow;
}
}
#media(max-width:768px){
.container{
background-color: green;
}
}
#media(max-width:425px){
.container{
background-color: blue;
}
}
#media(max-width:375px){
.container{
background-color: rosybrown;
}
}
#media(max-width:320px){
.container{
background-color: rosybrown;
}
}
Is there a way for each breakpoint to take its own style. As in max-width:1024px which takes a yellow background and max-width:768px takes a green background. Is it possible if I want if at max-width:425px it takes a blue background and at max-width:375 it takes a rosybrown color. Thank you in advance.
Try adding the only screen
#media(only screen and max-width:768px){
.container{
background-color: green;
}
}
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
I don't have a good enough understanding of web development to be able to tell if my question is already answered here, so apologies if this is a duplicate.
I'm planning to have a lot of different pages in my website, all structured differently, all of which need to look reasonable on a variety of different screen sizes. These pages will include and/or link-to code that makes various bits of content appear and disappear. On some of these pages however I'm finding there's too much appearing and disappearing all at once and the reader gets confused about exactly what has changed. To solve this, I'd love to write either some CSS or some JS for ensuring that when the position of an element changes, it smoothly moves into the new position instead of just jumping there. Hopefully, this will help the end-user better understand how the content has changed.
I'm currently trying to do this with CSS using a "transition" applied to the "position" attribute, but to no avail. Here's the code:
function toggleVisibility(elementId) {
var element = document.getElementById(elementId);
if (element.style.display === "none") {
element.style.display = null;
} else {
element.style.display = "none";
}
}
#lol {
position: relative;
transition: position 2s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
}
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="foo"> foo </div>
<div id="bar"> bar </div>
<div id="lol"> lol </div>
<button onmouseup="toggleVisibility('bar')"> Click me</button>
</body>
This doesn't do anything helpful, unfortunately. There's no smooth transition; the text that says "lol" jumps around instantaneously.
Ideas, anyone? A javascript solution is fine, but I'm looking for something that's generic enough that it can be applied anywhere on the page without precomputing any values, if that makes sense.
You need to define the height of your elements, auto won't animate. Also you shouldn't use ids to style objects, is better to use a class so that you don't have specificity problems.
Here's a working example, I added also opacity and overflow: hidden to make the item disappear:
function toggleVisibility(elementId) {
var element = document.getElementById(elementId);
element.classList.toggle("hidden");
}
.item {
position: relative;
height: 20px;
overflow-y: hidden;
opacity: 1;
transition: height 0.5s, opacity 0.3s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
}
.hidden {
height: 0;
opacity: 0;
}
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="foo" class="item"> foo </div>
<div id="bar" class="item"> bar </div>
<div id="lol" class="item"> lol </div>
<button onmouseup="toggleVisibility('bar')"> Click me</button>
</body>
First of all according to W3C (read for more)display is not a animateable property. So when you change the display from block to none or vice versa you can not animate this change.
But in order to achieve what you want is you can use the height property. When hiding the element you need to do is set the height to 0. And add transitions to that and that will do the trick.
Also in order for you to use this throughout your application use a class say hidden and whenever you want any element to hide with animation add this class to that. Below is a working snippet of the same.
Also for the above to work you need to give your element some initial height as transitions wont work with height: auto
function toggleVisibility(elementId) {
var element = document.getElementById(elementId);
if (element.style.height === "0") {
element.classList.remove('hidden');
} else {
element.classList.add('hidden');
}
}
div.hidden {
-moz-transition: height .8s;
-ms-transition: height .8s;
-o-transition: height .8s;
-webkit-transition: height .8s;
transition: height .8s;
height: 0;
overflow: hidden;
opacity: 0;
}
div {
height: 20px;
opacity: 1;
}
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="foo"> foo </div>
<div id="bar"> bar </div>
<div id="lol"> lol </div>
<button onmouseup="toggleVisibility('bar')"> Click me</button>
</body>
Hope this helps :)
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.