Below is my jQuery:
$(".notificationfeedlist li").live('mouseleave', function() {
IF(NOT (MOUSE OVER AN ELEMENT WITH ID INFO))$('#info').hide();
});
And here is the HTML I am applying this jQuery to:
<div id="info">
<div class="arrow-right2"></div>
<div class="arrow-right"></div>
<div class="scrollerdiv"></div>
</div>
What should I replace IF(NOT (MOUSE OVER AN ELEMENT WITH ID INFO)) with to achieve hiding elements that do not have an ID of "info"?
$(".notificationfeedlist li").live('mouseleave',function(e){
if (e.target.id != "info") {
$('#info').hide();
};
});
You should change it to class="info" and then check with jQuery .hasClass();
Just trying to help: there are no lis in your code; just divs. That could be your problem.
Related
So I have nested DIVs and a simple version can be shown like this:
$('#parent').click(function() {
$('.parent').modal('show');
});
$('#child').click(function() {
$('.parent').modal('hide'); // Added to try and hide
$('.child').modal('show');
$('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">
</div>
</div>
The thing is when I click on the child div, the parent dialog also shows up behind the child dialog.
Any way to get around this?
It is happending because your child click event is bubbling up to the parent. Use e.stopPropogation() for the child div. This will prevent your click event from propogating to the parent.
$('#parent').click(function() {
$('.parent').modal('show');
});
$('#child').click(function(e) {
e.stopPropogation();
$('.parent').modal('hide'); // Added to try and hide
$('.child').modal('show');
$('.parent').modal('hide'); // Added to try and hide
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">
</div>
</div>
You can deal with such cases easily by mentioning the target in an attribute like below.
$('#parent, #child').click(function() {
var target = $(this).data('target');
$('.'+target).modal('show');
// write code to hide others if necessary
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent" data-target="parent">
<div id="child" data-target="child">
</div>
</div>
Try this before showing the modal:
$( '.modal' ).remove();
$( '.child' ).modal('show');
Remove the modal before using show. Hope this will fix your issue
I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance
Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});
Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO
i have some divs i wanna toggle i am able to toggle but unable to remove classes when ever i click on the next div
index.php
<div id="menu_top1" class="menu_top1">LINK 1</div>
<div id="menu_top" class="menu_top">LINK 2</div>
<div id="content_area1" style="display:none;">
THIS IS LINK 1
</div>
<div id="content_area2" style="display:none;">
THIS IS LINK 2
</div>
Jquery.js
$('#menu_top1').click(function() {
$('#content_area1').toggle('slow', function() {
$('.menu_top1').toggleClass('active');
});
});
Here is a Fiddle https://fiddle.jshell.net/kunz/t5u6mcmn/
if you are trying to show corresponding content_area when you click on link and make the link active? you can check this
fiddle
i saw you using same id for multiple elements.just edited them.
still you want same id for all elements(strictly not recommended) check this fiddle
check this updated fiddle
$('.menu_top').click(function() {
var index = $( this ).index() + 1;
console.log(index);
$('[id^="content_area"]' ).hide();
$('#content_area' + index ).toggle('slow', function() {
$('.menu_top').toggleClass('active');
});
});
I'm trying to toggle a parent div when the div itself is being clicked. But I want to prevent child divs or elements from triggering the function. How can I do that?
//javascript (jquery enabled)
function toggle(parent_id) {
$('.'+parent_id).toggle();
}
<!-- html -->
<div class="parent parent1" onclick="toggle('parent1')">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="parent parent2" onclick="toggle('parent2')">
<div class="child1"></div>
<div class="child2"></div>
</div>
Thanks!
UPDATE: I'm trying to toggle the specific div, hence using a function to pass the specific parent id.
ie. if I click on parent1, parent1 toggles;
if I click on parent2, parent2 toggles
The following should do the job:
$(".parent").click(function(e) {
if (e.target == this) {
$(this).toggle();
}
});
DEMO: http://jsfiddle.net/Md4U5/
That's easy, just extend #VisioN's answer, ensuring that all those divs have a class of parent:
$("[class~=parent]").click(function(e) {
if (e.target == this) {
$(this).toggle();
}
});
I have 2 images (.field-img) , wrapped in a container (.group-container),
each of the images are in a unique field id, so my tpl is broken down into
<div class=group-container>
<div id=field1>
<div class=field-img>
</div></div>
<div id=field2>
<div class=field-img>
</div></div>
</div>
my js is
$(".group-container .field-img").click(function() {
alert(".group-container .field-img");
what I would like is to detect automatically if the image belongs to field1 or field2.
So I could alert (".group-container .field1/2 .field-img");
How would I do this?
Thanks for any help
$(".group-container .field-img").click(function() {
var field=$(this).parent().attr('id');
});
An alternative to Izzey's solution is to use .closest with an attribute starts with selector (or classname because it would be more appropriate for those divs to have a common class)
$(".group-container .field-img").click(function() {
var field = $(this).closest("[id^=field]")[0].id;
});
or, with a common classname,
html
<div class=group-container>
<div class="field" id=field1>
<div class=field-img>
</div></div>
<div class="field" id=field2>
<div class=field-img>
</div></div>
</div>
js
$(".group-container .field-img").click(function() {
var field = $(this).closest(".field")[0].id;
});
$(".group-container .field-img").click(function() {
var field = this.parentNode.id;
alert (".group-container ." + field + " .field-img");
});
$(".group-container .field-img").each(function() {
$(this).click(function(){
var fieldid=$(this).parent().attr('id');
});
});
Since one element is inside the other, the click will propagate up anyway, so you could always just bind the click to the parent element and do :
$('div[id^="field"]').on('click', function() {
alert(".group-container "+this.id+" .field-img");
});
FIDDLE
or even get them all dynamically:
$('div[id^="field"]').on('click', function(e) {
alert('.'+this.parentNode.className+" "+this.id+" ."+e.target.className);
});
FIDDLE