File input problem
in [CSS]
|
Prev: Help with a Table Wanted
Next: background shorthand
From: Andrew on 8 Dec 2009 13:54 On Dec 8, 5:59 pm, David Mark <dmark.cins...(a)gmail.com> wrote: > On Dec 8, 8:10 am, Andrew <val...(a)gmail.com> wrote: > > [...] > > > > > Hi, > > Hi! > > > > > First, I would like advise you to forget about styling upload buttons > > if you > > are using them in a regular forms. > > That's (sort of) what I said. Perhaps you are trying to address the > OP? > > > They look different in each > > browser, and > > users get used to the way they look like. > > Exactly. > > > I believe that native > > controls > > are always better than some styled ones. > > That seems a bit non-committal. :) > > > > > Now about my componenthttp://valums.com/ajax-upload/ > > Okay. > > /** > * AJAX Upload > * Project page -http://valums.com/ajax-upload/ > * Copyright (c) 2008 Andris Valums,http://valums.com > * Licensed under the MIT license (http://valums.com/mit-license/) > */ > (function(){ > > var d = document, w = window; > > /** > * Get element by id > */ > function get(element){ > if (typeof element == "string") > element = d.getElementById(element); > return element; > > } > > That's a worthless pattern. > > /** > * Attaches event to a dom element > */ > function addEvent(el, type, fn){ > if (w.addEventListener){ > > Bad inference. > > el.addEventListener(type, fn, false); > > That's not a window. > > } else if (w.attachEvent){ > > Bad feature detection. Use typeof. > > var f = function(){ > fn.call(el, w.event); > > Don't preserve references to host objects (especially window). Will > lead to memory leaks in IE. > > }; > el.attachEvent('on' + type, f) > > Oh, it leaks anyway. Well, you could cut down on that a bit. > > } > > } > > /** > * Creates and returns element from html chunk > */ > var toElement = function(){ > var div = d.createElement('div'); > return function(html){ > div.innerHTML = html; > var el = div.childNodes[0]; > > firstChild? > > div.removeChild(el); > return el; > } > > }(); > > Some browsers will choke on this pattern (missing paranthesis around > the function expression). > > function hasClass(ele,cls){ > return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); > > } > > Why match? You aren't doing anything with the match. > > function addClass(ele,cls) { > if (!hasClass(ele,cls)) ele.className += " "+cls;} > > function removeClass(ele,cls) { > var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); > ele.className=ele.className.replace(reg,' '); > > I don't think so. :( > > } > > // getOffset function copied from jQuery lib (http://jquery.com/) > > Do _not_ copy jQuery code. We'll skip this one. > > [...] > > /** > * Crossbrowser mouse coordinates > */ > function getMouseCoords(e){ > // pageX/Y is not supported in IE > //http://www.quirksmode.org/dom/w3c_cssom.html > > Do _not_ copy code from quirksmode.org. > > if (!e.pageX && e.clientX){ > > // In Internet Explorer 7 some properties (mouse coordinates) are > treated as physical, > // while others are logical (offset). > > var zoom = 1; > var body = document.body; > > if (body.getBoundingClientRect) { > var bound = body.getBoundingClientRect(); > zoom = (bound.right - bound.left)/body.clientWidth; > } > > That looks suspiciously like bullshit. > > return { > x: e.clientX / zoom + d.body.scrollLeft + > d.documentElement.scrollLeft, > y: e.clientY / zoom + d.body.scrollTop + > d.documentElement.scrollTop > > This is definite bullshit. :) > > }; > } > > return { > x: e.pageX, > y: e.pageY > }; > > } > > [...] > > /** > * Cross-browser way to get xhr object > */ > > There's nothing cross-browser about this script. > > var getXhr = function(){ > var xhr; > > return function(){ > if (xhr) return xhr; > > Waste of time and space. > > if (typeof XMLHttpRequest !== 'undefined') { > xhr = new XMLHttpRequest(); > } else { > var v = [ > "Microsoft.XmlHttp", > "MSXML2.XmlHttp.5.0", > "MSXML2.XmlHttp.4.0", > "MSXML2.XmlHttp.3.0", > "MSXML2.XmlHttp.2.0" > > Too many. > > ]; > > for (var i=0; i < v.length; i++){ > try { > xhr = new ActiveXObject(v[i]); > > Where's the detection of ActiveXObject? > > break; > } catch (e){} > } > > Well, at least it won't bomb in IE6 when ActiveX is disabled > (something jQuery never figured out). > > } > > return xhr; > } > > }(); > > // Please use AjaxUpload , Ajax_upload will be removed in the next > version > > Okay. > > Ajax_upload = AjaxUpload = function(button, options){ > if (button.jquery){ > // jquery object was passed > button = button[0]; > } else if (typeof button == "string" && /^#.*/.test(button)){ > button = button.slice(1); > } > > More waste. Why would you pass "#id" to this? It's a string or an > object. If it is a string, it's an ID. > > button = get(button); > > this._input = null; > this._button = button; > this._disabled = false; > this._submitting = false; > // Variable changes to true if the button was clicked > // 3 seconds ago (requred to fix Safari on Mac error) > > That sounds mystical. :) > > this._justClicked = false; > this._parentDialog = d.body; > > if (window.jQuery && jQuery.ui && jQuery.ui.dialog){ > > window.jQuery?! > > var parentDialog = jQuery(this._button)..parents('.ui-dialog'); > if (parentDialog.length){ > this._parentDialog = parentDialog[0]; > } > > Whatever. > > [...] > > // Fixing problem with Safari > // The problem is that if you leave input before the file select > dialog opens > // it does not upload the file. > // As dialog opens slowly (it is a sheet dialog which takes some > time to open) > // there is some time while you can leave the button. > // So we should not change display to none immediately > addEvent(input, 'click', function(){ > self._justClicked = true; > setTimeout(function(){ > // we will wait 3 seconds for dialog to open > self._justClicked = false; > }, 2500); > }); > > In other words, you couldn't make it work, so you added a flimsy hack > based on timing. :( > > [...] > > response = window["eval"]("(" + response + ")"); > > Stop copying from Resig. He doesn't have a clue. ;) > > // method, enctype must be specified here > // because changing this attr on the fly is not allowed in IE 6/7 > var form = toElement('<form method="post" enctype="multipart/form- > data"></form>'); > > Mystical incantation. > > Anyway, you were saying... > > > 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) > > Whatever. I don't care to think of "google docs". > > > > > And here are comments to other things about AJAX Upload you got wrong. > > Huh? > > > > > > Did you look at how this was actually implemented? Apart from requiring > > > JQuery. > > I didn't say that. Is this your first time on Usenet? > > > > > 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. > > So? Your users are ignorant. They'd almost have to be to use this > "solution". ;) > > > > > > 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. > > Great! But I didn't say that either. > > > > > > 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. > > I should? It's _your_ demo. > > > > > 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. > > It does not. > > > Quote from jquery.com > > There's an impartial source! > > > > > 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. > > That's nonsense. Document traversing? It can't even _read_ > documents. > > http://groups.google.com/group/comp.lang.javascript/browse_thread/thr... > > Event handling is simple to begin with and their (very simple) > animations are known to be third-rate, even by the most devoted jQuery > junkies. > > The idea is that you don't want to mash all of these things together > in one monolithic script that you then have to swap out every year > just to tread water in the latest versions of major browsers. It's > just a stupid strategy for browser scripting. A million code monkeys > _can_ be wrong. Thanks for your review! It worth a lot for me. And sorry for comments that were addressed to other people, it's my first time here.
From: David Mark on 8 Dec 2009 14:07 On Dec 8, 1:54 pm, Andrew <val...(a)gmail.com> wrote: > On Dec 8, 5:59 pm, David Mark <dmark.cins...(a)gmail.com> wrote: > > > On Dec 8, 8:10 am, Andrew <val...(a)gmail.com> wrote: > > > [...] > > > > Hi, > > > Hi! > > > > First, I would like advise you to forget about styling upload buttons > > > if you > > > are using them in a regular forms. > > > That's (sort of) what I said. Perhaps you are trying to address the > > OP? > > > > They look different in each > > > browser, and > > > users get used to the way they look like. > > > Exactly. > > > > I believe that native > > > controls > > > are always better than some styled ones. > > > That seems a bit non-committal. :) > > > > Now about my componenthttp://valums.com/ajax-upload/ > > > Okay. > > > /** > > * AJAX Upload > > * Project page -http://valums.com/ajax-upload/ > > * Copyright (c) 2008 Andris Valums,http://valums.com > > * Licensed under the MIT license (http://valums.com/mit-license/) > > */ > > (function(){ > > > var d = document, w = window; > > > /** > > * Get element by id > > */ > > function get(element){ > > if (typeof element == "string") > > element = d.getElementById(element); > > return element; > > > } > > > That's a worthless pattern. > > > /** > > * Attaches event to a dom element > > */ > > function addEvent(el, type, fn){ > > if (w.addEventListener){ > > > Bad inference. > > > el.addEventListener(type, fn, false); > > > That's not a window. > > > } else if (w.attachEvent){ > > > Bad feature detection. Use typeof. > > > var f = function(){ > > fn.call(el, w.event); > > > Don't preserve references to host objects (especially window). Will > > lead to memory leaks in IE. > > > }; > > el.attachEvent('on' + type, f) > > > Oh, it leaks anyway. Well, you could cut down on that a bit. > > > } > > > } > > > /** > > * Creates and returns element from html chunk > > */ > > var toElement = function(){ > > var div = d.createElement('div'); > > return function(html){ > > div.innerHTML = html; > > var el = div.childNodes[0]; > > > firstChild? > > > div.removeChild(el); > > return el; > > } > > > }(); > > > Some browsers will choke on this pattern (missing paranthesis around > > the function expression). > > > function hasClass(ele,cls){ > > return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); > > > } > > > Why match? You aren't doing anything with the match. > > > function addClass(ele,cls) { > > if (!hasClass(ele,cls)) ele.className += " "+cls;} > > > function removeClass(ele,cls) { > > var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); > > ele.className=ele.className.replace(reg,' '); > > > I don't think so. :( > > > } > > > // getOffset function copied from jQuery lib (http://jquery.com/) > > > Do _not_ copy jQuery code. We'll skip this one. > > > [...] > > > /** > > * Crossbrowser mouse coordinates > > */ > > function getMouseCoords(e){ > > // pageX/Y is not supported in IE > > //http://www.quirksmode.org/dom/w3c_cssom.html > > > Do _not_ copy code from quirksmode.org. > > > if (!e.pageX && e.clientX){ > > > // In Internet Explorer 7 some properties (mouse coordinates) are > > treated as physical, > > // while others are logical (offset). > > > var zoom = 1; > > var body = document.body; > > > if (body.getBoundingClientRect) { > > var bound = body.getBoundingClientRect(); > > zoom = (bound.right - bound.left)/body.clientWidth; > > } > > > That looks suspiciously like bullshit. > > > return { > > x: e.clientX / zoom + d..body.scrollLeft + > > d.documentElement.scrollLeft, > > y: e.clientY / zoom + d..body.scrollTop + > > d.documentElement.scrollTop > > > This is definite bullshit. :) > > > }; > > } > > > return { > > x: e.pageX, > > y: e.pageY > > }; > > > } > > > [...] > > > /** > > * Cross-browser way to get xhr object > > */ > > > There's nothing cross-browser about this script. > > > var getXhr = function(){ > > var xhr; > > > return function(){ > > if (xhr) return xhr; > > > Waste of time and space. > > > if (typeof XMLHttpRequest !== 'undefined') { > > xhr = new XMLHttpRequest(); > > } else { > > var v = [ > > "Microsoft.XmlHttp", > > "MSXML2..XmlHttp.5.0", > > "MSXML2..XmlHttp.4.0", > > "MSXML2..XmlHttp.3.0", > > "MSXML2..XmlHttp.2.0" > > > Too many. > > > ]; > > > for (var i=0; i < v.length; i++){ > > try { > > xhr = new ActiveXObject(v[i]); > > > Where's the detection of ActiveXObject? > > > break; > > } catch (e){} > > } > > > Well, at least it won't bomb in IE6 when ActiveX is disabled > > (something jQuery never figured out). > > > } > > > return xhr; > > } > > > }(); > > > // Please use AjaxUpload , Ajax_upload will be removed in the next > > version > > > Okay. > > > Ajax_upload = AjaxUpload = function(button, options){ > > if (button.jquery){ > > // jquery object was passed > > button = button[0]; > > } else if (typeof button == "string" && /^#.*/.test(button)){ > > button = button.slice(1); > > } > > > More waste. Why would you pass "#id" to this? It's a string or an > > object. If it is a string, it's an ID. > > > button = get(button); > > > this._input = null; > > this._button = button; > > this._disabled = false; > > this._submitting = false; > > // Variable changes to true if the button was clicked > > // 3 seconds ago (requred to fix Safari on Mac error) > > > That sounds mystical. :) > > > this._justClicked = false; > > this._parentDialog = d.body; > > > if (window.jQuery && jQuery.ui && jQuery.ui.dialog){ > > > window.jQuery?! > > > var parentDialog = jQuery(this._button).parents('.ui-dialog'); > > if (parentDialog.length){ > > this._parentDialog = parentDialog[0]; > > } > > > Whatever. > > > [...] > > > // Fixing problem with Safari > > // The problem is that if you leave input before the file select > > dialog opens > > // it does not upload the file. > > // As dialog opens slowly (it is a sheet dialog which takes some > > time to open) > > // there is some time while you can leave the button. > > // So we should not change display to none immediately > > addEvent(input, 'click', function(){ > > self._justClicked = true; > > setTimeout(function(){ > > // we will wait 3 seconds for dialog to open > > self._justClicked = false; > > }, 2500); > > }); > > > In other words, you couldn't make it work, so you added a flimsy hack > > based on timing. :( > > > [...] > > > response = window["eval"]("(" + response + ")"); > > > Stop copying from Resig. He doesn't have a clue. ;) > > > // method, enctype must be specified here > > // because changing this attr on the fly is not allowed in IE 6/7 > > var form = toElement('<form method="post" enctype="multipart/form- > > data"></form>'); > > > Mystical incantation. > > > Anyway, you were saying... > > > > 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) > > > Whatever. I don't care to think of "google docs". > > > > And here are comments to other things about AJAX Upload you got wrong.. > > > Huh? > > > > > Did you look at how this was actually implemented? Apart from requiring > > > > JQuery. > > > I didn't say that. Is this your first time on Usenet? > > > > 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. > > > So? Your users are ignorant. They'd almost have to be to use this > > "solution". ;) > > > > > 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. > > > Great! But I didn't say that either. > > > > > 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. > > > I should? It's _your_ demo. > > > > 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. > > > It does not. > > > > Quote from jquery.com > > > There's an impartial source! > > > > 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. > > > That's nonsense. Document traversing? It can't even _read_ > > documents. > > >http://groups.google.com/group/comp.lang.javascript/browse_thread/thr... > > > Event handling is simple to begin with and their (very simple) > > animations are known to be third-rate, even by the most devoted jQuery > > junkies. > > > The idea is that you don't want to mash all of these things together > > in one monolithic script that you then have to swap out every year > > just to tread water in the latest versions of major browsers. It's > > just a stupid strategy for browser scripting. A million code monkeys > > _can_ be wrong. > > Thanks for your review! It worth a lot for me. Hey, nice attitude. :) Sorry, but I didn't have time to finish it. > > And sorry for comments that were addressed to other people, > it's my first time here. NP.
From: Mark Smith on 9 Dec 2009 04:02 On Dec 8, 4:59 pm, David Mark <dmark.cins...(a)gmail.com> wrote: > > > I was referring to the width of buttons. > > > Then you where changing the topic - again. > > I where (sic) what? As for padding and borders, leave them alone on > _all_ input elements. That should be easy enough to remember. :) > Yeah, who cares if the site looks like it was designed in 1997. > > > We where talking about the lack of css support for the FILE INPUT > > element. > > Which is rendered as a *button* and a text input. > That's how its rendered on most browsers, but it's not a button and text box, its a file input and css rules are not being applied. Hence the need for a workaround, not a change in requirements. Try to keep up. > > > > Yes. Highly cut down. You can't upload files from most mobile > > > > platforms anyway. > > > > And why did you have to cut it down? Because it was bloated with > > > dubious scripts. It's a very common problem that leads to two sites > > > where one would suffice. ;) > > > ... > > > > My phone? I guess you've never used it. And you don't design front- > > > ends exclusively for desktops (that's your other problem). > > > I guess you know better than the people behind a few little web sites > > like , Google, MSN, Amazon, Ebay... etc, all of which have seperate > > front ends designed specifically for mobile devices. > > Why is it that those who have the most to learn always cite terrible > decisions by large Websites as if they were gospel (thus learning > nothing?) Google, MSN, Amazon, eBay. What a rogue's gallery that > is. Copy their developers at your own risk. ;) > > And search the archive. We've discuseed - for example - Google's > crappy sites to death. There's not a scintilla of evidence that > anyone at Google knows the first thing about Web development. > Advertising yes, Web sites no. Oh, but they are so successful! How > much more successful would they be if they had competent developers? Ha ha, I was being sarcastic, but no, you actually do think you know better. Like I said before, in the Real World, deliverables come before ideologies.
From: David Mark on 9 Dec 2009 05:33 On Dec 9, 4:02 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote: > On Dec 8, 4:59 pm, David Mark <dmark.cins...(a)gmail.com> wrote: > > > > > I was referring to the width of buttons. > > > > Then you where changing the topic - again. > > > I where (sic) what? As for padding and borders, leave them alone on > > _all_ input elements. That should be easy enough to remember. :) > > Yeah, who cares if the site looks like it was designed in 1997. > > > > > > We where talking about the lack of css support for the FILE INPUT > > > element. > > > Which is rendered as a *button* and a text input. > > That's how its rendered on most browsers, but it's not a button and > text box, its a file input and css rules are not being applied. Yes. > > Hence the need for a workaround, not a change in requirements. Try to > keep up. You don't help yourself, do you? :) > > > > > > > > Yes. Highly cut down. You can't upload files from most mobile > > > > > platforms anyway. > > > > > And why did you have to cut it down? Because it was bloated with > > > > dubious scripts. It's a very common problem that leads to two sites > > > > where one would suffice. ;) > > > > ... > > > > > My phone? I guess you've never used it. And you don't design front- > > > > ends exclusively for desktops (that's your other problem). > > > > I guess you know better than the people behind a few little web sites > > > like , Google, MSN, Amazon, Ebay... etc, all of which have seperate > > > front ends designed specifically for mobile devices. > > > Why is it that those who have the most to learn always cite terrible > > decisions by large Websites as if they were gospel (thus learning > > nothing?) Google, MSN, Amazon, eBay. What a rogue's gallery that > > is. Copy their developers at your own risk. ;) > > > And search the archive. We've discuseed - for example - Google's > > crappy sites to death. There's not a scintilla of evidence that > > anyone at Google knows the first thing about Web development. > > Advertising yes, Web sites no. Oh, but they are so successful! How > > much more successful would they be if they had competent developers? > > Ha ha, I was being sarcastic, but no, you actually do think you know > better. Sarcastic about what? That Google, Amazon, etc. are shining examples? So you have no point then? > > Like I said before, in the Real World, deliverables come before > ideologies. The "Real World" is what neophytes bring up when painted into a corner. Do you think you can delivery anything (reliable) with jQuery than I can without it? If so, you are living in a fantasy world. ;)
From: Mark Smith on 9 Dec 2009 06:11
On Dec 9, 10:33 am, David Mark <dmark.cins...(a)gmail.com> wrote: > > That's how its rendered on most browsers, but it's not a button and > > text box, its a file input and css rules are not being applied. > > Yes. > Sucks. You would have thought web standards could have sorted stuff like this out. It's not like they haven't had over 15 years or anything! > > > > > > Yes. Highly cut down. You can't upload files from most mobile > > > > > > platforms anyway. > > > > > > And why did you have to cut it down? Because it was bloated with > > > > > dubious scripts. It's a very common problem that leads to two sites > > > > > where one would suffice. ;) > > > > > ... > > > > > > My phone? I guess you've never used it. And you don't design front- > > > > > ends exclusively for desktops (that's your other problem). > > > > > I guess you know better than the people behind a few little web sites > > > > like , Google, MSN, Amazon, Ebay... etc, all of which have seperate > > > > front ends designed specifically for mobile devices. > > > > Why is it that those who have the most to learn always cite terrible > > > decisions by large Websites as if they were gospel (thus learning > > > nothing?) Google, MSN, Amazon, eBay. What a rogue's gallery that > > > is. Copy their developers at your own risk. ;) > > > > And search the archive. We've discuseed - for example - Google's > > > crappy sites to death. There's not a scintilla of evidence that > > > anyone at Google knows the first thing about Web development. > > > Advertising yes, Web sites no. Oh, but they are so successful! How > > > much more successful would they be if they had competent developers? > > > Ha ha, I was being sarcastic, but no, you actually do think you know > > better. > > Sarcastic about what? That Google, Amazon, etc. are shining > examples? So you have no point then? > Get a clue. You think google and amazon would not use one frontend if they thought it would benefit their customers? After all money is the bottom line. Mobile users have different requirements to desktop users. Show me a site with as much functionality as eBay or Amazon, that looks good and works from desktop and mobile platforms. (A simple web page that renders some controls won't cut it - I mean something that is used and works in a real business scenario. I bet you can't.) > > Like I said before, in the Real World, deliverables come before > > ideologies. > > The "Real World" is what neophytes bring up when painted into a > corner. Do you think you can delivery anything (reliable) with jQuery > than I can without it? If so, you are living in a fantasy world. ;) Non sequitur. You really do have trouble concentrating, nowhere did I make any such claim. |