IE is randomly minimizing when a link is clicked - javascript

I have the bizarre problem. When I click on a link in IE7 the window minimizes. It seems to only be a subset of the links on the page. It also doesn't consistently happen with the same link and differs from computer to computer.
example link text:
<a hidefocus="on" href="#" tabindex="1"><span unselectable="on" id="extdd-102">Canadian Legislation</span></a>
Anyone seen this before or have any idea what might be causing it?

Finally figured it out. It was actually a custom JavaScript click handler that caused the problem.
My click handler was calling activeElement.blur(); on the current active element (so that events tied to blur fired when the elements were destroyed).
Problem is in IE, if you call blur on anything that isn't an INPUT, it minimizes the window.

I had the same issue on Internet Explorer 10.
Internet Explorer 10 tested behaviour:
This issue only happen when you invoke the blur() function on document.body element.
Issue can be reproduced simply executing document.body.blur() in your browser console.
Common scenario in which this issue happens:
document.activeElement.blur() function invocation is the most common scenario in which this issue occurs because after first invocation of document.activeElement.blur() the body element will become the activeElement and subsequent call to document.activeElement.blur() will invoke blur on body element.
Solution:
avoid document.body.blur() function invocation, if you have jquery you can introduce this simple logic
$(yourObj).is('body')
to check if your object is the body element, in order to avoid blur() function invocation on it

IE is buggy, so you can troubleshoot by removing "tabindex". If that doesn't work try removing "unelectable" then "hideonfocus". "Hideonfocus" sounds weird. Try removing that first. Do you have any third party programs or plugins that interact with IE? Does it work on a different computer?

This happened when I used the blur workaround to get the placeholder attribute to work on IE8.
In the workaround I should call blur() which caused the browser to blur (minimize to tray).
The solution is to use:
$.each($('[placeholder]'), function(i,item){ item.blur();});
which is only being specific what to call blur on.
The complete placeholder workaround is:
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() === '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$(window).on('load', function () {
if ( $('[placeholder]').length ){
$.each($('[placeholder]'), function(i, item){item.blur();});
}
});

Related

Keyup to Manipulate div

Haven't post in quite a while.
Anyway I was searching about my subject and I got this.
$(window).keyup(function(e) {
if (e.which === 8) {
$('.ilol'). fadeOut();
}
});
It's working perfectly fine. But when I change the window to a class or id it doesn't respond anymore.
There's not a lot of detail about the type of element you are trying to attach this event handler to, but the jQuery documentation explains that form elements (e.g. input) are a safe bet because they are able to be focused across most browsers:
The keyup event is sent to an element when the user releases a key on
the keyboard. It can be attached to any element, but the event is only
sent to the element that has the focus. Focusable elements can vary
between browsers, but form elements can always get focus so are
reasonable candidates for this event type.
http://api.jquery.com/keyup/
It may also be a selector issue. Make sure that your selector is working properly by pasting it in your browser's JavaScript console and see if it returns any elements.
Make sure you are binding event in ready function.
$(document).ready(function(){
$('.someClassName').keypress(function(e) {
if (e.keyCode === 8) {
$('.ilol'). fadeOut();
}
});
});
After some testing this is what worked best for me. The 40 key in this example is the down arrow key.
$(document).keydown(function(e)
{
if(e.keyCode == 40){
$('.ilol').fadeOut('fast');
}
});

IE raises blur on focus in textbox

First of all, this is my first question here, sorry if it is not asked properly.
I have a bug in a web app we developed in the office. The app is nearly done but In IE < 9 it happens that a text-box which has focus and blur events attached with jQuery raises the blur event as soon as you click on it.
You can see this in this picture (just clicked in the text-box):
https://www.dropbox.com/s/yn10xfrfxsr38bq/screen.PNG
$('#divVolee [type="text"]')
has no focusin or focus events attached.
The URL to the application:
http://86.126.255.70:2213/Anoxa/
If you want you can enter using the "Demarrer" button.
I do not ask anybody to write code for me or anything like that, I just don't know after days of searching in the code and on the net what could cause that.
I tried focusin, focus, focusout, blur, attaching directly or using delegates, the same thing. As soon as I click in the input field it raises the blur / focusout event.
Thank you for your help.
I found it. I started to comment everything out until I found the culprit:
function resizeAccordion() {
var active = $('#divAccordion').accordion('option', 'active');
$('#divAccordion').accordion('destroy').accordion({ heightStyle: "fill", active: active });
}
var resizeId;
$(window).resize(function () {
clearTimeout(resizeId);
resizeId = setTimeout(resizeAccordion, 600);
});
This code was supposed to re-size and re arrange the accordion in the page if the user re-sized the browser. Somehow in IE<9 it got triggered without reason and this caused the blur event to be triggered.
After so many hours. Maybe it is may thinking or code that was wrong, but i still hate IE for it.
I cannot reproduce this bug (using IE8 mode under IE9). But a simple workaround could be: (even quite weird)
$('#divVolee [type="text"]').focus(function(){
//>>code for FOCUS here<<
$(this).blur(blurcallback);
});
function blurcallback()
{
//>>code for BLUR here<<
$(this).off('blur');
}

jQuery find(':focus') not acting as expected

