i have a custom clickToggle function
it does
tab 1st toggle - open div
tab 2nd toggle - close div
after 1st toggle, the user can also close the div by clicking outside the div, without activating toggle2. the next time i want to open the div, it will continued at 2nd toggle, which is a bad bug.
So basically i'm asking if there is anyway i can end/restart the toggle function midway, so that if the user click outside of the div, the next time i click on the tab it will start at 1st toggle again, instead of continuing at 2nd toggle.
Is there something like a reset that i can do to restart the toggle function? Quite desperate about this been figuring for a day.
$(function () {
$("#toggle").clickToggle(function () { // toggle 1 open
$(".log").html("click Toggle1, show tab panel, isToggle = true");
$("#toggle_content").animate({width:'toggle'},350);
$(".container").addClass("overlay-disable");
// alternative exit(i want the toggle function to restart
// if this function runs, if not the next time i want to open the tab through
// toggle 1, it will continue at toggle 2 instead which is a bad bug as that
//was suppose to be a exit.
$(".container").click(function() {
$(".container").unbind("click").removeClass("overlay-disable");
$(".log").html("panel hide success, isToggle = false");
$("#toggle_content").hide();
});
},function() { // toggle 2 exit
$(".container").unbind("click").removeClass("overlay-disable");
$(".log").html("click Toggle2, hide tab panel");
$("#toggle_content").animate({width:'toggle'},350);
});
});
clickToggle is a custom plugin to toggle between 2 functions in each time i click the tab, it worked smoothly for just opening and exiting, but once i added a alternative exit i can't get a solution to restart the toggle function back to toggle1 if alternative exit is activated.
fiddle: http://jsfiddle.net/eekxzq1u/
when u click on tab, it pop a grey box, when u click on tab again, it close smoothly.
But when you tab out, the tab won't be working smoothly anymore
You can avoid using plugin by implementing a simple state-machine approach. Demo. You will need
Array of functions to be invoked on click states
Variable to store current state currentState
And a handler to invoke state functions on click run
Code:
var states = [function () { // click button 1st toggle
$(".log").html("click Toggle1, show tab panel, isToggle = true");
$("#toggle_content").animate({width:'toggle'},350);
$(".container").addClass("overlay-disable");
currentState = 1; //change state
$(".container").click(function() {
$(".container").unbind("click").removeClass("overlay-disable");
$(".log").html("panel hide success, isToggle = false");
$("#toggle_content").hide();
currentState = 0; //change state
});
},
function() {
$(".container").unbind("click").removeClass("overlay-disable");
$(".log").html("click Toggle2, hide tab panel");
$("#toggle_content").animate({width:'toggle'},350);
currentState = 0; //change state
}],
currentState = 0,
run = function() {
return states[currentState].apply(this, arguments);
};
$("#toggle").click(run);
Related
here handelDlt is onclick function of cancel button and changeStatus() is onclick function of toggle button, here if I want to change the status from close to open or open to close that change button functionality working fine and its give one model that do yo want to change from open to close or close to open.in toggle button functionality its working fine but 2 time its throwing the model like if i change status from open to close its throwing 2 model for cancel button like do you want to want to change from open to close and do you want to change from close to open. How can I hide the second one mode in cancel button .even I use e.preventDefault() but its not working
function changeStatus() {
checked
? formik.setFieldValue("status", "Closed")
: formik.setFieldValue("status", "Open");
}
let handelDlt = (e) => {
setOpen(false);
setChecked(!checked);
changeStatus();
e.stopPropagation();
};
I've got a bootstrap modal which shows a confirmation message. If the 'accept' button is clicked then a function is being called with an id, if 'cancel' or 'close' buttons are clicked then the modal closes. The issue is that when the modal is displayed, if I clicked on cancel, and then open the modal again and this time I click on 'accept', the function is being called twice, once for the time I clicked on cancel and once for the time I clicked on 'accept'. How can I prevent this?
$(document).ready(initItems)
function initItems() {
$('.delete-item').on('click', initItemDeletion)
}
function initItemDeletion() {
const itemId = $(this).data('item-id')
$('h5.modal-title').text('Confirmation')
$('div.modal-content div.modal-body').text('Are you sure you want to delete this item?')
$('div.modal-footer button.btn.btn-primary').text('Yes, Delete It!')
$('#main-modal').modal()
$('div.modal-footer button.btn.btn-primary').click(() => {
deleteItem(itemId)
$('#main-modal').modal('hide')
})
return
}
function deleteItem(itemId) {
console.log('deleting item...' + itemId)
}
Again:
click on link: modal is shown but I click on cancel.
Console prints: nothing
click on link: modal is shown but I click on accept.
Console prints:
deleting item... 2
deleting item... 9
where item 2 was the row of the item I clicked on the first time, and 9 is the current row I'm clicking on.
Your problem is that every time you open new modal, you bind to div.modal-footer button.btn.btn-primary button, so when you close the modal, it is still there, and when you open new one, you bind again on top of that.
Bind to namespaced click event and unbind it just before, so you always have just one handler:
$('div.modal-footer button.btn.btn-primary').off('click.close').on('click.close', function () {
deleteItem(itemId)
$('#main-modal').modal('hide')
})
Working fiddle: https://jsfiddle.net/aq9Laaew/219529/
https://api.jquery.com/event.namespace/
I'm using jQuery 1.9.1, and jQuery Mobile 1.3.1, and I want to create a dialog box, with only one button, informing the user that their time is up in my game. The point is that, as long as I can see dialogs in jQuery appear after certain eventType. For example, after a button is clicked the dialog can appear. But in my situation I don't have any event, it must just appear automatically when the condition in the if statement is true. And when the user clicks OK button on the widget, he/she should be transferred to the page referred below. Any idea how to achieve it?
function showTimer() {
if (timestamp.getMinutes().pad(2) == "59" && timestamp.getSeconds().pad(2) == "59") {
// dialog goes here...
$.mobile.navigate("#finalPage");
}
return false;
}
It's all possible using jQuery:
//Initialise the dialog first
var dialog = $('<p>Are you sure?</p>').dialog({
autoOpen:false,
buttons: {
"Cancel": function () {
$.mobile.navigate("#finalPage"); // Your custom code for navigation on button click
}
}
});
setTimeout(function(){ // When your condition is met, just call the dialog using this code
dialog.dialog('open');
},2000);
Here,I have used timeout just to show how you can open the dialog at any stage without triggering any click.
Demo : http://jsfiddle.net/lotusgodkk/GCu2D/175/
start a timer with setInterval, and check the condition every x milliseconds
I've got a child close button inside its parent, a notification box. When the parent is clicked, the notification box expands, with the notification's description and the child button becoming visible inside it.
The button, when clicked, should unexpand the notification and hide both itself and the description.
Because the button has a click event inside its parent click event, both were being called. I turned to event.stopPropagation() to have the parent notification stop re-expanding after I clicked. While this stopped the notification from expanding on a close button click, it presented a new problem that I don't understand.
In my test, I have two notifications set up, both unexpanded. When I click on a notification, it expands and shows the description and close button. When I click the close button, the notification unexpands and the button and description are hidden. But, I found that the description and close button were appearing for the other notification!
Code:
var $NotificationContainer = $("#NotificationContainer");
$NotificationContainer.append('<div class="Notification" title="'+title+'"></div>');
var $thisNotification = $NotificationContainer.children('.Notification[title='+title+']');
$thisNotification.append('<div class="NotificationTitle">'+title+'</div>');
$thisNotification.append('<div class="NotificationDescription">'+description+'</div>');
$(".NotificationDescription").hide();
// Button used to close an expanded notification
$thisNotification.append("<div class='NotificationCloseButton'></div>");
$('.NotificationCloseButton').hide();
// When the parent notification box is clicked
$thisNotification.click(function(event)
{
$thisNotification.animate({height:250}, 1000);
$thisNotification.find('.NotificationDescription').slideToggle('fast');
$thisNotification.find('.NotificationCloseButton').slideToggle('fast');
});
// When the child close button is clicked
$(".NotificationCloseButton").click(function(event)
{
event.stopPropagation();
$thisNotification.animate({height:50}, 1000);
$thisNotification.find('.NotificationDescription').slideToggle('fast');
$thisNotification.find('.NotificationCloseButton').slideToggle('fast');
});
I don't know how $thisNotification.find('element') is not catching the right notification.
Does it work if you change the event handling to
// When the parent notification box is clicked
$thisNotification.click(function(event)
{
var self = $(this);
self.animate({height:250}, 1000);
self.find('.NotificationDescription').slideToggle('fast');
self.find('.NotificationCloseButton').slideToggle('fast');
});
// When the child close button is clicked
$(".NotificationCloseButton").click(function(event)
{
var self = $(this);
event.stopPropagation();
self.animate({height:50}, 1000);
self.find('.NotificationDescription').slideToggle('fast');
self.find('.NotificationCloseButton').slideToggle('fast');
});
used this to identify the clicked element, instead of relying on the variable that was defined when you created the element (avoids cases in loops where the all elements reference the last value assigned to the variable..)
Additionally, since you are appending to the #NotificationContainer you can just select the last item instead of searching for identical titles..
var $thisNotification = $NotificationContainer.children().last();
removed the selector completely since you have just appended the last element..
I have a div which opens when I click a menu button, I am trying to close it if the user clicks anywhere after it is open. The issue I am having is that with my code the show div and the close div when a user clicks I guess are firing at the same time for some reason. The code for the click event is below. How can I make it so they do not fire at the same time and when I open the div that does not fire the click function. Thanks!
//if user clicks and menu is open then hide menu div
$(document).click(function() {
if($("menu").hasClass("menu_closed") == false ) {
//will hide the menu div
closeMenu();
}
}
I think what you want actually is to stop propagation in the other click handler, something like:
$("your_menu_selector").bind("click", function(e){
//your code to open the menu
e.stopPropagation();
return false;
})
You might want to consider adding the event handler to close the menu in the handler that opens the menu. Have it execute only once using the one method. In the handler that opens the menu, simply check to see if it is open already and do a no-op if it is.
$('.openButton').click( function() {
var $menu = $('#menu').
if ($menu.hasClass('menu_closed')) {
$menu.removeClass('menu_closed').addClass('menu_open');
$(document).one( function() {
$menu.removeClass('menu_open').addClass('menu_closed');
});
}
});