CODEWITHSUNDEEP
javascriptjqueryhtmlcssoverflow
Fossil
Fossil

Reputation: 167

div contents scrolls back up when using overflow: auto in IE 10

I am trying to add multiple input elements and other data inside a div and using overflow:auto for that div (using jquery to show/hide that div)

It works fine in Firefox browser but in IE (10) the scroll bar does come when the elements are more than the height of that div, but when the user uses the scroll bar to scroll down, and then if moves the mouse over to any of the input element or other element in that div to enter data, the div content scrolls back up to the top. So the users cannot access the elements/contents of that div which are below the height of that div

here is the link for the fiddle where you can see the code http://jsfiddle.net/euMJn/1/

code of that html page (as code is required with the jsfiddle link)

Any help or direction would be appreciated

Thank you for you help and time

----code starts below----

<html>
<head>
<title>Div Scroll</title>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css"
        type="text/css" rel="Stylesheet" />

<style>
#outer{
    width:400px;
    height:400px;
    position:absolute;
    left:30px;
    top:30px;
    border-style:solid;
    border-width:1px;
    z-index: 1;
    display:none;
    overflow: auto;

}

#inner{
    width:300px;
    height:300px;
    position:relative;
    left:20px;
    top:20px;
    overflow: auto;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script >
 $(document).ready(function(){  


    $('#trigger').mouseover(function(e){                
        $('#outer').show();                                    
    }); 

    $('#trigger').mouseout(function(){
        $('#outer').hide();
    });

    $('#outer').mouseover(function(){
        $('#outer').show();         
    }); 

    $('#outer').mouseout(function(){
        $('#outer').hide();
    }); 

});     
</script>

</head>


<body>
<button id='trigger' style="background-color:yellow"> Mouse over here</button>
<br/><br/>
<div id="outer"> 
    <div id="inner"> 
        <p>Text above input01</p>
        <label for='input01'>Input 1: </label> <input name='input01' id='inp01' type='text' size='25' value='input' >
        <br>
        <p>Text above input02</p>       
        <label for='input02'>Input 2: </label> <input name='input02' id='inp02' type='text' size='25' value='input' >
        <br>
        <p>Text above input03</p>       
        <label for='input03'>Input 3: </label> <input name='input03' id='inp03' type='text' size='25' value='input' >
        <br>
        <p>Text above input04</p>       
        <label for='input04'>Input 4: </label> <input name='input04' id='inp04' type='text' size='25' value='input' >
        <br>
        <p>Text above input05</p>       
        <label for='input05'>Input 5: </label> <input name='input05' id='inp05' type='text' size='25' value='input' >
        <br>
        <p>Text above input06</p>       
        <label for='input06'>Input 6: </label> <input name='input06' id='inp06' type='text' size='25' value='input' >
        <p>Text above input07</p>       
        <label for='input07'>Input 7: </label> <input name='input06' id='inp07' type='text' size='25' value='input' >
        <p>Text above input08</p>       
        <label for='input08'>Input 8: </label> <input name='input06' id='inp08' type='text' size='25' value='input' >
        <p>Text above input09</p>       
        <label for='input09'>Input 9: </label> <input name='input06' id='inp09' type='text' size='25' value='input' >
        <p>Text above input10</p>       
        <label for='input10'>Input 10: </label> <input name='input06' id='inp10' type='text' size='25' value='input' >      
    </div>
</div>
</body>
</html>

Upvotes: 1

Views: 1590

Answers (1)

technicallyjosh
technicallyjosh

Reputation: 3531

Instead of using mouseout, use mouseleave.

$('#outer').mouseleave(function () {
    $(this).hide();
});

New fiddle here.

If you take a look at jQuery.mouseleave docs you will notice this line.

mouseout fires when the pointer moves out of child element as well, while mouseleave fires only when the pointer moves out of the bound element.

Basically IE decides to reset the visibility whenever you hover over a child element, thus resetting the visibility of the outer div. Other browsers seem to be smart enough that if it's already visible, they don't touch it.

Upvotes: 4

Related Questions