We Keep Coding

jQuery: Finish dragging without triggering click event

I am trying to set up the following page where:
If you click the button, you can see a div.
If you click the div, you can see the next div.
If you move the button, there is no »click« (desired behaviour)
The problem I am having is that if you move the div, the next div appears - this is not what I want. The "next div" should not be displayed after a drag event finishes on it.
Here is my code:
$(function() {
$("#button").draggable({
stack: 'div',
containment: "body"
});
});
$('#button').on('mouseup', function() {
if (!$(this).hasClass('ui-draggable-dragging')) {
// click function
$("#content").toggle();
}
});
$(function() {
$("#content").draggable({
stack: 'div',
containment: "body"
});
});
let containers = $('.trip').hide();
let firstContainer = containers.first().show();
containers.on('click', function() {
//Get current element and next sibling
let elem = $(this);
let next = elem.next('.trip');
//Does sibling exist?
if (next.length) {
next.show();
} else {
firstContainer.show();
}
elem.hide();
});
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
left: 0;
top: 0;
background-color: grey;
}
#button {
width: 100px;
height: 100px;
background-color: cyan;
}
#content {
display: none;
cursor: all-scroll;
top: 10%;
left: 10%;
position: absolute;
}
.trip {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
<div id="button">Button</div>
<div id="content">
<div class="trip">div 1</div>
<div class="trip">div 2</div>
<div class="trip">div 3</div>
</div>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
Is there a way to solve this? :)
(a possible problem is also that pure JavaScript is mixed with jQuery)
Thanks

The main problem to solve here is in distinguishing a regular click event on #content, from other "click like events" that are also triggered during completion of the element being dragged.
You're code currently has a method of doing that which you could re purpose for the desired behaviour:
if (! $(this).hasClass('ui-draggable-dragging')) {
/* This was a "regular click event"
}
So in the case of your code, you could revise it as follows:
$(function() {
/* Combine on ready logic into one place */
$("#button").draggable({
stack: 'div',
containment: "body"
});
$("#content").draggable({
stack: 'div',
containment: "body"
});
/* Hide all trip elements except for first */
$('.trip', '#content').not(':first').hide();
});
$('#button').on('mouseup', function() {
if (!$(this).hasClass('ui-draggable-dragging')) {
$("#content").toggle();
}
});
$('#content').on('mouseup', function() {
/* Reuse same logic in #button mouseup handler */
if (!$(this).hasClass('ui-draggable-dragging')) {
/*
If content element if not dragging, treat mouse up as conclusion
of click event and rotate visibility of trip elements like this
*/
let trip = $('.trip:visible', '#content');
let next = trip.next().length === 0 ?
$('.trip:first', '#content') : trip.next();
trip.hide();
next.show();
}
});
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
left: 0;
top: 0;
background-color: grey;
}
#button {
width: 100px;
height: 100px;
background-color: cyan;
}
#content {
display: none;
cursor: all-scroll;
top: 10%;
left: 10%;
position: absolute;
}
.trip {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
<div id="button">Button</div>
<div id="content">
<div class="trip">div 1</div>
<div class="trip">div 2</div>
<div class="trip">div 3</div>
</div>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

Actually, all you need is this bit of readable code,
Assign a class .draggable to all your draggable elements
Use the new class as stack: '.draggable'
Register click to your '#container', not on your .trip elements
Use only one Event, the "click" one:
Hide all .trip but first using CSS .trip~.trip {display:none;}
jQuery( $ => {
const $cont = $('#content');
const $bttn = $('#button');
const $trip = $('.trip');
const tripL = $trip.length;
let i = 0;
$('.draggable').draggable({stack:'div', containment:'body'});
$bttn.on('click', function() {
if (!$(this).hasClass('ui-draggable-dragging')) $cont.toggle();
});
$cont.on('click', function() {
$trip.eq(++i % tripL).show().siblings($trip).hide();
});
});
html, body { height:100%; margin:0;}
body {
background-color: grey;
}
#button {
width: 100px;
height: 100px;
background-color: cyan;
}
#content {
display: none;
cursor: all-scroll;
top: 10%;
left: 10%;
position: absolute;
}
.trip {
width: 200px;
height: 200px;
background-color: blue;
color: white;
}
.trip ~ .trip {display: none;}
<!-- PS: Add class="draggable" to draggable elements -->
<div id="button" class="draggable">Button</div>
<div id="content" class="draggable">
<div class="trip" id="a">div 1</div>
<div class="trip" id="b">div 2</div>
<div class="trip" id="c">div 3</div>
</div>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
EDIT
For more contents see this answer: https://stackoverflow.com/a/57351517/383904

How to make a popup disappear only when clicked anywhere outside of it

