Image drag glitchy on mobile - javascript

I've built a quick block which allows someone to zoom in on an image and then drag (pan and zoom).
To do this, I have used panzoom:
jQuery(document).ready(function( $ ) {
$("#panzoom").panzoom({
$zoomRange: $(".zoom-range"),
$reset: $(".reset"),
contain: 'invert',
});
});
.wrap{
position: relative;
background: black;
padding: 60px 20px;
height: 600px;
}
.wrap .padding, section{
height: 100%;
}
.wrap .buttons {
position: absolute;
z-index:1;
top: 0;
right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/2.0.6/jquery.panzoom.min.js"></script>
<div class="wrap">
<div class="padding">
<section>
<div id="panzoom" style="text-align: center">
<img src="https://i.imgur.com/KhWo66L.png" width="100%">
</div>
</section>
<section class="buttons">
<button class="reset">Reset</button>
<input type="range" class="zoom-range">
</section>
</div>
</div>
The above works fine on desktop. But on mobile, since the user users the screen to scroll, when trying to drag the image across, it "stutters".
Difficult to explain, best demo'd on an actual device.
Any ideas on what the issue is here?

Use this library instead, it's more stable
// just grab a DOM element
const element = document.querySelector('.wrap');
// And pass it to panzoom
panzoom(element);
.wrap{
position: relative;
background: black;
padding: 60px 20px;
height: 600px;
}
.wrap .padding, section{
height: 100%;
}
.wrap .buttons {
position: absolute;
z-index:1;
top: 0;
right:0;
}
<script src='https://unpkg.com/panzoom#8.7.3/dist/panzoom.min.js'></script>
<div class="wrap">
<div class="padding">
<section>
<div id="panzoom" style="text-align: center">
<img src="https://i.imgur.com/KhWo66L.png" width="100%">
</div>
</section>
<section class="buttons">
<button class="reset">Reset</button>
<input type="range" class="zoom-range">
</section>
</div>
</div>

Related

How to re-create Facebook image modal?

I want to create something almost exactly like the Facebook image modal wherein the image is fixed while a user scrolls through the comments. I am messing with different ways to apply overflow: hidden to one div and overflow: scroll to the other. I even looked into applying it to their parent. Here is the code I've tried:
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>
div.image {
height: 300px;
overflow: hidden;
}
div.text-section {
height: 1000px;
overflow: scroll;
}
div.container {
height: 300px;
}
Plunkr
I supposed a code like this. The blue (image) remains fixed on the left, while you can scroll the green section (comments) on the right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container { background: red; width: 400px; height: 150px; display: flex; }
#image { background: url("https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb(255,255,255)"); width: 200px; height: 150px; }
#comments { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }
</style>
</head>
<body>
<div id="container">
<div id="image"></div>
<div id="comments">
<h3 style="color: red;">Comments</h3>
<p>Nice!</p>
<p>Good!</p>
<p>Wonderful</p>
<p>Bah...</p>
<p>Strange</p>
<p>Nice again</p>
<p>Amazing</p>
<p>Beautiful</p>
<p>Great</p>
<p>I don’t like it</p>
<p>Yes, nice</p>
<p>Super</p>
<p>Normal</p>
<p>Ok...</p>
<p>Nice</p>
<p>Bah</p>
<p>Great</p>
<p>Nice</p>
<p>I like it</p>
<p>Normal</p>
</div>
</div>
</body>
</html>
I don't have facebook so cant look at the behaviour, but you could put position: sticky; on the image container, that will keep it in place. It also depends on your browser support, like ie11 does not support it, but there are more ways to do this. Let me know if you need a more cross browser solution.
.container {
max-height: 600px;
height: 100%;
overflow: auto;
position: relative;
}
div.image {
height: 300px;
background-color: deepskyblue;
position: sticky;
top: 0;
}
div.text-section {
height: 1000px;
background-color: aqua;
}
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>

Iframe 100% full width bootstrap3

I found a good contact page that I want reproduce, see this link at Contatti section.
I'm using Initializr with Twitter Bootstrap3.
Here is HTML/css/js structure for Contact Section, I've a gmaps iframe (id="map") inside iframeWrapper placed with position:relative, iframeBlock is a full width/height panel with opacity = 0.7 to overshadow iframe, iframeCont with two panel with some contact link and btn-map and btn-cont to switch between active (no opacity and possibility to make the scroll and to use zoom buttons ) and inactive iframe.
I set position:absolute for all other element inside a iframeWrapper.
$('#btn-map').click(function(){
$('#iframeBlock').hide();
$('#iframeCont').hide();
$('#btn-map').css('display','none');
$('#btn-cont').css('display','block');
});
$('#btn-cont').click(function(){
$('#iframeBlock').show();
$('#iframeCont').show();
$('#btn-map').css('display','block');
$('#btn-cont').css('display','none');
});
#cont{
width: 100%;
height: 100%;
padding-top: 50px;
text-align: center;
background: #fff;
}
#map{
z-index:5;
width: 100%;
padding: 0;
}
#iframeWrapper{
position: relative;
}
#iframeBlock{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
opacity:0.7;
background: #000;
z-index: 6;
text-align:center;
}
#iframeCont{
position: absolute;
top:20%;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 7;
text-align:center;
}
.cont-element{
background: #0b5394;
color:#FFF;
margin-bottom: 5%;
border-radius: 10px;
padding: 3%;
font-size: 1.2em;
}
#btn-map{
position: absolute;
top:70%;
left:25%;
z-index: 7;
opacity: 1;
background: #cc0000;
color: #FFF;
border-color: #FFF;
display:block;
}
#btn-cont{
position: absolute;
top:70%;
left:30%;
z-index: 7;
opacity: 0.7;
background: #FFF;
color: #000;
border-color: #cc0000;
display:none;
}
<!-- Contatti Section -->
<section id="cont" class="cont-section">
<div class="container-fluid">
<div class="row-fluid">
<div id="iframeWrapper">
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2786.232975915266!2d8.878734115818997!3d45.70636282527264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478688abc9247355%3A0x59d85ca1774dc65a!2sASD+Pallacanestro+Lonate+Ceppino!5e0!3m2!1sit!2sit!4v1445187794194" frameborder="0" style="border:0" allowfullscreen></iframe>
<div id="iframeBlock">
</div>
<div id="iframeCont">
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-8 cont-element">
<i class="fa fa-mobile"></i> </br> <a href:"tel:xxxxxxxx">xxxxxxxx</a> <span>Giovanni</span>
</div>
<div class="col-xs-2">
</div>
</div>
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-8 cont-element">
<i class="fa fa-envelope"></i> </br> xxxxxxxx#gmail.com
</div>
<div class="col-xs-2">
</div>
</div>
</div>
<button id="btn-map" class="btn btn-info btn-lg"><i class="fa fa-map-o"></i> <strong>Visualizza Mappa</strong></button>
<button id="btn-cont" class="btn btn-info btn-lg"><i class="fa fa-phone"></i> <strong>Contattaci</strong></button>
</div>
</div>
</div>
<!-- begin snippet: js hide: false -->
Everything works but I have a padding of 15px around iframeWrapper due to container-fluid and then see two white borders on the left and right side.
I tried to reset the padding for the container-fluid to zero, but It displays a horizontal scroll bar and it is as if the content is outside the viewport.
Image that show contact section
Could you help me? Thanks
analyzing the code with Google Chrome Developers Tool, I found that two rows exceed viewport width. (For example, if viewport width is 380px, the row width is 410px), so I write this CSS rule:
#iframeCont .row{
width: 100%;
}
which refers just to the two rows, and now I have no more white space around my iframe.
But for me is a bad solution! I probably poorly designed html structure!

