For part of the site I'm working on, I have a set of sidebars that can pull out. To have them hide when the users are done with them, I've set up a div with a click event (see below) so that whenever the user clicks somewhere outside of the sidebar, the sidebar closes. The problem that I'm running into, however, is that the click event handler is grabbing the event, running its method, and then the click event seems to stop. I've tried using return true and a few other things I've found around here and the internet, but the click event just seems to die.
$('.clickaway').click(function() {
$('body').removeClass(drawerClasses.join(' '));
return true;
});
EDIT: Here is a fiddle with an example: https://jsfiddle.net/2g7zehtn/1/
The goal is to have the drawer out and still be able to click the button to change the color of the text.
The issue is your .clickaway layer is sitting above everything that's interactive, such as your button. So clicking the button, you're actually clicking the layer.
One thing you could do is apply a higher stacking order for elements you want to interact with, above the .clickaway layer. For example, if we apply position: relative, like this:
.show-drawerHotkey .ColorButton {
position: relative;
}
The element will now be in a higher stacking order (since it comes after the clickaway, and we've applied no z-index to clickaway)
Here's a fiddle that demonstrates: https://jsfiddle.net/2g7zehtn/5/
Using this somewhat famous SO answer as a guide, you can bind to the $(document).mouseup(); event and determine whether certain "toggling" conditions apply:
[EDIT] - Example updated to illustrate clicking a link outside of the containing div.
// Resource: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it
var m = $('#menu');
var c = $('#menuContainer');
var i = $('#menuIcon');
i.click(function() {
m.toggle("slow");
});
$(document).mouseup(function(e) {
console.log(e.target); // <-- see what the target is...
if (!c.is(e.target) && c.has(e.target).length === 0) {
m.hide("slow");
}
});
#menuIcon {
height: 15px;
width: 15px;
background-color: steelblue;
cursor: pointer;
}
#menuContainer {
height: 600px;
width: 250px;
}
#menu {
display: none;
height: 600px;
width: 250px;
border: dashed 2px teal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm a link outside of the container
<div id="menuContainer">
<div id="menuIcon"></div>
<div id="menu"></div>
</div>
Related
I have always used the mouseover event, but while reading the jQuery documentation I found mouseenter. They seem to function exactly the same.
Is there a difference between the two, and if so when should I use them?
(Also applies for mouseout vs mouseleave).
You can try out the following example from the jQuery doc page. It's a nice little, interactive demo that makes it very clear and you can actually see for yourself.
var i = 0;
$("div.overout")
.mouseover(function() {
i += 1;
$(this).find("span").text("mouse over x " + i);
})
.mouseout(function() {
$(this).find("span").text("mouse out ");
});
var n = 0;
$("div.enterleave")
.mouseenter(function() {
n += 1;
$(this).find("span").text("mouse enter x " + n);
})
.mouseleave(function() {
$(this).find("span").text("mouse leave");
});
div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: #d6edfc;
float: left;
}
div.in {
width: 60%;
height: 60%;
background-color: #fc0;
margin: 10px auto;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="out overout">
<span>move your mouse</span>
<div class="in">
</div>
</div>
<div class="out enterleave">
<span>move your mouse</span>
<div class="in">
</div>
</div>
In short, you'll notice that a mouse over event occurs on an element when you are over it - coming from either its child OR parent element, but a mouse enter event only occurs when the mouse moves from outside this element to this element.
Or as the mouseover() docs put it:
[.mouseover()] can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.
Mouseenter and mouseleave do not react to event bubbling, while mouseover and mouseout do.
Here's an article that describes the behavior.
As is often true with questions like these, Quirksmode has the best answer.
I would imagine that, because one of jQuery's goals is to make things browser agnostic, that using either event name will trigger the same behavior. Edit: thanks to other posts, I now see this is not the case
$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
});
Calendar
I am integrating full Calendar in Angular. I have added different events in full Calendar. On each event I have added button inside event. Where ever I click on the event , event click of full Calendar gets called. I want to call a function when user click on the button inside event content. Can someone assist me how can I do that.
Below is my code of button inside event of a full Calendar.
If I really understand what you are asking for then ans is
event.stopPropagation();
Snippet example
function parent(event) {
console.log(alert("parent"))
}
function child(event) {
event.stopPropagation();
console.log(alert("child"))
}
.parent{
width: 200px;
height: 200px;
background-color: red;
margin :auto ;
}
.child {
width:100px;
height:100px;
margin:auto;
background-color: blue;
}
<div class = "parent" onclick = "parent(event)" >
<div class = "child" onclick = "child(event)">
child
</div>
</div>
When you enter my website (goerann.com) the dropdown register-box is down by default.
If I click in Register, the register-box toogles it visibility as I want, but it doesn't start hidden by default.
$(document).ready(function() {
$('#signup').click(function() {
$('.signupmenu').slideToggle("fast");
});
});
I want it to only show when you click on it. How can I make this happen?
Here's my jsfiddle (http://jsfiddle.net/bdv2doxr/)
Since you're already using the $(document).ready event, you can hide the menu there:
$(document).ready(function() {
$('.signupmenu').hide();
$('#signup').click(function() {
$('.signupmenu').slideToggle("fast");
});
});
And here is your fiddle updated.
You need to make two changes, both involving the removal of display: block. When you toggle this div, it will make the display block. Therefore, you can initialize it as display: none.
Change this:
<div class="signupmenu" style="display: block;">
to this:
<div class="signupmenu">
And also change this:
.signupmenu {
background-color: #FFF;
display: block;
...
to this:
.signupmenu {
background-color: #FFF;
display: none;
...
Updated fiddle here
By setting droppable widget's greedy to true, only the top-most element should respond to a drop event. There's really no complexity here but I just cannot get it to work. And this is all I have so not much to work on:
CSS:
.page{
position: absolute;
width: 150px;
height: 150px;
left: 0px;
top: 0px;
text-align: center;
background: #F0FFFF;
border: 1px solid #89B;
}
HTML:
<div class = 'page' id = 'page1'> page1 </div>
<div class = 'page' id = 'page2'> page2 </div>
<div class = 'page' id = 'page3'> page3 </div>
JS:
document.ready = function(){
$('.page').draggable()
$('.page').droppable({
greedy: true,
drop: function( event, ui ){
console.log( 'assert drop once')
}
})
}
what's happening right now is that all the dropped on elements are responding to the drop event. Since there's so little code to hold on to, I have no idea how to diagnose this.
Reading the documentation for the greedy property I'm not sure I understand the same as you:
By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to true, any parent droppables will not receive the element.
For me it means if you have a large div droppable which contains another smaller div droppable then if you drop an element in the small one only the small one will receive the event.
Check this demo to understand what I'm explaining : http://jquery-ui.googlecode.com/svn/tags/1.6rc4/demos/droppable/greedy.html
I am currently building a website that uses alot of jQuery, it involves having an interactive map.
There will be points on the map, but what I need is, when you hover over the map point, a small description is shown (perhaps in a div called .mapitem-smalldescription) and then when you CLICK on the map point, a much larger full description with pictures would be shown (in another div called, for example .mapitem-fulldescription)
I know how to do onclick and onhover events on SEPERATE map points, but I have not been able to successfuly combine them together onto a single map points.
How can I do this please?
Zach
Assuming that each map point will have the class mappoint:
$('.mappoint').hover(function() {
//do something on mouseover...
}, function() {
//do something on mouseout...
}).click(function() {
//do something on click...
});
If each one of your map points had the class point this might work:
Try this: http://jsfiddle.net/nrwyz/8/ .
Code:
HTML
<div class="point">
</div>
Javascript
$(".point").live("mouseover", function() {
//code to show description
$(this).append('<div class="mapitem-smalldescription">Small description</div>');
});
$(".point").live("mouseout", function() {
//code to show description
$(".mapitem-smalldescription").fadeOut(200);
});
$(".point").live("click", function() {
//code to full description
$(this).append('<div class="mapitem-fulldescription">Full description</div>');
});
CSS
.point {
width: 40px;
height: 40px;
border-radius: 100px;
background-color: #550000;
}
.mapitem-smalldescription {
width: 100px;
height: 100px;
background-color: #00FF00;
}
.mapitem-fulldescription {
width: 100px;
height: 100px;
background-color: #FF0000;
}
EDIT: Here is a version which behaves more closely to the way you described: http://jsfiddle.net/nrwyz/23/ .
Let me know if there is anything else you need modified or added.
I hope that helps!