JQuery :: Hide Hover Menu On Click?
Apr 8, 2011
I have no idea if this is even possible, but I thought I'd check here to see what anyone thinks.I have a top nav on my site that has dropdown submenus. When a user clicks on one of the sub-menu items, jQuery toggles a div in the main content area to be visible.The problem is that since I am using CSS hover menus, the menu remains over top of the div that was activated in the background.I know that I could do a normal page load instead of show/hide this div, but I'm wondering if there is another way. Before I go another direction, I wanted to see if anyone had an alternative.
EDIT: Maybe something using .focus()? But then maybe I need to rebuild my menu to allow this, because simply adding focus to the div doesn't seem to do it.
View 3 Replies
ADVERTISEMENT
Jun 30, 2011
I'm using the plugin superfish for my menu and i would like to hide it after choosing an item. Here is my code :
$(function(){
$('ul.sf-menu').superfish();
$('a[class=select-item]').click(function() {
[code]....
View 1 Replies
View Related
Apr 26, 2010
To build a menu block which should be switchable with hide/unhide of the menu items, I'm using .append html. The code idea is this:
[Code]...
As can be seen from above posted code there is a line "<div id="' + menuSlider + '" style="display:none">". Appending that -- AFAIS -- the .append is automatically (????) adding "</div>" which closes the statement. That breaks my idea of the whole concept! The menu part isn't included in the 'menuSlider '. QQ: How to change it -- NOT to have that "</div" added to it??
View 2 Replies
View Related
Mar 12, 2011
Hover On displays image ok
The image does not move with Mousemove()
The image does not hide on hover off
$(document).ready(function() {
var offsetX = 20;
var offsetY = 10;
$('a.resubmitImage').hover(function(e) {
var id = $(this).attr('id');
$('div#' + id)
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.show();
}, function() {
$('div#' + id).hide();
});
$('a.resubmitImage').mousemove(function(e) {
$('div#' + id).css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
});});
View 3 Replies
View Related
Dec 22, 2010
I am attempting to create a sort of popup effect when you hover over a certain div (.box)This is the code I have worked out but nothing seems to work.What I think it is supposed to do is on hover of the div "box" the opaque id will show which has the styling to make the entire page opaque around the div. None of it works however. And yes, this in in wordpress if there are any conflict issues.
jQuery("body").append("<div id='opaque' style='display: none;'></div>");
jQuery('.box').hover(function() {
jQuery(this).show('#opaque');
[code]....
View 5 Replies
View Related
Sep 23, 2010
Anyhow, as per my new site design, I need to have a DIV on the page, containing an image, some other divs, and some text within it, but have HALF of it concealed (see attached spotslideprev1.jpg) until the user hovers over the div, revealing the complete DIV (see attached spotslideprev2.jpg).I think it's pretty selfexplanatory. If anyone has any ideas or tips, I'd love to hear them!Attachments spotslideprev1.jpgSize : 209.88 KB Download : 635
View 3 Replies
View Related
Sep 16, 2009
I have created a script that shows a hidden DIV when the user clicks on a text title. However when you hover on the title, you don't get any mouse feedback because it's not a hyperlink. So I would like to add some sort of hover effect to #title so it that changes to the mouse pointer to hand to simulate a hyperlink.
This is the code I currently have:
<script type="text/javascript">
$(document).ready(function(){
$('#title').click(function () {
$('#show').slideToggle();
[Code]....
Or am I just better off using the CSS display option to change the pointer to a hand? Not sure how browser compatible that is.
View 1 Replies
View Related
Jun 7, 2011
I have a series of links on a page whereby when the user hovers over the title then an image appears next to the link so it basically shows/hides the image on mouseenter and mouseout. I'm presuming this is a fairly basic jQuery request but I've been hunting around for a while now and can only seem to find more complex examples that I can't seem to disect.
The code in my page is:
So when the user hovers over the "Link" then it will show "myimage.jpg" next to the link.
View 4 Replies
View Related
Sep 11, 2011
I'm doing a show/hide div on hover, and what I have works...only when I hover over the .pics-nav div, it blinks repeatedly.
$(document).ready(function() {
$('#product-images').mouseover(function(){
$('.pics-nav').fadeIn();
}).mouseleave(function(){
[Code].....
how to solve a situation like this? Just a super-duper simple thing, but I'm having lots of problems with it.
View 1 Replies
View Related
Aug 15, 2011
I have this code:
$
(
'#region_dc').
click
[code]....
The click works fine. Check the checkbox, the hidden div displays. But when I uncheck the checkbox, I want it to go away.
View 3 Replies
View Related
Jan 24, 2011
Is it an easy transition to change a block of code from a hover effect to a click effect? This is the block I'm using:
[Code]...
View 1 Replies
View Related
Dec 19, 2011
I am trying to get menu to disappear. I have a menu on the page [URL]. When the level 1 menu is hovered on it brings up level2. However, if you hover over level 1 and then mouseout, it doesn't disappear.
I tried this:
$('.menu ul li a').mouseout(function(){
$('.menu ul li ul').fadeOut('slow');
});
However, that is then making level 2 disappear no matter what. How I can do this?
View 6 Replies
View Related
Oct 19, 2011
I have a basic dropdown css menu system. When a menu item is selected (ex: foo.html), the cluetip link opens a 450px wide window as expectedThen,I selectanother menu item (ex: bar.html). But when I return to link foo.html: and click the same clueTip link the clueTip link now opens in it's own window instead of the 450px clueTip window as beore would expect the small clueTip window to open and show the clueTip on each successive click as it does the first time. If I do a browser reload, the first menu selection works as it should, but only on the first click.If the menu is not used, the single file opens the clueTip correctly. Does clueTip get confused in a menu program?
// the cluetip code:
$(document).ready(function() {
$('#clickme').cluetip({
[code]....
View 7 Replies
View Related
Nov 18, 2010
I have a simple navigation system, and I am using hover, to show/hide details, but if I hover back and forth too fast between the elements, the animation queues up and keeps executing even when I am not hovering over them.
[Code]...
I can use stop() on animate to prevent queuing, but doing it like in the code above, stops the animation from even happening. Please suggest a solution.
View 3 Replies
View Related
Feb 18, 2010
I want to animate a button with .hover and then animate it even more with .click. The problem is when the button is clicked, the mouse is no longer hovered so the hover returns to the default position. I need to stop the .hover from returning to the default non-hover state when the button is clicked.
Hover Code:
$('#about-btn').hover(function () {
$('#about-btn').stop().animate({
marginLeft : 27
[code]....
View 4 Replies
View Related
Oct 17, 2011
First of all, this is the first time that I use JQuery in my life. I have no idea of what I am doing. I have been following the following guide to animate a menu: [URL]... But as some of the people commenting on the guide I wanted the menu to animate with mouse over and mouse out. So I found the hover-function and the following comments on the guide:
[Code]...
View 3 Replies
View Related
Jan 14, 2012
I have a navigation menu. Right now, when you hover over a menu item an image flies over the top of it. This image is set in my CSS as "nav li em". However, that image flies in to the same spot for every menu item. This is what I would like: When you hover over Item 2, em2 is invoked for the FlyIn. When you hover over Item 3, em3 is invoked.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]" xml:lang="en" lang="en">
<head>
<title>help</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav a").append("<em></em>");
$("#nav a").hover(function () {
$(this).find("em").animate({ opacity: "show", top: "-34"}, "fast");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText); .....
View 4 Replies
View Related
Jun 23, 2009
I got this here: [URL]. When you hover over the Buy Rhoadanide or Research the sub menu comes up. The only way I could get it to work was to make the OTHER menu hide if one is hovered over, but I cant hide them anymore
Is there a way to do this:
1. Hover Link
2. Show Div with more links below it
3. Keep the Divs visible if the Hover Link or the Div is hovered
4. Hide the Divs when both are not selected.
View 10 Replies
View Related
Mar 10, 2010
As you can see in the link provided. When the menu is hovered over a few times. I get this wavy action. Can it be fixed?
[URL]
<script
type
="text/javascript"
src
[Code]......
View 3 Replies
View Related
Nov 17, 2011
I have been using jquery for about an hour. Here is my first menu animation, very simple; I am only playing with fade in and out on hover.
$(".nav li a").click(function(){
$(".nav li a").removeClass("active");
$(this).parent().addClass("active");
$('a').click().html();
Is this how I get a value of href? This does seem to work. Without this my link does not work.
return false;
});
$(".nav li a").hover(function(){
$(this).fadeTo('slow', 0.5, function() { });
//console.log($(this).text());
}, function(){
$(this).fadeTo('slow', 1, function() { });
//console.log($(this).text());
})
So I guess this is very simple. On hover my <a> within .nav li fades out back and forth. How would I 'hold' this across my entire website. Do I simply include JQuery in every page (if my page does not use any CMS like Wordpress). Is there a way to hold this menu across my entire site?
View 1 Replies
View Related
Sep 23, 2011
I'm using Superfish, the vertical menu specifically, and trying to find out if there is a way to have a two or three column flyout. Right now I have a list of categories showing in the menu and some categories have a lot of subcategories. If I could display the subcategories on hover but in a two column style it would cut down on the height of the flyout menu dramatically.
Has anyone done this or would someone be willing to share how to do this?
View 1 Replies
View Related
Feb 14, 2011
I am using JQuery to create sliding line under menu effect. I have written the code but can't figure out couple of things. I have attached my code. I would like to make the sliding effect more smooth but the most important thing that I can't figure out is how to make the scroller div scroll back to its original position on mouse out.
[Code]...
View 2 Replies
View Related
Jan 23, 2011
I've run into a problem with swapping images for site navigation.The "hover" part works just fine, but the problem lies within the click part. When the user clicks the first thing that happens is to reset all of the images for all of the links, and then set the hover image for the link that was clicked. However it seems that after resetting all of the images 'src' attributes, the code for setting the link that was clicked either doesn't execute, or executes before the reset.
View 1 Replies
View Related
Jul 16, 2009
How can I remove the hover event in jquery after the click event is triggered...?
jquery:
Code:
$('li').hover(function(e){
},function(){
});
[Code]...
View 3 Replies
View Related
Mar 18, 2011
So I have done this menu and I have 2 problems.
1. When I hover on a link, it does 2 animations, but when I "unhover", it doesn't reset the default values also with animations. I know the problem might be the display none in the css, but I really have no idea how to get around that.
2. As I said above, when I hover on a link, it does 2 animations, but when I move the cursor to another link, it doesn't "re"-do the animations anymore.
View 5 Replies
View Related
Jan 16, 2011
My designer has specified a menu that slides down when the user hovers the mouse over the top-level menu bar. I've created a div like this:
<div id='menu'>
<div id='first-level'>
<div class='first-level-item'><a href="/pages/1">HOME</a></div>
[code]....
View 1 Replies
View Related