I'm making a widget that slides in and out of view on hover with showTracker and hideTracker functions. I want to prevent it from sliding out of view if it contains a focussed form element though, so I've got this going:
function hideTracker(){
if($('#tracker').find(':focus').length == 0){
$('#tracker').stop().hide();
}
}
Cool. Now it doesn't hide if the mouse happens to move out if there's a field in focus. Unfortunately, that also means that when the field does lose focus (and it's time for the widget to hide again) it just stays there. The unHover event has been and gone.
So I added this:
$('#tracker *').blur(function(){
hideTracker();
});
And that works too - with one little bug that I need help with!
If the focus moves from one element within the tracker to another which is also within #tracker, the tracker hides. I figured that if($('#tracker').find(':focus').length == 0) would return false, given that the next form element has focus, but I guess it doesn't.
Is it the case that .blur() fires before the next element attains focus?
How can I get around this?
How about something like this?
$('body *').focus(function(){
if(!$(this).is('#tracker *') && $('#tracker:visible').length != 0) hideTracker();
});
Yikes. Tricky. Yes, what's happening is:
mousedown: old form element gets the blur event. $(':focus').length == 0.
mouseup: new form element gets the focus event. $newFormElement.is(':focus') == true.
This is an improvement:
$('#tracker').focusout(function() //basically like $('#tracker, #tracker *').blur(), but "this" is always '#tracker'
{
if(!$(this).is('#tracker:hover')) //for some reason plain old :hover doesn't work, at least on the latest OS X Chrome
hideTracker();
});
But it's not perfect. It only really works if you use the mouse. If you use tab to move between fields (or some other possible mechanism) while your mouse is not hovering over #tracker, it won't work.
Here's another attempt. It's a bit...hackier. The gist is that, instead of handling the blur event, you handle the focus event of the second thing that's focused. But! What if you click something that can't be focused? Blank space on your page? Then no focus event is fired.
Okay. So the trick is: put a tabindex="0" in your root <html> tag. This means that there is always something that can be focused. So there's no way to focus on nothing (at least, I don't think so).
Then you can do this:
$('*').live('focus', function(e)
{
if(!$.contains($('#tracker')[0], this)) //if the new thing you focused on is not a descendant of #tracker
hideTracker();
e.stopPropagation();
});
Eh? So yeah, that's a certified hack. But it's a tough problem, and that's the best I can come up with at this hour.
Thank you all for your answers. Utilising the .focus() event rather than .blur() was a clever way to look at it. Unfortunately, it does raise a couple of browser problems, and I couldn't get any of the above working very robustly.
In the end I decided to use setTimeout(hideTracker, 100); to allow the focus() event to take place before the count of focussed elements within tracker was evaluated. Not ideal, but it's working well and the delay is fairly imperceptible.
Thanks again.

How to detect left click anywhere on the document using jQuery?

I have this right now:
$(document).click(function(e) { alert('clicked'); });
In Firefox, this event is firing when I left-click OR right-click. I only want it to fire when I left-click.
Does attaching a click handler to the document work differently than attaching it to other elements? For other elements, it only seems to fire on left clicks.
Is there a way to detect only left clicks besides looking at e.button, which is browser-dependent?
Thanks
Try
$(document).click(function(e) {
// Check for left button
if (e.button == 0) {
alert('clicked');
}
});
However, there seems to be some confusion as to whether IE returns 1 or 0 as left click, you may need to test this :)
Further reading here: jQuery Gotcha
EDIT: missed the bit where you asked not to use e.button. Sorry!
However, the example here returns the same ID regardless of looking at it in FF or IE, and uses e.button. could possibly have updated the jQuery framework? The other answer is that older versions of IE return a different value, which would be a pain. Unfortunately I only have IE 7/8 here to test against.
You could simply register for a "contextmenu" event like this:
$(document).bind("contextmenu",function(e){
return false;
});
Taken from: http://www.catswhocode.com/blog/8-awesome-jquery-tips-and-tricks
I've read that if you bind with "live" in jQuery 1.3, jQuery normalizes the click between browsers. I've not tested this.
However, this would indicate that it doesn't: http://abeautifulsite.net/notebook/99
Since you say click works correctly everywhere but on "document," have you tried a 100% div over the document to catch the click?
There is no not-browser-dependent way to detect only left-clicks. You can use this code that works under IE and non-IE browsers:
$("#element").live('click', function(e) {
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
// Left mouse button was clicked (all browsers)
}
});
Taken from: http://abeautifulsite.net/notebook/99

What's the difference of Click-to-focus and focus-by-javascript?

I met one troublesome web page whose structure is complicated. If one DIV is clicked by mouse, everything is OK. However, if it is focus-ed by javascript(i.e. divElement.focus). The layout turns to messy. This only happens in IE7/8.
So, is there any difference between click-to-focus and focus-by-javascript in IE?
Firing a Javascript focus event does not fire a click event. Without seeing the relevant code, I'm led to guess that some click handler is in place that is not being called in the case where you fire a focus event.
You might try, instead, firing a click:
var clickEvent;
if(document.createEvent) {
clickEvent = document.createEvent('click');
clickEvent.initMouseEvent('click');
divElement.dispatchEvent(clickEvent);
} else {
// Semi-pseudocode for IE, not tested, consult documentation if it fails
clickEvent = document.createEventObject();
divElement.fireEvent('onclick');
}
Or if you're into the jQuery thing:
$(divElement).click();
There's similar solutions for Prototype as well (search for Event.simulate).
The definition of the Focus action is to bring the input (keyboard or mouse) to a certain element, usually an input field. When an element gains focus, an OnFocus event is fired. When it loses focus, an OnBlur event is fired.
What you usually get by clicking is the OnClick event, which is not necessarily related to the above two.
This only happens in IE7/8.
Hmm, then I'm sure it's an IE related bug. Not surprising. If there is legitimate Javascript events involved, then they should fire uniformly across all browsers.

Categories