jQuery separate dblclick events inside and outside of a div element - javascript

I'm developing a local site for content creation, and I'd like to use javascript's double click functionality.
I'd like to rotate through full screen background images when the user double clicks outside of the divs with names/ids bigwrapper or bigwrapper2. When the user clicks #bigwrapper or #bigwrapper2, I'd like it to .toggle(); each one to hide/show one or the other.
Here's my updated code (thanks lordvlad):
$(function() {
$( "#bigwrapper" ).draggable();
$( "#bigwrapper2" ).draggable();
var SacramentoBG = ['nightcap.jpg','Tower_Bridge_Sacramento_edit.jpg'],
counter =0;
$('html').dblclick(function (event) {
if (event.target.id != "bigwrapper" && event.target.id != "bigwrapper2") {
counter = (counter+1) % SacramentoBG.length;
$('html').css('background-image', "url("+SacramentoBG[counter]+")");
} else {
$("#bigwrapper").toggle();
$("#bigwrapper2").toggle();
}
});
});
UPDATE: The solution below to add 'event' inside the function partially helped, as the backgrounds rotate properly, however the #bigwrappers aren't toggling as intended (the else condition). See: http://artfuladvection.com/project/NOAA/ndfdGraph/bloom.php Ideas?
Thanks!

that's because the dblclick function doesn't know about the event variable. try this
$('html').dblclick(function (event) {

The complete answer that worked for me was that I needed to stop excluding specific classnames/ids and instead exclude entire element tags. Alternatively, I could just use if (event.target.TagName == 'BODY') {}
$('body').dblclick(function (event) {
if (event.target.tagName != 'DIV' && event.target.tagName != 'IMG' && event.target.tagName != 'TABLE' && event.target.tagName != 'HR' && event.target.tagName != 'SMALL' ) {
counter = (counter+1) % SacramentoBG.length;
$('html').css('background-image', "url("+SacramentoBG[counter]+")");
} else {
$("#bigwrapper").toggle();
$("#bigwrapper2").toggle();
}
});

Related

How to write a single Jquery function to trigger on document change and ready events

What I am trying to do is just to call this function once the document has loaded but also whenever some of the elements values are changed. I was wandering if there is a way to do this without writing the same piece of code twice, for document.ready() event and document.change().
$(document).on("change", "#holiday-editor input[name=StartDate],input[name=EndDate]", function() {
that.UpdateDays();
if ($("#holiday-editor input[name=StartDate]").val() == $("#holiday-editor input[name=EndDate]").val() && $("#holiday-editor input[name=StartDate]").val() + $("#holiday-editor input[name=EndDate]").val() != "") {
$("#IsHalfDay").show();
} else {
$("#IsHalfDay").hide();
$("input[name=HalfDay]").removeAttr("checked");
$("#amPM").hide();
$("#HalfDayAP").val("");
}
});
What I basically need is this function to run and check already existing values on the form before they get changed.
Use like this:
var changeFn = function() {
that.UpdateDays();
if ($("#holiday-editor input[name=StartDate]").val() == $("#holiday-editor input[name=EndDate]").val() && $("#holiday-editor input[name=StartDate]").val() + $("#holiday-editor input[name=EndDate]").val() != "") {
$("#IsHalfDay").show();
} else {
$("#IsHalfDay").hide();
$("input[name=HalfDay]").removeAttr("checked");
$("#amPM").hide();
$("#HalfDayAP").val("");
}
};
$(document).on("change", "#holiday-editor input[name=StartDate],input[name=EndDate]", changeFn);
and you can call the changeFn() also on ready or whenever you want.

Hide an element when a user clicks outside of it

$( document ).on('click', '.toggle_comments', function( event ){
event.preventDefault();
var container = $('div[name="comments"]');
if ( container.css('display') == 'block' ) {
container.hide();
return;
}
container.fadeIn(500);
});
When .toggle_comments is clicked, the container fades in. Is there a way to do something, ie fadeout, if anything outside the container is clicked WHILE it's display block? Bearing in mind, obviously, that .toggle_comments is outside of it in the first place. So it needs to be a live event, something that only fires while the container is in the state if display:block.
You can bind a mousedown event to document and check if the element clicked on is not div[name="comments"] like so:
$(document).mousedown(function(event)
{
var commentSection = $('div[name="comments"]');
if(!$(commentSection).is($(event.target)) && !$(event.target).closest($(commentSection)).length)
$(commentSection).fadeOut();
});
Just do different things if different elements are clicked
$( document ).on('click', function( event ){
event.preventDefault();
var target = $(event.target);
var container = $('div[name="comments"]');
if ( target.closest('.toggle_comments').length > 0 ) {
if ( container.is(':visible') ) {
container.hide();
} else {
container.fadeIn(500);
}
} else if (target.closest(container).length === 0 && container.is(':visible')) {
container.fadeOut(500);
}
});
FIDDLE

JQuery: Click anywhere other than #element

Nothing in the recommended questions covers it. I'm trying to initiate an event if a click occurs anywhere in the document other than in one of two specific divs. This is what I'm doing:
$('html:not(#optionsDropdown):not(#settingsButton)').click(function() {
if ($('#settingsCogCheck').val() === '1') {
alert('click');
}
});
It isn't working, though. Any clue as to why?
Thanks!
You can't add a listener to "everything except x", but you can listen on document, and check the element inside the click handler:
$(document).click(function() {
var id = $(this).id;
if (id != 'optionsDropdown' && id != 'settingsButton') {
if ($('#settingsCogCheck').val() === '1') {
alert('click');
}
}
});

Accordion like form, will not work for me, can anyone see what i've done wrong here?

I'm make a rather long form, and I want to be able to break the form down into tabbable section, then when leaving that last input/select box, the next section will slide open, while the previous slides shut. I'm also wantning to have the fieldset legend, clickable to achieve the same thing.
A good example of what I'm looking for can be found here: http://jsfiddle.net/s4vcX/
Here is what I'm currently working with: http://jsfiddle.net/AUf3U/
If you'd like, you can see the current JavaScript code here:
$("fieldset label").hide();
$("fieldset ul").hide();
$("fieldset:first label").show();
// show when legend is clicked while hiding rest
$("legend").bind("click", function () {
$("fieldset label").not($(this).nextAll("label")).hide();
$(this).nextAll("label").show();
});
//handle shift-tab on first input of each field set
$("fieldset").find("input:first").bind("keydown", function (e) {
if( e.shiftKey && e.which == 9 ) {
$(this).closest(".hidesfieldset").find("label").hide();
var previous = $(this).closest(".hidesfieldset").prev(".hidesfieldset");
if(previous.length==0)
previous = $(this).closest("form").find(".hidesfieldset:last");
previous.find("label").show();
previous.find("input").last().focus();
e.preventDefault();
}
});
//handle tab on last input of each field set
$("fieldset").find("input:last").bind("keydown", function (e) {
if( !e.shiftKey && e.which == 9 ) {
$(this).closest(".hidesfieldset").find("label").hide();
var next = $(this).closest(".hidesfieldset").next(".hidesfieldset");
if(next.length==0)
next = $(this).closest("form").find(".hidesfieldset:first");
next.find("label").show();
next.find("input").first().focus();
e.preventDefault();
}
});
If someone can point out what`s going wrong here, I would be incredibly greatful, this has become a huge pain in the ass, and have to impelment this across about 50 forms, so changing the structure of my form is not necessarily a good thing.
The problem is your input selector, since you are using element selector it selects only elements with tag input but in your first fieldset the last element is a select element.
Try to use the :input selector
//handle shift-tab on first input of each field set
$("fieldset").find(":input:last").bind("keydown", function (e) {
if (e.shiftKey && e.which == 9) {
$(this).closest(".hidesfieldset").find("label").hide();
var previous = $(this).closest(".hidesfieldset").prev(".hidesfieldset");
if (previous.length == 0) previous = $(this).closest("form").find(".hidesfieldset:last");
previous.find("label").show();
previous.find("input").last().focus();
e.preventDefault();
}
});
//handle tab on last input of each field set
$("fieldset").find(":input:last").bind("keydown", function (e) {
if (!e.shiftKey && e.which == 9) {
$(this).closest(".hidesfieldset").find("label").hide();
var next = $(this).closest(".hidesfieldset").next(".hidesfieldset");
if (next.length == 0) next = $(this).closest("form").find(".hidesfieldset:first");
next.find("label").show();
next.find(":input").first().focus();
e.preventDefault();
}
});
Demo: Fiddle

Javascript Jquery - Dont close if child element is clicked

Ok i have a script that closes all my divs unless those divs have this class name. The following script works fine:
window.onclick = function(ev){
if((ev.target.className !== 'ddHeader') && (ev.target.className !== 'ddSubmenu')&&
(ev.target.className !== 'ddContainer')&& (ev.target.className !== 'ddItem')){
delay_close_sub();
}
};
So now i need to do the same thing with a child element. I would like to just add it to the above code similar to this:
window.onclick = function(ev){
if((ev.target.className !== 'ddHeader') && (ev.target.className !== 'ddSubmenu')&&
(ev.target.className !== 'ddContainer')&& (ev.target.className !== 'ddItem') &&
ev.target.element !== 'ddHeader > input){
delay_close_sub();
}
};
I added: ev.target.element !== 'ddHeader > input') to the end but it does not work. How would i make this work? I want to make sure that when the input field inside the ddHeader div is click it doesn't trigger the "delay_close_sub() function.
Thanks for any help.
You can use JQuery in a much more efficient compact way:
$(window).click(function(ev){
if(!$(ev.target).is('.ddHeader,.ddSubmenu,.ddContainer,.ddItem,.ddHeader > input'))
delay_close_sub();
});
Which means if the event target doesn't match any of the comma-separated selectors, close your thing.
Use getElementsByTagName:
ev.target.element.getElementsByTagName('input').length == 0

Categories