Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Simulate javascript click() firefox

    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

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Code:
    document.forumiečio_prisijungimo_informacija.forumiečio_avataras.onclick();
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by itsallkizza View Post
    Code:
    document.forumiečio_prisijungimo_informacija.forumiečio_avataras.onclick();
    nope, doesn't work in Firefox 3.0.5

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    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.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    If you don't care about older browsers (in particular IE6), you can use
    Code:
    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).
    Last edited by itsallkizza; 01-21-2009 at 03:56 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    masterjguscius (01-21-2009)

  • #7
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by itsallkizza View Post
    If you don't care about older browsers (in particular IE6), you can use
    Code:
    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...
    Last edited by masterjguscius; 01-21-2009 at 04:34 PM.

  • #8
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #9
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by itsallkizza View Post
    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
    Last edited by masterjguscius; 01-21-2009 at 10:31 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •