Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26836 > unrolled thread

FireFox onclick problem

Back to article view | Back to comp.lang.javascript

Contents

  FireFox onclick problem "Mel Smith" <syntel@cox.net> - 2015-02-10 11:02 -0700
    Re: FireFox onclick problem "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-02-10 20:32 +0100
      Re: FireFox onclick problem "Mel Smith" <syntel@cox.net> - 2015-02-10 14:55 -0700
    Re: FireFox onclick problem Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-02-10 19:34 -0200
      Re: FireFox onclick problem "Mel Smith" <syntel@cox.net> - 2015-02-10 15:21 -0700
    Re: FireFox onclick problem "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-02-10 23:37 +0100
      Re: FireFox onclick problem "Mel Smith" <syntel@cox.net> - 2015-02-10 16:21 -0700

#26836 — FireFox onclick problem

Hi:


    IE and Chrome both 'hide' the <div> below when a user 'clicks' on the 
button.

    However, an automatically updated version of FF does NOT .

    That is, when a user 'clicks' on the 'Hide Me' button, nothing happens. 
Very few (any ??) of my users have FF installed, and I very seldom use FF. 
But month ago, I *believe* it worked correctly -- but I'm not sure.

Question:

    What FF setting could I have (somehow) set wrongly such that 'onclicks' 
were not acted on.

TIA for any hints. Again, IE and Chrome work correctly

-Mel Smith

**** my html and ES/JS code below ******
   <div id="inotice">
   <input type="button" onclick="hidenotice();" value="Hide Me" />
    <!-- lots of text and <br> here -->
   </div>

function hidenotice() {
var el=document.getElementById("inotice");
el.style.display="none";
}

*************************

[toc] | [next] | [standalone]

#26837

"Mel Smith" <syntel@cox.net> wrote on 10 feb 2015 in comp.lang.javascript:

> Hi:
> 
> 
>     IE and Chrome both 'hide' the <div> below when a user 'clicks' on
>     the 
> button.
> 
>     However, an automatically updated version of FF does NOT .
> 
>     That is, when a user 'clicks' on the 'Hide Me' button, nothing
>     happens. 
> Very few (any ??) of my users have FF installed, and I very seldom use
> FF. But month ago, I *believe* it worked correctly -- but I'm not sure.
> 
> Question:
> 
>     What FF setting could I have (somehow) set wrongly such that
>     'onclicks' 
> were not acted on.
> 
> TIA for any hints. Again, IE and Chrome work correctly
> 
> -Mel Smith
> 
> **** my html and ES/JS code below ******
>    <div id="inotice">
>    <input type="button" onclick="hidenotice();" value="Hide Me" />
>     <!-- lots of text and <br> here -->
>    </div>
> 
> function hidenotice() {
> var el=document.getElementById("inotice");
> el.style.display="none";
>}

Works fine here also in FF.

==============

I would use a more general solution for the function,
if the <input> is a always direct child:

<script type='text/javascript'>
 function hideParent(x) {
   x.parentNode.style.display = "none";
 };
</script>

<div>
<input type="button" onclick="hideParent(this);" value="Hide Parent">
lots of text and <br> here
</div>

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#26840

Evertjan said:
> Works fine here also in FF.
>
> ==============
>
> I would use a more general solution for the function,
> if the <input> is a always direct child:
>
> <script type='text/javascript'>
> function hideParent(x) {
>   x.parentNode.style.display = "none";
> };
> </script>
>
> <div>
> <input type="button" onclick="hideParent(this);" value="Hide Parent">
> lots of text and <br> here
> </div>

Hi Evertjan:

    Tried your general method above. Same failed result.

    Again, current versions of IE and Chrome work correctly, immediately 
hiding the 'notice' division. But using FF: nothing happens.

    So, I reverted to my original code (as shown in my original post) for 
now, and will try 'debugging'.  But its so simple and the other browsers 
work and have worked for years with this code. Sigh ...

-Mel

[toc] | [prev] | [next] | [standalone]

#26839

Mel Smith wrote:
> Hi:
> 
> 
>     IE and Chrome both 'hide' the <div> below when a user 'clicks' on the 
> button.
> 
>     However, an automatically updated version of FF does NOT .
> 
>     That is, when a user 'clicks' on the 'Hide Me' button, nothing happens. 
> Very few (any ??) of my users have FF installed, and I very seldom use FF. 
> But month ago, I *believe* it worked correctly -- but I'm not sure.
> 
> Question:
> 
>     What FF setting could I have (somehow) set wrongly such that 'onclicks' 
> were not acted on.

I regularly work with FF and Firebug. And I've tested your example
successfully. So firstly I'd suggest validating you markup [1]. Also try
to debug your script with Firebug [2] and / or with the new Developer
Tools available in the latest FF version.

[1] http://validator.w3.org/
[2] http://getfirebug.com/

> 
> TIA for any hints. Again, IE and Chrome work correctly
> 
> -Mel Smith
> 
> **** my html and ES/JS code below ******
>    <div id="inotice">
>    <input type="button" onclick="hidenotice();" value="Hide Me" />
>     <!-- lots of text and <br> here -->
>    </div>
> 
> function hidenotice() {
> var el=document.getElementById("inotice");
> el.style.display="none";
> }
> 

Also you can use a div styled as a button, instead of the button
element, and use event delegation to hide the parent div. E.g.

<style>
  .button {
   border-radius:4px;
   background-color: #f2f5f7;
   border: 1px outset #ccc;
   color: #000;
   cursor: pointer;
   font-weight: 900;
   text-align: center;
   width: 150px;
  }
</style>

<div id="inotice">
  <div class="button">Hide Me</div>
  <p>Lots of text going here</p>
</div>

<script type="text/javascript">
  function hideDiv(e) {
    if (e.target.firstChild.nodeValue == "Hide Me") {
      e.currentTarget.style.display = 'none';
    }
  }

  document.getElementById('inotice').
    addEventListener('click', hideDiv, false);
</script>


-- 
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#26842

Hi Joao:

">
> I regularly work with FF and Firebug. And I've tested your example
> successfully. So firstly I'd suggest validating you markup [1]. Also try

    I had one error in one of my 'br' lines :  <br /></br />

    Corrected this fault with *no* change in the result :  FF did nothing, 
current versions of IE and Chrome correctly hid the division.

> to debug your script with Firebug [2] and / or with the new Developer
> Tools available in the latest FF version.
>
> [1] http://validator.w3.org/


> [2] http://getfirebug.com/
>
    I'll try the firebug,  but will delay any further changes to my code 
until I find whi *my* FF doesn't react to the onclick event.

    What in my FF environment could I have changed ??

    Puzzle, puzzle ...

Thanks Joao 

[toc] | [prev] | [next] | [standalone]

#26843

Mel Smith wrote:

>     IE and Chrome both 'hide' the <div> below when a user 'clicks' on the 
> button.
> 
>     However, an automatically updated version of FF does NOT .
> 
>     That is, when a user 'clicks' on the 'Hide Me' button, nothing happens. 
> Very few (any ??) of my users have FF installed, and I very seldom use FF. 
> But month ago, I *believe* it worked correctly -- but I'm not sure.
> 
> Question:
> 
>     What FF setting could I have (somehow) set wrongly such that 'onclicks' 
> were not acted on.

Maybe JavaScript is disabled completely, or some installed plugin blocks
the execution?  Maybe Content Security Policy[1] is enabled?

I suggest to place a quick debug statement at the beginning of
hidenotice() to see whether the function is called at all, e.g.

  alert('hidenotice');

And, of course, have a look at the error console of Firefox.

[1] <http://en.wikipedia.org/wiki/Content_Security_Policy>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#26844

Hi Christophe:

>
> Maybe JavaScript is disabled completely, or some installed plugin blocks
> the execution?  Maybe Content Security Policy[1] is enabled?

    Correct !

    A couple of weeks ago, I had complained about not being able to 'Disable 
Javascript' for testing.  I then reposted about finally finding the 
'about:config settings.

    I did my testing then I 'thought' that I had left Javascript enabled..

    So, I went back in with my 'new' firefox debug package, and tried to 
follow what was going on.  The FF debug package *said* that FF was disabled 
!

    This rang firebells in my head !

    So, I dived deep into about:config, and it said FF was *enabled*

    I toggled it a couple of times to ensure it really *was* enabled, then 
exited and tried my test again.

    It now works correctly -- but I can't understand the enabled / disabled 
settings and their transience ?? .

Anyway, thank you for confirming what I did !

    and thanks to EvetJan and Joao for their help.

-Mel

(so now I'm going to dig deeper into Firebug.)



>
> I suggest to place a quick debug statement at the beginning of
> hidenotice() to see whether the function is called at all, e.g.
>
>  alert('hidenotice');
>
> And, of course, have a look at the error console of Firefox.
>
> [1] <http://en.wikipedia.org/wiki/Content_Security_Policy>
>
> -- 
> Christoph M. Becker 

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web