I'm trying to toggle a popup when click on a specific link and then remove class ".open" from it when clicked anywhere other than the popup box.
Using below methods I was able to get the popup disappear when clicked outside of it but it's now also getting disappear when clicked inside the popup area.
$(".onclick-dropdown-link, .user-message-center-link").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var id = $this.attr('href');
$('.onclick-dropdown').not(id).removeClass('open');
$(id).toggleClass('open');
});
$('body:not(.onclick-dropdown.open)').click(function(e) {
$("#alert-center, #message-center, #user-message-center").removeClass('open');
});
.onclick-dropdown {
opacity: 0;
visibility: hidden;
background: #f3f3f3;
width: 390px;
height: 390px;
position: absolute;
top: 128px;
right: 28px;
height: auto;
padding: 0;
z-index: 999;
}
.onclick-dropdown.open {
opacity: 1;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="alert-center-link">
<a class="onclick-dropdown-link" href="#alert-center">The Link</a>
</li>
</ul>
<div id="alert-center" class="onclick-dropdown">
<p>Lorem Ipusm</p>
</div>

Change your .click() function to the following:
$(document).click(function(e) {
if( !$('.onclick-dropdown').is(e.target) && !$('.onclick-dropdown').children().is(e.target)) {
if( $('.onclick-dropdown').hasClass('open') ) {
$("#alert-center, #message-center, #user-message-center").removeClass('open');
}
}
});

Change your Popup HTML to :
<div id="alert-center-outer" class="onclick-dropdown">
<div id="alert-center">
//CONTENT HERE...
<p>Lorem Ipusm</p>
</div>
</div>
#alert-center-outer{
position: fixed;
left; 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: black;
}
#alert-center{
width: 200px;
height: 300px;
margin: 0 auto;/*This will center align it.*/
}
Clicking the #alert-center-outer should hide the popup.
Clicking the #alert-center should stopPropagation so that it doesn't bubble to its parent.

try below code
$(document).ready(function(){
$(".onclick-dropdown-link, .user-message-center-link").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var id = $this.attr('href');
$('.onclick-dropdown').not(id).removeClass('open');
$(id).toggleClass('open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.onclick-dropdown').length)
$("#alert-center, #message-center, #user-message-center").removeClass('open');
});
})
.onclick-dropdown {
opacity: 0;
visibility: hidden;
background: #f3f3f3;
width: 390px;
height: 390px;
position: absolute;
top: 128px;
right: 28px;
height: auto;
padding: 0;
z-index: 999;
}
.onclick-dropdown.open {
opacity: 1;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alert-center" class="onclick-dropdown">
<p>Lorem Ipusm</p>
</div>
<li class="alert-center-link"><a class="onclick-dropdown-link" href="#alert-center">asdfsdfsdfds</a></li>

// only trigger once
$('body').one('click', function(e) {
var $target = $(e.target);
// the $target which trigger click event is not the popup dom itself
// and also is not the children dom of the popup
if (!$target.is('#alert-center') && $target.parents('#alert-center').length === 0) {
$("#alert-center, #message-center, #user-message-center").removeClass('open');
}
})
Is that what you want?
Now you can add any tags in the popup, and click inside the popup area where not hide it.

How to position image above other image on mouseover?

I tried to find any solution but I coudn't find.
I have some images that each one is on the other.I want that when I mouseover the first image the images that behnd will be above the first image.
For example:
Normal:
Mouseover:
In the basic the second and the third image is behind the first image.
Sorry for my english and thanks in advance!

You can use jQuery's hover event function with the over and out handlers..
Begin with the boxes that are "behind" the first box - hide them.
Next define an onhover event to display them when mouse is hovering, and to hide them again when mouse is out of hover.
$('#1').hover(
function(){
$('.hidden').removeClass('hidden').addClass('visible');
},
function(){
$('.visible').removeClass('visible').addClass('hidden');
}
)
.box {
border: solid 2px black;
width: 40px;
height: 40px;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="3" class="box hidden">3</div>
<div id="2" class="box hidden">2</div>
<div id="1" class="box">1</div>

This solution requires the boxes to be absolutely positioned and in a container.
var prop = "bottom",
moveAmount = 50;
$('.container').hover(
function() {
var moved = $(this).find(".box");
for (var i = (moved.length - 1), pad = 0; i >= 0; i--) {
$(moved[i]).css(prop, (pad++ * moveAmount) + "px");
}
},
function() {
var moved = $(this).find(".box");
for (var i = 0; i < moved.length; i++) {
$(moved[i]).css(prop, "0px");
}
}
);
.container {
background-color: #eeeeee;
position: relative;
width: 45px;
height: 45px;
}
.box {
background: red;
width: 40px;
height: 40px;
transition: bottom 0.3s ease-in-out;
position: absolute;
bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br>
<div class="container">
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
</div>

jQuery hover, onhover show another element and move the mouse back

When on hover the red box, the grey box will show up. if the mouse stay on grey box, the grey box stays opened. When move the mouse from grey box back to the red box, I want to have the grey box still opened.
Grey box only closes when mouse is not hovered on red or grey box.
http://jsfiddle.net/0sLhL0xf/
The only problem is that, when I move mouse from grey box back to red box, I can't get grey stayed to show.
Can someone please help? please do not change structure, I understand to have box2 wrapped by box1 is easier,
<div id="box1">
<div id="box2"></div>
</div>
but this isn't what I wanted to try. Thanks

Try utilizing css
#box1 {
width: 40px;
height: 40px;
background: red;
cursor:pointer;
}
#box2 {
display:none;
width: 400px;
height: 400px;
background: grey;
}
#box1:hover + #box2, #box2:hover {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="box1"></div>
<div id="box2"></div>
jsfiddle http://jsfiddle.net/0sLhL0xf/3/

I think you can use
var timeout;
var $box1 = $('#box1');
var $box2 = $('#box2');
$box1.hover(function() {
clearTimeout(timeout);
$box2.show();
}, function() {
timeout = setTimeout(function() {
$box2.hide();
}, 1000);
});
$box2.hover(function() {
clearTimeout(timeout);
}, function() {
timeout = setTimeout(function() {
$box2.hide();
}, 1000);
});
#box1 {
width: 40px;
height: 40px;
background: red;
cursor: pointer;
}
#box2 {
display: none;
width: 400px;
height: 400px;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box1"></div>
<div id="box2"></div>

