I want to style my div using jquery, i want to make it when i click the background become blue, when i unclick(i clicked on other part other than div in my page) the background become red. Sorry for my bad english
With a click handler on document you can capture all the click events, and if the click is not on your div, you can revert to red
$('#yourdiv').click(function() {
$(this).css('background-color', 'blue');
});
$(document).click(function(e) {
if(!$(e.target).is('#yourdiv'))
$('#yourdiv').css('background-color', 'red');
});
See example: http://jsbin.com/oyunin/1/edit
Im not sure about performace, but you can do something like:
$("*").not("your element selector").on("click",function(){
//other elements click
});
a good practice will be doing this:
$("*","some container").not......
if you want to change the div when you click on another div, you can add a click event on the other div, or perhaps you want to add the click event to the entire body of the document so that if a click event is not captured and stopped by another listener, it will go through to the body's event listener.
Try this,
Jquery Code:
$(document).mouseup(function (e){
var wrapDiv = $(".wrapper");
if(wrapDiv.has(e.target).length === 0){
wrapDiv.css('background-color','red');
}
$('.wrapper').click(function(event){
$('.wrapper').css('background-color','blue')
});
});
CSS code:
<style type="text/css">
.wrapper{
background-color:#0FF;
width:200px;
height:200px;
}
</style>
Html code:
<div class="wrapper">
</div>
The way I solved it in my site was adding a click event to the div in question, and another click event to the document in general. The method stopImmediatePropagation() makes it work as expected:
Here's a jsFiddle with a working example.
HTML:
<div class="colored"></div>
JQUERY:
$(document).click(function(e){
$(".active").removeClass("active");
});
$(".colored").live("click",function(e){
$(this).addClass("active");
e.stopImmediatePropagation();
});
CSS:
.colored{background:red}
.colored.active{background:blue}
Related
I have a dropdown(.dropdown) div that opens when I click on .open:
Html:
<div class="open">Open</div>
<div class="dropdown">Dropdown</div>
jQuery:
$(".open").click(function(){
$(".dropdown").show();
});
Once the dropdown is open I'm using this jQuery script to close it when i click is made outside .dropdown div:
$(document).click(function(){
$('.dropdown').hide();
console.log('click');
});
$('.open, .dropdown').click(function(e){
e.stopPropagation();
});
The problem is that the click event for document is executed even if the div is not visible. Now, I could check to see if the div is visible before executing the .hide() method but is there a solution to activate the event on the document when the div is visible and deactivate it when the div is hidden?
It looks like you need to bind a click event to the document anyways to hide the dropdown. So, what about doing something like:
$(document).ready(function(){
$(document).click(function(e){
if ($(e.target).hasClass("open")) $(".dropdown").show();
else $(".dropdown").hide();
});
});
It's more concise and you don't have to worry about event propagation.
JsFiddle
I am trying to dynamically add a div on clicking td.active. I wish to remove the dynamically added div when someone click on the close button or click on other td.active
Right now my code just append another div when the close button is clicked. can anyone help me to fix the issue.
$(function() {
$('td.active').click(function(event){
$(this).append('<div class="planner-modal"><div class="planner-modal-header"><button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h5 class="text-center">modal heading</h5></div><div class="planner-modal-body">modal body</div><div class="caret-container"><div class="top-caret"></div><div class="bottom-caret"></div></div></div>');
});
$('.planner-modal-header.close').click(function(e){
$(this).closest('planner-modal').remove();
});
});
I have gone through the jsfiddle and fixed it. you were trying to call click event on dynamically added content for ding this we can use jQuery on method.
i am sharing the jsfiddle link.
$(document).on("click",'.close',function(e){
$('.planner-modal').remove()
});
click here to see the working jsfiddle example
thanks
Use event delegation for dynamicaly created element
$('td.active').on("click", ".planner-modal-header .close", function (e) {
e.stopPropagation();
$(this).closest('.planner-modal').remove();
});
DEMO
use e.stopPropagation(); to stop the bubbling event
Part of a bigger solution, I have accordion-type jQuery control that implements headers as jQuery toggle buttons. Each header also has to have a help balloon. In nutshell, the setup is similar to that posted at this jsFiddle .
<div id="button1">Go to main action <span id="span1" style="color:blue">Help</span> </div>
<div id="out"/>
$('#button1').button().click(function(){
$('#out').text('Button clicked');
});
$('#span1').click(function(){
$('#out').text('Span clicked');
});
Is that possible to make it so I can click on the Help span, which is located inside the button div? Or, will button always get the events for all of its content preventing inside elements from getting click events?
Thank you.
Your event first fires on span and then also on button. You can prevent the event to be fired on parent by stopPropagation() method. Also, return false do the same.
Fiddle for demonstration
$('#span1').click(function(e){
$('#out').text('Span clicked');
e.stopPropagation();
});
or:
$('#span1').click(function(){
$('#out').text('Span clicked');
return false;
});
jSfiddle http://jsfiddle.net/kxntf/5/
A client has a site built in Magento, and there's this bit of javascript controlling how the menu is displayed:
<script type="text/javascript">
jQuery('.nav-add li.level0, .nav li').hover(
function(){
jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
},
function(){
jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
)
jQuery('.nav-widget').hide();
</script>
Right now it's set to expand whenever the user hovers on an item, but it's rather annoying to try to navigate that way. Is it possible to modify this code so that it expands when a user clicks on an item?
I tried replacing .hover with .click or .mouseup to no avail.
Assuming you just want to toggle the hover behavior by click instead of hover you can try something like this.
jQuery('.nav-add li.level0, .nav li').click(function(){
if(!$(this).data('clicked')){
jQuery(this)
.data('clicked', true)
.children('.nav-widget:not(.inSlide), ul:not(.inSlide)')
.addClass('inSlide')
.slideToggle(700,function(){
});
}
else{
jQuery(this)
.data('clicked', false)
.children('.nav-widget, ul:not(.active)')
.delay('2000')
.slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
});
jQuery('.nav-widget').hide();
The reason it doesn't work by simply replacing the .hover() with .click() is because the hover event needs two functions, one for onhover one for offhover. The .click() event only takes one function. I assume you want the top function as your click event.
jQuery('.nav-add li.level0, .nav li').click(
function(){
jQuery(this).children('.nav-widget:not(.inSlide),
ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
}
I have a div that hides whenever you click outside of it but I'm having some trouble getting certain links inside the div to work (and not hide the div).
$(document).click(function() {
fav.hide();
});
theDiv.click(function(e) {
e.stopPropagation();
});
That is what I have for the whole clicking outside and closing event. Heres the thing: I have two types of links in my div, one regular link and another which is a javascript one. The regular one redirects OK but the javascript one doesn't do anything.
Could somebody help me out? Thanks.
EDIT:
Here are the bits of my code that might help out
var fav = $('#favorites');
// Open & close button
$('#favorites_a').click(function(e) {
e.stopPropagation();
e.preventDefault();
fav.toggle();
});
$('a.c',fav).live('click', function(e) {
alert('hey');
});
$(document).click(function() {
fav.hide();
});
fav.click(function(e) {
e.stopPropagation();
});
HTML (built after page load):
<div id="favorites">
<div class="wrap">
<ul><li>AB</li></ul>
</div>
</div>
This could be a problem with the live() click event handler. When you use live the event handler is actually attached to the document. So the event needs to bubble up to the document, but your click event handler on fav prevents bubbling up.
It works with delegate though:
fav.delegate('a.c', 'click', function(e) {
alert('hey');
});
Here, the event handler is added to fav.
DEMO
I think your code for fav is preventing the 'B' link from working. Instead of .live(), try:
$('a.c').click(function() { ... });
instead.