We Keep Coding

Image drag glitchy on mobile

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>

How to restrict draggable element into particular element

In JQuery UI, I am trying to restrict draggable element into particular elements which are present inside the container (.container).
Even I have tried with containment as array of values it is working but in my case I will be unaware of the .container height and width. Please suggest me which will the right approach to do this one.
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="dragme">DRAG ME</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
$(".dragme").draggable({
containment: ".container"
});
JSFIDDLE

You can move the .container div to wrap .dragme, remove position: relative of .container and set following style changes.
body {
position:relative;
}
Modify as follows.
.container {
position: absolute;
height: 362px;
}
.restricted-field-2 {
top: 400px;
}
Here is the jsfiddle link.
Edited:
There are options in jquery draggable to set x-axis and y-axis positions for the containment and we need to calculate based on our requirement.
Here is the updated js fiddle link.

$(".dragme").draggable({
containment: ".mini"
});
.container{
position:relative;
width: 500px;
height: 400px;
background: #FFF;
}
.dragme{
width: 100px;
cursor: move;
background: black;
color:white;
text-align:center;
}
.restricted-field-1{
width:480px;
background: silver;
padding:10px;
user-select:none;
height: 20px;
}
.restricted-field-2{
position:absolute;
width:480px;
bottom:0;
padding:10px;
background: silver;
user-select:none;
height:20px;
}
.mini{
position: absolute;
top: 40px;
left: 0px;
bottom: 40px;
width: 100%;
}
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="mini">
<div class="dragme">DRAG ME</div>
</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Cannot select element in JQuery and execute simple event

I cannot make a simple click event on the "canvas" using JQuery click function.
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>
"test" message is appearing but functions above is not working. Other siblings of div "middle" (I did not include since I tried to remove them for testing and it still happening) can execute events but only this div and inside cannot execute a single event.
Tried also to console.log($("#canvas")) and it fetches some data below.
[div#canvas]
here is the complete html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="/demo/resources/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/demo/resources/themes/custom/css/custom.css" rel="stylesheet" />
<script src="/demo/resources/themes/bootstrap/js/bootstrap.min.js"></script>
<script src="/Sketchy-demo/resources/themes/custom/js/custom.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>App Page</title>
</head>
<body>
<div class="middle">
<div id="canvas"></div>
</div>
</body>
</html>
custom.css
.middle{
z-index: -1;
position: relative;
display: block;
height: 88%;
width:100%;
top: 0px;
left:0px;
margin: 0px;
background-color: transparent;
}
#canvas{
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
Below is the image of the divs:
This is really frustrating because this is a basic function that I cannot call.
Edit:
I added a https://jsfiddle.net/5mtt2khu/
Please let me know any questions.
Thanks!

Do with event.target element .And match with condition
Updated js Fiddle
$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if($(e.target).attr('id')== 'canvas'){
alert('canvas')
//do stuff for canvas
}
else{
alert("middle");
//do stuff for middle
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>
Updated
Remove or change the z-index
$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if ($(e.target).attr('id') == 'canvas') {
alert('canvas')
//do stuff for canvas
} else {
alert("middle");
//do stuff for middle
}
});
});
.middle {
z-index:0;/*remove or change > -1*/
position: relative;
display: block;
height: 88%;
width: 100%;
top: 0px;
left: 0px;
margin: 0px;
background-color: red;
}
#canvas {
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>

Your code seems to work.
So the problem must come from other things. Here is some possibilities :
JQuery is not correctly installed
You have a javascript error before so this is never executed
Your html is dynamically added after you load the event handler
You have an other div with the same id somewhere
If your html is dynamically added, I recommend you to do something like this
$(document).ready ( function () {
$(document).on ("click", "#canvas", function () {
alert("canvas");
});
$(document).on ("click", "#middle", function () {
alert("middle");
});
});
If you have several "canvas" id, you can do something like :
$("[id=canvas]").click(function () {
alert("canvas");
});

I think you are looking for something like this:
$(document).ready(function(){
alert("test");
$("#canvas").click(function(e){
alert("canvas");
e.stopPropagation();
});
$(".middle").click(function(){
alert("middle");
});
});
.middle {
width: 200px;
height: 200px;
background: red;
}
#canvas {
width: 100px;
height: 100px;
background: green;
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>
Hope it helps :)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="middle">
<div id="canvas" style="width:10px;height:10px;background:red;"></div>
</div>
</body>
<script>
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
</script>
Try to change the div to input type or button.It works when I specified the color to the div and clicking it.So, without knowing where to click the event was not working.

