jQuery show an element on hover only if it's already hidden - javascript

I am pretty new to jQuery and I am trying, but failing, so far to make a form element with a class of .topbardropdownmenu to be displayed when the user hovers over a button with a class of .menuitemtools. Once the user hovers over the button the .menuitemtools I don't want the form to be rehovered if it is already displaying hence the if statment to check it's display property is none. At the moment this script works but everytime you hover over the button .menuitemtools the form is rehovered which creates an annoying flashing. Once the form is displayed I don't want .menuitemtools to do anything and I want the form to dissappear when the mouseleaves the form.
Hopefully all that's clear and I'm not far off? Thanks very much for looking at this.
$(document).ready(function () {
$('.topbardropdownmenu').hide();
if ($('.topbardropdownmenu').css('display') == 'none') {
$('.menuitemtools').hover(function () {
$('.topbardropdownmenu').fadeIn('slow');
});
}
$('.topbardropdownmenu').mouseleave(function () {
$('.topbardropdownmenu').fadeOut('slow');
});
});

$(document).ready(function () {
$('.topbardropdownmenu').hide();
$('.menuitemtools').mouseover(function() {
if(!$('.topbardropdownmenu:visible').length)
{
$('.topbardropdownmenu').fadeIn('slow');
}
});
$('.topbardropdownmenu').mouseleave(function() {
$('.topbardropdownmenu').fadeOut('slow')
});
});

Related

Conditionally triggering slide and hide javascript events

I added some hide and slide functions to a website so that as each product attribute was selected the next one would slide out. This worked fine until the customer added additional attributes to SOME products. The additional attribute is causing me problems because i can't add a second slide function trigger without making it trigger two functions on these products.
The original code i used is
$('.wrapperAttribsOptions11').hide();
$('.sizeRadio').click(function () {
$('.wrapperAttribsOptions11').slideDown(800);
});
The client then added an attribute id4 so i added
$('.wrapperAttribsOptions4').change(function () {
$('.wrapperAttribsOptions11').slideDown(800);
});
But this means that on pages where BOTH attributes are in use option11 is sliding down when .sizeRadio is clicked and not when option4 is changed.
In short, is it possible to make it function so that if .wrapperAttribsOptions4 is present then
$('.sizeRadio').click(function () {
$('.wrapperAttribsOptions11').slideDown(800);
});
is ignored.
I hope that's clear enough.
I resolved this by using
if ($('.wrapperAttribsOptions4').length != 0) {
so the whole code segment becomes
$('.wrapperAttribsOptions11').hide();
if ($('.wrapperAttribsOptions4').length != 0) {
$('.wrapperAttribsOptions4').change(function () {
$('.wrapperAttribsOptions11').slideDown(800);
});
}else
$('.sizeRadio').click(function () {
$('.wrapperAttribsOptions11').slideDown(800);
});

Collapsible Menu Not Staying Open

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.

jQuery MouseEnter/Leave with fadeIn() flickery

I am programming a section of a website using jquery, where when you mouse over a button it hides a specific div and shows another one, then when the mouse leaves it hides that one and shows the original, and it works great, but when you go over the buttons to fast it gets flickery and starts showing all the divs(doesnt hide some)
My code:
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1").toggle();
$(element2).fadeIn(700);
},
function(){
$(element2).toggle();
$("#add-content-desc1").fadeIn(700);
});
}
any ideas ? thanks
Edit: I updated the code to the current version.
Try this
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1, element2").stop().toggle();
}, function(){
$("#add-content-desc1, element2").stop().toggle();
});
}

jQuery toggle content-div from menubar

I'm having trouble getting jQuery to allow only one content-DIV to be visible at a time. So that clicking between the menu buttons (about, newsletter, contact) this will allow only one content-DIV to be visible.
--- Then the content-DIV needs to hide when the associated menu button is clicked (like it does currently).
--- Upon clicking the header 'alliteration', any content-DIVs that are open need to hide.
$('#collapse_about').hide();
$('#collapse_newsletter').hide();
$('#collapse_contact').hide();
$('#menu1').click(function() {
$('#collapse_about').slideToggle(400);
return false;
});
$('#menu2').click(function() {
$('#collapse_newsletter').slideToggle(400);
return false;
});
$('#menu3').click(function() {
$('#collapse_contact').slideToggle(400);
return false;
});
I understand that this is a pretty simple bit of code... but the form of it evades me. Any help is much appreciated.
Off the top of my head I would assign all of the menus the same class such as class1. Then make the div slideUp which has a callback function. When the slideUp is finished it will slide down the correct panel.
$('#menu1').click(function() {
$(".class1").slideUp(function() {
$('#collapse_about').slideDown(400);
});
});
$('#menu2').click(function() {
$(".class1").slideUp(function() {
$('#collapse_newsletter').slideDown(400);
});
});
$('#menu3').click(function() {
$(".class1").slideUp(function() {
$('#collapse_contact').slideDown(400);
});
});
Edit: This is a start but doesn't entirely do as you are asking:(
Here is the demo on jsfiddle: here

jQuery custom menu

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);
});

Categories