Here's another solution using mouseenter & mouseleave.
http://jsfiddle.net/0sLhL0xf/2/
var $boxes = $('.boxes');
var $box1 = $('#box1');
var $box2 = $('#box2');
$boxes.mouseenter(function() {
$box2.show();
});
$boxes.mouseleave(function() {
$box2.hide();
});
#box1 {
width: 40px;
height: 40px;
background: red;
cursor:pointer;
}
#box2 {
display:none;
width: 400px;
height: 400px;
background: grey;
}
<div class="boxes" id="box1"></div>
<div class="boxes" id="box2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to jquery if scroll echo div?

I have this code:
#main {
max-width: 500px;
height: 900px;
margin: auto;
background: green
}
.menu1 {
height: 30px;
background: red
}
.menu2 {
display: none;
}
<div id="main">
<div class="menu1">COntent 1</div>
<div class="menu2">Content 2</div>
</div>
How to: When I'm scroll down div .menu2 display sticky in top as css
.menu2 {
height: 30px; background: blue; position: fixed
}
My code: http://jsfiddle.net/rh1aLnxs/
Thanks

this can be accomplished with css's position:fixed, as long as you don't need additional behavior regarding the parent div (position:fixed is ignorant to the parent in css)
here's an example:
.menu1 {position:fixed; height: 30px; background: red; max-width: 500px; width:100%}
http://jsfiddle.net/rh1aLnxs/
If you need for example, for menu1 to go away when the user scrolls below main, then you need to use jquery's scroll event and handle the positioning manually (http://api.jquery.com/scroll/)

try this:
var headerTop = $('.menu1').offset().top;
// var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top.
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
if (scrollTop > headerTop) { // Check to see if we have scrolled more than headerBottom
if (($(".menu2").is(":visible") === false)) {
$('.menu1').hide();
$('.menu2').fadeIn('slow');
}
} else {
if ($(".menu2").is(":visible")) {
$('.menu2').hide();
$('.menu1').fadeIn('slow');
}
}
});
#main {
max-width: 500px;
height: 900px;
margin: auto;
background: green
}
.menu1 {
height: 30px;
background-color: red
}
.menu2 {
background-color: blue;
max-width: 500px;
width: 100%;
top: 0;
display: none;
/*display: none*/
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class="menu1">Content1</div>
<div class="menu2">Content2</div>
</div>

Here are some improvements on your fiddle along with a simplified version of the script to add/remove a fixed class on scroll.
http://jsfiddle.net/rh1aLnxs/2/
jQuery(window).bind("scroll", function() {
if (jQuery(this).scrollTop() > 100) {
jQuery(".menu1").removeClass("no-fixed").addClass("fixed");
} else {
jQuery(".menu1").removeClass("fixed").addClass("no-fixed");
}
});
#main {max-width: 500px; height: 900px; margin: auto; background: green}
.menu1 {height: 30px; background: red}
.menu2 {display: none}
#main {
width:100%;
position:relative;
}
.no-fixed {
position: relative;
}
.fixed {
position: fixed;
width:100%;
max-width: 500px;
}
<div id="main">
<div class="menu1"></div>
<div class="menu2"></div>
</div>