CSS only carousel

I am trying to change the CSS below so that I don't need the JavaScript snippet to achieve the same desired effect.
The JavaScript:
<script>
$(function() {
var pageCount = 2;
var pageWidth = 450;
$("#pages").css('width', window.innerWidth * pageCount);
$(".page").css('margin-right', window.innerWidth - pageWidth);
});
</script>
The HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#pages {
position: absolute;
top: 50%;
height: 200px;
width: 30000px;
margin-top: -100px;
left: 50%;
}
.page {
margin-left: -150px;
width: 300px;
background: blue;
float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="pages">
<div class="page">
<h1>Page 1</h1>
<p>This is the first page</p>
</div>
<div class="page">
<h1>Page 2</h1>
<p>This is the second page</p>
</div>
<div class="page">
<h1>Page 3</h1>
<p>This is the third page</p>
</div>
</div>
</body>
</html>
Is there any way I can remove this JavaScript and do the same thing in CSS only? Originally I tried playing around with margin-right: 100% but couldn't get it to work.
Code Pen: http://codepen.io/anon/pen/gfxeh
Yes. You can use the following CSS:
.page {
counter-increment:section;
margin-left: -150px;
width: 300px;
background: blue;
float: left;
margin-right: calc(100%/3 - 300px);
}
#pages {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
left: 50%;
width: calc(100%*3);
}
Alternative solution that works with any number of pages and compatible with older browsers (calc is a new CSS feature)
There is however a limitation: the scroll bar is in the pages element. (there is a way to work around this which I will show bellow)
HTML
<div id="pages">
<div class="page">
<div class="content">
<h1>Page 1</h1>
<p>This is the first page</p>
</div>
</div>
<div class="page">
<div class="content">
<h1>Page 2</h1>
<p>This is the second page</p>
</div>
</div>
<div class="page">
<div class="content">
<h1>Page 3</h1>
<p>This is the third page</p>
</div>
</div>
</div>
CSS
#pages {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.page {
width: 100%;
display: inline-block;
}
.page > .content {
width: 300px;
background: blue;
margin: 0 auto;
}
See Code Pen
If your page will only contain the carousel, you can replace #pages with body so that the scroll bar is the main scrollbar
See Code Pen
By the way, the CSS in the marked solution is not working. It should be
.page {
...
margin-right: calc(100%/3 - 300px);
}
Code Pen for the correction

How do i add an image in a div?

