Scroll up menu style with hover - javascript

Need help.
I have make some menus with vertical scroll on hover event, there are 3 menus (home,download,contact). The Scroll effect on hover event has worked, but on click event some bug occur (some menus can't scroll down/scroll to grey side with animation) when other menus has been clicked. the bug occur when i clicked menus in some sequence:
1. download then contacts
2. contact then download
3. contact then home
this is my code in jsFiddle
and when i run the code on firefox with firebug some error appear after i do mouse over and mouse out on clicked menu.
Error Print screen:
Thank for advance :)

The reason behind the freezing of the scroll event, when you click on a menu is that, after you click , the menu becomes disabled, hence your background-pos never changes and so , the method css(bg-pos) becomes undefined and you are again trying to do (undefined).split(), which is not possible and hence the animation freezes.
What you need to do is on click, you need to enable the menus again. This is done through this code:
$.fn.stopBG = function (x, y, speed) {
if(event.which == 1){
$("#home").removeClass('disable1').addClass('enable1');
$("#download").removeClass('disable2').addClass('enable2');
$("#contact").removeClass('disable3').addClass('enable3');
}
var pos = this.css('background-position').split(' ');
I have updated your fiddle, see this one : http://jsfiddle.net/VSTAm/3/
I have tried this fix in chrome...it works properly there.

Related

BX slider auto and click issue

I have made this slider with auto slide show. I also need manual controls working well on it, even if used with regressively slide switching. Problem comes when I click on labels for navigation very fast and randomly, it gets stuck at some point and doesn't switch to clicked slide instead it moves to its next slide. Please refer this fiddle: http://jsfiddle.net/Bhumika107/zbrcww6a/10/.
I also tried stopping auto and then replaying it on click event of labels:
$(document).on('click','.bx-pager-link',function() {
slider.stopAuto(); // stops auto on click of pager
slider.startAuto(); // starts auto on click of pager
});
But it doesn't make any difference.

Jquery Remove Clear Top CSS attribute

I am creating a hover over button, once hovered it will scroll up to unreal more content over my slideshow, but when I hover over the button it pulls up but wont come back down.
Click here to see live, hover over Contact Our Team Button on slider
jQuery(".buttontwo").hover(
function(e){
jQuery('.buttontwo').animate({top:'0px', bottom:'auto'}, 200)
},
function(e){
jQuery('.buttontwo').animate({bottom:'75px', top:'auto'}, 200)
}
);
Any ideas guys?
Thanks
Try adding a fixed value to the top property in the second function().
However you should be aware that as soon as you hover the button and the animation starts the second function will be triggered since you're not hovering the button anymore.
You might have to find a different way to animate that, perhaps adding aonMouseEnter / onMouseLeave event to the button's container.

How to disable all other events in jquery when animation is in progress

I am writing here againg, because I have some problems with script in my page. I had one problem with menu focus and I write it a week or two ago at this forum, but the awesome script which suggest me one user has one bug and I don't know how to solve it. I have tried a lot's of plausible solutions, but problem still persists.
Here is code at Fiddle, which simulates my problem: http://jsfiddle.net/PRZYN/15/
$(document).ready(function() {
$('#handle').mouseenter(slideIn);
$("#box").mouseleave(function() {
$(this).animate({
left: "-=180px"
}, "fast");
$('#handle').mouseenter(slideIn);
});
$("[name='skin']").mouseleave(function(e) {
e.stopPropagation();
});
});
function slideIn() {
if ($("#box")) $("#box").animate({
left: "+=180px"
}, "slow");
$(this).unbind("mouseenter");
}
As you can see, there is one div (blue-green one which presents left menu pop-up), which show when div get focus and hide when div lost focus.
Problem in this script is, that when are this two divs in animation state and If user very fast move mouse through animation of front end animation and backend the script gets confused and menu start showing and hiding and it's very annoying. Also there are some other ways when menu gets the same bug but I didn't located it very well. I think, that problem also shows when user hover this div and mouse stop at some place - which is different from time to time.
I have located problem somehow, but I don't know how to solve it. I need to disable all other events on this div (but not .animation()) when menu is in animation state and on elements when mouse is not over div and then enable it again when animation complete and user wants again open or hide menu.
I hope, that you understand my question and I will be very happy if someone could help me on that how to solve problem.
Regards,
Miha
You can use .stop() to cancel your animation queue and to prevent the animation from running after the user has stopped interacting with the element. Also, it's better to used fixed values for left, as using += and -= will cause the box to be incorrectly aligned after rapidly mousing in and out of the container. ie use values such as "-180px" and "0px" instead of "-=180px" and "+=180px".
JSFiddle: http://jsfiddle.net/PRZYN/16/

jQuery UI menubar, position submenu absolute left

I have created a jQuery UI navigation menu, using the menubar widget. It works how I expected except I would like it to behave slightly differently. As you can see here http://jsfiddle.net/hcharge/DebVr/ the submenu expands out and is positioned relative to the link that was clicked.
I would like it to expand out and stick to the left of the navigation bar, no matter which link was clicked, the submenu will always stay the same width. Like this image...
I've tried setting a position relative to the container and absolutely positioning the submenu, however I think that jQuery UI positioning is overriding this. Any advice would be great, cheers.
Edit: this needs to be done with JS as it has to be clicks and not hover actions that trigger the dropdowns
Why don't you do it all only with CSS?
See http://jsfiddle.net/DebVr/8/
Note: the background is blue in order to see the white borders.
Edit:
If you want some functionality, you can add it later, but I think that the basis should be with CSS.
See my code with some functionality here: http://jsfiddle.net/DebVr/11/
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabindex=index+1;
});
$('#bar1>li>a').focus(
function(){$(this).siblings('ul').show();}
);
$('#bar1>li>a').blur(
function(){$('#bar1>li>ul').hide();}
);
Edit 2:
If you want to hide again the submenu when clicked, use the following code:
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabIndex=index+1;
});
$('#bar1>li>a').focus(function(){
$(this).siblings('ul').addClass('show');
});
$('#bar1>li>a').mousedown(function(){
$(this).siblings('ul').toggleClass('show');
});
$('#bar1>li>a').blur(function(){
$(this).siblings('ul').removeClass('show');
});
And CSS:
#bar1>li>ul.show{
display:block;
}
See it here: http://jsfiddle.net/DebVr/16/
Edit 3:
In the code above, I replaced obj.tabindex with obj.tabIndex, and updated the jsfiddle.
The problem is that if you click on the submenu, the anchor loses focus and then the submenu dissapears. On Chrome it can be easily fixed setting the focus event to #bar1>li instead of #bar1>li>a, but then the event doesn't work on firefox... I'm working on a solution, but meanwhile you can use http://jsfiddle.net/DebVr/16/.
Edit 4:
Finally, the fixed code: http://jsfiddle.net/DebVr/18/
It works on Chrome, Firefox and IE.

