IE focus when div is scrolled - javascript

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.

Related

Interaction between unselectable and undraggable in Firefox

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.

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.

When debugging HTML is there a way to listen for div width change using JavaScript or jQuery?

When debugging HTML is there a way to listen for div width change using JavaScript or jQuery?
I have a div changing size due to some CSS and can't figure out where, even stepping through.
I was wondering if there was a way to hook an event up to a div to see what is causing it to change?
Even if possible, I'm not sure how how would pass stack information for what caused the size change in the first place, so this may not even be possible.
I use Chrome, it seems to give the most details.
Download Chrome
Press f12
goto first tab [Elements]
click on the magnifying glass and go to your div
right click on the highlighted html and select "Break on Subtree modifications"
This is bad way, but I'm not sure such event exists.
$(function(){
var last = $("#your_div").width();
setInterval(function(){
if (last != $("#your_div").width()){
alert('div width changed');
}
}, 100);
});
This guy explains how attach to the DOMAttrModified event to detect CSS changes.
Event detect when css property changed using Jquery
It's only supported in FF and Opera, but if its just for debugging it will do the trick.
http://www.quirksmode.org/dom/events/
Firebug for FireFox allows you to attach and break on CSS and attribute changes is this what you're looking for?

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 give a page focus again so that the space bar pages down in FF?

I have an ajax script with a "get more posts" button that inserts a couple screens/viewports worth of information. In doing this, the document looses focus at some point and thus the default behavior of the space bar (page down) doesn't work in firefox.
How can I focus the document again to regain the default behavior? What components control this behavior?
It works in Chrome and IE (surprisingly), but not FF.
I tried in a callback function: document.body.focus() and document.getElementById('someClickableElement').click(), but no luck.
If I actually click on the page after the content is displayed, then I can scroll again with the space bar.
Since this is a frequently used feature, it's annoying to click "load more", click again, then space to page down.
Thoughts? Suggestions?
EDIT:
Ok, so i was using a YUI button (just a nice looking html "button" element with some css styling) for the interface. i replaced it with a link, and i no longer have this problem.
Interesting that it works as expected in Chrome & IE, and I'm not even using YUI listeners for the event (just the nice-looking buttons). It's handled by jquery's live method (b/c of the event delegation).
Also interesting that I'm not able to programmatically do what I can do physically (ie. "click").
Even if there is some YUI bug, it seems like firefox should be able to regain focus via some javascript action.
VERY WEIRD. Still any input appreciated (more javascript suggestions to try?). I'm somewhat committed to my current interface.
It looks like you need to blur YUI button element. Or do something with tab order between whole document and the YUI button.
So - not to focus() document, but to blur() YUI button.
Alternatively, you may try to apply 'keypress' event simulating 'TAB' key.
I haven't tried this but how about doing a blur() on the body or the window.
window.blur();

Categories