A client has a site built in Magento, and there's this bit of javascript controlling how the menu is displayed:
<script type="text/javascript">
jQuery('.nav-add li.level0, .nav li').hover(
function(){
jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
},
function(){
jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
)
jQuery('.nav-widget').hide();
</script>
Right now it's set to expand whenever the user hovers on an item, but it's rather annoying to try to navigate that way. Is it possible to modify this code so that it expands when a user clicks on an item?
I tried replacing .hover with .click or .mouseup to no avail.
Assuming you just want to toggle the hover behavior by click instead of hover you can try something like this.
jQuery('.nav-add li.level0, .nav li').click(function(){
if(!$(this).data('clicked')){
jQuery(this)
.data('clicked', true)
.children('.nav-widget:not(.inSlide), ul:not(.inSlide)')
.addClass('inSlide')
.slideToggle(700,function(){
});
}
else{
jQuery(this)
.data('clicked', false)
.children('.nav-widget, ul:not(.active)')
.delay('2000')
.slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
});
jQuery('.nav-widget').hide();
The reason it doesn't work by simply replacing the .hover() with .click() is because the hover event needs two functions, one for onhover one for offhover. The .click() event only takes one function. I assume you want the top function as your click event.
jQuery('.nav-add li.level0, .nav li').click(
function(){
jQuery(this).children('.nav-widget:not(.inSlide),
ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
}
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 am using toggle class for dd & dt it is working fine but my problem is if user click out side i want to close that toggle. How to achive this ?
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
jQuery=$.noConflict();
jQuery(document).ready(function() {
jQuery('.navigation dd').hide();
jQuery('.navigation dt').click(function(){
jQuery(this).next('dd').slideToggle('slow');
jQuery(this).toggleClass('glace_navigationlayer-collapsed');
});
});
</script>
You can also try -- what DBS has is proper, ( he posted in a comment ), imho.
//clicking on the body, closes the toggleitem
jQuery(document.body).bind('click.closedd', function() {
jQuery('.navigation dd').hide();
});
// clicking on the toggle item, won't trigger the click on the body
// that we set up above.
jQuery('.navigation dd').bind('click.closedd', function(e) {
e.stopPropagation();
});
You need to listen for clicks on the <body> and then check to make sure the target is outside of the navigation component.
jQuery('body').on('click', function(evt) {
var $target = $(evt.target);
if ( !$target.closest('.navigation').length ) {
// code to collpase the nav menu
}
});
I would also recommend refactoring your nav code to use separate expand and collapse functions instead of relying on slideToggle and toggleClass.
Good luck!
Not too sure about the requirements, but you can try achieving the above on mouseenter and mouseleave events.
However, if you have to implement the above functionality only on click, then you will have to wire the click event on a container that covers the entire html body.
i want to apply hover and click event at the same time. my hover() is working perfectly but when i clicks on the div it don't shows anything ... i was watching examples on stackoverflow but didn't found. i want when i clicks on the div it show me the same behaviour as it showing me on hover()
fiddle : http://jsfiddle.net/gt70233f/
myHTML
<div class="col-lg-3" id="majic">
<img src="http://www.endlessicons.com/wp-content/uploads/2013/02/magic-icon-614x460.png" style="height:80px; width:80px;">
<h4>WEB APPLICATIONS</h4>
</div>
my JS
function hoveronImage(id,imageonhover,imageonhoverout){
$(id).on('mouseover',function(){
$(this).children('img').attr('src','http://icons.iconarchive.com/icons/designcon test/vintage/256/Magic-Wand-icon.png')
.next('h4').css({
'color':'#eab000 '
});
});
$(id).on('mouseout',function(){
$(this).children('img').attr('src','http://www.endlessicons.com/wp- content/uploads/2013/02/magic-icon-614x460.png')
.next('h4').css({
'color':'#404040'
});
});
}
hoveronImage('#majic','hovermajic','majic');
i was trying
$(id).on('mouseover click',function(){
$(this).children('img').attr('src','http://icons.iconarchive.com/icons/designcon test/vintage/256/Magic-Wand-icon.png')
.next('h4').css({
'color':'#eab000 '
});
});
I've never needed to do this before but knowing jQuery this should work:
$(id).on('mouseover', function(){
//cool stuff here
}).on('click', function(){
//other cool stuff here
});
If it's the same action (which it seems like it is) then assign to a named function.
function coolStuff(){
//cool stuff here
};
$(id).on('mouseover', coolStuff).on('click', coolStuff);
Of course, since the action is firing on mouseover first, if you aren't incrementing changes on each event, you probably won't see any difference on click.
You can achieve by simply using :hover and click.
Use a css like
div#majic > h4{
color: "#404040";
}
div#majic > h4:hover, div#majic > h4.majichover{
color:"#eab000";
}
Then in your like add the "magichover" class to h4
I am trying to create three clickable divs, one to open, and two to close a popup window. One of the "close" divs works like a charm, however the other loops the fadeToggle. The looping class is .exit (upper left corner, grey box).
Please see JSFiddle; http://jsfiddle.net/StudentEric/zx221ssy/
´$(".maincontainer, .opaquebg").hide();
$("#orange, .exit, .opaquebg").click(function(){
$(".maincontainer, .opaquebg").fadeToggle(500);
});
});´
What have I done wrong?
It is because you are binding the same event for .opaquebg and .exit and .exit is child of .opaquebg. So if you do not stop the #orange click event event, it is going to trigger the event twice just like what you are experiencing right now. Try
e.stopPropagation();
inside of your click event like:
$("#orange, .exit, .opaquebg").click(function(e){
e.stopPropagation();
$(".maincontainer, .opaquebg").fadeToggle(500);
});
Here is your updated fiddle: http://jsfiddle.net/zx221ssy/1/
As a side note, you do not need to fadeToggle your .maincontainer child element since you are already fade toggling your parent .opaquebg. So your code can look like this:
$(function(){
$(".opaquebg").hide();
$("#orange, .exit, .opaquebg").click(function(e){
e.stopPropagation();
$(".opaquebg").fadeToggle(500);
});
});
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.