On this page: https://turbo-theme-seoul.myshopify.com/ the drop-down menus appear when mouseover the corresponding menu item. In order to inspect the HTML elements of the drop-down menus, I need to force them to display. Normally this can be done by forcing the state of the parent menu item to be :hover in developer tools, but in this case it doesn't work. I guess the drop-down is triggered by javascript instead of CSS. How can I make this drop-down appear programmatically without having to move my mouse over it? I tried
$($0).hover()
and
$0.dispatchEvent('mouseover')
on the parent menu item, they are both not working. It seems to me that 'mouseover' event can't be triggered programmatically. How do I do this then? PS: I know I can just find the drop-down menu in HTML and remove "display:none" from them, I just want to know if there is any way to trigger the mouseover event and let the dropdown menu appear programmatically for learning purpose.
As the jquery official document says:
The .hover() method, when passed a single function, will execute that handler for both mouseenter and mouseleave events. This allows the user to use jQuery's various toggle methods within the handler or to respond differently within the handler depending on the event.type.
so the hover event is consist of mouseenter and mouseleave event, so you can't trigger the hover event programmatically since you can't trigger mouseenter and mouseleave at the same time.. So you should use .mouseenter() to show your drop-down, and use .mouseleave() to hide it.
Related
I know how to us the change event for jquery ui Accordion.
Its change event gets fired in my case when clicking any of the accordion( as that is the defalut behaviour of accordion) and I am able to get all the data in this event like newContent, newHeader, etc.
But I want to manually fire the change event for Accordion and I don't know how to do it.
Also can I fire the change event while the accordion is loaded.
I have an accordion on my page and I want to fire "change event" for each of them as soon as the accordion is loaded as I have my ajax code written in "change event handler"
The following code should do the work you wanted.
$("#accordion").accordion('activate', itemIndex);
I have some styleBox elements that aren't triggering when I tab through the items. Does the change() also get triggered on focus?
From the jQuery documentation for .change():
For select boxes, checkboxes, and radio buttons, the event is fired
immediately when the user makes a selection with the mouse, but for
the other element types the event is deferred until the element loses
focus.
See here for details.
May be better to use .focus() if you can.
I have a problem while using the Sortables() function (Mootools library).
this.sort=new Sortables(this.box,{
onStart: function(el){el.setStyles({'background':'#f0f0f0','opacity':1});},
onComplete: function(el){el.setStyle('background','none');this.setEditor();}.bind(this)
});
In fact, I have a DIV, which contains other DIV blocks which should be made sortable. And the 2nd level DIVs have SELECT tags inside.
The problem is these dropdown list does not drop when clicked. The click just falls to the parent DIV element and onStart functions starts. How can this problem be solved?
The prototype: http://jsfiddle.net/uCM2R/3/
mootools 1.12? heh.
right. so basically you want a click on the dropdown not to trigger the sort? this will be tricky as it uses a delegated event on the parent and it bubbles. also, scripting click events on a select is not reliable either so you cant stop the click event from propagating reliably - at least in 1.12. 1.3.2 is fine.
consider using the handles: "div.foo" option on the select whereby thats a child div that allows them to move things as opposed to the whole div.
http://jsfiddle.net/dimitar/uCM2R/4/
obviously in the div.foo handle you can put some icons that indicate moving. only they will act as the drag point for sorting, thus enabling you to work with selects w/o interference.
here it is in 1.3.2 as per your original spec/markup: http://jsfiddle.net/dimitar/uCM2R/6/
added a click handler for selects that stops the bubbling.
What is the difference between jQuery's mouseout() and mouseleave()?
The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.
Source: http://api.jquery.com/mouseleave/
There can be times when mouseout is a better choice than mouseleave.
For example, let's say you've created a tooltip that you want displayed next to an element on mouseenter. You use setTimeout to prevent the tooltip from popping up instantly. You clear the timeout on mouseleave using clearTimeout so if the mouse leaves the tooltip won't be displayed. This will work 99% of the time.
But now let's say the element you have a tooltip attached to is a button with a click event, and let's also assume this button prompts the user with either a confirm or alert box. The user clicks the button and the alert fires. The user pressed it fast enough that your tooltip didn't have a chance to pop up (so far so good).
The user presses the alert box OK button, and the mouse leaves the element. But since the browser page is now in a locked state, no javascript will fire until the OK button has been pressed, meaning your mouseleave event WILL NOT FIRE. After the user presses OK the tooltip will popup (which is not what you wanted).
Using mouseout in this case would be the appropriate solution because it will fire.
jQuery API doc:
mouseout
This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.
So mouseleave is a custom event, which was designed because of the above reason.
http://api.jquery.com/mouseleave/
Event Mouseout will trigger when mouse leaves the selected element and also when mouse leaves it's child elements also.
Event Mouseleave element will trigger when pointer will leave the selected element only.
Reference: W3School
I encountered a similar problem using plan Javascript instead of jquery, but they're some how related and I'll leave my two cents in case someone else is on the search nowadays.
I was trying to use the mouseout event on a navigation menu. The parent div had a submenu composed of a list of uls elements. When I tried to navigate to the div children elements the mouseout event was fired. This was not my desired output.
From the docs
mouseout is also delivered to an element if the cursor enters a child
element, because the child element obscures the visible area of the
element.
And that was the issue.
The mouseleave event did not have this issue. Just using it made things work for me.
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
I implemented a custom drop down with HTML, CSS and JavaScript. It works well now, but I am not happy with the way I am doing "blurring" right now. When you open the list, and then click somewhere else, it should collapse. What I did was that I added an event listener (mousedown) to the window after expanding the list, and removing the listener after collapsing. The event basically checks whether the DOM event happened on the right element using target and if not, then blur the drop down control.
I know about focus and blur. However, they only seem to work on form elements, which I find quite understandable. They also support other scenarios like when "tabbing" away.
Anyway, I am asking you if there is a better way of doing what I am doing right now. What I do just feels stupid.
Maybe you could have a dummy input and focus that when the control is active. Then watch the blur and close the list. It would not be able to be display:none but maybe opacity:0, or just out-of-view.
What I do is use mouseout to close my custom lists. I create a bounding box around my drop down. That box has the onmouseout event attached to it that closes the drop down when the mouse moves outside of it. This way you can have a little padding outside your list that would give your users a little better functionality then just mouseout on your basic list.
If you want to do it using click events, I would have a global function, like it seems you have setup, and call that function on any click events on the page.