4

I've implemented the solution found here: https://stackoverflow.com/a/7385673/1766862 to hide a suggest div list if the person clicks outside of the containing div.

I just got a bug report though that in IE 11 clicking on the scrollbar causes the box to close. I tested it on Windows 8.1 with Safari, Chrome, Firefox and IE 11 and IE is the only one causing this behaviour.

JSFiddle showing the bug: http://jsfiddle.net/wfgLohvx/2/

The is() and has() doesn't seem to be including the scrollbars in IE.

JS:

$(document).on('click', '#topics', function() {
    popover('topics', 'results', 0);
});

$(document).mouseup(function (e)
{
    var topic_container = $("#topic_container");

    if (!topic_container.is(e.target) // if the target of the click isn't the container...
        && topic_container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $('#results').slideUp();
    }
});

function popover(element_id, div_id)
{
    var element_offset = $('#'+element_id).offset();
    $('#'+div_id).css({ top: element_offset.top, left: element_offset.left + $('#'+element_id).width()});
    var new_offset = $('#'+div_id).offset();
    $('#'+div_id).show();
}

HTML:

<div id="topic_container">
    <input type="text" id="topics" />
    <div id="results">
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
        <div class="result_row">value</div>
    </div>
</div>

CSS:

#results {
    display: none;
    height: 100px;
    overflow: scroll;
}
.result_row {
    cursor: pointer;
    border: 1px solid black;
}

Single page HTML/CSS/JS:

<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>IE Windows 8 scrollbar error</title>
      <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
      <style type='text/css'>
        #results {
            display: none;
            height: 100px;
            overflow: scroll;
            }
            .result_row {
              cursor: pointer;
              border: 1px solid black;
            }
      </style>
        <script type='text/javascript'>//<![CDATA[ 

        $(document).on('click', '#topics', function() {
            popover('topics', 'results', 0);
        });

        $(document).mouseup(function (e)
        {
            var topic_container = $("#topic_container");

            if (!topic_container.is(e.target) // if the target of the click isn't the container...
                && topic_container.has(e.target).length === 0) // ... nor a descendant of the container
            {
                $('#results').slideUp();
            }
        });

        function popover(element_id, div_id)
        {
            var element_offset = $('#'+element_id).offset();
            $('#'+div_id).css({ top: element_offset.top, left: element_offset.left + $('#'+element_id).width()});
            var new_offset = $('#'+div_id).offset();
            $('#'+div_id).show();
        }
        //]]>  

        </script>
    </head>
  <body>
    <div id="topic_container">
      <input type="text" id="topics" />
      <div id="results">
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
          <div class="result_row">value</div>
      </div>
    </div>
  </body>
</html>
Community
  • 1
  • 1
Jennifer
  • 71
  • 4
  • 1
    I have no trouble with the scrollbars in Windows 7 IE.11 – Yann Jan 13 '15 at 20:41
  • Thanks I just confirmed that on BrowserStack it seems to be limited to Windows 8 and up. – Jennifer Jan 13 '15 at 20:47
  • Can you include more of the HTML, everything from to ? – Eric Caron Jan 13 '15 at 20:59
  • 1
    @EricCaron I've added a full page with the HTML/CSS/JS inline – Jennifer Jan 13 '15 at 21:22
  • @Jennifer Do you notice a difference if you uncheck "Use Smooth Scrolling" (http://windows.microsoft.com/en-us/windows-xp/help/turn-off-smooth-scrolling). I'm working on updating my modern.ie to have a better test of it, so this is just a guess while I wait for the download. – Eric Caron Jan 14 '15 at 16:43
  • @EricCaron I just had a fellow developer test that on his Windows 8 machine and it has the same problem – Jennifer Jan 15 '15 at 20:23
  • Switching from mouseup to mousedown fixed the problem for me. See this stackoverflow answer: http://stackoverflow.com/questions/29787519/jquery-mouse-up-event-didnt-work-with-ie-11-scrollbar – wullinkm May 20 '15 at 14:20

1 Answers1

0

Microsoft has proved to be slow with their fixes. If you need the scroll values now, I'd suggest using the other JS/jQuery function to get scroll values and populate them in the result your get by is() or has() - while you waiting for their response to your bug.

etual
  • 561
  • 1
  • 4
  • 13