Welcome to WebmasterWorld Guest from 54.157.222.62

Forum Moderators: open

Message Too Old, No Replies

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

   
11:35 am on Oct 29, 2011 (gmt 0)

5+ Year Member



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 :(
11:47 am on Oct 29, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

No, there really isn't, is there :)
1:57 pm on Oct 29, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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?
2:08 pm on Oct 29, 2011 (gmt 0)

5+ Year Member



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);
};
};
}
};