Creating a menu with jQueryUI, I noticed that if you select a menuitem, it fires the appropriate event properly. However, if you then select another menuitem right away (without clicking on anything outside the menu first), it does not fire the menuselect event and simply treats the a tag as a regular link (this pattern repeats: 1 okay, 1 ignored, 1 okay, 1 ignored, etc...)
Here is a jsfiddle that demonstrates the issue: http://jsfiddle.net/J9eyv/4/
(1) Broken: Click an option, then click another one.
(2) Works: Click an option, click outside the menu, then click another option.
The code is modeled after the jQueryUI demo here: http://api.jqueryui.com/menu/#event-select
Am I missing something?
EDIT:
If you call $(selector).menu("focus") or, indeed, $(selector).menu("idontunderstand"), from the event callback, this 'fixes' the issue. That doesn't sound right.
This was a bug in jQueryUI. It's being addressed.
I'm not sure about "menuselect" you're using but it works fine if you do this:
$("#menu").menu();
$("#menu a").click(function() {
alert($(this).attr("href"));
return false;
});
Related
I'm attempting to create a slide-in menu for a mobile website which has nested submenus that also slide in over the primary parent menu. This is done by editing the right style attribute to move each menu off & on screen.
Everything is working properly except that once I open a submenu, the function that's supposed to close the submenu is changing the CSS. The function that contains this instruction itself is executing (as evidenced by a console.log), but the line that edits the CSS is not working.
Here is the function that is having trouble:
$(document).ready(function(){
$('.close-sub-menu').click(function(){
$(this).parent().css("right", "-425px");
console.log("this line is logging correctly");
});
});
Interestingly enough, if I attempt to edit the CSS of background-color or left, it will work. But right will not work.
I've tried using addClass and removeClass instead, referencing the parent's class name directly instead of using this, and inline function calls, but none of it has seemed to work. I think it is either a scoping issue, or perhaps some interference with the parent menu. Either way, I'm not able to figure it out.
Here is a simple example of my problem in a JSFiddle: https://jsfiddle.net/wk4wwfer/2/
JQuery is very acceptable.
Your $('.slide-menu-sub-parent').click function is still firing when you click the close button.
Update your close function to be:
$('.close-sub-menu').click(function(e){
e.stopPropagation(); //Prevents the click event from bubbling up and triggering the other click events registered
$(this).parent().css("right", -425);
}
Fiddle solution.
I have the following situation:
One selectbox and a tooltip that appears when the user clicks on the box to select an option. To show the tooltip can be easily done with css (select:focus ~ .tooltip) or jquery using the focus() event.
When the user picks something the select box closes and the tooltip dissapears. This can be done with the change() event.
But there is one issue. If the user opens the selectbox and clicks somewhere else on the page, the list closes and in Firefox the blur event is not triggered right away, so the tooltip remains visible. If the user makes the second click outside of the select the blur event triggers and the tooltip dissapears.
Chrome and IE is ok, Firefox is not.
Do somebody know a workaround in Firefox?
thanks,
Istvan
After playing around with this for about half an hour, I'm afraid to say my input would be: no. And for the following reasons:
Firefox doesn't fire the blur event until the second click. This is evident from looking at the dropdown on the select, which remains blue.
Therefore a pure CSS solution would definitely never work
A JavaScript solution would also be next to impossible too, as the first click seems to go nowhere
I've checked this by trying to note body and document clicks, you'll see that neither fire the first time. In fact, neither does the select, so I have on which level that click registers
See my JSFiddle for my workings. Sorry! I guess it's just a FF issue.
$(document).click(function() {
console.log("document");
});
$("body").click(function() {
console.log("body");
});
$("select").click(function(e) {
e.stopPropagation();
console.log("select");
});
Edit: Sorry, posted an old JSFiddle.
I wrote an alternative to the jQuery Accordion, as that didn't offer multiple open section support (any idea why they opted to not include support for that? What's the history there?). I did some research on StackOverflow, as well on Google to see what other options others came up. I needed something that could be used on the fly on multiple elements.
After seeing several solutions and experimenting with them, in the end, I wrote my own version (based on Kevin's solution from http://forum.jquery.com/topic/accordion-multiple-sections-open-at-once , but heavily modified).
jsFiddle can be found here: http://jsfiddle.net/3jacu/1/
Inline Code:
$(document).ready(function(){
$.fn.togglepanels = function(){
return this.each(function(){
h4handler = $(this).find("h4");
$(h4handler).prepend('<div class="accordionarrow">▼</div>');
$(h4handler).click(function() {
$(h4handler).toggle(
function() {
barclicked = $(this);
$(barclicked).find(".accordionarrow").html('►');
$(barclicked).next().slideUp('slow');
window.console && console.log('Closed.');
return false;
},
function() {
barclicked = $(this);
$(barclicked).find(".accordionarrow").html('▼');
$(barclicked).next().slideDown('slow');
window.console && console.log('Open.');
return false;
}
);
});
});
};
$("#grouplist").togglepanels(); }
Oddly, the accordion arrow at the right side stopped working once I pasted it in jsFiddle, while it works in my local copy.
In any case, the issue is that toggling isn't working as expected, and when it does, it fires duplicate toggle events which result in it closing, opening, then ultimately closing the section and it won't open from that point on (it toggles open then closes back). That's assuming it works! At first, it won't work as it doesn't respond. I think there's a logic error somewhere I'm missing.
From what I wrote/see in the code, it searches the given handle for the corresponding tag (in this case, h4), pops the handle into a variable. It then adds the arrow to the h4 tag while applying the accordionarrow class (which floats it to the right). It then adds a click event to it, which will toggle (using jQuery's toggle function) between two functions when h4 is clicked.
I suspect the problem here is that I may be mistakenly assuming jQuery's toggle function will work fine for toggling between two functions, that I'll have to implement my own toggle code. Correct me if I'm wrong though!
I'm trying to write the code so it'll be as efficient as possible, so feedback on that also would be appreciated.
Thanks in advance for your time, assistance, and consideration!
You have the toggle binding (which is deprecated by the way) inside of the click binding, so a new event handler is getting attached every time you click the header.
As a random aside you should also fire events within the plugin (where you have the console lines would make sense) so that external code can react to state changes.
I believe your issue is the $(h4handler).click(function() { you have wrapped around the toggle listener. Essentially what this was doing was making so every click of the tab was adding the toggle listener, which was then also firing an event. Removing the click listener will have the behaviour you expect.
You forgot to paste the trailing characters ); to close the function call to jQuery function ready. Fixed: http://jsfiddle.net/LeZuse/3jacu/2/
UPDATE: I've just realised I did not really answer your question.
You are duplicating the .toggle functionality with binding another .click handler.
The doc about .toggle says:
Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.
Which means the click event is already built in.
NOTE: You should use local variables instead of global, so your plugin won't pollute the window object. Use the var keyword for this:
var h4handler = $(this).find("h4");
I'm trying to create an accordion-like interface but multiple sections can be open at once. Also, in addition to expanding a section of content for viewing, I'm swapping the image for the "header" that was clicked. Everything is working but the first click on each "header" does nothing. Each subsequent click works as expected.
Here's a link to a fiddle that I set up:
http://jsfiddle.net/kJ8t6/5/
Any help would be very much appreciated. I'm been trying to figure this out since yesterday and have to move onto other things.
Thanks in advance.
You don't need to bind extra click event, since toggle is already a mouse click event. However, you should consider that toggle event is nowadays deprecated, so try to use it with caution.
$("#imgDeliver").toggle(function() {
$(this).attr("src", "...");
$('#conDeliver').slideToggle();
}, function() {
$(this).attr("src", "...");
$('#conDeliver').slideToggle();
});
DEMO: http://jsfiddle.net/kJ8t6/6/
I know that this is supposed to work, it works fine in 1.7.2
//click anywhere to close dropdown
$("html").live("click", function () {
closeDropdown();
});
//on click of ellipsis, open dropdown
$("span.PivotEllipsis").click(function (e) {
e.stopPropagation();
openDropdown();
});
It is the classic click outside span.PivotEllipsis to hide. However, the problem is that the second function is not working. The first is working fine, when you click outside, it hides. However, when you click on the span.Pivot Ellipsis it doesn't pop up, instead I think, hard to tell though, that it runs openDropdown() and then immediately after closeDropdown()....
Anyone know what it wrong?
According to jQuery Documentation: "it is not possible to stop propagation of live events." You don't really need to use .live() as the html element exists at document.ready and isn't dynamically loaded
What you thought is probably correct - you need to disable the first function while the dropdown menu is not open.