homepage Welcome to WebmasterWorld Guest from 174.129.163.183
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




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

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




msg:4381059
 11:47 am on Oct 29, 2011 (gmt 0)

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

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

penders




msg:4381088
 1:57 pm on Oct 29, 2011 (gmt 0)

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




msg:4381092
 2:08 pm on Oct 29, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved