CODEWITHSUNDEEP
javascripthtmlonclick
Matt
Matt

Reputation: 47

Javascript: Div onclick doens't work for some div content

I would like to expand/collapse a div when this div is clicked on. It already works with onmouseover/onmouseout, but I would prefer onclick.

Now, the problem seems to be the content of the div:

This works:

<div onclick="alert('works')" style="position:fixed; height:100px; width:100px; background:#FF0000;">
</div>

This doesn't work:

<div onclick="alert('works')">
    <div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
        <script>
            document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
        </script>
    </div>
</div>

But this (onmouseover instead of onclick) works again:

<div onmouseover="alert('works')">
    <div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
        <script>
            document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
        </script>
    </div>
</div>

I guess it must be some layering issue, but I tried putting the "onclick" into each of the different div/iframe layers and I couldn't get it to work. I'm a beginner and it'd be great to get a tip on what's wrong! Thanks!

Upvotes: 0

Views: 5443

Answers (3)

J T R
J T R

Reputation: 886

JavaScript events are supposed to 'bubble' up through the ancestry of DOM nodes from the one you click, all the way up to the body node, executing any appropriate handlers registered for those nodes along the way, unless a specific event handler stops the propagation of that event.

I suspect the iframe is your issue, since that is a separate HTML document, with a separate event chain, and that events don't bubble out of that, but I don't know for certain.

I would try the jQuery suggestion above, but I think this particular situation is not going to allow even jQuery to work.

Upvotes: 0

Cygnusx1
Cygnusx1

Reputation: 5409

I would recommend using JQuery for this.

You can do what you wanna do with 1 line of code.

write a test.js like this:

  $(document).ready(function() {

   // hides the div as soon as the DOM is ready

    $('#yourDiv').hide();

   // shows the div on clicking the noted link  

    $('#yourDiv-show').click(function() {

      $('#yourDiv').show('slow');

      return false;

    });

   // hides the div on clicking the noted link  

    $('#youDiv-hide').click(function() {

      $('#yourDiv').hide('fast');

      return false;

    });
   // toggles the div on clicking the noted link  

    $('#youDiv-toggle').click(function() {

      $('#yourDiv').toggle(400);

      return false;

    });

  });

Then import this javascript to your HTML,JSP etc...

Upvotes: 1

Mihai Iorga
Mihai Iorga

Reputation: 39724

If you set the first div with border 10px and click on that border it will work. As you start a new div the first div is just the container, any javascript calls will not be triggered.

like border: 50px solid; you will see what i mean.

The onmouseover works because you actually go over the invisible line of the div.

Upvotes: 1

Related Questions