I am trying to create divs dynamically and display them. When I try to hide the created divs //First function is working perfect, but that is not what I want. I am defining a close button and I want the div to hide when the close button is cliked. While running the //Second function, after clicking the parent div, it hides all its child divs. I.E. When I click on the 1st div it hides all the divs called after that.
Code:
var newImageBoxdiv = $(document.createElement('div')).attr({ class:"demo"+i, id:"image"});
newImageBoxdiv.html("<img id='MyImage' src='"+d+"'><div class='ImageWindowCloseButton' ></div>");
newImageBoxdiv.insertAfter('.demo');
$('#image').show();
i++;
//First Function
$('#image').click(function(event){ //Works Perfect
$(newImageBoxdiv).hide();
event.stopPropagation();
event.cancelBubble = true;
});
//Second function
$('.ImageWindowCloseButton').click(function(event){ // Deletes Child element when clicked on parent
$(newImageBoxdiv).hide();
event.stopPropagation();
event.cancelBubble = true;
});
$(this).parent(newImageBoxdiv).hide();
Related
I have a simple dropdown list, I want when the user toggles the dropdown list to show or hide another div using the jquery method slideToggle, unfortunately, I am struggling to solve the problem.
Expected: when the user clicks an icon it should show the list and hide another div (slideDown effect) when the user clicks again for closing the dropdown list (slideUp effect), I want to show the hidden div.
var link = $('.sprzatanie-link');
link.click(function(e) {
e.preventDefault();
list.slideToggle("fast", function(){
console.log('do something')
if("slideDown"){
$('.dezynfekcja-dropdown').hide();
}else if("slideUP"){
$('.dezynfekcja-dropdown').show();
}
});
});
I tried adding a callback function but I don't know how to check the slide effect if it's slideDown or slideUp.
Any idea will be appreciated.
Once toggle finishes it basically hides or shows the element being toggled. So in the complete callback you can simply check if your element is shown or hidden.
var link = $('.sprzatanie-link');
link.click(function(e) {
e.preventDefault();
list.slideToggle("fast", function(){
// `this` refers to the DOM element being toggled.
// We can use `is(":visible")` to check if it visible or not
let isVisible = $(this).is(":visible");
// show console message that tells us if element is hidden or visible
console.log(this.innerText, ' is now ', isVisible);
// use isVisible to do whatever you want show/hide etc
if(isVisible) {
$('.dezynfekcja-dropdown').hide();
} else {
$('.dezynfekcja-dropdown').show();
}
});
});
I have a small application in jQuery, which takes the href value of an anchor element and inserts that as a div's Id. The div is a basic popup window which is only visible if it's triggered.
The popup window on gets triggered if a anchor tag gets clicked with the same href value as the id of the popup div.
HTML Code:
Item 1
Item 2
Item 3
<div class="popup"></div>
jQuery Code:
var items = ["#item1", "#item2", "#item3"];
$.each(items, function()
{
$(document).on("click", this, function(e)
{
e.preventDefault();
var href = $(this).attr("href");
var length = href.length;
var anchor = href.substring(1, length);
var popup = $(".popup").attr("id", anchor);
});
});
Problem:
The popup window should be triggered once the client clicks on any of the anchors above. However it only gets triggered, on the second click. I guess the first one sets the Id and the second opens is, with the set value.
I have also tried to use another type of click event and it worked for the first click. The event, which have been working was:
$(this).on("click", function(e)
{
// Stuff goes here as above
});
My problem is that I cannot use this type of event handler, because I will be changing the content of the anchor href's dynamically with jQuery.
Question:
How is it possilbe to make the original code working as I expect, so the client should only click once to the anchor tag to get the popup window? Anything else I should consider as well?
$('#item1').on("click", function(e)
{
// Stuff goes here as above
});
$('#item2').on("click", function(e)
{
// Stuff goes here as above
});
i have a horizontal list menu which when clicked toggles the visibility of a nested list. the function almost works, i click the menu and the visibility toggles. however, when i click inside the element that has just appeared, the visibility of the nested list reverts back to original state and is hidden. this is a bit difficult when the elements require an interaction (whether it's a form or another menu).
Here's the code i've got so far:
/* menu */
var menu = function(clicktarget, dropdown){
$(clicktarget).click( function(event){
// stop bubbling
event.stopPropagation();
//show
$(dropdown).toggle();
return false;
});
$('body').not($(dropdown)).click( function(){
//hide when click anywhere out the menu
$(dropdown).hide();
return false;
});
}
menu($('#loginAcc'),$('#auth-menu'));
As you can see i have tried using the .not() function in an attempt to remove it, but nothing changes and the dropdown still gets removed when it's clicked.
Try
$('body').click( function(e){
//hide when click anywhere out the menu
var $target = $(e.target)
if(!$target.closest(dropdown).length){
$(dropdown).hide();
}
return false;
});
We've got the classic problem with a div's child getting clicked and the parent's click event gets triggered as well. I've got a button set within a container that expands and unexpands upon clicking.
The button, when clicked, should:
Unexpand the container
Hide the container's description
The two click functions are given below:
var $NotificationContainer = $("#NotificationContainer");
$NotificationContainer.append('<div class="Notification" title="'+title+'"></div>');
var $thisNotification = $NotificationContainer.children('.Notification[title='+uniqueTitle+']');
$thisNotification.append('<div class="NotificationDescription">'+uniqueDescription+'</div>');
$(".NotificationDescription").hide();
// Button used to close an expanded notification
$thisNotification.append("<div class='NotificationCloseButton'></div>");
$('.NotificationCloseButton').hide();
$thisNotification.click(function()
{
$(this).animate({height:250}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
});
$(".NotificationCloseButton").click(function()
{
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
});
What I find with this code is that when clicking the close button:
SlideToggles the description to be hidden
SlideToggles the close button to be hidden
The container unexpands, but then re-expands (contents still hidden)
The $thisNotification click is being called (I think).
Now, when I try to use event.stopPropagation(); or a simple return false; in the closeButton's click, I get very interesting results.
Clicking the close button with either of the above additions now:
Unexpands the container
The description and button remain present, and do not slideToggle at all.
Code snippets of the exact way I implemented stopPropogation and return false:
$(".NotificationCloseButton").click(function(event)
{
event.stopPropagation();
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
});
and
$(".NotificationCloseButton").click(function()
{
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
return false;
});
You have click bindings for a the parent object:
$thisNotification
and for a child object:
$(".NotificationCloseButton")
When you click the close button, the 'click' event is being fired for both handlers, all animations are queued, and you get the undesirable closes-then-opens action.
You have a few options to resolve this. #1 is to unbind the parent click handler and rebind it after the close button is clicked.
$thisNotification.click(function()
{
notificationClickHandler(); //animations are separated from bindings
$thisNotification.unbind('click');
});
Alternately, jQuery has a .clearQueue() method that removes all queued animations. This might have side-effects when users are quick with the mouse, or if your page is heavy on jQuery animations, so you'll have to experiment with the appropriate level of scope for your application.
$(".NotificationCloseButton").click(function()
{
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
$.clearQueue();
});
Basicllay i have a div with a class called .li-level-1, and inside that i have differnt ul's with lists. i Have it set up so when you click on a li-level-1 div displays the ul's and li's inside that div by animating a drop down and when you click on the next one it closes the one previously opened and slidesDown the next one.
the only thing is the a links that are inside the div's seem to trigger the slideUp/Down on level-1 and animation as well.
any Suggestions?
$('.sitemap_page .li-level-1').each(function(){
$(this).find('ul.ul-level-2').hide();
$(this).click(function(){
var this_list = $(this);
this_list.parent().find('.open').each(function(){
$(this).slideUp(function(){
this_list.find('ul.ul-level-2').addClass("open").slideDown();
}).removeClass('open');
});
if(this_list.find('ul.ul-level-2.open').length == 0) {
this_list.find('ul.ul-level-2').addClass("open").slideDown();
}
});
});
That's because of event bubbling: the click event raised on the <a> elements bubble up to their containing <div> and cause your event handler to execute.
One way to work around that problem would be to use event.target to determine the event's origin, and only perform the sliding animations if the event did not originate on a link:
$(this).click(function(event) {
if (!$(event.target).is("a")) {
var this_list = $(this);
this_list.parent().find('.open').each(function() {
$(this).slideUp(function() {
this_list.find('ul.ul-level-2').addClass("open").slideDown();
}).removeClass('open');
});
if (this_list.find('ul.ul-level-2.open').length == 0) {
this_list.find('ul.ul-level-2').addClass("open").slideDown();
}
}
});
The problem is with event bubbling as sugested by Frederic. The other possible solution is to divide your div into title and content divs. Hold data in content and check click on title (not on the parent list). This means rebuilding the handler but the code will be clearer and it won't depend on event.target.