I have images (.rv_button) that are acting as buttons to toggle the div's below (#reveal). I want to hover over the button to open the div but right now I can't get the div to stay open. Can someone help me with this?
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal').hide();
jQuery('.rv_button').on('mouseenter mouseleave', function(e) {
e.preventDefault();
jQuery("#reveal").fadeToggle()(slow, swing, callback);
jQuery('.rv_button').toggleClass('open');
});
});
Rather than using toggleClass(), on mousenter, remove the open class from all of the buttons and add it to e.target or $(this). And on mouseout just remove it from all the buttons.
Also, remove (slow, swing, callback) or use them as arguments in fadeToggle().
e.g.
jQuery("#reveal").fadeToggle('slow');
And to keep the div to stay open, just wrap the buttons and div in a container and listen for the mouseout event on it instead of the buttons themselves.
$(document).ready(function() {
// Hide the div
$('#reveal').hide();
$('.rv_button').on('mouseenter', function(e) {
e.preventDefault();
$('.rv_button').removeClass('open');
$(e.target).addClass('open');
$("#reveal").fadeIn();
});
$('.container').on('mouseleave', function(e) {
e.preventDefault();
$('.rv_button').removeClass('open');
$("#reveal").fadeOut();
});
});
.container {
width: 400px;
}
#reveal {
width: 400px;
height: 400px;
background-color: beige;
text-align: center;
font-size: 2em;
}
.rv_button {
padding: 1em;
background-color: brown;
width: 400px;
box-sizing: border-box;
}
.open {
background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="rv_button">Button 1</div>
<div class="rv_button">Button 2</div>
<div class="rv_button">Button 3</div>
<div id="reveal">Reveal</div>
</div>
Related
A div is initially hidden, I want to display it when clicking a button. And once it is visible, I want to hide it when clicking anywhere outside that div.
I'm trying following code, it displays the div, but the problem is in the second part (clicking outside) the box. The second part conflicts with first one so it hides it before displaying.
How can I fix that?
$('button').on('click', function(e){
e.preventDefault();
$('.box').addClass('active');
});
//hide is by clicking outside .box
$(document).on('click', function (e) {
if ($('.box').is(':visible') && !$('.box').is(e.target) && !$('.box').has(e.target).length) {
$('.box').hide();
}
});
button {
margin-bottom: 20px;
}
.box {
width: 200px;
height: 120px;
background: #fab1a0;
display: none;
}
.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="box"></div>
You can stop the propagation of your event so that when button is clicked the event doesn't bubble up to the document. Also instead of hide(), just using removeClass(...) should work for you.
Also that event propagation doesn't stop in this button listener itself but from the next event listener which in your case is on the document and that is what we require.
$('button').on('click', function(e){
e.stopPropagation();
$('.box').addClass('active');
});
//hide is by clicking outside .box
$(document).on('click', function (e) {
if ($('.box').is(':visible') && !$('.box').is(e.target) && !$('.box').has(e.target).length) {
$('.box').removeClass('active');
}
});
button {
margin-bottom: 20px;
}
.box {
width: 200px;
height: 120px;
background: #fab1a0;
display: none;
}
.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="box"></div>
The requirement is user can Click on black box to show orange box, and click on orange box to show red box, but the orange box and red box should be hidden
when user click anywhere of the document except the orange box or the
red box itself.
But currently the issue is that we cannot click on orange box to show red box
Would much appreciate if you could help me out, thanks a lot
Demo link: http://plnkr.co/edit/OqlfbmFPKdXx0wDhnLxZ?p=preview
$(function() {
$('#mypop').click(function(e) {
event.stopPropagation();
});
$(document).on('click', '#myclick', function() {
$('#mypop').toggle();
$(document).one('click', function() {
$('#mypop').hide();
});
});
$(document).on('click', '#myclick1', function() {
$('#mypop2').show();
});
$(document).on('click', '#myclick2', function() {
$('#mypop2').show();
});
})()
#mypop {
background-color: orange;
position: absolute;
top: 130px;
left: 50px;
width: 150px;
padding: 15px;
}
.mydiv {
background-color: black;
padding: 30px;
width: 50px;
cursor: pointer;
color: white;
}
#mypop2 {
margin-top: 150px;
background-color: red;
width: 100px;
height: 50px;
padding: 18px;
display: none;
}
#myclick1,
#myclick2 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myclick" class='mydiv black-box'>
click me!
</div>
<div id="mypop" style="display:none;" class='orange-box'>
<p>hello world</p>
<div id='myclick1'>BUTTON1</div>
<div id='myclick2'>BUTTON2</div>
</div>
<div id="mypop2" class='red-box'>
Hello World!!!
</div>
try this. I think this is what you are excepting but I'm not sure since you keep editing your question.
Demo Link: http://plnkr.co/edit/n7rdgqTwiFrXtpgoX4TQ?p=preview
$('#myclick1').click(function(){
$('#mypop2').show();
});
$('#myclick2').click(function(){
$('#mypop2').show();
});
You have couple of things mixed up.
The main stop-point was the very first event listener
$('#mypop').click(function(e) {
which is incompatible with the rest of listeners
$(document).on('click','#myclick1',function(e){
after I have changed it to
$(document).on('click','#mypop', function(e){
the other listeners have started working.
Second thing is that for embedded elements (parent-child) you need to stop event propagation, otherwise the parent event is triggered as well (which is not desired)
$(document).on('click','#myclick1',function(e){
e.stopPropagation();
:
});
I have also changed the CSS a bit and added class hide to use instead of styles. Toggling this class is what hides and shows an element.
Guys I was trying to make a notification menu which dropdown on click event.I have make that with below code but I have a problem that I can't hide it back.I want to hide it by clicking on body and div itself.How can I do that?
My html part.
<li class="clicker" >
<a>Notification</a>
<div class="display_noti">
<ol>
<span>This is it :D</span><br>
<span>This is it :D</span><br>
<span>This is it :D</span><br>
</ol>
</div>
</li>
My css part
.display_noti
{
width: 400px;
height: fixed;
display:none;
background-color: black;
color: white;
position: absolute;
top: 40px;
z-index: 2;
padding: 5px;
}
My jquery part.
$('.clicker').on('click',function(){
if($('.display_noti').css("display","none")){
$('.display_noti').show();
}
});
I am trying with this jquery code too but when I keep this code show() function doesn't work.
$('body').on('click',function(){
$('.display_noti').css("display","none");
});
just make your js code as:
$('.clicker').on('click',function(){
$('.display_noti').toggle();
});
http://jsfiddle.net/jp42q7t8/5/
Update:
also, if you want you may consider change the cursor shape on the li element to show that it is clickable like this:
.clicker { cursor:pointer; }
Update2:
If you add this somehow you can make the <div class="display_noti"> disappear when you click on it i don't know why though but it fixes it:
$('.display_noti').on('click',function(){
$(this).css({'background':'black'}); //same background color of the inner div
});
// hide some divs when click on window
var actionwindowclick = function(e){
if (!$(".display_noti, .clicker").is(e.target) // if the target of the click isn't the container...
&& $(".display_noti , .clicker").has(e.target).length === 0) // ... nor a descendant of the container
{
$(".display_noti").hide();
}
}
$(window).on('click',function(e){
actionwindowclick (e);
});
$('.clicker').on('click',function(){
$(".display_noti").slideToggle();
});
Jsfiddle
$(document).click(function(e) {
$('.display_noti').hide();
});
$('.clicker').on('click', function(e) {
$('.display_noti').toggle();
e.stopPropagation();
});
$('.display_noti').click(function(e){
e.stopPropagation();
});
.display_noti {
width: 400px;
height: fixed;
display: none;
background-color: black;
color: white;
position: absolute;
top: 40px;
z-index: 2;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clicker"> <a>Notification</a>
<div class="display_noti">
<ol> <span>This is it :D</span>
<br> <span>This is it :D</span>
<br> <span>This is it :D</span>
<br>
</ol>
</div>
</li>
I create a bunch of DIVs dynamically. I'm using jQuery resizeable handles on them.
My question is how do I make the handles appear on click/hover and make them disappear when clicked out of the relevant div?
jsFiddle
$('.resizable').on('click', function() {
$(this).addClass('focus');
});
$(document).on('click', function() {
if (!$(e.target).closest('.resizable').length) {
$('.resizable').removeClass('focus');
}
});
You can bind it with a click or a hover.
Click:
$('.resizable').resizable({
handles: 'se'
});
////////////////////////////////////////////////////////////////////////////////////
//how do I get the below working? These $('.resizable') DIV are created dynamically
$('.resizable').on('click', function() {
$(this).addClass('focus');
});
$(document).on('click', function(e) {
if (!$(e.target).closest('.resizable').length) {
$('.resizable').removeClass('focus');
}
});
.resizable{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.resizable.focus {
background: #f0f;
}
.resizable .ui-resizable-handle {
background-color: black;
display: none !important;
}
.resizable.focus .ui-resizable-handle {
display: block !important;
}
<div id="dragDiv1" class="resizable"></div>
<div id="dragDiv2" class="resizable"></div>
<div id="dragDiv3" class="resizable"></div>
Or, if you want the hover, just replace the .resizable.focus with .resizable:hover. http://jsfiddle.net/sjchn0L8/2/
I am trying to move divs between two containers (#one and #two). I can't seem to figure out how to select a div which is inside another div.
I found a similar topic about targeting class inside a div. It gave me idea of using parent.
jQuery has a large list of selectors, I assume I could use one of them. But I intuitively think I could use something like #one.draggable or some other kind of specifying path.
Example on JSFiddle
CSS:
div
{
display:inline;
background-color:#eee;
}
.draggable
{
width: 50px;
height: 50px;
background-color: lime;
z-index: 2;
display: block;
float: left;
background-color: #333333;
}
#one
{
width: 200px;
height: 200px;
background-color: #555555;
z-index: 1;
float: left;
}
#two
{
width: 200px;
height: 200px;
background-color: #777777;
z-index: 1;
float: left;
}
jQuery:
$(document).ready(function() {
$(".draggable",$(this).parent("one")).click(function () {
// move from "one" to "two"
$(this).appendTo("#two");
});
$(".draggable",$(this).parent("two")).click(function () {
// move from "two" to "one"
$(this).appendTo("#one");
});
});
HTML:
<div id="one">
<div class="draggable">1</div>
<div class="draggable">2</div>
<div class="draggable">3</div>
</div>
<div id="two">
<div class="draggable">4</div>
<div class="draggable">5</div>
<div class="draggable">6</div>
</div>
I'll try to stick to what seems to be the core of your question: use $('#one .draggable') (the space is important!) to select all divs with class 'draggable' inside the div with id 'one'.
So your full jQuery code should be:
$(document).ready(function() {
$('#one .draggable').click(function () {
// move from "one" to "two"
$(this).appendTo("#two");
});
$('#two .draggable').click(function () {
// move from "two" to "one"
$(this).appendTo("#one");
});
});
UPDATE
As you noticed, with the code above it's not possible to move the same div again after the first move. The solution is as follows:
$(document).ready(function() {
$('#one .draggable').live('click', function () {
// move from "one" to "two"
$(this).appendTo("#two");
});
$('#two .draggable').live('click', function () {
// move from "two" to "one"
$(this).appendTo("#one");
});
});