I want to active the draggable and resizable function in jquery when (and only) the ctrl+alt button is pressed and disable when it's released and I wrote this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#para {
width: 150px;
height: 150px;
padding: 0.5em;
}
.ui-resizable-helper {
border: 2px dotted #00F;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(e) {
if (e.ctrlKey || e.altKey) {
$("#para").draggable();
$("#para").resizable({
helper: "ui-resizable-helper"
});
}
});
</script>
</head>
<body>
<div id="para" class="ui-widget-content">
<h1 contenteditable>Header</h1>
<hr />
<p contenteditable>paragraph</p>
</div>
</body>
</html>
After I finished this code I tried to press ctrl+alt in the browser but it doesn't work, I've removed the if (e.ctrlKey || e.altKey) logic part and it works successfully but as I replace the logic statement back there it doesn't work
How do I solve this?
You'll need an event handler to catch the keypresses.
You can initialize the plugin as disabled and then enable it when the keys are pressed, and disable it again when the keys are released
$(function() {
$("#para").draggable({
disabled : true
});
$("#para").resizable({
helper : "ui-resizable-helper",
disabled : true
});
$(document).on({
keydown : function(e) {
if (e.ctrlKey && e.altKey) {
$("#para").draggable( "enable" );
$("#para").resizable( "enable" );
}
},
keyup : function() {
$("#para").draggable( "disable" );
$("#para").resizable( "disable" );
}
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#para {
width: 150px;
height: 150px;
padding: 0.5em;
}
.ui-resizable-helper {
border: 2px dotted #00F;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="para" class="ui-widget-content">
<h1 contenteditable>Header</h1>
<hr />
<p contenteditable>paragraph</p>
</div>
</body>
</html>
Related
Made this example: https://jsfiddle.net/d8ak0edq/2/
document.getElementById('outer').oncontextmenu = function() { return false; };
outer = document.getElementById('outer');
outer.addEventListener('mousedown', foo);
function foo(evt) {
if (evt.which === 1) {
evt.target.style.backgroundColor = 'red';
} else if (evt.which === 3) {
evt.target.style.backgroundColor = 'blue';
}
}
/*
$outer = $('#outer');
$outer.on('mousedown', 'div', foo);
function foo(evt) {
if (evt.which === 1) {
$(this).css('background-color', 'red');
} else if (evt.which === 3) {
$(this).css('background-color', 'blue');
}
} */
#outer {
border: 2px solid black;
width: 300px;
height: 300px;
}
#inner {
position: relative;
left: 25%;
top: 25%;
border: 2px solid black;
width: 150px;
height: 150px;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
As you can see the jQuery has a nice way to do it, the 2nd parameter sets the 'target' and 'this' and if you click on the outer div nothing will happen even the event handler is on the outer div.
How do I make this without jQuery?
So by making the event handler on inner would obviously "fix" the problem, but I want that the event stays on the outer div but targets only inner, how to make this work (and not by adding && !(evt.target===outer))?
The basic technique for delegation is: set a selectorable attribute on the inner, then attach event handler to the outer, then check for whether the event came from inner:
document.getElementById('outer').addEventListener('mousedown' function(outer_evt) {
if (outer_evt.target.id == 'inner') {
// I mousedowned on inner
}
});
If you have other events attached to outer (this includes events attached to any ancestor of outer), and don't want them fired when you fire the inner event, use outer_evt.stopImmediatePropagation() and/or outer_evt.stopPropagation() (respectively).
If you want to refer to the element that the event bubbled up to, that's .currentTarget. (that is, above, outer_evt.currentTarget === document.getElementById('outer'))
See also EventTarget.addEventListener()
I have two events: A button event and a container event. I want to apply stopPropagation() for container function, when I click on button. How to do this in vanilla js?
Now when I click on button #btn two functions will called. My goal is, when I click on button #btn, the code for #btn should only run. Click on div with id #container shall do it the same.
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=> {
console.log('click on btn')
})
const container = document.getElementById('container');
container.addEventListener('click', ()=> {
console.log('click on container')
})
#container {
border: 1px solid red;
}
<!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">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Welcome</title>
</head>
<body>
<div id="container">
<button id="btn">click</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
You can use Element.closest() to detect click outside or inside specific element
check this example
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=> {
console.log('click on btn')
})
const container = document.getElementById('container');
container.addEventListener('click', (e)=> {
if(!e.target.closest('#btn')){
console.log('click on container')
}
})
#container {
border: 1px solid red;
}
<!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">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Welcome</title>
</head>
<body>
<div id="container">
<button id="btn">click</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Simply add event.stopPropagation in your btn click handler
btn.addEventListener('click', ()=> {
console.log('click on btn')
event.stopPropagation()
})
There are countless jquery plugin for this. But I found none that work in Edge, Chrome, Firefox and Safari, mouse and touch. Do you know a proper stable solution?
It doesn't have to be jquery based. Can be also native JS.
Thanks #Alexis, with your hint I figured out a solution that seems to work. Here the core functionality:
var drag = false;
$('#map').on( "mousedown touchstart", function(e){
drag = true;
console.log('start');
});
$('#map').on( "touchmove", function(e){
if (e.targetTouches.length == 1 && drag == true) {
var touch = e.targetTouches[0];
console.log(touch);
}
});
$('#map').on( "mousemove", function(e){
if (drag == true) {
console.log(e.pageX);
}
});
$('#map').on( "mouseup touchend", function(e){
drag = false;
console.log('end');
});
jQuery UI drag n drop is cross-browser as far as i know :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
js fiddle :
https://jsfiddle.net/riazxrazor/swepy32t/
How can I dragg an image with combobox below using jquery draggable.
I don't know if I need to create a Div and inside put the image and combobox.
I already have the image draggable, but I'm not sure how can I put the combobox below.
It's hard to tell without any code listed, but here is the setup from the draggable docs:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
It seems as though you would need the box below the element with id "draggable". You can set the box to be droppable the same way you use $( "#draggable" ).draggable();
But again, a code sample would be very helpful.
Given below is a code that contains a button. On the button's click a popover is shown with hard-coded details.
Is it possible for the popover to get details from the Buttons attributes e.g. data-name = "Vikas" data-content = "He is a student" data-dp = "../dp.jpg"
Second issue is that the popover is closed when the user click again on the button. Is it possible to to stop it and instead of this can we give a close button in popover and on its click the popover should be closed.
Many thanks for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
placement: 'top',
html: true,
title: 'User Info ×',
content: '<div class="media"><img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image"><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
});
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
});
</script>
<style type="text/css">
.bs-example {
margin: 160px 10px 0;
}
.popover-title .close {
position: relative;
bottom: 3px;
}
</style>
</head>
<body>
<div class="bs-example">
<button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button>
</div>
</body>
</html>
Just an example, should help you:
Dynamic content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
placement: 'top',
html: true,
title: function() {
return $(this).data('title') + '×';
},
content: function() {
return $(this).data('content');
}
});
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
});
</script>
<style type="text/css">
.bs-example {
margin: 160px 10px 0;
}
.popover-title .close {
position: relative;
bottom: 3px;
}
</style>
</head>
<body>
<div class="bs-example">
<button type="button" class="btn btn-primary" data-toggle="popover" data-title="Custom Title" data-content="Custom Content">Click Me</button>
</div>
</body>
</html>
Look at the popover trigger param:
How popover is triggered - click | hover | focus | manual. You may
pass multiple triggers; separate them with a space. manual cannot be
combined with any other trigger.