I have a scenario where I am hiding a Div block if I click any where out side that div block.
I am using Internet explorer and testing the application. My code works fine if there is no scroll bar. If there is a scroll bar on the div block then when I click on scroll bar it considers scroll bar not as part of div and it hide the div block. I am trying to keep div block open even if user clicks on scroll bar and do a scroll operation.
var $container = $(".toolbarBlock");
$(document).mouseup(function (e) {
if (!$container.is(e.target) // if the target of the click isn't the container...
&& $container.has(e.target).length === 0) // ... nor a descendant of the container
{
toolbarClose();
}
});
function toolbarClose() {
return $.when(slideOut($container));
}
I would like to post answer so that it would be helpful to others who came across same problem.
I used:
e.target != $('html').get(0) // nor the scrollbar
var $container = $(".toolbarBlock");
$(document).mouseup(function (e) {
if (!$container.is(e.target) // if the target of the click isn't the container...
&& ($container.has(e.target).length === 0) // ... nor a descendant of the container
&& (e.target != $('html').get(0))) // nor the scrollbar
{
toolbarClose();
}
});
function toolbarClose() {
return $.when(slideOut($container));
}
There is no click event for a scroll bar in jQuery. http://forum.jquery.com/topic/click-event-for-scrollbar
However there is a .scroll() http://api.jquery.com/scroll/
You could listen for scroll events and show the container.
So as soon as they click the bar the element would hide, but when they scroll you could show the element again.
Not ideal, but from my research that is the only option.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With