I have a jQuery menu (jQuery 1.4.2 and UI 1.8.6) that I need to drop down when you tab into it with the keyboard. It needs to behave the same with the keyboard as it does with the mouse. When you mouse over it, it drops down, then remove the mouse, it slides back up. However, when you tab into it with the keyboard, it doesn't drop. Here is the code that someone provided to make it drop on keyboard, but I couldn't make work:
$(document).load(function(){
$('#buttonbar').attr('tabIndex', 0).on({
focus: function(){
$("#buttonbar").triggerHandler("mouseenter");
},
blur: function(){
$("#buttonbar").triggerHandler("mouseleave");
}
});
});
Live DEMO
Note: the window needs to be 950pixels or wider for it to show.
Something like this should fix it for you.
$(document).ready(function(){
$('#buttonbar').focus(function(){
$("#buttonbar").triggerHandler("mouseenter");
});
$("#buttonbar #visitor-links .last-item a").blur(function(){
$("#buttonbar").triggerHandler("mouseleave");
});
});
Here is the demo: http://jsbin.com/udobuc/8/edit
Related
How to prevent body scrolling when scroll on Drop down menu.? 1
Dear friends,
actually i'm facing problem in my project. see project
i did horizontal scrolling on this page. its is working smoothly.
but when i scroll on drop down menu the page also scrolling. is there any option to prevent the page scrolling when mouse hover in drop down menu?
adding the script here which i used for horizontal scroll:
<script type="text/javascript">
// By default, swipe is enabled.
$('section').horizon();
// If you do not want to include another plugin, TouchSwipe, you can set it to false in the default options by passing in the option as false.
//$('section').horizon({swipe: false});
$(document).on('click', '.go-to-2', function () {
$(document).horizon('scrollTo', 'section-section2');
});
</script>
please help me to find out Any solution...
If you want to prevent the text area below Emporio Kannur... from scrolling, try adding a mousewheel event listener and stop event propagation, so it does not bubble up to the horizon jquery plugin.
Something like this:
// .work_detail_wraper contains the text you down want to see scrolling
$('.work_detail_wraper')
.on('mousewheel DOMMouseScroll' , function(e) {
e.stopPropagation()
})
You can also take a look at the horizon plugin's code, and adapt it so it doesn't scroll on certain events.
You can use 'stopPropagation()' for this
$('.section-section2').scroll(function(e){
e.stopPropagation();
})
I need to remove class from li tag when i click or tap on the navigation arrow in flexslider. It is working perfectly in all my browsers but i can't able to produce the same in iphone and ipad.when i click on navigation arrow slider moves correctly using flexslider plugin code but alert in my code comes rarely not continuously
$(".flex-direction-nav a.flex-next,.flex-direction-nav a.flex-prev").on('click', 'tap', function () {
alert("hi");
$(".repeat-cont li.active-slide.open").removeClass("open");
});
Do you have any special properties for mobile or any idea on this code?I tried touchstart instead of tap.
The two events should be combined like "click tap" instead of "click", "tap":
$(".flex-direction-nav a.flex-next,.flex-direction-nav a.flex-prev").on('click tap', function () {
alert("hi");
$(".repeat-cont li.active-slide.open").removeClass("open");
});
Also, be sure you are using jquery mobile if you are using tap()
I got a dropdown with a fancy scroll in it. Fancy Scroll is a really simple library that replaces the default scroll. And just by adding some HTML markup, the scroll works without even having to initialize it using javascript.
After debugging to see what was going on, I found that bootstrap is making my dropdown hide when clicking on the drag.
The event is 'hide.bs.dropdown'.
By now, I have attempted so many things, managed to make it work, but the only problem is, whenever I start dragging, due to the stopPropagation() function, it will keep scrolling nan-stap even though I released the mouse click.
These are a few things I've tried while googling, thing is, none of the solved answers involved this case scenario, having a scrollbar in it:
$('.dropdown-menu input, .dropdown-menu label, .thumb', element).click(function(e) {
e.preventDefault();
e.stopPropagation();
});
$('.thumb', element).on('mouseup', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
$('.dropdown-menu .scrollbarY', element).click(function(e) {
e.stopImmediatePropagation();
});
$(element).on("hide.bs.dropdown",function(e) {
e.preventDefault();
return false;
});
The behavior I'm looking for is, clicking on the scroll drag (.thumb) wouldn't close the dropdown, but if there's a click on one of the items or away from dropdown, it should close it.
Okay, after a few more hours of struggling, a combination of the tests I made, solved the issue.
If anyone encounters the same problem, here's what I did:
(scrollbarY is the draggy parent)
$('.scrollbarY', element).click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
Hope it works for everyone.
Introduction:
Hello everyone. I am trying to do a menu, but i have problem with mouseenter/mouseleave events.
What i have so far:
$("#icon").click(function() {
$("#invis").css("display", "block");
$("#icon").bind("mouseleave", function(){
$("#invis").css('display', "none");
}).bind("mouseenter", function(){
$("#invis").css('display', "block");
});
$("#invis").bind("mouseleave", function(){
$("#invis").css('display', "none");
}).bind("mouseenter", function(){
$("#invis").css('display', "block");
});
});
So far, i tried this. My point is to click on the "icon", and this click would show a menu/another, hidden element. Now i want to keep it open as long, as someone keeps mouse over "icon" or actual menu. But with code i provided, once i leave my mouse and then enter again on "icon", it still keeps onmouseenter event, and menu will appear again. I know i could unbind onmouseenter event, but then once i drive off menu, onto icon, my menu would get closed, and i don't want that.
Simplest example i could think of: http://jsfiddle.net/tzzqM/5/
Question
How to make "menu" open on click event, and then keep it open as long as someone keeps mouse over menu or "icon" (both of them). Once mouse leaves area of both, menu closes, and to open it i need to click once more on "icon".
Is there a another way to do this?
On mouse leaving the object, check if the mouse is still either on the menu or on the menu-button, if not, hide the menu. Basically, you're binding the event mouseleave to both elements and then checking the length of the selection. If it's 1, you're either on the menu or the button, this makes the exiting the menu button into the menu itself, not trigger the "hidding" part of the code, if the selection length is 0, then we are not over any of those elements and we hide it.
$("#icon").click(function() {
$("#invis").css("display", "block");
$("#invis,#icon").bind("mouseleave", function(){
if($("#invis:hover,#icon:hover").length === 0){
$("#invis").css('display', "none");
}
})
});
There's a fiddle here.
Or the way I would write it if I had to start from scratch (just the jQuery part), since remember that you'd be jumping into the DOM pool less times and should be a little bit more efficient, although it's as functional as the first one. Here's the fiddle
var icon = $("#icon"),
menu = $("#invis");
icon.click(function() {
menu.show();
$.merge(icon,menu).bind("mouseleave", function(){
if($("#icon:hover,#invis:hover").length < 1) menu.hide();
});
});
Or using the suggestion from jhummel we can access the id of the new view that has the hover, and check if it's one of the two that we want to monitor. This is great because it prevents us from jumping into the pool once more, this gives us a marginal performance boost, here's the fiddle.
var icon = $("#icon"),
menu = $("#invis");
icon.click(function() {
menu.show();
$.merge(icon,menu).bind("mouseleave", function(e){
if($.inArray(e.relatedTarget.id, ["icon","invis"]) === -1){
menu.hide();
}
});
});
Related docs:
jQuery.merge
Stop jumping into the pool!
jQuery.inArray
event.relatedTarget
When you use mouseover or mouseleave events, the event object in jQuery will have a relatedTarget property. You can check that property to see if the mouse is entering the other element.
$("#icon").on('click',function() {
$("#invis").show();
}).on('mouseleave', function(e) {
if(e.relatedTarget.id != 'invis') $('#invis').hide();
});
$('#invis').on('mouseleave', function(e) {
if(e.relatedTarget.id != 'icon') $(this).hide();
});
jquery relatedTarget docs
Here is a jquery drop down i am trying to make: http://jsfiddle.net/qYMq4/2/
Basically i just want a div to drop down when a user mouses over a link and stay down unless i mouse away from the link or over the dropped down div and then away from the div. So it is almost like a standard drop down menu that you see in alot of website navigation, but this just has a bit of animation so it doesn't appear instantly.
I'm finding it terribly difficult, as you can see it doesn't quite function correctly. Any adivce? Thanks for your input.
You can see a working demo of the following here.
I prefer mouseenter[DOCS] and mouseleaveDOCS in this situation as it behaves better when hovering over children. I restructured your HTML so that the hover is over the parent div of the link, so that when you hover over the gray area that slides down it's not considered a mouseleave as follows:
<div class="mask-layer">
<a class="top-link-cart" href="http://www.w3schools.com/">Test</a>
<div class="slidedown">div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. </div>
</div>
I then restructured your Javascript to use .mask-layer for the hover events, and simplified the animation with slideUp[DOCS] and slideDown[DOCS] as follows:
$('.slidedown').hide();
$('div.mask-layer').mouseenter(function() { // enter animation
$('.slidedown').slideDown(600);
}).mouseleave(function() {
setTimeout(function() {
$('.slidedown').slideUp(600);
}, 200);
});
You can use the slideDown() and slideUp() methods - they're a littler easier to work with. You'll also want to use the windowSetTimeout. A lesser known feature is that it returns a number which will allow you to cancel the timeout. You can use that to keep the div open in the event the user scrolls down onto it. Some inspiration for this approach borrowed from here: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
$(document).ready(function() {
$('.slidedown').hide();
var timeout = 500;
var closetimer = 0;
$('a.top-link-cart, .slidedown').mouseover( function(){
cancel_timer();
$('.slidedown').slideDown(1000);
});
$('a.top-link-cart, .slidedown').mouseout( function(){
closetimer = window.setTimeout(function(){$('.slidedown').slideUp(1000)}, timeout);
});
function cancel_timer(){
if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;
}
}
});
http://jsfiddle.net/P567S/7/
if you are looking for a click action dropdown menu here it is
//toggle navbar on click.
$('//my link').click(function(event) {
event.stopPropagation();
$('//sub menu container').toggle();
});
//to close dropdown menu when clicked out it.
$(document).click(function() {
$('//sub menu container').hide();
});
hope it works for you..... !!