I'm trying to deal with some sort of toggle view effect on a HTML unordered list.
What I'm trying to do is switch DIV views inside a LI, using jquery (not jquery mobile), when I touch it on a touch screen device and restore view when tapping somewhere else outside the current LI.
this is a HTML example:
<ul>
<li class="item1">
<div class="div1">Info</div>
<div class="div2" style="display:none;">Tools</div>
</li>
<li class="item2">
<div class="div1">Info</div>
<div class="div2" style="display:none;">Tools</div>
</li>
<li class="item3">
<div class="div1">Info</div>
<div class="div2" style="display:none;">Tools</div>
</li>
</ul>
So basically if I tap on "item2", "div1" should hide and "div2" should be visible, inside "div2" are some buttons that you can interact with. But then, when I touch outside "item2", "div1" should be visible again and "div2" should hide.
I tried using nouseenter and mouseleave with jquery, but it causes a mess when you try to scroll or tap the other LI elements in the same list, also tried using toggle, but so far no luck. Now I can't find a simple but effective way to achieve what I want, hope you guys can help me with this.
Thanks!
EDIT:
Here is a working example that doesn't work properly on touch devices http://jsfiddle.net/T5HMt/44/
As per my understanding you want corresponding div2 to show and to hide div1 when li is tapped (example- On tap event on "item2", "div1" of "item2" should hide and "div2" of "item2" should be visible). And you want to show "div1"and hide "div2" only when user taps somewhere outside the li (outside any LI mentioned in your question).
Please check this code if it helps you.
$(".item1, .item2, .item3").click(function(){
$(this).children(".div2").css("display", "block");
$(this).children(".div1").css("display", "none");
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).parents().is('.item1') && !$(target).parents().is('.item2') && !$(target).parents().is('.item3')) {
$(".div2").css("display", "none");
$(".div1").css("display", "block");
}
});
Working fiddle - http://jsfiddle.net/Ashish_developer/5jpyzkmt/
In the fiddle I have given border to LI just to illustrate it.
Well it looks like I found a way to solve my own problem with a solution very similar to the one provided by Tushar Raj. Instead of displaying the hidden div on mouse over I did it on a click event and then hide it on mouse leave.
The thing is that mousenter triggers two things at the same time on touchscreens, the first thing is a 'mouseenter' event and then a 'touchstart' event, so if you have links inside the div that is being displayed on the mouseenter event, they will also be 'clicked'.
$(document).on({
click: function () {
$(this).find('.main').hide();
$(this).find('.second').show();
},
mouseleave: function (event) {
$(this).find('.main').show();
$(this).find('.second').hide();
}
},'.search');
And a working example it works as expected on touch screens
Thanks to everyone for helping me out
Try hover . It should work for touch devices too .
$('.item1,.item2,.item3').on('hover',function(){
$(this).find('.div1').hide();
$(this).find('.div2').show();
},function(){
$(this).find('.div1').show();
$(this).find('.div2').hide();
});
Related
Sorry for the question title, I really didn't know how to summarise it a short description.
Essentially I have got a <ul> which has my navigation links. However in one of the <li> links is my custom dropdown shopping basket to give the user a preview of their items.
Now when I hover over the element , I want it to change the basket from display:none to display:block making it visible. But with my code, as soon as I leave the hovered element to click on an item. The dropdown disappears because I'm no longer hovering over the element I defined in my jQuery hover function.
For example (quick dummy code)
$('.hover-on-me').hover(function(){
$('.hover-open').show();
},function(){
//This right here hides the dropdown
$('.hover-open').hide();
});
Now I'm not the bets at javascript/jQuery. I have tried to say in the function, if the mouse is still on the navigation bar , don't hide it or if the mouse is on the shopping basket then don't hide it. I thought this would let me move from the hover element, past the navigation bar and onto the drop down menu but it doesn't work. as the element then stays open and doesn't close when i leave the area.
Here is a simple jsfiddle demonstrating my problem.
Thanks!
I think there is mistake in your class name only.
jQuery Code :-
$('.hover-on-me').hover(function(){
$(this).parent("li").addClass("active");
}, function(){
$(this).parent("li").removeClass("active");
});
Add this to you CSS Code :-
ul li.active{display:inline-block;}
ul li.active .hover-open, ul li .hover-open:hover{display:block;}
Can you please try these.
the hover syntax will look like this.. $(selector).hover(inFunction,outFunction)
and try to modify your script like this..
$('.hover-on-me').hover(
function(){
$('.hover-open').show();
},
function(){
if(!$('ul').is(":hover") || !$('.hover-open').is(":hover")){
$('.hover-open').hide();
}
}
);
OR
use mouse event function..
$( ".hover-on-me" )
.mouseenter(function() {
$('.hover-open').show();
});
$( ".hover-open" )
.mouseleave(function() {
$('.hover-open').hide();
});
for further details refer here..https://api.jquery.com/hover/#hover2 and https://api.jquery.com/category/events/mouse-events/
I'm working to make a couple buttons to change the theme of a website on click. They work on the main page, but when I tried to move them to the second page, they don't work anymore. The click isn't even being recognized at all.
$(document).ready(function(){
$(document).on("click", "#warm", function() {
console.log("Clicked!");
$(b).addClass('color-red');
$(li).addClass('color-red #pages li');
$(h1).addClass('color-red h1');
$('#pages').addClass('color-red #pages');
});}
Here is the html that goes with it
<div class="col-md-4 text-center">
<ul id="colors">
<li id="warm">
Warm
</li>
<li id="cool">
Cool
</li>
</ul>
</div>
The cool function is exactly the same as the warm, except it uses removeClass instead of addClass.
$(document).ready(function(){
$(document).on("click", "#warm", function() {
console.log("Clicked!");
$(b).addClass('color-red');
$(li).addClass('color-red #pages li');
$(h1).addClass('color-red h1');
$('#pages').addClass('color-red #pages');
});}
WOAHHH Back it up partner. First you dont ever want to bind to document, UNLESS you are creating future events. Since you are using the id selector, you should only have 1 of those on the page, which you can rebind if you rebind that particular id to the page. You dont want to blind to the document because it is quite heavy or something. jquery has to parse the entire DOM everytime there is an html change to check if you added another "#warm" (in your example) to see if it needs to create another event binding to that element.
So first off your code should look like this
$(document).ready(function(){
$("#warm").on("click", function(e) {
console.log("Clicked!");
$(b).addClass('color-red');
$(li).addClass('color-red #pages li');
$(h1).addClass('color-red h1');
$('#pages').addClass('color-red #pages');
});}
now time for some clarification, what do you mean you "move them to the second page"? What code in there says you are moving them ? What is the second page?
So I have looked at a bunch of examples and still cannot seem to figure this one out. I have an element that I am hiding "display:none" until it is expanded by a link using jQuery slideToggle. Working but I need the focus to go to the new element div. I've tried a bunch of examples and nothing seems to be working so I'll post it here.
Here is the fiddle:
JS FIDDLE
So on click of this link here:
<div><p>Blah Blah <a id="whyDivLink" class="staticLinkHelper" title="Wblah blah bl title" style="color: #8f0222; text-decoration: underline">Click Me?</a></p>
</div>
I am trying to do two things, well three but two would be marvelous.
1. Scroll to this DIV which is just a bit further down the page.
2. Focus on the text that is now showing.
Apparently because the node is hidden, then it will not focus to it or something to that affect and it has nothing to scrollTo or when I have tried it just scrolls all the way to the top. But I have a fixed header so that does not work because then it is just hidden. So what I have now is basically working and scrolling to the div and from what I can tell... focusing on it. But I need to set it a ways from the top and when I try it breaks the scrolling. Any one see what I am doing wrong?
$(function() {
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
$("#whyDiv").slideToggle("slow");
});
});
Any help would be appreciated
Looks like when you apply display:none initially to the div, clicking on the a link won't lead user to the targeted div anymore. To fix this, you can try using code to hide the div initially using slideToggle, of course the initial state of the div is display:block, slideToggle will hide it for you instead of setting display:none initially while clicking on the link will work expectedly (jump to the targeted div).
JS:
$(function() {
$("#whyDiv").slideToggle("slow"); //add this line to hide it initially
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
//append .focus() to focus the text
$("#whyDiv").slideToggle("slow").focus();
});
});
Updated Demo.
This seems like a pretty easy one, but I couldn't solve my issue by reading the related questions here on SO.. so here's mine. I have:
<ul class="main-menu">
<li>Letters</li>
<li>Numbers</li>
</ul>
<ul class="sub-menu hidden">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
I want .sub-menu to appear on mouseover of .main-menu, and keep visible while the mouse is over both .main and sub.
$(".main-menu, .sub-menu").hover(
function(){
$('.sub-menu').hide().removeClass('hidden').slideDown('fast');
}, function(){
$('.sub-menu').slideUp('fast');
}
);
But mouseout is fired when I mouseout of main-menu, even though I mouseout of it into sub-menu, so the sub-menu is hidden.
Any suggestions? Restructuring the HTML is not an option, though.
The following assumes you have a second sub-menu to go with the "Numbers" main-menu item, something like I've shown here: http://jsfiddle.net/aY7wW/ - and further assumes that when you said "Restructuring the HTML is not an option" you meant that I couldn't even suggest adding attributes to associate each sub-menu with its main-menu item. To work within this restriction I've used the main-menu li element index to relate to the sub-menu ul element index (obviously this works only if the sub-menus are defined in the same order as the corresponding main-menu items). If you could add some id attributes or something it would simplify the code somewhat, but anyway:
var timerId,
$mainMenuItems = $(".main-menu li"),
$subMenus = $(".sub-menu");
$mainMenuItems.hover(
function(){
clearTimeout(timerId);
$subMenus.slideUp('fast');
$($subMenus[$mainMenuItems.index(this)]).hide()
.removeClass('hidden')
.slideDown('fast');
}, function(){
var i = $mainMenuItems.index(this);
timerId = setTimeout(function(){$($subMenus[i]).slideUp('fast');},500);
}
);
$subMenus.hover(
function() {
clearTimeout(timerId);
},
function() {
$(this).slideUp('fast');
}
);
The basic idea is to use setTimeout() to delay hiding the sub-menu on mouseout from the main-menu. This gives you time to move the mouse over the sub-menu, and if you do the timeout is cleared so it won't be hidden. Then when you move the mouse off the sub-menu it is hidden. But allowing for movement of the mouse just between the different main-menu items, on initial hover we also clear any outstanding timeout and hide previously shown sub-menus so that only the correct sub-menu will show. I've used a delay of 500ms, but obviously you can set that to whatever feels natural for you.
Working demo: http://jsfiddle.net/aY7wW/
Try putting both the main and sub menus in a div, and put the hover event on the div.
How about something like:
$(".main-menu").mouseover(function () {
$('.sub-menu').slideDown('fast').click(function (){
$(this).slideUp('fast');
});
});
I have this menu http://jsbin.com/useqa4/3
The hover I think works correct, but what I want is the normal: when the user's cursor isn't on the "Solution" item or on the submenu then I want the div #submenuSolutions to return in "display:none".
How can I achieve this?
If you read the jQuery api more carefuly you will see that the hover function can take handle two events http://api.jquery.com/hover/
$("document").ready(function() {
$("#menuSolutions a").hover(function () {
$("#menuSolutions").addClass("menuHover");
$("#submenuSolutions").show("3000");
},function() {
$("#menuSolutions").removeClass("menuHover");
$("#submenuSolutions").hide("3000")});
});
This will work only if your menu is a suckerfish menu.
See Demo
Just added this code to hide it back when mouse leaves it:
$("#submenuSolutions").mouseleave(function(){
$(this).hide();
});
Since submenuSolutions is the id of your panel, you can use the mouseleave event which triggers when mouse leaves the area of element specified.