DIV/IFRAME hide/show problem onMouseOut - please help :)

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Ryh
    #1

    DIV/IFRAME hide/show problem onMouseOut - please help :)

    I have the following scritpt. It hides div layer when mouse is out of
    the div layer. Inside DIV I have IFRAME box. Unfortuantely it does not
    work in Mozilla or IE 5.5. It hides div when cursor is inside IFRAME.
    NOte that IFRAME is inside DIV so it should not hide DIV. It Works
    fine in IE6.0.

    Could any one help?

    Example:

    <html>
    <head>
    <script type="text/javascript">
    function hide() {
    obj = document.getEle mentById('testD iv');
    obj.style.visib ility = 'hidden';
    }
    function show() {
    obj = document.getEle mentById('testD iv');
    obj.style.visib ility = 'visible';
    }
    </script>
    <head>
    <body>
    <form action="">
    <input type="button" value="Show" onclick="show() ">
    </form>
    <div id="testDiv" style="border: 10px solid red;" onmouseover="sh ow()"
    onmouseout="hid e()">
    <p>Text inside DIV</p>
    <iframe id="testIframe" ></iframe>
    </div>
    </body>
    Tags: div onmouseout, iframe onmouseout, mouseup iframe
    • Martin Honnen
      #2
      Re: DIV/IFRAME hide/show problem onMouseOut - please help :)



      Ryh wrote:
      [color=blue]
      > I have the following scritpt. It hides div layer when mouse is out of
      > the div layer. Inside DIV I have IFRAME box. Unfortuantely it does not
      > work in Mozilla or IE 5.5. It hides div when cursor is inside IFRAME.
      > NOte that IFRAME is inside DIV so it should not hide DIV. It Works
      > fine in IE6.0.[/color]

      You need to check whether the toElement/relatedTarget is contained
      inside of the div element:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <html lang="en">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <title>event handling to hide an element when the mouse leaves it</title>
      <script type="text/javascript">
      function mouseLeaves (element, evt) {
      if (typeof evt.toElement != 'undefined' && typeof element.contain s !=
      'undefined') {
      return !element.contai ns(evt.toElemen t);
      }
      else if (typeof evt.relatedTarg et != 'undefined' && evt.relatedTarg et) {
      return !contains(eleme nt, evt.relatedTarg et);
      }
      }

      function contains (container, containee) {
      while (containee) {
      if (container == containee) {
      return true;
      }
      containee = containee.paren tNode;
      }
      return false;
      }
      </script>
      <script type="text/javascript">
      function hideElement (element) {
      if (element.style) {
      element.style.v isibility = 'hidden';
      }
      }

      function showElement (element) {
      if (element.style) {
      element.style.v isibility = 'visible';
      }
      }
      </script>
      <style type="text/css">
      #div1 {
      border: 1px solid green;
      }
      </style>


      </head>
      <body>
      <div id="div1"
      onmouseout="if (mouseLeaves(th is, event)) {
      hideElement(thi s);
      }">
      <p>This is a div element which contains child nodes like a paragraph and
      an iframe.
      When the mouse leaves the element completely it should be hidden but
      when the mouse
      enters a child element the div should remain visible.</p>
      <p>
      <iframe src="http://JavaScript.FAQT S.com/" width="100%">
      <a href="http://JavaScript.FAQT S.com/">JavaScript.FA QTS.com</a>
      </iframe>
      </p>
      </div>
      <p>Here you can
      <input type="button" value="show"
      onclick="var div;
      if (document.getEl ementById) {
      div = document.getEle mentById('div1' );
      showElement(div );
      }">
      the div element again.
      </p>


      </body>
      </html>


      --

      Martin Honnen
      Attention Required! | Cloudflare
      http://JavaScript.FAQTs.com/

        Comment

        • Martin Honnen
          #3
          Re: DIV/IFRAME hide/show problem onMouseOut - please help :)



          Martin Honnen wrote:

          [color=blue]
          > function mouseLeaves (element, evt) {
          > if (typeof evt.toElement != 'undefined' && typeof element.contain s !=
          > 'undefined') {[/color]

          Replace that line with

          if (typeof evt.toElement != 'undefined' && evt.toElement && typeof
          element.contain s != 'undefined') {

          to work around an Opera 7 problem.

          --

          Martin Honnen
          Attention Required! | Cloudflare
          http://JavaScript.FAQTs.com/

            Comment

            • Ryh
              #4
              Re: DIV/IFRAME hide/show problem onMouseOut - please help :)

              Martin thank you. You did a great job that helped me a lot. Thanks again.

                Comment

                Previous template Next
                Working...