Your jQuery code is actually working fine as it should. The problem here is propably because the canvas has no height and width defined, so it's too small to actually be able to click on it.
Give the divs a height and width like the below code snippet and you'll see that the jQuery gets executed correctly.
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle" style="border: 1px solid black; height: 50px; width: 100px;">
<div id="canvas" style="border: 1px solid red; height: 15px; width: 30px;"></div>
</div>

Trying to scroll a page: Uncaught TypeError: Cannot read property 'top' of undefined

I've looked at other questions, with no success...
I'm just trying to keep the page scrolling slowly after load, follows the code:
CSS (Most of CSS is placed as embed files, this is just the styles applied to the content objects):
<style type="text/css">
.content {
width: 98%;
left: 1%;
margin-top: -10px;
}
.block_1 {
position: relative;
width: 18.5%;
height: 150px;
margin-left: 1%;
margin-top: 1%;
float: left;
background: #FFF;
border: 3px solid #999;
}
</style>
JS:
<script type="text/javascript">
$(function(){
$.slidebars({
siteClose: true
});
});
// Loading
$(document).ready(function(){
$(window).load(function(){
$('.loading').fadeOut(700);
});
});
$('html,body').animate({scrollTop: $('#end').offset().top});
</script>
HTML
<body>
<div class="loading">
<div class="loading_msg">Carregando dados, aguarde...</div>
<div class="loading_img"><img src="img/loader.gif" /></div>
</div>
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="300px"</div>
<div id="sb-site">
<div class="div_bg_header"><?php show_header_menu_dashboard($p_title); ?></div>
<div class="content" id="content">
<div class="block_1"></div>
<div class="block_1"></div>
...
<a id="end"></a>
</div>
</div>
</body>
Grateful

correct as
$(document).ready(function(){
$(window).load(function(){
$('.loading').fadeOut(700);
});
$('html,body').animate({scrollTop:$('#end').offset().top});
});
in your CSS please set some height to the body,
body {
height: 1500px;
}
and it will work well. current offset is just 16. so for visible scrolling
please add the following style.
#end {
margin-top: 500px;
display: block;
}

Resize all children elements in iframe [duplicate]

I have this code and it works fine:
Head
<script>
$(document).ready(function()
{
$("#test").resizable({minHeight: 50, minWidth: 50});
});
</script>
Body
<div id="test" style="border: .1em solid black;">
</div>
However when I change my "div" into "iframe" I can't resize it anymore.
Body
<iframe id="test" style="border: .1em solid black;">
</iframe>

Found redsquare's demo a bit wonky when moving the mouse more than a few pixels at a time. I've applied a couple modifications that help make resizing a lot smoother:
<html>
<head>
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 75px solid #EFEFEF; margin: -75px; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
helper: "ui-resizable-helper"
});
});
</script>
</head>
<body>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<iframe src="http://pastebin.me/f9ed9b9d36d17a7987e9cb670e01f0e2" class="ui-widget-content" frameborder="no" id="test" width="100%" height="100%" />
</div>
<div>
</body>
</html>
The weirdness of resizing seems to happen because mousemove events don't bubble up from within the iframe. Using a resize handler and a large border in the handler CSS minimizes the effect caused by the iframe as long as the browser can keep up with the mousemove events.

Below Code Work for me in smooth way.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#iframe {
width: 100%;
height: 100%;
border: none;
background: #eee ;
z-index: 1;
}
#resizable {
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #ccc;
z-index: 9;
}
</style>
<script>
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
</script>
</head>
<body>
<div id="resizable">
<iframe src="test.html" id="iframe">
</div>
</body>
</html>

I think this might be what you are looking for: Place the content of whatever is in your iframe in a div. For this example I will give the div an id of "container".
$('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");

I landed up here for searchin Resize iframe, But this question is about resizing using Jquery UI plugin, I am just adding a answer so it might be helpful for someone in future who falls into this page searching to resize iframe.
This can be done using only CSS
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
Also all the major browsers have good support. Check out this link and also about the browser support