I have a language selector on the top of my website, when I click it, it should show all the languages and when I click on the body it should disapear. Now the problem I have is that sometimes it just works perfect, but sometimes it doesn't work at all. On my mobile it more often doesn't work than it does.
This happends random, every time just refreshing the site will make it work again.
$('.topHeader ul li ul').hide();
$('html').on('click touchstart', function() {
$('.topHeader ul li ul').hide();
});
$('.topHeader').on('click touchstart', function() {
event.stopPropagation();
});
$('.topHeader ul li a').on('click touchstart', function() {
$('.topHeader ul li ul').toggle();
});
Jsfiddle:
https://jsfiddle.net/5gcdsjox/
I'm not using bootstrap, I just used some of the classes ;)
The problem is that the list items take up 100% of the page's width, and you don't realize you are clicking on them rather than the area encompassed by the html selector.
Simply add this css, and it will illustrate what I mean...
.topHeader ul li ul li {
background:azure;
}
A quick work-around is to make it that, by clicking on the list items you also hide the displayed items:
$('html').on('click touchstart', function() {
$('.topHeader ul li ul').hide();
});
// I have added this extra handler
$('.topHeader ul li ul li').on('click touchstart', function() {
$('.topHeader ul li ul').hide();
});
Edited jsfiddle: https://jsfiddle.net/0j9h1r2m/1/
Related
I need to make a menu ul li that toggles open and close with some javascript. I have code as a link.
Section
kategori
Section
kategori
kategori
It's really the nested ul you want to be showing, when you click the parent li, so your click handler was wrong, slightly. I also updated some styles to get this to work a little better.
https://jsfiddle.net/8qb468bu/1/
$(document).ready(function(){
$('#categories li').click(function() {
$(this).find('ul').toggleClass('selected');
});
});
I want to slideUp all li element and slideDown li elements under current ul element
$(document).ready(function(){
$("li").slideUp();
});
$(".nav").hover(function(e){
$(this).children("li").slideDown();
$("li").slideUp();
e.stopPropogation();
});
this is the fiddle
Problem is it is sliding up everything in the end
What is the mistake i have done?
You need to target the LIs of all other navs excluding the current one, so use not:
e.g.
$(".nav").hover(function (e) {
$(this).children("li").slideDown();
$(".nav").not(this).find("li").slideUp();
e.stopPropogation();
});
JSDFiddle: http://jsfiddle.net/TrueBlueAussie/kcGZJ/46/
As you are having issues of overlapping actions, the usual "fix" is to stop prior animations so they at least do not chain and run to completion:
$(".nav").hover(function (e) {
$(this).children("li").stop(true,true).slideDown();
$(".nav").not(this).find("li").stop(true,true).slideUp();
e.stopPropogation();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kcGZJ/55/
You can separate your hover() event hook in to two calls, one for mouseenter and another for mouseleave. On mouseenter you want to slideDown() the li in the current ul. In the mouseleave, you want to make them all slideUp(). Try this:
$(".nav").hover(function () {
$(this).children("li").slideDown();
}, function() {
$("li").slideUp();
});
Updated fiddle
According to your code $(this).children("li").slideDown(); makes all li to slide down. And, $("li").slideUp(); will make all li slideup!!
Please do
$(".nav").hover(function (e) {
$(".nav").not(this).find("li").slideUp();
$(this).children("li").slideDown();
e.stopPropogation();
});
refer jQuery not
I added a class to fix this issue
$(document).ready(function(){
$("li").slideUp();
});
$(".nav").hover(function(e){
$("li").removeClass();
$(this).children("li").addClass("current").slideDown();
$("li:not(.current)").slideUp();
e.stopPropogation();
});
Fiddle link
I have set of slides and I want to enlarge a photo when a mouse enter on to a slide image.
When I bring the mouse over images all of the images enlarge to the order which I brought the mouse. How I can force jquery to only excete the last mouse enter event and cancel all history mouse enter events?
This is my jquery code.
$(document).ready(function(){
$("#hoverslider ul li").bind("mouseenter",function(){
$(this).animate({
width:"500px"
},"slow");
$(this).addClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"141px"
});
})
$("#hoverslider ul li").bind("mouseleave",function(){
$(this).animate({
width:"213px"
},"slow");
$(this).removeClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"213px"
});
});
});
Please help me to go through this. Thanks!!
You could initially stop all the animations in the mouse enter and animate the image where the mouse is currently in, But keep in mind that you should not stop the animations (all the elements, not the individual) before starting it in the mouseleave, Because it will help the element to revert back to the older state.
WORKING DEMO
Try this out,
$(document).ready(function(){
$("#hoverslider ul li").bind("mouseenter",function(){
$("#hoverslider ul li").stop();
$(this).stop().animate({
width:"500px"
},"slow");
$(this).addClass("active");
$("#hoverslider ul li:not(.active)").stop().animate({
width:"141px"
});
})
$("#hoverslider ul li").bind("mouseleave",function(){
$(this).stop().animate({
width:"213px"
},"slow");
$(this).removeClass("active");
$("#hoverslider ul li:not(.active)").stop().animate({
width:"213px"
});
});
});
You can use setTimeout() to trigger enlarge animation. In mouseenter event handler use clearTimeout() to cancel previous animation if it hasn't already started.
This way quick mouse move won't trigger all images to enlarge.
I'm not fully understanding your question, but it seems that you could use the hover method this way
$( "#hoverslider ul li" ).hover(
function(){
$(this).animate({
width:"500px"
},"slow");
$(this).addClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"141px"
});
},
function(){
$(this).animate({
width:"213px"
},"slow");
$(this).removeClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"213px"
});
}
);
See it online
http://jsfiddle.net/augusto1982/At8XR/
If this is not what you need, please, let me know and I'll fix it.
You can use underscore helper method debounce
http://underscorejs.org/#debounce
This will create a wrapper of your callback, and only call it once every x seconds while you still call it. That means, that you can have many mouse enter and the method is only going to be called once, and only after x seconds that no mouse enter is registered the function is ready to be called again.
You should use jQuery's on method to add events, rather than the older bind method. You can then disable event handlers using the off method.
I have created 3 links which when hovered over fade, I have also added a click event that when clicked adds the class 'active' and then i want to remove the class when clicked again. I have read a few posts that seem to suggest that removeClass come before addClass but im not sure why. Also when I click the link and the addClass is implemented I would also like to disable the fadeTo on this?
If anyone could explain each of these processes that would be great as Im trying to learn jQuery.
Code is here http://jsfiddle.net/kyllle/FtUdN/
Try this for the click:
$('#nav li a').click(function(){
$(this).toggleClass('active')
});
Fiddle: http://jsfiddle.net/maniator/FtUdN/3/
Click here to see a working demo: http://jsfiddle.net/rVhte/
$('#nav li a').toggle(
function() {
$('.active').removeClass('active');
$(this).addClass('active');
$("#nav li a").unbind('mouseenter mouseleave');
}, function() {
$(this).removeClass('active');
$('#nav li a').hover(function() {
$(this).fadeTo(200, 0.5).end();
}, function() {
$(this).fadeTo(200, 1.0).end();
});
});
Edit: disabled mouseover events after a link is clicked
You can use the .toggleClass method. In your hover handlers, you can use the hasClass method to check if you should fade or not.
Updated fiddle: http://jsfiddle.net/rfvgyhn/FtUdN/13/
Can't find a simple solution to this, I know it's easy and I've tried a few things but I can't quite get it to work. I'm currently working with a sidescrolling site and I want every time you click an image (contained in an li) it scrolls to the next li. I have jQuery plugin localscroll so it smoothly goes from one to the next, and that's working. I need to now write a code that triggers jQuery to utilize the localscroll function and go to the next li. Right now I have this, but I know it's not right:
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(this).next(li).localScroll();
});
});
Accoding to the ScrollTo examples, you need to do this:
$(container).scrollTo(element);
e.g.
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(window).scrollTo($(this).next('li'));
});
});
After reading the documentation for this here, I figured out the correct of way of using it. Let us say, you the .wrapper element as the one overflowing or in which you want to scroll. You can do the following.
$(document).ready(function () {
var gallery = $('.wrapper ul li')
$(gallery).click(function() {
$('.wrapper').localScroll({
target:$(this).next('li')
});
});
});