File input problem
in [CSS]
|
Prev: Help with a Table Wanted
Next: background shorthand
From: Andrew on 8 Dec 2009 08:10 On Dec 7, 2:19 pm, David Mark <dmark.cins...(a)gmail.com> wrote: > On Dec 7, 6:54 am, Stefan Weiss <krewech...(a)gmail.com> wrote: > > > On 07/12/09 11:50, Mark Smith wrote: > > > > Oh, and for anyone else that is interested, I found an option 5. Ajax > > > uploads seem to be triggerable from script: > > > >http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm > > > Did you look at how this was actually implemented? Apart from requiring > > JQuery, that demo page has file upload fields with opacity:0 overlayed > > above its buttons and links. I'd say this qualifies as > > > | #3 Use some hacky CSS and overlays to style the file picker. > > Yes. Most Web developers (or "designers") want everything to look > exactly the way they want it to look and never mind what the user > agent thinks. CSS "resets", brittle hacks, anything goes if it makes > it look exactly the same in IE, FF and Safari. It's backwards as the > developers of the user agents probably had a good idea of what sort of > default style would work best for inputs (buttons particularly). > > > > > They're also moving these fields around whenever the mouse moves, which > > causes the mouse cursor to blink very fast in Firefox 3.0. > > Always nice. :) > > > Worst of all, > > How could it get worse? > > > they initiate the upload as soon as a file has been selected (before the > > user submits the form). > > Oh brother. > > > This is *NOT* how forms usually work; I hope > > this behavior can be disabled. > > I hope nobody is dense enough to use this thing. > > > > > Now try turning off CSS and/or JavaScript -> upload fields are broken or > > missing :-( > > But would would disable CSS and/or JS? Seriously, they've excluded > scores of corporate and mobile users, handicapped people, sailors, > people who hate JS and/or CSS, etc. But, on the upside, their buttons > will all look alike on their test machines. That's the mentality. > > > As far as I can see, PPK's example has the same problem. > > Unsurprising. :( > > > > > For what it's worth, I don't even try to style these elements anymore. > > That's the best policy. Usability always trumps "coolness". Don't > see marquees around much anymore and eventually clown buttons will go > away too. > > > I > > just explain the situation to the client, and put the upload field at > > the very end of the form, so it doesn't mess up the rest of the layout. > > Not sure how the default button style would mess up a layout. Clash > perhaps. But the end is a good place for them anyway. Hi, First, I would like advise you to forget about styling upload buttons if you are using them in a regular forms. They look different in each browser, and users get used to the way they look like. I believe that native controls are always better than some styled ones. Now about my component http://valums.com/ajax-upload/ It was meant to be used in js web applications, that require different file upload strategy, not in simple forms, which are better with the select->browse->submit. (Think of google docs -> open file from pc) And here are comments to other things about AJAX Upload you got wrong. > Did you look at how this was actually implemented? Apart from requiring > JQuery. Look more closely, it doesn't require jQuery, it just uses it for the demo, as it's the most popular js library among the users of my component. > they initiate the upload as soon as a file has been selected (before the > user submits the form). This can be changed in the options. > Now try turning off CSS and/or JavaScript -> upload fields are broken or > missing :-( You should just add a normal file input to the markup, and then replace it with any div or link you want to style. And then create an instance of my plugin. Also, I'm just curios why you don't like jQuery so much? It has some flaws, but it does what it promises really well. Quote from jquery.com jQuery is js library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. There are the things jQuery can really help with, making your code more readable.
From: Mark Smith on 8 Dec 2009 08:36 On Dec 8, 1:10 pm, Andrew <val...(a)gmail.com> wrote: > Also, I'm just curios why you don't like jQuery so much? It has some > flaws, but it does what it promises really well. Quote from jquery.com > > jQuery is js library that simplifies HTML document traversing, > event handling, animating, and Ajax interactions for rapid web > development. > > There are the things jQuery can really help with, making your code > more readable. First thanks for finding this post and writing back to clarify how your component was intended to be used. I still can't believe simple things like WIDTH, LINE-HEIGHT, PADDING and BORDER don't style file inputs in firefox. At least in IE, I can align the control nicely on the form. In FF it just looks terrible. My client might just have to live with that. I half agree with you about jQuery. In the Real World (tm) I like to use jQuery for simple things like wiring up events, or if I want to concisely manipulate a lot of elements using a css selector. I also like it for reliably working around buggy type selectors in IE6. However, try to do anything more complicated than that and that requires real debugging. Forget it, you are better off writing it yourself.
From: rf on 8 Dec 2009 08:47 Andrew wrote: > There are the things jQuery can really help with, making your code > more readable. And more breakable.
From: Jonathan N. Little on 8 Dec 2009 09:15 Mark Smith wrote: > I didn't see anyone advocate jQuery, your anti jquery rant just seemed > out of context. > > Glad you got it off your chest though. ;) Rant? Try asking about the virtues of JQuery in alt.comp.lang.javascript to the folks that really deal with JavaScript and you will get a detailed and spirited dissertation on what is the problem with JQuery. -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: Stefan Weiss on 8 Dec 2009 09:56
On 08/12/09 14:10, Andrew wrote: >> Did you look at how this was actually implemented? Apart from requiring >> JQuery. > > Look more closely, it doesn't require jQuery, it just uses it for the > demo, as it's the most popular js library among the users of my component. I stand corrected. The ajaxupload script itself apparently works without jQuery. I saw the inline script on the demo-jquery.htm page (which obviously does use jQuery) and a small passage in the external script, which also refers to window.jQuery, so I just assumed that jQuery was a prerequisite. >> they initiate the upload as soon as a file has been selected (before the >> user submits the form). > > This can be changed in the options. I thought so. I was surprised to accidently send a file when I only wanted to try out your upload form element. Good thing I didn't test it with an image from my... uh... special folder ;-) Incidentally, I just saw the same behavior yesterday at tineye.com, an image search engine. >> Now try turning off CSS and/or JavaScript -> upload fields are broken or >> missing :-( > > You should just add a normal file input to the markup, and then > replace it > with any div or link you want to style. And then create an instance of > my plugin. Yes, that should work if JS is disabled, but probably not when only CSS is disabled. Not a very common situation, granted, but I think that (apart from specialized applications) accessibility shouldn't be sacrificed for pretty upload buttons. YMMV. > Also, I'm just curios why you don't like jQuery so much? It has some > flaws, but it does what it promises really well. I only mentioned it as an aside; it's an extra 56K download in addition to the frontend script, which seems a little excessive just for styled upload elements. If the rest of the page uses jQuery, the point is moot. :wq stefan |