I have a file input field with opacity: 0; and filter: alpha(opacity: 0); that sits ontop of a large div that I use as a button to select a file, the selected filename is displayed below the button.
All works fine, but when you set the width property of the file element (in this case, the width of the DIV which is underneath it) in IE, part of that width is the text area of the file input. Ofcourse, IE does their own thing, and unlike every other browser, the text-area of the element has to be double-clicked to open the browse dialog. Firefox & Safari will act on a single-click of the text part of the element. I thought I had a workaround since IE allows you to invoke the .click() event on the element.
I tried this:
<input type="file" onclick="this.click();" />
which did nothing, so I tried this:
<input type="file" onmouseup="this.click();" />
Which worked, and the browse dialog was shown with a single click of the text area of the element. But, for some reason when the form is submitted, if there was a file selected, the form would not submit, nothing would happen. If no file was selected, the rest of the form would be submitted.
So now I am back to square one and the left half of my Select File button has to be double clicked to pick a file and the right half can be single clicked. I can't think of any other way to get IE to react to a single click of the element. I tried using the onfocus event to trigger .click() on the element also, which works, but since this upload dialog will be the only thing on the page, and the <input type="file" /> is the first input element being rendered, the click event is triggered when the page loads.
So then I tried attaching to the onload event of the body, and setting focus to something else, but this was too late and focus had already been given to the file input and the browse dialog already opened. I know I am getting close with the onfocus, is there a way to keep the element from having focus when the page loads? Or is there another way to do this that anyone can think of?
Thanks!
[update]
I tried playing with the onfocus again and unfortunately, I was wrong and focus is called to the file element again when the form is submitted, halting the submission and opening the browse dialog again
My favorite solution to formatting html inputs: http://pixelmatrixdesign.com/uniform/
Related
I have embedded Fire Pad on my website. Initially I had problems with textbox being hidden but based on this post, I was able to make it work.
Everything seems to be working but one part. I need to click on the text area for text to be loaded for the first time. Ie. when page loads, the text area is visible but empty. I click in that text area and the document appears.
DOM View
I can see text is available in the DOM it is just hidden until I focus on that area. I assume it is still related to my DOM structure and CSS.
I tried to fire focus and click events.. No luck. Any help is appreciated.
Try adding init(); to your
$(document).ready(function(){
}
Ok, here us what worked for me:
codeMirror.focus();
codeMirror.setCursor(codeMirror.lineCount(), 0)
I'm searching for a way to have a HTML select box with arbitrary number of options and have the last option to "Upload a New Item" and trigger a file input element which I've hidden with css (display:none).
My problem is that I just can't get it to work and I've tried various of different functions and methods.
To test it I've tried the same thing with just a regular text link (a href) which works fine.
In addition I've also tried to test the change event on the select to trigger other events which works.
It is like it just won't accept a click trigger of an file input element.
You can see my different tests and approaches here: http://codepen.io/Mestika/pen/rvneK
edited
I'm on a Mac running Maverick in a Google Chrome
Cheers
I'm encountering an issue with a JQuery modal form with many labels and corresponding input fields in it.
The issue occurs when I open the JQuery modal form and scroll down. When I close and re-open the JQuery modal form, the form is auto-scrolled so that the first input field is at the top of the form and has keyboard focus. However, this cuts off the label and header above the first input field.
I have tried $("input").blur(), and that successfully disables keyboard focus on the first input element, but the modal form still automatically scrolls so that the first input form is flush against the top of the screen.
I have also tried placing a hidden input field above everything else in the JQuery modal form, but Firefox is smart about it and still scrolls to the first active non-hidden input element.
Has anyone encountered this situation before, and if so, does anyone know the proper resolution for it?
Issue resolved. I used the scrollTop() method on the JQuery modal dialog div itself, like so:
$("dialog").scrollTop(0);
This is separate and distinct from autofocus/blur issues, as Firefox's autopositioning apparently does not tie with its autofocus.
I'm using JavaScript to customize radio buttons. I added labels for each of the buttons and when I click the labels, it seems to be updating the selected radio properly, but not when I click the radio button graphic. (only the background position changes)
Is there anyway I can make it so I can view the changes when to each of the radio button input elements in firebug when clicking on them?
If you'd like to see an example of what I'm talking about, go here, inspect one of the radio button elements and click on them and you'll see the code never changes (i.e. checked="checked").
When you change the DOM via Javascript, you're changing the in-memory version. The source of the DOM is never modified by your Javascript.
See: Firefox Live DOM.
If you right click on the element and select "Inspect Element" it will show you the HTML for this element in memory and will reflect changes to that as you interact with the page.
Also if you select the "Script" tab you can find your javascript and set break points to allow you to step through the script and debug any issues that may be occurring.
I want to be able to have default text like "Enter content here..." appear when the editor first loads, but I want this text to disappear when the user clicks/focuses on the content area. Then, if they "blur" (move out) of the content area without inputting anything, I want the "default text" to re-appear in the editor.
After Googling and looking through TinyMCE's wiki, it looks like there are onActivate and onDeactivate events that should partially do this; however, the wiki page for onDeactivate has a disclaimer stating that it is not a true "blur" method, plus I was not able to get the onActivate events to work (using FF 3.5 at least).
Has anyone else found a solution to this? I'm using a stock TinyMCE install and have jQuery loaded for my other JS tasks for the site I'm building, so I'm open to some jQuery wizardry to make this happen if there's nothing available in the TinyMCE API.
Thanks,
Seth
the onNodeChange tinyMCE event will fire if the user tabs into the editor. use tinyMCE's onMouseDown to detect a click. between these two events you should be able to determine when the user has activated the editor. use $(body).click() in the main page to determine when the user clicks out of the editor and blurs it.
i would also shy away from putting the default text as the actual value of the editor. instead, i would make the iframe/body of the editor be transparent and put the default value behind it in an absolutely positioned div. using the above triggers, just show()/hide() that div when you want the default value to [dis]appear.
Hmmm, tricky one...
here's an idea you might like to try:
We have established the onActivate works fine, so hook up the code for that... now, for onDeactivate...
tinyMCE stores it's content in the original (now hidden) textarea it replaces. That's how the content gets sent to the server when the form is posted.
Now, to blur away from the editor, a user has to click on something else on the page. using jQuery you can attach a $("body").click() function that checks the content of the hidden textarea (using $(id_of_hidden_textarea).val()). If the content is empty, set the content to "Enter content here..." in both the textarea (using val()) and the MCE instance (using tinyMCE.setContent()).
The $("body").click() function would not fire when clicking on the editor because it's in an iframe.