I have a div containing a collection of li to build up a menu.
Outside of the containing ul I have a div that should be displayed only when an item in the original menu is hovered.
Now, I understand the whole mouseout, mouseover effect but what I'm stuck with is to keep the content div active if the mouse is moved over it, but hide (cleared) and then displayed if any of the li elements are selected.
Code (trimmed for legibility)
<div id="menu-ext" class="ext-menu wrapper">
<div class="navigation">
<ul>
<li>
Menu Item 1
</li>
<li>
Menu Item 2
</li>
<li>
Menu Item 3
</li>
<li>
Menu Item 4
</li>
</ul>
</div>
<div class="clear"></div>
<div class="content window" style="display:none;">
this contains text to be displayed, based on a what is hoverd in the navigation above (template driven)
</div>
</div>
The important thing here is not the data that will be displayed in div.content.window but rather how to keep it open if the mouse is moved down after visibility has been set, and then how to hide it if the mouse is moved either outside of div.content.window or over any of the navigational items.
I figured hoverIntent would be able to do this, but the intent (I have) is not initialized.
My code for that:
<script type="text/javascript">
jQuery(document).ready(function ($) {
'use strict';
var config = {
interval: 100,
sensitivity: 1,
out: onHoverOut,
over: onHoverOver
};
$("li", $(".navigation")).hoverIntent(config);
});
function onHoverOver(parent) {
'use strict';
var $currentTarget = $(parent.currentTarget),
$hasTemplate = ($("selector", $currentTarget).length >= 1);
if ($hasTemplate) {
onPopulateMenu(parent);
// show menu
}
}
function onHoverOut(parent) {
'use strict'
onClearMenu();
// TODO: hide the menu
// I think the problem is here?
}
function onClearMenu() {
'use strict';
// TODO: clear the menu of all HTML
}
function onPopulateMenu(parent) {
'use strict';
// TODO: populate the content menu
}
</script>
I'm sure I would be able to keep the one div active, but I cannot seem to identify the solution to this problem. Is this possible?
Update
Apologies for not being very clear.
Basically, when user hovers over menu item, a mega-menu-type navigation should pop-up with additional links that users can click on. My current problem is that the "mega-menu" window is outside of each of the li elements in the original navigation, which is what hoverIntent is looking for.
My question here is, am I missing something? Because as soon as the mouse cursor is moved away from the li towards the menu pop-up, it disappears, which is not the functionality I'm looking for.
Should the menu window be embedded in each li? This does not make sense to me so I thought if I put it outside, it would work.
my fiddling
As stated, I need the window to stay active if the cursor is moved away from the li but I need it to disappear if the state is outside of the window.
I can write some intense JS to figure out the position of the cursor, see if the coordinates correspond with accepted locations and then toggle, but this seems a bit excessive as well?
If I understand you correctly you want something similar to this: Making the content-window appear and show some specific content based on which menu item is being hovered over and disappearing when you stop hovering over a menu item?
jQuery(document).ready(function () {
timeoutId = false;
$('.navigation li').on('mouseover', function () {
//If there is a timeoutId set by a previous mouseout event cancel it so the content-window is not hidden
if (timeoutId != false) {
clearTimeout(timeoutId);
}
$('.content-window').css('display', 'block');
$('.content-window .demo-content').html($(this).html());
});
$('.navigation li, .content-window').on('mouseout', function () {
//start a countdown of 3000 milliseconds before removing the content-window
timeoutId = setTimeout(function () {
$('.content-window').css('display', 'none');
}, 3000);
});
//if cursor moves over to the content-window, stop the timeout from occuring
$('.content-window').on('mouseover', function () {
if (timeoutId != false) {
clearTimeout(timeoutId);
}
});
});
http://jsfiddle.net/UHTAk/
Hope that helps,
R.
Update:
Due to your more specific question update I have amended the code above and updated a jsfiddle as below. What it does now is sets a timeout() timer to remove the content-window after a pre-determined time on a mouseout. This removal is halted if there is another mouseover over an li or the .content-window itself.
http://jsfiddle.net/UHTAk/1/
Related
I‘m using Pollate Template for creating polls. There is a list of user's created Polls, after clicking 3 dots (menu icon), the dropdown list shows up with the option to delete this poll. If the submenu is shown and you click anywhere on the screen it hiding.
But I found a bug, that if you clicking on another sub-menu icon it not hiding other sub-menus (look at the image below).
It should be hidden when clicking anywhere, even if it's a sub-menu icon of another entry.
There is HTML structure:
<div class="pl-options">
<ul class="dropdown"></ul>
</div>
<div class="pl-options">
<ul class="dropdown"></ul>
</div>
After clicking a - dropdown shows up.
There is JQuery:
$.puerto_droped = function( prtclick, prtlist = "ul.dropdown" ){
$(prtclick).livequery('click', function(){
var ul = $(this).parent();
if( ul.find(prtlist).hasClass('open') ){
ul.find(prtlist).removeClass('open');
$(this).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
} else {
ul.find(prtlist).addClass('open');
$(this).addClass('active');
if(prtclick == ".pl-mobile-menu") $('body').addClass('active');
}
return false;
});
$("html, body").livequery('click', function(){
$(prtclick).parent().find(prtlist).removeClass('open');
$(prtclick).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});
}
prtclick -> .pl-user-options
I think that this function $("html, body").livequery('click', function(){... should be edited, but can't achieve it successfully. I've tried in many ways but failed.
One of my tries was:
$(prtclick).click(function(evt){
$(prtclick).find(prtlist).removeClass('open');
$(prtclick).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});
But now it not showing sub-menu at all. I need to make an exception for the current entry. Have you any ideas? Thank you.
Before you check for .open class, you can toggle off all other ul.dropdowns.
$(this).closest('.row').siblings('.row').removeClass('active')
.find('ul.dropdown').removeClass('open');
Get current clicked a main parent which has 'row' class,
get its siblings, remove 'active' class of them,
get all ul.dropdowns inside those siblings and remove 'open' class of those uls
I have a little problem with my MegaMenu, when i open a submenu (clicking on one item of main menu) i want that submenu to vanish when i click anywhere on the document body or if i choose other menu item, the the previous submenu has to close, if i click on that submenu ('ul'), or one particular item on submenu it works like i want (it closes), but if i click on other menu item the previous submenu keeps opened, creating layers of submenus that i have to click on to make them vanish (or click on the main menus item that make them appear) im not sure i am clear,
The function JS im using:
$(".menu > ul > li").click(function(e) {
if ($(window).width() > 943) {
$(this).children('ul').fadeToggle(15);
$(this).children('ul').toggleClass('center');
e.preventDefault();
}
});
so there's a fiddle of my code:
https://codepen.io/anon/pen/JpBrRp
Break, I believe i understood the problem.
First you have to check if the element wich you want to open is already open. If is open you will to close if not you will open.
$(".menu > ul > li").click(function(e) {
if ($(window).width() > 943) {
if ($(this).children('.menu-list').is(":visible")){
$(this).children('.menu-list').fadeToggle(15);
$(this).children('.menu-list').toggleClass('center');
e.preventDefault();
} else {
$('.menu-list').hide();
$('.menu-list').removeClass('center');
$(this).children('.menu-list').fadeToggle(15);
$(this).children('.menu-list').toggleClass('center');
e.preventDefault();
}
}
});
Then you need another function to verify if the user clicked in another place that was not the menu to close the submenu.
$("body").click(function(e) {
var target = e.target;
if (target.className.indexOf("menu-button") == -1 && target.offsetParent.className.indexOf("menu-button") == -1 ) {
$('.menu-list').hide();
$('.menu-list').removeClass('center');
return;
}
});
See if this help you:
https://codepen.io/beduardo/pen/zReyjj
Tip: I recommend avoid use, only tag to refer your elements in js. This can be a problem in the future.
Thank you my friend Bruno Eduardo, i believe you understand Portuguese!! Obrigado amigo!!
There's only one minor bug, it only work if you click on the button, if you click on image it doesn't work, to fix that you need to add menu-button to every tag inside your link.
ex:
<a role="button" class="button button4 **menu-button**"><i class="icon-crm fs1 icon **menu-button**"></i><span class="button-text rowcenter **menu-button**">{{'MenuItem1' | translate}}</span></a>
Thank you friend!
Yes, i understand portuguese =). This approach is good, an other way is improved the function wich verify if the user clicked in another place.
if (target.className.indexOf("menu-button") == -1 && target.offsetParent.className.indexOf("menu-button") == -1 )
Feel free to choose the better to you =)
Hello ive followed the instructions from this webspage Add a Blogger-like collapsible archive block to your Drupal 7 site and suprised myself that everything seems to be 'sort of' working. As you can see from my 'collapsible block' on the right of THIS PAGE that the block doesnt seem to want to stay open when viewing other months. I dont think this was the intended behaviour.
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").children(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
var icon = $(this).children(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
Could anyone suggest anything to me to make the menu block open on a month when clicked and to close the other 'months'?
thanks
The problem is that the code you have is already added inside the file http://netmagpie.com/sites/all/themes/feverultra/js/feverultra.js and by adding your file after that, you're binding twice to the event and the function toggles twice, so the elements open and close
If you want to only have one month open then you need to close any open months before opening the one that was clicked, something like:
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").find(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
$('.view-collapsible-archive ul:visible').not($(this).next('ul')).slideUp();
var icon = $(this).find(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
It's because of this line:
$(this).siblings("ul").slideToggle
It says: "toggle the state of all the ul elements using a slide animation"
You will want to change this to slideDown when it's hidden in order to show it and slideUp when it's visible in order to hide it.
I would provide a code sample but I'm typing with one thumb on an iPhone at the moment.
I'm trying to make a scrolling effect to a menu. To be precise i want to click on a image and when i click it the menu to scroll down by 1 with a fade effect or what ever effect to the next link.
Ahhh...Like a windmill wheel if u understand what i mean.:)
And couldn't find any info.
Here is my code :
<div class=".img-fade"><img src="http://www.lahondafire.org/nest/Volunteer%20Manual/Signs%20and%20Forms/Arrow.gif" width="180" height="170"><BR>
When i click on the arrow the links below start scrolling down by 1 and contact to be top and about me to be to bottom...</div>
<div class="menu">
About me<BR>
Portofolio<Br>
Contact
</div>
http://jsfiddle.net/WCtQn/242/
So when i click on that arrow to move the links from top to bottom or bottom to top,dosen't matter.
Thank you.
You can try this method. It reorders the list elements when the arrow is clicked
$('.img-fade').click(function() {
var last = $('a')[0];
last.remove();
$('br')[0].remove();
$('.menu').append("<br> " + last['outerHTML']);
});
You should learn how to use javascript/jQuery and show us what you've tried so far and what you're having trouble with next time you post here
If you want something fancier you could look to do something similar to this example, though I'd add some .stop()s to remove some errors it has
I'm no jQuery pro but I've come up with something that is close to what you're looking for. I spiced it up with a fade effect. I also removed the <br> tags and set the links to display: block;. You could modify what I have to something similar to what #Zeaklous has posted to remove them along with the element and add them back in.
http://jsfiddle.net/WCtQn/248/
$('.img-fade').on('click', 'img', function(){
var firstItem = $('.menu a').first();
firstItem.fadeOut(2000, function() {
$(this).remove();
$('.menu').append(firstItem);
$('.menu a').last().fadeIn(2000);
});
});
every jQuery plugin I've found is based on <li> elements to generate the menu items.
I have <div id = "menubutton"> element that represents the menu button and another, not-related (maning it is not a child) <div id = "menucontent"> that contains the menu items (mixed stuff, images etc). I want this second, hidden div to appear when I click on the button. it should hide back when i leave the button OR when i leave the content div, in case i'm selecting items or doing stuff there.
Now, this is the code I have so far, but the clearTimeout thing doesn't seem to work. Any help? Pointing out a plugin to help my work would work as well.
Thanks!
var timer;
$('#menubutton').click(function() {
$('#menucontent').show();
});
$('#menubutton').mouseout(function() {
timer = setTimeout('$("#menucontent").hide()', 500);
});
$('#menucontent').mouseover(function() {
clearTimeout(timer);
}).mouseout(function() {
setTimeout('$("#menucontent").hide()', 300);
});
EDIT SOLUTION
I solved the problem using hover insted of mouseover / mouseout
Try this:
$('#menubutton').click(function() {
$('#menucontent').show();
});
$('#menubutton').mouseout(function() {
$(this).data('myTimer', setTimeout('$("#menucontent").hide()', 500));
});
$('#menucontent').mouseover(function() {
clearTimeout($(this).data('myTimer'));
}).mouseout(function() {
setTimeout('$("#menucontent").hide()', 300);
});