I am trying to get .focus() to work in Firefox (version 33.1.1) on a Mac. Some similar questions mentioned solutions that had the effect of .focus() without the visuals; with each of the tests below, I wasn't even able to accomplish that.
The various tests listed out below all work in Chrome but not in Firefox. The HTML used was:
<input type="text" id="test" tabindex="1">
Setting tabindex was based on this suggestion, but it didn't seem to have any effect.
I also considered using autofocus, but that won't work because I need to manipulate the focus of multiple fields as the user uses the webpage, not just for a single field on load.
Update: Rhumborl suggested below that the issue might have to do Firefox's treatment of focus events when using iframes, and sure enough that seems to be the issue. Each of the following tests works when you take it out of JSFiddle's iframe "Edit fiddle" window and instead view the output full screen. Below I've added links to the working full-screen version of each.
A. .focus()
$("#test").focus();
Fiddle (update: this works in full screen).
B. setTimeout with .focus()
setTimeout(function(){
$("#test").focus();
},100);
Fiddle (update: this works in full screen). As suggested here, here, and here.
C. .trigger('focus')
$("#test").trigger('focus');
Fiddle (update: this works in full screen). As suggested here.
D. setTimeout with .trigger('focus')
setTimeout(function(){
$("#test").trigger('focus');
},100);
Fiddle (update: this works in full screen). As suggested here.
E. Plain JavaScript
document.getElementById("test").focus();
Fiddle (update: this works in full screen).
F. setTimeout with plain JavaScript
setTimeout('document.getElementById("test").focus();',100)
Fiddle (update: this works in full screen). As suggested here.
G. .select()
$("#test").select();
Fiddle (update: this works in full screen). As suggested here.
H. setTimeout with .select()
setTimeout(function(){
$("#test").select();
},100);
Fiddle (update: this works in full screen).
This may be an issue that Mozilla is going to need to fix (see here), but there do seem to be workarounds. For example, if you go to Google.com in Firefox on a Mac, focus goes to the input field (I wasn't able to puzzle out how Google was doing it, although they seem to be dealing with focus in this script).
So does anyone know of a workaround?
<input type="text" id="test" autofocus="autofocus">
If you add the autofocus attribute to the input it may do what you are trying to do.
Related
We're using the javascript plugin Simple-ajax-uploader to upload files on your web site and it suddenly stopped working today (09/05/2019).
The upload div/button can't be clicked on anymore.
This is happening on our site and even on the official plugin site.
This is only happening on Chrome and only on computers where Chrome has been closed and restarted today.
We found out this article indicating that Chrome Dev tools have just been updated today but our version of Chrome hasn't changed since the restart (76.0.3809.132). However the restart definitely triggered the bug so something happened there. But what?
Same problem here found this morning.
Quick jQuery fix...
$('input[type=file]').css('position','relative');
UPDATE: Issue has been fixed with version 2.6.5 of the plugin. Ignore the below.
Plugin maintainer here. A short term fix is to remove or comment out line 2002:
'position' : 'absolute',
Alternatively: the issue does not appear to be present in Firefox. At any rate, I'll try to have a fix pushed soon.
I've just checked on Chrome and you're right about the button not working. It is a problem with the Stacking Context, unfortunately each browser has its own implementation.
Basically the outer div is preventing the click events from reaching the inner input.
My suggestion would be to use a custom button or to restyle the current one (I've found that if you remove the position property from the outer div it will work again. Consider that many properties can cause stacking context problems: position, transform, opacity, z-index. Try adding/removing/modifying some of them, in the outer div and in the inner input).
Anyway, it is guaranteed to be a style problem and not a JavaScript problem.
I have a clickable span that works perfectly on Android and desktop etc, but it does not work on iphones.
$('#spanname').on("click", function() {
/* do something */
});
I have tried touchstart, touchend and added hover pointers as per some other suggestions for this weird behaviour after researching, but nothing works.
Any ideas? If not, I guess I'll have to do away with the span and use a div.
(the reason I'm using a span is because I am using a large » instead of an arrow image).
Try to add an empty onclick attribute to the span or apply cursor: pointer to the element in the style sheet. ;)
More information here
The answer is check the silly and obvious things first. The device I was checking my updates on was actually pulling down an older iteration of the site and therefore wasn't showing my updates. The procedures did work, but only when I made sure I was actually looking at the correct version.
Apologies to anyone that took the time to look and also thank you.
I'm trying to make a checkbox check when I click not only the checkbox, but also the container it's in. The problem I faced is that when I checked a checkbox, it fired it twice because it was also clicking the container. I've come up with the following solution that seems to work fine, but I have a feeling there's a simpler way to do this and I'm looking to learn to really why short and compact javascript, so any advice would be helpful :)
http://jsfiddle.net/masedesign/8q5TQ/
$(function(){
$('td.cell input').click(function(e){
e.stopPropagation();
});
$('td.cell').click(function(){
$(this).find('input').click();
});
});
The e.stopPropagation() method prevents the event from bubbling.
just for fun I tried to achieve the same effect without javascript: if you're interested in a pure CSS solution working only on newer browser (it relies on :checked pseudoclasses) look at this fiddle: http://jsfiddle.net/g6Sx7/2/ (but if you're interested I can improve it with a js fallback for old IE)
Edit: a fiddle with js fallback: http://jsfiddle.net/g6Sx7/7/ this code should work fine also on IE6 but here the problem is about CSS support (the adjacent sibling operator + is not supported on IE6) : the whole effect won't work there, but anyway you cannot have a box shadow in that browser... so I think it's not a great problem.
If you are not performing any other task when the checkbox is checked i.e. the js that you have written is just for the sake of making the box clickable then i would suggest to take a CSS approach rather then JS.
here's a working example http://jsfiddle.net/8q5TQ/6/
Note: this works in IE7/8/9 FF (latest installed in my machine) and Chrome (latest installed in my machine)
Update: (after reading ur comment) i don't have IE 6 (sorry) but tried in quirk's mode and is working fine. Hope this helps :)
Problem: A div with visibility:visible inside a parent div with position:fixed and visibility:hidden causes rendering problems in Google Chrome. Images and examples can be found here.
A week ago you could just add the -webkit-transform:translateZ(0) to the parent div and bug solved. But it isn't working anymore:
Without -webkit-transform
With the hack.
Both are bugged.
So, is there any solution? When you resize the window, it repaints the divs, also when you open the developer tools the bug disappears.
So I've been trying to force a repaint with javascript (jQuery):
jQuery(window).scroll( function() {
jQuery("#parentDiv").addClass("nothing");
jQuery("#parentDiv").removeClass("nothing");
});
And it sometimes works (when a textfield is displayed inside the inner div). Really weird. Also tried hiding and displaying the div, adding css properties (fixed, bottom:0...)
But nothing works fine.
Any ideas?
EDIT2: Seems like it only happens to me: 2 friends, using windows and the latest version (17.0.963.79) don't see the bug in the second link. But I still see it. I've reinstalled chrome under windows, and the bug is still there.
I also have cleared the cache, but nothing changes. Am I the only one????
from my own experience when working with scroll(), all form-elements behave strangely, or do not function anymore.
You solution -webkit-transform:translateZ(0) will fix it for webkit browsers, but all others browsers will trow a translated layer above all form-elements, result is that form-element are not accessible anymore.
scroll() is a great solution for just plain info (text- images), not for forms.
I've just realized that tinyMCE is not working when you use firefox 5.0
First I thought that's my fault with some script , but then I went straight to TinyMCE demo page http://www.tinymce.com/tryit/full.php and there was the same result.
In normal way you open page, see editor, see text inside editor.
With firefox you see editor, but nothing is inside textarea. It is empy, blank. And what's more strange there is no mouse cursor inside of it. You cannot set it there, thus you cannot write there.
Later on I made one notice.
I've started to refresh the page fast, many times so the browser cannot work fast.
And I saw that it writes textarea, then converts it into tinyMCE editor with all text inside of textarera, and then on the final step it hides or removes all the data from textarea, leaving empty editor with all buttons visible.
Any idea what's going on?
Of course I've posted this on TinyMCE forum, and bugreported it also, but things there run very slow, and on StackOverflow I've got used to fast answers :)
So if anyone has any idea about how can I fix it please tell me.
UPDATE
I think something is wrong with my computer.
I've just tested cuteEditors demo and it acts the same way
http://cutesoft.net/example/general.aspx
So I think problem is inside my computer.
Is it Firefox or what?
SOLVED
Plugins were the problem. I disabled all the plugins and everything works fine!
SOLVED Plugins were the problem. I disabled all the plugins and everything works fine!