Hi I am using this menu found here:
http://www.sohtanaka.com/web-design/examples/horizontal-subnav/
Problem I am having is that I want to have the Top Nav stay when clicked and showing the subs also. I hope anyone can help me out!
The Top Nav should still be active when the new page is loaded. I know how to do this server-side but not client-side with JS/jQuery
With a quick view at the page source I find this jQuery code that handles the hover event:
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
If you want the subnav bar to stay visible after a click or something just create an if() statement within the 'hover out' function that checks if something has been clicked, i.e.
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
if(subnavclick==0){
$(this).find("span").hide(); //Hide the subnav
}
});
And within your subnav .click() function add the setting of the subnavclick variable like so:
$("span").click(function(){
subnavclick==1;
//do other stuff
});
This should work for you....
Try changing
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
to
$("ul#topnav li").click(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
}
Instead of doing the effect on a mouseover event as stated in the script now, you should make it work on the click event.
Most of the js code is redundant as the functionality is provided by css anyway. Just add a "clicked" class that mimics the hover pseudo-class of the li's and add and remove this on click.
http://jsfiddle.net/VirusZ/THYsK/
Also you must update the z-indices so that the submenus appear on hover even with a clicked element visible.
To generalize, you'll need to do this in your CSS file and in the JS. You'll want to find ul#topnav li:hover{...} and clone it to something like ul#topnav li.active{...}. This is the class we will apply to the currently selected menu item.
ul#topnav li.current{
background: #f00 url(topnav_current.gif) repeat-x;
}
From there, it will depend on exactly how your site will work. Will each Tab bring you to a new page, or will clicking a tab trigger an ajax retrieval?
If you're using AJAX, you can capture the LI's click events to set a class. (LIVE DEMO). If you're going with a new page on every click, you will need to have JS parse the url and set the correct item's class using $(item).addClass('current');
Related
I am about to build a mobile burger menu that animates as follows:
1) Click 1 on burger menu: menu open animation...nav links fade-in last
2) Click 2 on burger menu: nav links fade-out first...menu close animation
I am animating with jQuery:
/* mobile menu fx */
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
$('#mobile-menu').toggleClass('open');
$('#mobile-menu-elements').toggleClass('open');
$('#mobile-menu-blurredBg').toggleClass('open');
$('#mobile-menu-elements-ul').toggleClass('open');
});
});
How can I set a different class for the second click (closing the menu)?
If you want to do it in the JS side, why dont you try to add a count variable, see if it works:
/* mobile menu fx */
$(document).ready(function(){
var count = 0;
$('#nav-icon4').click(function(){
if(count == 0){
// do something in the first click;
count++;
} else{
// do something in the second click;
count=0;;
}
// Dont know which one goes in the first or in the second click
$(this).toggleClass('open');
$('#mobile-menu').toggleClass('open');
$('#mobile-menu-elements').toggleClass('open');
$('#mobile-menu-blurredBg').toggleClass('open');
$('#mobile-menu-elements-ul').toggleClass('open');
});
});
I know it's a bit dirty and there could be better ways. I haven't checked if it works, but this is just one of them, hope it helps.
I'm working on a jQuery game. I have a 4 divs in a 2x2 design. The player needs to pick 1 option and verify with another button. The thing is, I have a hover effect adding a class which changes the background with a low opacity, and a click effect setting the background with a higher opacity. For divs 2, 3 and 4 it works fine - I hover and background changes color with opacity 0.3 and when I move the mouse out, it goes back to white. And when I click it, it changes the background to 0.4 and the hover doesn't affect them anymore. However, this is not working for the first div: the div changes background color on hover, but when I click it ,it keeps the hover color, and when I mouse out I see the click color, and every time I hover it changes the hover color again and so on.
Why is it happening only on div 1?
Code:
//hover effects
$(".respuesta1,.respuesta2,.respuesta3,.respuesta4").hover(
function () {
$(this).addClass("respuestahover");
},
function () {
$(this).removeClass("respuestahover");
});
//on click function for div1
$(".respuesta1").on("click", function () {
//if it hasnt been clicked, toogle class and change var to true
if (prendido1 == false) {
$(this).toggleClass("respuesta1b");
prendido1 = true;
//if any of the other divs are clicked by the time you are clicking unclicked 1, turn them off
if (prendido2 == true) {
$(".respuesta2").toggleClass("respuesta2b");
prendido2 = false;
}
if (prendido3 == true) {
$(".respuesta3").toggleClass("respuesta3b");
prendido3 = false;
}
if (prendido4 == true) {
$(".respuesta4").toggleClass("respuesta4b");
prendido4 = false;
}
//if is already clicked, turn off and change var to false
} else {
$(this).toggleClass("respuesta1b");
prendido1 = false;
}
});
The last part is repeated for every div "respuesta2", "respuesta3", etc..
Any idea?
EDIT
I was trying to clean up the code to make a jsFiddle and I think I got it to work:
http://jsfiddle.net/bqySN/2/
I'll just leave the code there if anyone is interested, be aware the code is unpolished and it need more generalisations.
EDIT 2
After some testing I actually found the problem:
if I alter the order of my css clases the app goes crazy:
This one is correct, with hover first
.respuestahover{
background-color:#f00;
opacity:0.2;
}
.respuestab{
background-color:#f00;
opacity:0.5;
}
This one is incorrect, hover second:
.respuestab{
background-color:#f00;
opacity:0.5;
}
.respuestahover{
background-color:#f00;
opacity:0.2;
}
I'm not really sure why it is behaving like that, but I'm glad I figure it out.
You are adding a class on hover... why would you do that via javascript if you can just use the :hover state from css? For example:
#foo .element p { color: red; }
#foo .element:hover p { color: blue; }
EDIT:
Sorry, I miss the original question.
If you want to remove the hover effect after clicking, you have lot of different ways to do this. You can remove the class defined with the hover via css, or if you want a jQuery solution you can use mouseenter/mouseleave with .on and then unbind with off.
See the following fiddle example.
You should simplify the bindings to just target them a little more generically, then remove the hover classes on all of them:
$(".respuesta").on("click", function (index) {
$(this).removeClass("hover");
// do other things
});
You can also use the index to find which number they are if they're in a list.
if you want the hover to not override the click, give the click an active class and tell the hovers to work on everything but them:
$('.respuesta:not(.active)').hover(function() {
// do something
}
I have menu structure as show here.
All item have a background img. But when hover back, hide my menu item img. Because, js code isn't valid this img but i don't know how can i solve this.
I want, still javascript fade effect but don't hide my img.
Normally:
Problem: (Hover and hover-out)
I want:
If what you want is to fade the background on hover, and restore it on hover-out, then use the following js:
$(document).ready(function(){
var bg;
$("#right_menu a").mouseover(function() {
bg = $(this).css('background-color');
$(this).animate({ backgroundColor:'#002C6A'},500);
}).mouseout(function() {
$(this).animate({ backgroundColor:bg},500);
});
});
If you want to use image then change background-color to background.
In action: http://jsfiddle.net/3TDF3/2/
UPDATE: Just revisited code. Much of the problem is that css class is set on li, while modifications a being made on a
You are setting background-image to li, but animating a. Therefore the background of li gets hidden with new background of a.
Change $("#right_menu a").mouseover to $("#right_menu li").mouseover
Try using background color instead of image. When mouse is hovers away from the link, set the background color to the previous value. Using image where background color seems to be sufficient looks like a bad idea.
try this
$(document).ready(function(){
var backgroundimage = $(this).css("background-image");//store it in a variable
$("#right_menu a").mouseover(function() {
$(this).animate({ backgroundColor:'#002C6A'},500);
$(this).css("background-image","none");//remove it
}).mouseout(function() {
$(this).animate({ backgroundColor:'#fff'},500);
$(this).css("background-image",backgroundimage );//bring it back
});
});
I am trying to create a 'cart' link where the shopping cart opens out on hover. I am able to get the cart to open out on hover and close when moving away. However I cannot get the cart block to stay open once hovered over. I would like the car block to open out on hover and stay open if you hover over it. You will see what I mean if you hover over the 'cart' link in the top right corner of this page.
http://dl.dropbox.com/u/4380589/Rococlothing/index.html
The jQuery I am using is:
jQuery('#cart-links .links .first a').mouseover(function(){
jQuery('.block-cart').slideDown(400);
}).mouseout(function(){
jQuery('.block-cart').slideUp(400);
});
jQuery(".block-cart").mouseover(function(){
jQuery(this).show();
}).mouseout(function(){
jQuery(this).fadeOut("slow");
});
You need to cancel the first mouseout() so you'll need adjust the second part to
jQuery(".block-cart").mouseover(function(){
jQuery(this).stop(true).show();
}).mouseout(function(){
jQuery(this).fadeOut("slow");
});
note that the stop, I am passing in true so its clearing the current animation queue. jQuery doc for stop is # http://api.jquery.com/stop/
hovered = false;
jQuery('#cart-links .links .first a').mouseover(function(){
jQuery('.block-cart').slideDown(400);
}).mouseout(function(){
setTimeout(function(){
if(!hovered) {
jQuery('.block-cart').slideUp(400);
}}, 250);
});
jQuery(".block-cart").mouseover(function(){
hovered = true;
}).mouseout(function(){
hovered = false;
jQuery('#cart-links .links .first a').trigger("mouseout");
});
It looks like the .block-cart is not a child of the element that triggers the hover, so in order to keep the hover state active you'd have to structure your HTML in a way that the .block-cart is a child element of the element that triggers the hover.
Btw: why don't you use $(this).hover() instead of $(this).mouseover().mouseout(), it's a little easier
I have an image scroller that I am trying to implement. The image scrolling works, but it is moving vertically instead of horizontally. Here is what I got so far:
Next Image
$('#btnNext').click(function () {
//Calls new image with value true, meaning next image
newImage(true);
return false;
});
function newImage(direction) {
//Get the current selected item (with selected class), if none was found, get the first item
current_image = $('#imageGallery li.selected').length ? $('#imageGallery li.selected') : $('#imageGallery li:first');
//If determines slideshow direction
if (direction) { //Next image
//Get next sibling
next_image = (current_image.next().length) ? current_image.next() : $('#imageGallery li:first');
} else { //Previous image
//Get previous sibling
next_image = (current_image.prev().length) ? current_image.prev() : $('#imageGallery li:last');
}
//Clear selected class
$('#imageGallery li').removeClass('selected');
//Reassign selected class to current image
next_image.addClass('selected');
//Scroll images
$('#images').scrollTo(next_image, 800);
}
Update: Here are my quesions:
1) How do I edit this to make it move horizontally?
2) Is there a way to make an image scroller like this without using .scrollTo()?
I assume you want to make the gallery move horizontally, not vertically. (You say both in the question.) This is just a CSS issue: change the list to show horizontally (display: inline-block or float: left for instance) and the scrollTo plugin should do that for you.
It is possible to do this without the scrollTo plugin. The plugin uses the jQuery animate function to move around the page and, well, you can do the same if you want. :) Here's a quick jsFiddle that uses animate to move pictures in a gallery. Obviously it needs quite a bit of work (doesn't go back to the beginning at the last pic, only goes 1 way, doesn't calculate picture width, etc.), but it should hopefully give you an idea of how it can be done.
http://jsfiddle.net/meloncholy/KzBzT/