Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have made script with some menus with the submenu. i use jQuery for the submenu slide down (slidetoggle) animation when hover on the menu. so when i hover and then unhover the menu quickly for couple times, then i moved the cursor away from the menu, the slide down(slidetoggle) animation keep playing/looping equal how many times i hover the menu. what i want is how to make the jquery detect the next "hover" only when the previous slide animation is complete.
Plz help me with the code.
You an try something like that:
$('.menu').on('hover', function(){
$('.submenu').stop().slideToggle();
});
Reference
Hard to answer, when no code is provided.
If you are using .animate() function, you need to insert .stop(true) before .animate(), so it will look like this .stop(true).animate();
You can use .stop() on any function with animations.
I guess that is your problem.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have a div following the mouse, to make a custom cursor, but the issue is, then no jquery click listeners on anything works, because technically I'm clicking the "cursor", not what I'm trying to click on, I've tried changing the z-index but that doesn't seem to help,
Any help appreciated.
A div following the mouse is unusual, but if you have to do that use
pointer-events: none;
This will make it so that your div does not catch any pointer events and thus allows you to click through it. I suggest trying to use cursor with a custom image though, if that is an option for you. For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
Simply apply that to whever you want to see the custom cursor (for example your body)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am working on a site http://www.kaniamea.com/resource/
For obvious SEO reasons I am using one html code for both navigation - mobile and desktop. The problem is when you see the site in desktop and you click on one of the left hand navigation links. Then the category the clicked link belongs hides (after the click is clicked).
I am not sure what causes this. I would appreciate some tips how to fix that. Thanks!
You have this code that toggles the inside unordered list (ul) for the parent li item clicked:
$('.main-nav li').click(function (){
$(this).addClass('im-curent');
$("ul", this).toggle(100);
});
Since all the links are inside the main li, it will close the menu. To fix this, you can stop propagation for the inner ones like:
$('.main-nav ul').click(function (e){
e.stopPropagation();
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I need 3 buttons that can toggle between show/hide text. When clicked on the button, the button will get smaller (change css) and slide to another position, so the text can be shown at the buttons previous position. Example below:
jsfiddle.net/dRpWv/1/
The toggle function show/hide text is not the problem. The problem is the function to change the buttons css, when clicked.
The simplest way that I can think of is to toggle a class on the button which has the specific styling you wish to apply when the button is clicked.
In your fiddle, it would simply be adding something similar to this in your toggle function.
$(this).toggleClass('clickedButton');
Here is a fiddle based on yours:
http://jsfiddle.net/sm66aLL1/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I asked a question a few days back, and the link below was the solution in JSFiddle:
http://jsfiddle.net/vineetgnair/pnhxxcsw/11/
Later on, I got another answer that did the work of the previous solution in just 2 lines of code instead of 8-9. Since I'm new to coding, I'm unable to figure out how the new JSFiddle works. If someone could explain it to me, I would be appreciative.
Here is the code and JSFiddle link from the second solution:
var div = $('div').not(':first').hide().end();
$('button').on('click', function() { div.hide().eq($(this).index()).show() })
http://jsfiddle.net/adeneo/pnhxxcsw/13/
Thanks in advance
the first line is very straight forward to read, we're getting all the divs, filtering them to get everything that is not the first child of it's parent, and hiding them, in other words, hiding everything except for first children.
the second line, we are adding a click event listener to buttons, and when we click, we show only the element with an index matching the clicked button
one more thing, just like the comments stated, check the jquery docs, that's the place to go in these cases
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to know the name of jQuery feature. It is, when you add it, you can slide through your page elements, for example, similar feature is slider (with which you can slide through videos and pictures), but I need to slide through blocks, for example I have 3 small blocks (all content inside div), block size is 600 x 300, I need to add arrows to the side of them, and when I press arrow, it fades away current block and all items inside it, and shows next one.
Hope you can help me.
jQuery cycle plugin is a popular and customizable 'slider' or 'carousel'. Just google for jquery sliders or jquery carousel, and you will find many other similar 'plugins'. Many of them have example pages you can look at to see which one you like. And most of them support sliding 'div' block elements.
I think you want jQuery functions. try following any one:
fadeIn(); fadeOut();
toggle();
slideUp(); slideDown(); slideToggle();
carousel();
these are jQuery function. try it.
I hope you will get the solution.