CODEWITHSUNDEEP
jqueryhtml
Adam
Adam

Reputation: 20952

jQuery Mouse Events & Slider Issue

http://jsfiddle.net/41sko2db/13/

I've create the above Fiddle to show the issue.

You will see you can click on the "Please Select" and it shows the drop down.

If you click outside the drop down and top menu it hides it (which is the affect I want) - eg: user losses interest and clicks so where else and the menu disappears.

However if you use the slider on the right (CSS overflow: auto;) it also hides it - which I don't want as people can't choose from all the options below.

Any idea what I need to add to allow the right slider to work, remain and allow other options to be seen?

Jquery Below:

$(document).mouseup(function (e) {
    e.stopPropagation()

        var mouseOverJoinSearchCountryDropDownDialog = false;
    var mouseOverJoinSearchCountrySelectTextDropDownDialog = false;
    var mouseOverJoinSearchCountrylistDialog = false;
    var mouseOverJoinSearchCountryTextDialog = false;
    $('#joinCountrySelectIMG').mouseover(function() {mouseOverJoinSearchCountryDropDownDialog = true;}).mouseout(function() {mouseOverJoinSearchCountryDropDownDialog = false;});
    $('#joinCountrySelectTextSPAN').mouseover(function() {mouseOverJoinSearchCountrySelectTextDropDownDialog = true;}).mouseout(function() {mouseOverJoinSearchCountrySelectTextDropDownDialog = false;});
    $('#joinSearchCountryListContainerDIV').mouseover(function() {mouseOverJoinSearchCountrylistDialog = true;}).mouseout(function() {mouseOverJoinSearchCountrylistDialog = false;});
    $('.joinSearchCountryDropdownSelectedSPAN').mouseover(function() {mouseOverJoinSearchCountryTextDialog = true;}).mouseout(function() {mouseOverJoinSearchCountryTextDialog = false;});
    if($('#joinSearchCountryListContainerDIV').is(':visible') && !mouseOverJoinSearchCountryDropDownDialog && !mouseOverJoinSearchCountrylistDialog && !mouseOverJoinSearchCountryTextDialog && !mouseOverJoinSearchCountrySelectTextDropDownDialog) {
        //alert('trigger check');
        $('#joinSearchCountryListContainerDIV').hide();
    }

});

Upvotes: 0

Views: 59

Answers (2)

Tegos
Tegos

Reputation: 422

This is my solution:

var data = [], 
    line='',
    hide = false,
    result;
for(var i=0; i<200; i++) data[i] = 'Data'+(i+1);
var list = $('#joinSearchCountryListContainerDIV');
for(var i=0; i<data.length; i++) line+='<span class="zipEnabled">'+data[i]+'</span><br/>';
list.append(line);

$('#joinCountrySelectTextSPAN').click(function(){
    list.css({top:$(this).offset().top+20, left:$(this).offset().left,width:$(this).width()-1});
    list.show();
    hide=false;
});
$('*').click(function(){
    if(list.is(':visible') && hide) {list.hide();}
});
$(list).mouseleave(function(){
    hide=true;
});
$('.zipEnabled').click(function(){
    result = $(this).text();
    alert('You select:  '+result);
    list.hide();
    $('#joinCountrySelectTextSPAN').text(result);
});

DEMO

Upvotes: 0

oshell
oshell

Reputation: 9123

This event sets all the variables to be checked to false when it is called.

$(document).mouseup(function (e) {
    var mouseOverJoinSearchCountryDropDownDialog = false;
});

Problem is your mouseover events are only triggered, when the something happens with the mouse. So basicly when you click the scroll bar the vars are set to false and no more mouseover-event is triggered.

Here is a little workaround: http://jsfiddle.net/41sko2db/16/

Allthough I am not 100% sure if it fits your needs.

Upvotes: 1

Related Questions