javascript and Opera. How come this works on all other browsers but op

[barricades]

I'm using a nice little script which replaces the usual file upload input with whatever image you want and then with JS makes sure that an invisible 'browse' button is underneath the mouse pointer whenever the mouse is moved over the image you want to use.

Nice :)

It works on every browser ie7 ie8 ie9 FF safari chrome but not on opera. On Opera the regular file input appears.

I've had a good hoke round the 'net and I know there's loads of scripts which do similar things. But either they are too complicated for me to figure out how to use them eg uploadify (bit of a newbie) or they do similar things but just not as well - like making the custom image the same size as the file input would be (there's issues with that too).

here's the script I'm using - there's not much to it

How come it doesn't work in Opera grrrr... Is there anyway to fix it? This is perfect for what I want apart from not working in Opera :(

[lucy24]

here's the script I'm using - there's not much to it

No, there really isn't, is there :)

[penders]

On Opera the regular file input appears.

The script perhaps checks for some browser capability, which Opera may not have, and the script falls back to default behaviour?

[barricades]

sorry, here's some code :(

html:

<label class="cabinet"> 
 <input type="file" class="file" />
</label>

then call:

SI.Files.stylizeAll();

css:

.SI-FILES-STYLIZED label.cabinet
{
 width: 79px;
 height: 22px;
 background: url(btn-choose-file.gif) 0 0 no-repeat;

 display: block;
 overflow: hidden;
 cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file
{
 position: relative;
 height: 100%;
 width: auto;
 opacity: 0;
 -moz-opacity: 0;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

JS:

if (!window.SI) { var SI = {}; };
SI.Files =
{
htmlClass : 'SI-FILES-STYLIZED',
fileClass : 'file',
wrapClass : 'cabinet',

fini : false,
able : false,
init : function()
{
this.fini = true;

var ie = 0 //@cc_on + @_jscript_version
if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { return; } // no support for opacity or the DOM
this.able = true;

var html = document.getElementsByTagName('html')[0];
html.className += (html.className != '' ? ' ' : '') + this.htmlClass;
},

stylize : function(elem)
{
if (!this.fini) { this.init(); };
if (!this.able) { return; };

elem.parentNode.file = elem;
elem.parentNode.onmousemove = function(e)
{
if (typeof e == 'undefined') e = window.event;
if (typeof e.pageY == 'undefined' && typeof e.clientX == 'number' && document.documentElement)
{
e.pageX = e.clientX + document.documentElement.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
};

var ox = oy = 0;
var elem = this;
if (elem.offsetParent)
{
ox = elem.offsetLeft;
oy = elem.offsetTop;
while (elem = elem.offsetParent)
{
ox += elem.offsetLeft;
oy += elem.offsetTop;
};
};

var x = e.pageX - ox;
var y = e.pageY - oy;
var w = this.file.offsetWidth;
var h = this.file.offsetHeight;

this.file.style.top= y - (h / 2) + 'px';
this.file.style.left= x - (w - 30) + 'px';
};
},

stylizeById : function(id)
{
this.stylize(document.getElementById(id));
},

stylizeAll : function()
{
if (!this.fini) { this.init(); };
if (!this.able) { return; };

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++)
{
var input = inputs[i];
if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1)
{
this.stylize(input);
};
};
}
};