...

View Full Version : Simulate javascript click() firefox



masterjguscius
01-20-2009, 10:08 PM
hey everyone,

I have this problem with click() in firefox. What I'm trying to do is clicking hidden input type=file trough input type=button
<form name='forumiečio_prisijungimo_informacija' method='post'>
<input type='text' name='forumiečio_avataras2' style='width: 68%;'>
<input type='button' name='forumiečio_avataras3' style='width: 30%;' onclick='SpaudžiamMygtuką();'>
<input type='file' name='forumiečio_avataras' title='Sometitle' style='display: none;'>
</form>
<script language='JavaScript' type='text/javascript'>
function SpaudžiamMygtuką(){
document.forumiečio_prisijungimo_informacija.forumiečio_avataras.click();
document.forumiečio_prisijungimo_informacija.forumiečio_avataras2.value = document.forumiečio_prisijungimo_informacija.forumiečio_avataras.value;
}
</script>

This works only in internet explorer :(

itsallkizza
01-21-2009, 06:15 AM
document.forumiečio_prisijungimo_informacija.forumiečio_avataras.onclick();

masterjguscius
01-21-2009, 09:13 AM
document.forumiečio_prisijungimo_informacija.forumiečio_avataras.onclick();


nope, doesn't work in Firefox 3.0.5 :confused:

rnd me
01-21-2009, 12:49 PM
firefox won't allow you to click file inputs like that.

as a security precaution, the user must physically click the input to open the dialog.

masterjguscius
01-21-2009, 01:06 PM
very bad... I need to apply styles to file input, but because it won't let me I figured I could use hidden input... Damn Firefox... Anyway to bypass this limitation?

itsallkizza
01-21-2009, 02:47 PM
If you don't care about older browsers (in particular IE6), you can use


filter: alpha(opacity=0);
opacity: 0;

to style the <input type="file">. Then stick an image behind it. That works fine in newer browsers. And if you style it carefully (same width/height as image replacement) then your site will still look clean in browsers that don't support opacity (they'll just see the default button instead).

masterjguscius
01-21-2009, 03:27 PM
If you don't care about older browsers (in particular IE6), you can use


filter: alpha(opacity=0);
opacity: 0;

to style the <input type="file">. Then stick an image behind it. That works fine in newer browsers. And if you style it carefully (same width/height as image replacement) then your site will still look clean in browsers that don't support opacity (they'll just see the default button instead).

yes I know about this, but let's say I HAVE to use fake button instead of image (create type=button behind type=file button), then fake button won't show me hover and click effects (like it is disabled or something). Then I figured It can be somehow done with JS, for example if I hover over invisible input=file button, then JS actually shows me hovered over effect of fake button and if I click and hold left mouse button invisible input=file button then JS puts effect of 'clicked' button to fake button...
wow kinda hard to explain when english isn't my native language...

itsallkizza
01-21-2009, 03:33 PM
1) You don't need a type="button", you can use any image/element you want.
2) You can simulate hover affects no problem. Just check to see if the cursor coordinates are over your fake-button.

segalsegal
01-21-2009, 06:28 PM
I have a related question about setting document.referrer, which also seems to be messed up by click() not working in Firefox. I've detailed the problem in a separate thread (http://www.codingforums.com/showthread.php?p=772711). If anyone has a workaround I'd appreciate knowing about it.

masterjguscius
01-21-2009, 08:29 PM
1) You don't need a type="button", you can use any image/element you want.
2) You can simulate hover affects no problem. Just check to see if the cursor coordinates are over your fake-button.

OK, Here's what I have done:

<style>
input[type=file]{
position: relative;
top: -20px;
margin-bottom: -18px;
height: 20px;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
}
</style>

<form name='forumiečio_prisijungimo_informacija' method='post' enctype='multipart/form-data'>
<input name='forumiečio_avataras2' type='text' readonly style='width: 158px;' style='z-index: 1;'>
<img name='forumiečio_avataras3' src='MBNormal.png' width='68px' height='18px' srcover='MBMouseOver.png' srcdown='MBClicked.png' style='position: relative; top: 5px; z-index: 1;'>
<input type='file' name='forumiečio_avataras' style='z-index: 2;' size='21' onChange='document.forumiečio_prisijungimo_informacija.forumiečio_avataras2.value = document.forumiečio_prisijungimo_informacija.forumiečio_avataras.value;' onMouseOver='document.forumiečio_avataras3.src=\"MBMouseOver.png\"' onMouseOut='document.forumiečio_avataras3.src=\"MBNormal.png\"' onMouseDown='document.forumiečio_avataras3.src=\"MBClicked.png\"'>
</form>

This is closest I could get :) hope this will help people :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum