Interaction between unselectable and undraggable in Firefox - javascript

I'm implementing tab close functionality in Bootstrap with an <a> element which contains the tab title text, as well as a close icon (as a background image in a span).
To make this work well, the icon must be undraggable (if you click the mouse on the icon, and then move away, you want this to mean 'I didn't mean to click', rather than 'I want to drag the icon').
This also means that the text around the icon must be unselectable, since moving the mouse away from a clicked icon will just select the surrounding text, which isn't good.
This fiddle is my current solution, which works for Webkit, Opera, and IE11. However, it doesn't work for Firefox.
The code uses Javascript to set the <a> element to undraggable, and CSS (and unselectable) to set the text unselectable.
The problem is that, for Firefox, setting the text unselectable actually turns on dragging again, so the tab and the icon are draggable in Firefox. In the other browsers, you can click and drag on the icon (or the tab title) and nothing happens.
Any ideas how to fix this? Perhaps there's a better way to handle 'unselectable' with JS? Thanks.

Solution fiddle here. The problem only happens when using the draggable property to disable dragging; the fiddle sets an event listener on dragstart instead. This works on FF, Chrome, Safari, Opera, and IE11. This also has the advantage that you don't need any CSS to disable selection. Opera still needs unselectable="on", though.

Related

IE focus when div is scrolled

My goal is to simulate the behavior of jquery "datepicker" but instead of showing a calendar, I want to show a selectable table.
I have a working fiddle in chrome and FF but not in IE8 :( (I don't know if you guys can run fiddles with IE but if you can't, please make a local copy and open with IE, thanks)
Problems:
in IE, when I scroll, the div is hidden so I fixed it with
$("#test_table_container").scroll(function() {
if (myTimeOut) {
clearTimeout(myTimeOut);
}
});
but when I click on the scrollbar (instead of dragging it), the div is hidden. This is also the same when click the arrow buttons. This does not happen though if I drag the scroll bar FIRST, THEN click on the scroll bar.
the timout duration (90ms) is unfortunately very intermittent, sometimes I am able to select values in tr and then the div is hidden, but sometimes the div is hidden FIRST, before the click event of tr is triggered that's why the value is not reflected in the input.
There should be no need for a setTimeout hack for this. You may be better off, by binding a click on the body and then use delegation.
Please see the updated fiddle: http://jsfiddle.net/dz9VC/1/
This is just a crude code, but you will get the idea and can then optimize it as per your need. The updated fiddle should work on IE as well. The reason it wasn't working in IE8 specifically, maybe due to the box-model differences.

How to force Jquery to trigger the mouseenter event in Firefox the same way as in IE

i'm using the autocomplete plugin from JQuery. When typing, the menu with the suggestions will be shown. If the mouse cursor hovers over the menu, in firefox the menuitem will be selected WITHOUT moving the mouse. In IE and Chrome you have to move the mouse first.
I found out, that the reason is a different behaviour of the mouseenter event in Firefox and other browsers. In Firefox Jquery triggers the event, as soon an element will be shown. In other browsers you have to move the cursor first.
To demonstrate this behaviour i created a fiddle. Click on run and move the mouse into the upper part of the result window. After 5 seconds a div will be shown. In Firefox there will be an alert triggered by the mouseenter event. In other Browsers (IE, Chrome) you have to move the mouse first.
http://jsfiddle.net/sbnqq/5/
I'm aware of possible workarounds in own code ( jQuery how to prevent mouseenter triggering when page loads with cursor hovering element ), but the problems lies in the Jquery.ui.autocomplete plugin.
Are there any ideas for a global workaround to tell Jquery to trigger the mouseenter event after mouseover?
regards
Andreas

Problem with IE in grab/drag scenario

I have a project where users can interact with a carousel like slide show, and drag between slides instead of using an arrow/number navigation. JS is based on the following plug in:
http://nooshu.com/explore/jquery-iphone-animation/
The issue is, in IE, if a user grabs inside the carousel and the mouse leaves the container element, the UI freaks out. If you play around with it, you'll see what I mean.
Is there a way to tell IE to handle the drag/click event to mimic firefox and chrome? I'm sure this is a common problem with IE and UI design.
Help!
EDIT: This also happens in Chrome. Firefox is the only browser that handles this in an intuitive way.
When, in IE, the mouse leaves the square, it's not releasing the mousedown event. So even when you let the button go, the plugin still thinks that the mouse is down.
Is it possible then that you wrap the plugin in say a div and on the div have a mouseleave event and force the plugin to execute mouseup?
I think you should be able to use the jQuery keyword "trigger" to do it.

Disabling middle click scrolling with javascript

Background: I am creating a table reminiscent of whenisgood.net, in that it has click-n-drag toggling for table elements. I want to call different types of toggling code when the left, middle, and right mouse buttons activate a mousedown event.
By using JQuery, I'm off to a good start.
$(".togglable").bind("contextmenu", function() {return false;});
$(".togglable").bind("mousedown", function(e){
e.preventDefault();
toggle(this, e);
});
In the toggle() function I can use e.which to determine what button was clicked.
The punchline: I used e.preventDefault() hoping that it would stop the middle click default behavior of scrolling. It didn't. What can I do to stop the scroll action from activating?
See also "Triggering onclick event using middle click"
Middle-click can be disabled with Javascript, but only in IE, WebKit, and Konquerer. Firefox requires a config file edit. It's 2017 and firefox 50 supports this.
This is an old question...but if I'm understanding it properly, you want to disable scrolling via the middle mouse button click.
Nowadays, you can do this with a single line of vanilla JS:
document.body.onmousedown = function(e) { if (e.button === 1) return false; }
Currently, my solution is this: (more jquery!)
$(".togglable").wrap(
"<a href='javascript:void(0);'
onclick='return false;'></a>"
);
By wrapping it in a link (via jquery wrap), browsers think it's a link and don't scroll on middle click, even if you drag your mouse around. With this setup, and my situation, there are a couple (minor) gotchas.
Firefox will open a new tab when you middle click, but only if you don't drag. Opera will open a new tab when you middle click, drag or not. That's why I used href='javascript:void(0);' instead of just href='#'--so that the client's browser wouldn't load a whole page, just a blank page with a strange url.
But this solution works like a charm on Chrome and Safari. It works well with IE8, except that now when I left-click-n-drag, it changes the pointer to a "can't do that" symbol, since it thinks I want to drag the link somewhere. Untested on older versions of IE.
It is a bit old thread already, but I've tried hard to circumvent this in Firefox (I'm still using 3.6) and I'll share my findings, maybe someone will find it helpful.
Check that if you create an empty HTML file (or a small document with couple of paragraphs) and load it in Firefox, middle click scrollbar does not appear. This is because <body>'s width and height are smaller than window size. If you put a lot of <br>'s, this is not the case and scrollbar appears on middle click.
Google managed to prevent middle click scroller to appear in Google Maps in Firefox by making sure (through JS) that <body> size is always less than window size, plus additionally putting
<body style="overflow:hidden;">.
This is hardly achievable in general case, but sometimes might be useful.

How to prevent the 'Save (image) as' dialog on Ctrl+click in Opera

I have to create an image gallery where user can select some images and then process them. The selection should be done via Ctrl+LeftClick of the mouse. It works well in FF and IE8, but when I Ctrl+click in Opera, new dialog "Save as" appears which causes saving the clicked image.
How do I prevent opening the dialog in Opera? (it's probably system setting)
I haven't still found any solution. The question at Opera remains unanswered since June,2008 :(
Is it even possible? Ctrl+Click is standard way in OS, that's probably the problem - adapting desktop behaviour to web.
In Opera, it is possible to set this behavior in Tools->Preferences->Content->JavaScript Options->Allow script to detect context menu events. This is unchecked by default, which means that most users will see the browser's context menu.
This was added to prevent "context menu hijacking"; unfortunately, this limits all browser apps to the left mouse button. You could have the user rightclick->Edit site preferences->Scripting->Allow script to detect context menu events; this should allow your site to use this functionality.
I don't believe this is possible - I'd advise a different key mapping for Opera (or indeed all browsers)
For example, Opera has an option where the right click context menu cannot be disabled by javascript - as a protection for Opera users.
Can you make it just a click? that would toggle each picture. e.g. first click selects, then if you click it again, it deselects.
Something like this... where you can visually see what has been picked.
If you're attempting to prevent people from saving image it is pointless. All the user needs to do to get around context-menu-hijacking is disable JavaScript temporarily on that page, or press PRINT SCREEN.
This should work:
<img src="myImage.png" onclick="event.preventDefault();">

Categories