I need to insert a image to be zoom in and out but some website told me that it is suppose to be use with path="image url". The image didn't appear so i want to use background-image: url("image url"). So how do i put it in to allow image to show?
<style type="text/css">
#html{
height:100%;
}
#body{
height:100%;
margin:0px;
padding:0px;
}
#hr{
border:0;
width:50%;
}
</style>
<body>
<div id="outerDiv0">
<div id="outerDiv" style="position:relative;height:99%;width:100%;border:1px solid black;overflow:hidden;">
<div style="position: absolute; top: 10px; left: 10px; z-index: 1">
<img src="zoomin_off.gif"
onclick="ZoomIn()" alt="zoomin"/>
</div>
<div style="position: absolute; top: 10px; left: 90px; z-index: 1">
<img src="zoomout_off.gif"
onclick="ZoomOut()" alt="zoomout"/>
</div>
<div id="Nav" style="display:none;position: absolute; top: 70px; left: 20px; z-index: 1"><div><img src="prev.gif" alt="prev"/></div>
<div style="position: absolute; top: 0px; left: 79px;"><img src="next.gif" alt="next"/></div></div>
<div id="imageTiles" style="position:relative;top:0;left:0;z-index:0;width:100%;"></div>
<div id="imageLabels" style="position:relative;top:0;left:0;z-index:1;width:900000px;height:900000px;"></div>
</div>
<div id="overlay"><div id="theScale"></div><div id="theInfo">
</div>
<div id="Thumb0"><div id="Thumb"></div><div id="Thumb2"></div></div>
</div>
<div id="wheelMode">Mouse Wheel:<input type="radio" onclick="wheelMode1()" /> Zoom<input type="radio" onclick="wheelMode2()" /> Next/Prev</div>
<div id="coords" style="position:absolute;top:2px;right:10px;z-index:10;"></div>
</div>
Without any example code we can only guess. Maybe your div did not have any dimensions. Try adding width and height with css to your div:
<div style="width:300px;height:300px;background:url('http://webpage/path/to/image.jpg')"></div>
Can you try this,
CSS:
.Bg{
width:300px;
height:300px;
background-image:url('imagepath');
}
HTML:
<div class='Bg'></div>
Its hard to understand what exactly you want to do,however if you want to add background image to div you can do it as follows
<div class="show">
some text
</div>
in CSS
.show
{
background-image:url('paper.gif');
//other css properties of div
}
ref

how to make popup in center of screen and overlay/background to full screen high

I am working on asp.net page. In master page I have a div like this:
<body id="page1" >
<form id="form2" runat="server">
<div id="content">
<!-- this is popup light grey show -->
<div class="darkenBg" id="popupBackground" style="display:none;"></div>
<!-- content -->
<div class="greenBox2 popUpWin" id="companySigninPopup" style="display:none;">
<div class="topWrap">
<!-- popup window -->
</div>
<div class="botWrap">
<div class="corner-bottom-left"> </div>
<div class="border-bottom"> </div>
<div class="corner-bottom-right"> </div>
</div>
</div>
</div>
</div>
</div>
I am showing it like this:
function ShowHomePagePopup(popupId) {
$("#" + popupId).show();
$("#popupBackground").show();
$('#popupBackground').height(800);
$("#page1").addClass('hideScrollbars');
}
css is like this:
html, body {
height:100%;
margin:0px;
}
.darkenBg { /*added this div after body*/
background: url(/images/blackBg.png);
position:absolute;
z-index:30;
width:100%;
height:100%;
bottom:0px;
}
.popUpWin {
position:absolute;
z-index:31;
width:500px;
left:50%;
margin:200px 0 0 -250px
}
.hideScrollbars {
overflow: hidden;
}
#content {
background:url(/images/bg.gif) top left repeat-x #fff;
overflow:hidden;
padding-bottom:20px;
}
When the popup appears, it is centered horizontally, but vertically at the top, so it is at top mid of the screen.
The overlay, light grey background, means popupBackground is only 10% of the height of screen although width is 100%. How can I make it 100% high ?
This is a good way to make a popup only with CSS:
The HTML code:
<div class="container-popup">
<div class="popup"></div>
</div>
The CSS code:
.container-popup {
position: relative;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.popup {
width: 50%;
height: 50%;
background: #1abcb9;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Check this Fiddle.
There is an example to simplest overlay popup
LINK
$(document).ready(function(){
$(".container-popup, #close").click(function(){
$('.popup').hide(); $('.container-popup').hide();
});
});
Place the Popup Window inside the overlay-div!
<body id="page1" style="height: 100%;">
<form id="form2" runat="server" style="min-height: 100%;">
<div id="content">
..
content
...
</div>
</div>
<div class="darkenBg" id="popupBackground" style="display:none;">
<div class="greenBox2 popUpWin" id="companySigninPopup" style="display:none;">
<div class="topWrap">
popup window
</div>
<div class="botWrap">
<div class="corner-bottom-left"> </div>
<div class="border-bottom"> </div>
<div class="corner-bottom-right"> </div>
</div>
</div>
</div>
</form>
</div>

Categories