Ok, I got something to work. Here are the notes that I created as I went. They might be a little messy.
* Wrap target input in an element that we can give these styles to:
Peter uses 'label'. Can we do that?
We get our input wrapped inside an oddball <span>, which is nested
inside a div. This span seems weirdly resistant to styling.
Let's try and treat the div that way that he treats the label
The innermost wrapping element, .ginput_full seems to be utterly
resistant to resizing.
So, I'm targeting '#field_1_12", which is the list item.
Ok... we can do that. Kewl. So far, so good.
Next, we hide the actual input.
Yup, we can do that. That was easy. But now we want to add our visual
In order to do this, I target this element.
I give it these rules:
Ok, the user can still click on it, and get the file selection
So, now we need to give the user feedback. User wants to have their
expectation of feedback met - we have to let them know that we know
which file they have selected.
At this point, we need to throw away our sense of integrity when it
comes to such aloof concerns as "seperation of content". *sigh
We use jquery to keep a div within the form to display the name of the
file. I inject with js:
// insert a div and exploit it's presence
var displayDiv = "<div id=\"file-display\"><p></p></div> " ;
Now we need to make sure that the display div show shows the selected file.
var target = $("#field_1_12 input") ;
var fileDisplay = $("#file-display p") ;
fileDisplay.append( $("#field_1_12 input").val()) ;
And, we are done.
This works for me.
I have, however, not thoroughly tested it yet across browsers. I
expect that the behaviours will work just fine.
Posted 3 years ago on Wednesday January 4, 2012 | Permalink