I'm using JQuery to create a Horizontal Accordion menu (based on the tutorial at Design Reviver. I have it working well, but I need to add a second Horizontal Accordion menu just like it to the same page. I'm sure this can be done, but I don't know how to adjust the script in the head section so that both menus work at the same time. I've experimented with the code, but with no luck so far.
The menu is based on an unordered list, and the first list item has an anchor tag with id="a1" so that it can be told to be "open" to begin with (while the other menu items appear "collapsed").
Each menu is inside a wrapper div, the first has class="jq_menu" and the second has class="jq_menu2".
At present, I have the following code in the head section of my page. Both menus appear on the page but only the first has the sliding animation working. Any advice is much appreciated! Thank you.
<script src="javascript/jquery-1.2.3.js"
type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;
$(".jq_menu ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
}
);
});
</script>
<script type="text/javascript" >
$(document).ready(function(){
var lastBlockB = $("#a2");
var maxWidthB = 180;
var minWidthB = 60;
$(".jq_menu2 ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
lastBlockB = this;
}
);
});
</script>
The ready() function triggers when the DOM is registered by the browser. So it will be called only once. Get rid of the second block of JavaScript and include the code for the second menu within the $(document).ready() function of the first block.
You can use the map function
['jq_menu', 'jq_menu2'].map(function(n){
$("." + n + " ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
lastBlockB = this;
}
);
})
Thanks for the sugggestions. Based on the answer from mplusz, I've now got the following code. At the moment, neither menu has the animated sliding action. Could this be an issue with my syntax? Otherwise, I don't know how to combine the hover functions due to the different div classes (jq_menu2 and jq_menu) and the different variable names (lastBlock, lastBlockB etc).
<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;
var lastBlockB = $("#a2");
var maxWidthB = 180;
var minWidthB = 60;
$(".jq_menu ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
}
);
}
$(".jq_menu2 ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidthB+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidthB+"px"}, { queue:false, duration:200});
lastBlockB = this;
}
);
});
</script>
[Edit]
I think your main problem may be that you only have one half of the hover function. the hover function takes two parameters, what to do on mouseon, and what to do on mouseoff.
$(thing).hover(
function(){ /*do this when they hover over*/ }, //<---- don't forget that comma
function(){ /*do this when they remove their mouse*/ }
);
When you declare lastBlock as a jQuery object:
var lastBlock = $("#a1");
You don't need to call it within the jQuery selector later on.
Bad
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
Good
lastBlock.animate({width: minWidth+"px"}, { queue:false, duration:200 });
Thank you SO much to everyone who helped me out here. When I added the second parameter for mouseoff, both my image menus started sliding, and one image always remains open from each menu - just as I wanted!
(Interestingly, when I removed the jQuery selector from $(lastBlock).animate etc, it broke the functionality. Not sure why this would be, but very happy that it's working with the selector anyway.)
I've included the final code below in case it helps anyone else :)
<script type="text/javascript" >
$(document).ready(function(){
var lastBlock = $("#a1");
var maxWidth = 180;
var minWidth = 60;
var lastBlockB = $("#a2");
$(".jq_menu ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlock = this;
},
function(){ /*do this when they remove their mouse*/ }
);
$(".jq_menu2 ul li a").hover(
function(){
$(lastBlockB).animate({width: minWidth+"px"}, { queue:false, duration:200 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:200});
lastBlockB = this;
},
function(){ /*do this when they remove their mouse*/ }
);
});
</script>
When the site goes live, I'll post a link so that people can see the effect in action.
Related
If you go to the JSFiddle, and click "About" and then "Contact" in rapid succession, the drop-down options (which appear to the right of the parents) appear appended to each other although only one parent is selected - this is not desired. I'm trying to only allow a new selection to be made once the appear/disappear animation has been completed, avoiding any appending of the children's content.
$(function() {
function animate(e) {
e.stopPropagation();
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
if ($('.substitute .sub-child.active').length > 0) {
console.log("A");
$('.substitute .sub-child.active').hide(700, function() {
$(this).removeClass('active');
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
//$('#nav .nav-ul li').on('click', animate)
});
});
} else {
console.log("B");
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
//$('#nav .nav-ul li').on('click', animate)
});
}
}
$('#nav .nav-ul li').on('click', animate);
// close menu when clicking anywhere on the page
$(document).on("click", function() {
$("#nav li.detected").removeClass("detected");
$("#nav div.active").hide(700, function() { $(this).removeClass("active"); });
});
});
I tried adding this code after the opening of the function, but it only gave me the alert.
$('#nav .nav-ul li').click(function(){
var $this = $(this);
if(!$this.data('disabled')){
$this.data('disabled', true);
alert('next click enable only in 5 seconds');
setTimeout(function(){
$this.data('disabled', false);
}, 5000);
}
});
I was wondering how can I add a fade effect when hovering using this example http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm
I was wondering if its possible to achieve something like this www.bungie.net
Here's the code used in the example
$(document).ready(function() {
// Image swap on hover
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
// Image preload
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
I used bruchowski's code which worked great for me. I did change .hover to .mouseover because I was getting a double fade effect when mousing out and I just wanted the last moused over image to stick.
I'm also very new to jquery and at first pasted it in the wrong place. Once I placed it directly before $(imgSwap).preload(); it worked.
And I slowed the fade down.
So my code is as follows:
<script type="text/JavaScript">
// prepare the form when the DOM is ready
$(document).ready(function() {
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$("#gallery li img").mouseover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 1400);
}); $(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>
Thanks!!!
This is a quick solution (you would add this to their existing code, do not edit what they already have)
$("#gallery li img").hover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 300);
});
In this part of the code that is like this in their example
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
Change to
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this)
.fadeOut('fast')
.attr('src').replace('thumb/', ''));
});
I have a function that when run, animates a div on my page and removes a class, what I want to do however is remove the class at the end of the height animation, is this possible with jQuery?
var el = $(this).find('ul li');
var img = $(this).find('ul li img');
$(this).removeClass('active');
//return false;
el.animate({height:'135px'}, 500);
el.css({
'background-position':'top left',
'background-size' : 'auto auto'
});
$(this).find('ul li img').animate({height:'270px'}, 500);
$(this).animate({height:'135px'}, 500);
img.attr('src', function(i, value) {
return value.substring(28);
});
There is a complete function that runs once the animation has completed. According to the jQuery docs for the animate function, you can use it like so:
el.animate({height:'135px'}, 500, function() {
//code to run when complete goes here
});
Use the complete call like this inside the .animate function:
complete: function() { your func u wanna call when ani is complete..; }
I'm trying to create a grid that uses the following code to randomly apply an active "highlight" class to one of the child li elements
//add class "highlight" to random panel
var elements = $('ul#sliding_panels li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
Basically, the li element with the .highlight class will be 2x the size of the other panels.
The tricky part is that I'm looking to remove this .highlight class and attach it to a new li element when it is highlighted.
I thought this code would do the trick but it's not returning anything when I hover .highlight (or doing anything else for that matter!)
EDIT: I've added the code to jsfiddle.net for people to see it live: http://jsfiddle.net/dxzqv/2/
<script>
//add class "highlight" to random panel
$(document).ready(function(){
var elements = $('ul#sliding_grid li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
$(".highlight").hover(
function(){$(this).animate({width: 400px, height:400px}, 1000);},
function(){$(this).animate({width: 200px, height:200px}, 1000);}
);
});
</script>
http://jsfiddle.net/dxzqv/3/
How's that?
Not sure if that is the effect you were going for, stuff is happening.
Going to fork and tweak some more.
//add class "highlight" to random panel
$(document).ready(function(){
var elements = $('ul#sliding_grid li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
//$(this).removeClass('highlight');
});
$(".highlight").live("hover", function(){
$(this).animate({"width": "400px", "height":"400px"}, 1000);
});
$(".highlight").live("mouseout", function(){
$(this).animate({"width": "200px", "height":"200px"}, 1000, function(){
$(this).removeClass('highlight');
});
});
});
I am learning jQuery and I'm finding that this code is not working:
<script type="text/javascript">
$(document).ready(
/* Navigtion Stuff */
function(){
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
)
},
function(){
$(".menu").parents("li").addClass("active");
}
);
</script>
The first function does what it is supposed to. The second function does not. Is my syntax bad? If not, then I have a feeling that my code is conflicting with some other Javascript on the page.
Thanks in advance!
you have a little confusion with the brackets
$(document).ready(
/* Navigtion Stuff */
function(){
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
);
$(".menu").parents("li").addClass("active");
}
);
is better.
The ready function only takes one parameter. You are trying to pass two functions.
function 1 :
function(){
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
)
}
function 2:
function(){
$(".menu").parents("li").addClass("active");
}
To bind the hover event to $('.menu ul') and add 'active 'class to $(".menu").parents("li") you should do
$(document).ready(function() {
/* Navigtion Stuff */
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
);
$(".menu").parents("li").addClass("active");
});
The ready function only takes one function as a parameter. See the above posts for examples.