Automatically showing div on mouseover

This is probably a simple problem I'm having, but for the life of me, I can't seem to figure it out. If any of you could help me with this, I would be much obliged.
I'm using JQuery to make a menu appear when a user hovers over a certain div. The menu will be displayed on the top left of the div.
I got this to work, but when I try to click on a menu item of the div that appeared, the div disappears again, because the mouse is technically not over the div, but over the menu.
In the example below, "#blockMenu" is the menu that dynamically appears. I fade the current div ($this)) out a bit, to emphasize the menu as well.
I use the following code to make this happen:
$("div.editable").hover(function () {
$(this).fadeTo(500, 0.25);
$('#Menu').css("position", "absolute");
$("#Menu").css("top", $(this).offset().top);
$("#Menu").css("left", $(this).offset().left);
$("#Menu").css("zIndex", "10000");
$('#Menu').show();
}, function (e) { // on mouseout
$(this).fadeTo(500, 1);
$("#Menu").hide();
});
I want the menu to disappear when the cursor leaves the div, while the div remains faded out when the cursor is on the menu. When the cursor leaves the menu AND the div at the same time, the div should fade back in and the menu should disappear.
Does anyone have an idea of how I could edit my code to make this work correctly?
Thank you very much for any help you can give me.
Just use the :hover pseudo class, that's likely to help the situation. You'll lose animation effects, but it could sure make things easier, and take javascript out of the picture
Add a hover function for the menu and set some state when the mouse is hovering over the menu and only take the menu down if the mouse is not over the div AND not over the menu.

Categories