Function Sortables (Mootools library) - javascript

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.

Related

How to trigger mouseover programmatically? (orce hover state not working)

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.

How can I make 'clickable' elements have selectable text on iOS touch devices?

I have an element (a div) that has a number of javascript touch and mouse handlers on it. Apparently, this means the element is 'clickable', and it seems you are not able to select text on clickable elements on the iPad.
Is there any way around this? The event handlers are necessary for this to work right, but I'd also like users to be able to select and copy the text.
One solution is to make the div contenteditable=true. The event handlers still work, and I'm able to long-press to bring up the selector. But this would create its own set of problems and I'd like to avoid contenteditable if I can.
After some tinkering, I've found a workaround solution: Put the mouse and click handlers on the window instead of the element. Then, check the event target in the handler to see if the element of interest is what was clicked.
Not ideal, but it seems to work. I'm able to long-press and create a selection on an iPad.

What's the most efficient way to handle displaying a dialog/modal in JavaScript?

[UPDATE:] here is a link to test (if you don't want to clone the repo) http://jsfiddle.net/integralist/g9EPu/
I've got a lot of dialogs/modals that need to be displayed when mousing over certain links in a web app.
Table of content (tl;dr)
How I used to do handle it
How I've tried it recently
Which is better?
What about mouseenter/leave?
How I used to do handle it
The way I usually do this is to use event delegation.
So I add one event handler to a container and then check for the relevant element to become the target and then display the relevant dialog.
I normally have one dialog which I change the content for and re-position (saves having lots of different HTML mark-up).
If the mouseover event (for the link) gets triggered then I display the dialog.
If the mouseout event (for the link) gets triggered then I hide the dialog.
If I mouseout of the link which triggered the event handler then I normally need to set a timer to delay hiding the dialog (just long enough) so I can then mouseover the dialog which itself clears the timer set by the mouseout of the link.
I then have a mouseout event bound to the dialog so I can then hide the dialog when the user rolls their mouse off the dialog.
There are two problems I've encountered at this stage, the first happens practically all the time and the other is an edge case I noticed recently which prompted me to try and find a better solution...
The dialog has 'x' number of child elements and rolling the mouse over a child element causes the mouseout event for the dialog to be triggered hence I need to put in checks to see if the element has a parent which is the dialog itself and if so then don't try to hide the dialog.
When using this technique on a <table> element I've found that when the mouse moves too quickly the mouseout/over events don't get triggered.
How I've tried it recently
For example code see: https://github.com/Integralist/Mouse-Over-Out-Script (you should be able to just clone the repo and run the index.html file locally to see what's happening)
But to give a brief explanation...
We bind a mousemove event to the document.documentElement element (but you could do it on the document.body if you wanted) and then we store the x/y co-ordinates of the mouse position. We provide public API access to a 'check' method which lets us know if the position of the mouse is over the element we've provided to 'check' (we measure the elements dimensions and add those onto its x/y co-ordinates).
In the above repo we have a calendar which shows a dialog whenever a particular date has an event on. We're storing all <td>'s that have an event and we set-up a timer for each of those <td>'s (this is because we need to keep calling the 'check' method to see if that <td> has the mouse over it).
So potentially there could be 31+ (because we're showing the first few days of the following month) opportunities for a dialog to be shown and so 31+ timers set!
This example repo works now, where as the first version where I was using event delegation wasn't.
Which is better?
I'm worried about performance on the mousemove version because it can potentially use a lot of timers (depending on how many dialogs you need in a single page). In my calendar example above there is up to 31+ timers that could be running!
What about mouseenter/leave?
I know these events exist and if all browsers supported it then I could safely use the first version and not have to check for child elements causing erroneous mouseout/over events to be triggered. But regardless I don't believe this would have fixed the example with the event calendar where moving the mouse too quickly was meaning the mouseout/over events for the <td>'s weren't being triggered by the browser. Either way, I know you can polyfill this as jQuery provides mouseenter/leave events but looking through their code I couldn't get that to work for my script (as I don't use jQuery or any other general purpose library - ps, and I don't wish to, so please do not suggest that as an option).
Many thanks for any help/advice or guidance someone can provide me.
The dialog has 'x' number of child elements and rolling the mouse over a child element causes the mouseout event for the dialog to be triggered hence I need to put in checks to see if the element has a parent which is the dialog itself and if so then dont try to hide the dialog.
To solve this: in your event code, simply use the function "isAncestor" (see below)
/*
* element = the "target" in your mouseout event handler
* other = the node you really want to check if you're over
*/
isAncestor: function(element, other)
{
while ( element && element != other ) element = element.parentNode;
return ( element != null && element != undefined );
}
So in your mouseout code for your element (let's call it "itemElement"), you'd check it like:
//We're really mousing out, close dialog
if ( !isAncestor( mouseOutEvent.target, itemElement ) )
{
...do something ...
}

CSS/HTML: mouse down on cancel

I have a link being themed using CSS. I have up, over and down CSS properties applied which all work.
Problem is, when you hold down the mouse over a button, drag away then cancel by letting go, the down state is still being applied until you click again on some white-space.
You can see what I mean by doing the above on buttons 1, 2 and 4 here: http://jsfiddle.net/2vjbz/
How do you 'refresh' by not having to click again?
According to your CSS, I think this behavior is correct, but the problem is that mouse up event is not getting triggered and link element remains in active state. You can fix it using jQuery by invoking mouse up event for link element.
One method is to invoke it when mouse moves in pager div
$('#pager').bind("mousemove", function(event) {
$('#pager a').mouseup();
});
You might need to add conditions to make it perfect
EDIT:
You can experiment with it. This is one more method
http://jsfiddle.net/diode/2vjbz/18/
Here it cancels the drag event. Both of these worked for me.

Focus and blur events for HTMLDivElement?

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.

Categories