The question is how to hide parent block if all childs are hidden, and display it if they are visible again?
Is it possible to "monitor" block status with jQuery?
jsFiddle example - here red block must automatically hide if we hide yellow and green blocks.
Html
<div id="mother">
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS
#mother {
width:200px;
height:200px;
background:red;
}
.child1, .child2 {
width:100px;
height:100px;
background: orange;
}
.child2 {
background:green;
}
JavaScript
$(function() {
var childs = $("[class^=child]");
childs.click(function() {
$(this).hide();
});
});
Try
$(function () {
var childs = $("[class^=child]");
childs.click(function () {
$(this).hide();
//check if any child is visible, if not hide the mother element
if(!childs.filter(':visible').length){
$('#mother').hide()
}
});
});
Demo: Fiddle
You can check the length of visible elements inside #mother div by using :visible selector along with .length, if it's equal to 0 then hide #mother:
$(function () {
var childs = $("[class^=child]");
childs.click(function () {
$(this).hide();
if ($("#mother").find(":visible").length == 0)
$("#mother").hide();
});
});
Fiddle Demo
Try this in child click event handlers:
if($('#mother').children(':visible').length == 0) {
$('#mother').hide();
}
Working Demo
You can try so:
$(function() {
var childs = $("[class^=child]");
childs.click(function() {
$(this).hide();
var $parent = $(this).parent();
var $child = $parent.find('div:visible');
if(!$child.length){
$parent.hide();
}
});
});
Related
I use jQuery UI .droppable for dropping elements to divs. Now I need to prevent dropping to divs with class .box if they are not empty.
I tried:
if ($('.box').is(':empty')) {
$(".box").droppable({
});
}
But this makes all .box divs non-droppable whether they are empty or not.
The code below will check, does element with class box has any text or other elements inside. You can try to put text or add child elements to that div to be sure, that it's working:
if (!$('.box').text() && $('.box').children().length === 0) {
console.log("droppable");
/*$(".box" ).droppable({
// code here
});*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
So the solution is:
$(".box").droppable({
accept: function() {
return $(this).find("*").length == 0;
},
drop: function(event, ui) {
var $this = $(this);
$this.append(ui.draggable.css({
top: 0,
left: 0
}));
}
});
I have put together some code to make this work, but my Jquery skills are limited, can anyone let me know where i'm going wrong? I assume my syntax is totally incorrect. Thanks in advance for your assistance :)
// jQuery selector to get an element
var query = $('#menu .sub-menu');
// check if element is Visible
var isVisible = query.is(':visible');
if (isVisible === true) {
// element is Visible
$("#menu").click(function(e) {
query.hide();
e.stopPropagation();
} else {
// element is Hidden
}
Your same code is working just wrapped in .ready() method and added }) after e.stopPropagation();. That was the error in your code responsible for your problem You could check that error in the console of your browser.
$(document).ready(function() {
// jQuery selector to get an element
var query = $('#menu .sub-menu');
// check if element is Visible
var isVisible = query.is(':visible');
if (isVisible === true) {
// element is Visible
$("#menu").click(function(e) {
query.hide();
e.stopPropagation();
});
} else {
// element is Hidden
}
});
$(document).ready(function() {
// jQuery selector to get an element
var query = $('#menu .sub-menu');
// check if element is Visible
var isVisible = query.is(':visible');
if (isVisible === true) {
// element is Visible
$("#menu").click(function(e) {
query.hide();
e.stopPropagation();
});
} else {
// element is Hidden
}
});
.sub-menu {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
Menu
<div class="sub-menu">
Sub Menu
</div>
</div>
I have one question about Jquery hidden fuction.
I have two different Demo from codepen.io
First DEMO css animation will working. but .wrap is not to be hidden when i click second time .note a.
Second DEMO .wrap is hidden but not with animation. I want when i click .note a for close .wrap then .wrap going to be a hidden with css animation like first DEMO.
how about this
is this what you wanted?
$(document).ready(function() {
var circle = $('.circle');
var wrap = $('.wrap');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){$('.wrap').hide()},500);
if (wrap.hasClass('bounceInUp')) {
wrap.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
wrap.addClass('animated bounceOutDown');
wrap.removeClass('bounceOutDown').addClass('bounceInUp');
}
if (circle.hasClass('bounceInLeft')) {
circle.removeClass('bounceInLeft').addClass('bounceOutRight');
}
else {
$('.circle').addClass('animated bounceOutRight');
circle.removeClass('bounceOutRight').addClass('bounceInLeft');
}
});
});
Use a setTimeout function http://codepen.io/akshay-7/pen/gbgYvx
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){
$('.wrap').hide();
},2000);
Need some JQuery help...
I want to slide in a div from the right taking 25% of the screen width.
How can I use the same '#trigger-left a' to slide out the div? (i.e. width: 0px)
JQuery:
$(function() {
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
rightCol.animate({width:'25%'},350);
return false;
});
});
HTML:
<div id="trigger-left"><img src="images/menu-icon.png" border="0"></div>
<div id="right-col">Content right column</div>
Looking forward to your solutions!
Try this:
$(function() {
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
if(rightCol.width()==0)
{
rightCol.animate({width:'25%'},350);
}
else
{
rightCol.animate({width:'0%'},350);
}
return false;
});
});
If you mean by clicking the same link the div will slide out.
Here you are:
$(function () {
var div = $("#"right-col");
$("#trigger-left a").click(function (e) {
if ($(div).width() != 0) {
$(div).animate({width:'0px'},350);
} else {
$(div).animate({width:'25%'},350);
}
});
});
Try that if it didn't work I will edit my answer. Good luck ;)
Easiest way would be to just track what state it's in. In this way can keep direction going which may not be possible if clicked in the middle of a transition if using the widths.
$(function() {
var triggered = false;
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
if(!triggered){
rightCol.animate({width:'25%'},350);
triggered = true;
} else {
triggered = false;
rightCol.animate({width:'0%'},350);
}
return false;
});
});
I’m using the following jQuery for hiding and showing content (toggle), as a tree navigation menu in my website. I found this code extremely useful because by clicking, it displays only one div at a time.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if ($(this).attr("id") == chosen_region) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>
<style type="text/css">
.city_div {display: none;}
</style>
North<br>
<div class="city_div" id="box01">Div #01</div>
Centre<br>
<div class="city_div" id="box02">Div #02</div>
South<br>
<div class="city_div" id="box03">Div #03</div>
The problem is that I can close a div only by opening another div.
How to close the div by a second click on it?
You can use slideToggle, change from slideDown to slideToggle:
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if ($(this).attr("id") == chosen_region) {
$(this).slideToggle(200); // instead of slideDown
}
else {
$(this).slideUp(600);
}
});
}
First of all, don't use inline event handlers.
<script type="text/javascript">
$(document).ready(function() {
var boxes = $('.city_div');
$('.city-toggle').click(function(e) {
var box = $(this).next();
var isHidden = box.is(':hidden');
boxes.slideUp(600);
if(isHidden) {
box.slideDown(200);
}
e.preventDefault();
});
});
</script>
<style type="text/css">
.city_div {display: none;}
</style>
North
<div class="city_div" id="box01">Div #01</div>
Centre
<div class="city_div" id="box02">Div #02</div>
South
<div class="city_div" id="box03">Div #03</div>
Also, if your links don't go anywhere meaningful, use # as the href and make sure the boxes are visible by default. (Hide them using boxes.hide(); right at the start.)
Also also, <br> isn't what you should use there. <div>s are already block-level elements. If you want more padding, give them a top margin.
try this:
$(document).ready(function(){
$('.city_div').click(function(){
$(this).hide(); //or whatever code you want to hide it
});
});
that way when you click on a div, it will hide it.
Since you are using jQuery you could try using the jQuery.toggle function.
function show_region(chosen_region) {
$('#' + chosen_region).toggle('slide');
return false;
}
Keep track of the div you have clicked last:
var globalLastClickedButtonId;
$("div.city_div").click(function() {
if (globalLastClickedButtonId == $(this).attr("id")) {
$(this).hide();
} else {
var box = $(this).next().next();
var clickedId = $(this).attr("id");
$("div.city_div").each(function() {
if ($(this).attr("id") == clickedId)
box.slideDown(200);
else
box.slideUp(600);
}
}
globalLastClickedButtonId = $(this).attr("id");
});
First, why are you using such an old version of jQuery?
Second, your JavaScript can be simplified. jQuery works on sets; you don't need the .each, or loops.
Here is a working example: http://jsfiddle.net/gibble/25P9z/
Simplified HTML:
North<br>
<div class="city_div" id="box01">Div #01</div>
Centre<br>
<div class="city_div" id="box02">Div #02</div>
South<br>
<div class="city_div" id="box03">Div #03</div>
New JavaScript:
function show_region(e) {
var $target = $(e.target);
var chosen_region = $target.attr('data-contentDiv');
var openDiv = $('#' + chosen_region);
openDiv.slideDown(200);
$('.city_div').not(openDiv).slideUp(600);
}
Last, attach events, don't inline them in your HTML.
$('a[data-contentDiv]').click(show_region);
Because you are using an animation it is best to keep track of the div that is currently shown. If you don't, then you will start to see multiple divs showing if you click links in quick succession.
You can use this:
$(function() {
$("a").click(function(e) {
e.preventDefault();
var selectedDiv = $("#" + $(this).attr("href"));
var hide = selectedDiv.data("shown");
$(".city_div").slideUp(600);
$(".city_div").data("shown", false);
if (hide) {
selectedDiv.data("shown", false);
}
else {
selectedDiv.data("shown", true);
selectedDiv.slideDown(200);
}
});
});
Here is a working example
You should keep a variable with your old chosen region name
<script type="text/javascript">
var old_chosen_region="";
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if (($(this).attr("id") == chosen_region)&&(chosen_region!=old_chosen_region)) {
$(this).slideDown(200);
old_chosen_region=chosen_region;
} else {
$(this).slideUp(600);
}
}
old_chosen_region='';
});
</script>
This allows you to 'remember' which region you chose last and, if the chosen one equals the last you close it.
You should set old_chosen_region='' in the end to let the tab reopen.