The PopBox plugin is useful for having a text area pop up in its own window when you click within a text area. However, I want a PopBox to appear when the user clicks a button, rather than within a text area. Is there a way to modify the PopBox functionality for this?
tl;dr: I want the PopBox to pop when a function is called rather than when clicking inside a text area
If you look at the popBox source, you'll see that when popBox is applied to an element (via $('#yourElement')).popBox(), there is a focus event bound to it:
obj.focus(function () { $(this).next(".popBox-holder").show(); var
popBoxContainer = $(this).next().next(".popBox-container");
// ...edited for brevity...
});
Attach a click event to your button and, within that, trigger the popBox by triggering the above mentioned focus event:
// Attach a click event handler to your button
$('#yourButton').click(function(){
// Trigger the "focus" event on the popBox element
$('#yourElement').triggerHandler('focus');
});
See a working demo here
Obviously, you can modify this to fit your needs - e.g. hiding the initial textarea or input if you don't want it displayed.
Related
I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)
This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/
document.querySelector(".profile_icon").addEventListener("click",function(e){
document.querySelector(".profile").classList.add("show");
});
document.addEventListener('mouseup',function(e){
var container = document.getElementById('profile');
if(!container.contains(e.target)){
document.querySelector(".profile").classList.remove("show");
}
});
When i click on profile icon the drop drop appears but if i click on icon again, it doesnt disappear as window event listener overlaps with the icon event listener. I want the menu to close both when user clicks outise the profile box as well as on the icon button.
You are always adding the class and never removing it in the icon event handler
Try using toggle() instead of add()
document.querySelector(".profile_icon").addEventListener("click",function(e){
document.querySelector(".profile").classList.toggle("show");
});
You only need to change mouseup to mousedown event. If you use the mouse up, click on the profile icon will add the show class and mouseup will be activated just when you raise your hand. But in this scenario, if you use the mousedown event, your next move will be processed good than that.
document.addEventListener('mousedown',function(e){ // Only change this line.
var container = document.getElementById('profile');
if(!container.contains(e.target)){
document.querySelector(".profile").classList.remove("show");
}
});
So I have a form where double-clicking a field brings up a custom modal window. The buttons for "Save" and "Cancel" on the modal window have "click" events that call hide() on the modal window layer. However, some of our users naturally double-click things. Double-clicking the save or cancel buttons fires the click event and hides the modal window but also fires the double-click event of the field that was under the modal window causing the modal window to display again. I know using a setTimeOut() and delaying the hide() of the modal window will resolve the issue but I prefer not to degrade the responsiveness of the UI if possible. Any suggestions?
Here is a fiddle to generally explain the problem.
https://jsfiddle.net/e51rc24j/4/
$(function() {
$(".field").on("dblclick", function(ev) {
$(".hoverlayer").show();
});
$(".hoverlayer").on("click", function(ev) {
var thisLayer = this;
$(thisLayer).hide();
/* PUTTING IN DELAY ON HIDE SOLVES PROBLEM BUT I PREFER TO NOT DELAY UI RESPONSIVENESS IF POSSIBLE
setTimeout(function(){
$(thisLayer).hide();
}, 300);*/
});
});
At first I thought the problem was propagation, so I added a stopPropagation to your event. But then I found out that it's not the double click that's propagating. The problem is something completely different, namely that the SECOND click (of the double click to close the black overlay) LANDS on the input field again, which triggers the double click event on the input box again.
So all you have to do, is move the SAVE and CANCEL buttons so they are not directly on top of the input field.
I have made a little change to your jsfiddle to illustrate:
https://jsfiddle.net/e51rc24j/6/
If you double click in the "PROBLEM", the modal black div will open again, because your second click lands INSIDE the <input> text field.
However, if you double click anywhere else in the black div ("Not a problem"), it will not open.
I'm trying to implement the following functionality and am having some trouble. What I want is when a user clicks a certain image, a popup div will appear containing some information about that image. Then if the user were to click anywhere on the page outside of that popup div, it would simply hide and then remove the popup.
What I am trying to do is register an eventListener after the popUp div is added to the page. Tried with both jquery and without and am after the same issue. (I included both below but only one is active in the code at a time.)
createProfilePopUpEventListener: function(){
$('body').on('click', function(){
$('.profile_pop_up').fadeOut('fast').remove();
});
},
createProfilePopUpEventListener: function(){
var el = document.getElementsByTagName('body')[0];
el.addEventListener("click", $('.profile_pop_up').fadeOut('fast').remove();
},
showPopUp: function(e){
//creates popUp and adds it to the DOM
this.createProfilePopUpEventListener();
}
What seems to be happening is that the event is being triggered right away on the initial click to show the popup and thus it is never displayed. How can I create an eventListener that only starts listening for those clicks at a certain time?
I guess your problem is event propagation. Your image that is used as the trigger to open the popup bubbles your event up the whole DOM, eventually to the body. Thus the fadeout/remove event is triggered at the same time as your open event.
You will need to stop the propagation of that in such a fashion (using :
$('#popup_trigger').on('click', function(event){
event.stopPropagation();
$('.profile_pop_up').fadeIn();
});
In the autocomplete result list. How do I capture the click event? Currently results are links. When clicked they open a new window with the embedded url but when this happens the autocomplete doesn't lose focus and the result box gets stuck open. It stays open even when the user comes back and clicks anywhere on the page. the only way to make it lose focus is to click inside the input box and then click back out.
It looks like opening the new window loses focus from the input box but does not fire off a blur() event.
I was thinking if I could capture the click event I could just manually trigger a .blur() but I was unsuccessful at my attempts using the class for the list elements $("li") or their css names $(".ui-menu"). I also tried in the autocomplete Select event but that didn't do anything.
This looks like it might be a solution: http://jeremydorn.blogspot.com/2010/04/fixing-jquery-ui-autocomplete.html
But I was hoping for something more elegant.
Thanks
Why don't you give the links a click handler that closes the autocomplete?
For example:
$("a.autocompleteLink").click(function() {
$("input.autocomplete").autocomplete("close");
});