Hiding the "Button" of the file input

[mediavrog]

2009-03-13 19:23:51 CET by https://sourceforge.net/users/hanscz/

I am totally new to mooTools and cfe, and eager to learn. The first
thing I'll do is to change the behaviour of the file input slightly.


Here's my plan:


After the fileinput's value has changed, I would like to hide the
'select file' button background image and push the path and the cross
to the right, so it looks like the new path value and the cross have
replaced the 'select file' button. If the cross is pressed, the file
input should revert to a visible 'select file' button.


Here's my question:


Would this be possible? I'd rather figure it out myself, but it would
be nice to start out knowing that it is indeed possible.


Thanks :)

[mediavrog]

2009-03-13 19:27:08 CET by https://sourceforge.net/users/hanscz/

'push the path and the cross to the right'



should of course be



'push the path and the cross to the left'

On 21 Nov., 18:19, mediavrog <maik...@web.de> wrote:
> 2009-03-13 19:23:51 CET byhttps://sourceforge.net/users/hanscz/

[mediavrog]

2009-03-14 16:29:22 CET

Hi there,



unfortunately, in the current version of cfe this is not really
supported.



Still, i made up a frightening hack, which will work with the current
version 0.8.3:

Insert the following code after myCfe.init and replace the $('upload')
with your file input's id => $('myFileUploadId')



[code]

$('upload').addEvent("change", function(){

this.retrieve("cfe").a.addClass("hidden");

});



$('upload').retrieve("cfe").cross.addEvent("click", function()
{

this.a.removeClass("hidden");

}.bind($('upload').retrieve("cfe")));



$('upload').retrieve("cfe").initO = function(){

this.o.addEvents({

"mouseout":this.updateFilePath.bind(this),

"change": this.updateFilePath.bind(this)

});



this.o.addEvent("change", function(){

this.a.addClass("hidden");

}.bind(this));




this.o.setStyles({"cursor":"pointer","opacity":"0","visibility":"visible","height":
this.a.getHeight(),"width": "auto","position":"relative"});

if(window.gecko){this.o.setStyle("MozOpacity","0");}

};

[/code]



In the next version of cfe, this will be possible more elegantly :)

On 21 Nov., 18:19, mediavrog <maik...@web.de> wrote:

> 2009-03-13 19:27:08 CET byhttps://sourceforge.net/users/hanscz/