I have noticed a difference in behaviour between chrome and IE of handling file input clicks.
jsFiddle example here.
In Chrome, clicking anywhere on the input (text or button bit) triggers the file dialogue.
In IE (testing on 7), you have to click on the actual button, not the text bit.
The problem is that I'm using a transparent file input on top of a regular text box. Clicking on the text box should open the dialog. In Chrome this is working fine, as the total size of the input is the same size as my text box.
In IE it doesn't work properly as the user needs to be clicking on the actual button part of the transparent file input.
Any ideas of how to fix this??
Thanks
Have a look at how these guys have done it: http://www.filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/
The strategy is the the same, overlay a custom designed file input over a standard one and get the user to interact with the standard one.
They have written a small hack to support the click for IE and Opera, using jQuery to bind a click event explicitly.
See: http://dwpe.googlecode.com/svn/trunk/fileinput/js/jQuery.fileinput.js (Line 52)
You need to find a way to trigger a click event on the file input box..
Maybe adding a click handler on the underlying textbox which issues the click event to the file box.
example: http://jsfiddle.net/MqbrV/
It does not work in Firefox (but the default action should be enough) and Opera (where none works).
Related
I dont know why but the value of my text field does not change when back button is pressed in chrome
below is the link to the video on youtube you can see that the program is working fine in edge but not in chrome and opera.
video - https://youtu.be/zRPRMa4f_hk project file - https://drive.google.com/file/d/13Q7gxc-fvzkvftk769Qy51u60_Pxd4IU/view?usp=sharing
the problem is that when i press the back button in chrome even though the query string changes and the value of input text element changes in inspector it does not change in browser window.
Please help me guy anyone. Im stuck.
write autocomplete = "off" in form
The strangest behaviour occured and I can't handle it myself.
I have ASP .NET MVC application with Jqgrid version 5.1.0. Everything works fine, beside one dialog window.
In my grid I use default deletion method. There is delete button defined by $(tableHtmlId).navGrid( ... ) function. After clicking delete button, confirmation dialog window appears. This dialog has misplaced cancel button (the one on top-right corner), as shown on following screen:
I thought about editing css styles, so I hit the console button, and as soon as develpers tool window appeard, look what happened:
Everything look fine. However, when I put cursor over cancel button, it goes back to wrong:
This behaviour occurs on Chrome, Firefox and IE. This bug is too atomic for me to solve. Please help. :)
In my website project, an element only changes style when I drag something over it. It does this by adding a CSS class to it.
The problem is that I have a hard time editing this style because I can't live edit it in Chrome. I have to edit the file, reload the webpage, then drag something to see the changes.
Is there any way to do this just inside Chrome? Most magically, would be if there was some way to freeze my dragging and then be able to edit. Anything close?
Browse to the desired page
Open console (F12)
Select 'SOURCES' tab in chrome inspector
Drag the element
Hit F8 to freeze (if you have clicked anywhere on the actual page F8
will do nothing, your last click needed to be somewhere in the inspector, like the sources tab)
Go back to elements tab in inspector
It should now be nested in the trigger element's html
Try this trick:
in Google Chrome Console type at any time you want to test that class
var elm = document.getElementById('yourElementId'); elm.classList.add('yourClassToTest');
(please note: you have to press SWIFT+ENTER if you like to create a new line break in Google Chrome Console)
At this point you have added the class you want to test on the div.
Just use the web inspector, in order to change/inspect any CSS properties.
This solution lets you avoid to manually drag something to see your class/changes.
I know it's possible to save as... and look at the html file and see all the classes generated by javascript, but I would love to know if there's a firefox (or other browser) add-on which will show me page source with the javascript generated classes.
Working with jQuery mobile and trying to carefully modify all the CSS it generates is tough without it. Thanks.
Try Firebug. It's a line-level javascript debugger for firefox. It will show you all of your script code and even let you step debug it.
To view generated mark-up, use the element inspector (the blue "box & arrow" icon in the top left of the firebug toolbar). The element inspector allows you to hover over elements on your page and view its markup.
Try "View Source Selection".
Right click page and Select All and right click again to View Selection Source to view the source that a script generated, in FF. (at least in v.3.?)
I've run into a strange problem with an HTML form. I've built a dynamic table that adds a new row when you enter data into an existing blank row; because there are some server requirements in adding a row, I make an AJAX call to do this in the onblur event. It took a while to make this work for all browsers, but eventually all was happy with the world ... until IE8. Now, what happens is that, when the call returns from AJAX, the cursor shows in the next textbox (correctly), but the keyboard no longer works. I have to close the modal window (actually an IFRAME), then the keyboard starts to work again. If I put IE8 into compatibility mode, it works fine.
Has anybody seen behavior like this, or have any ideas for a workaround?
Thanks, Jim
I had problems with DIVs placed above an INPUT, that cloacked the cursor... and once the DIV was not above it, the cursor appeared back again.
Just an idea: Maybe your IFRAME captured the focus (and/or the keyboard).