http://mashable.com/
I have this script:
$(document).ready(function(){
$(".show_hide5").mouseover(function(){
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
and this script is working well so far, but it's still missing something, for now it's show the div on mouseover on the arrow as you can see on mashable website but the share area don't hide on mouseout only it's hide once you put the mouse on another arrow.
all i need is to hide the share area on mouseout.
thanks in advance.
If I understand well, you want to fade out .slidingDiv5 on mouseleave event:
$(document).ready(function(){
$(".show_hide5").mouseover(function(){
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
$(".show_hide5").mouseleave(function(){
$(".slidingDiv5").fadeOut("slow");
});
});
Related
I have a simple menu system on my website. Demo: http://jsfiddle.net/a41xkr9z/2/
My Problem: when I click 'Projects' it displays the submenu. However, if you click 'Projects' again, it hides the menu. How do I prevent this?
Javascript:
$('#menu-primary-menu>li>a').click(function() {
$(this).parents("ul").find("li>ul").not($(this).next()).hide();
$(this).next().toggle();
});
Change $(this).next().toggle(); to $(this).next().show();.
$('#menu-primary-menu>li>a').click(function() {
$(this).parents("ul").find("li>ul").not($(this).next()).hide();
$(this).next().fadeIn();
});
If you use .toggle() the function change the status of the element hidden/shown.
Use .show() or .hide() if you only want one action.
I'm with a problem, and I need your help.
So, I'm trying to make a menu that show the content when you do a mouse hover in a li tag. And the first content need to be always showing when you do a mouse over on the first li option, or when no one li is hovered.
I tried to make this, and you can see a demo here: https://jsfiddle.net/sqftzuja/
As you can see, it's isn't work so fine and some times it show more than one content.
My script
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').click(function() {
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').hide();
$(section4).fadeIn(800);
});
});
If anyone can help me improve it it will help me a lot!
Thanks in advance!
jquery hover takes two arguments, one is for the pointer entering the element and the other is for when it leaves the element.
e.g.
$('selector').hover(one_function, two_function)
you can either use hover and call the second function or use the onmouseover event.
here's the fiddle for onmouseover https://jsfiddle.net/sqftzuja/1/
You code is correct. You just need to stop the running animation.
$(section4).stop( true, true ).fadeIn(800);
This will solve you problem in the old code.
you must stop fade in animation.when you fade in it effects after given interval.i updated fiddle as well
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').hover(function() {
//console.info( $(this).attr('href') );
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').stop().hide();
$(section4).fadeIn(800);
});
});
i am trying to make a div toggle another div which appears underneath it.
I have managed to do this with a button, however i was wondering if you could do this with another div, so that when you clicked anywhere inside the div, it would make the other div appear and disappear etc...
Here are the two divs i have
//This div is the one you click on
<div id="more_toggle"></div><!---end more_toggle--->
//This div is the one that appears and disappears through the toggle
<div id="more_info">hello</div><!---end more_info--->
This is the script i use to toggle the divs through buttons, but it doesn't work with another div
$(function(){
$("#server_status_button").click(function(event){
event.preventDefault();
$("#status1").slideToggle();
});
});
Thanks for any help
$("#more_toggle").click(function(event) {
$("#more_info").slideToggle();
});
jsFiddle example
Have you tried:
$(function() {
$('#more_toggle').click(function(e) {
$('#more_info').slideToggle();
});
});
If you want to hide use display toggling just try .toggle() instead of .slideToggle().
$('#more_toggle').click(function(){
$('#more_info').slideToggle();
});
A client has a site built in Magento, and there's this bit of javascript controlling how the menu is displayed:
<script type="text/javascript">
jQuery('.nav-add li.level0, .nav li').hover(
function(){
jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
},
function(){
jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
)
jQuery('.nav-widget').hide();
</script>
Right now it's set to expand whenever the user hovers on an item, but it's rather annoying to try to navigate that way. Is it possible to modify this code so that it expands when a user clicks on an item?
I tried replacing .hover with .click or .mouseup to no avail.
Assuming you just want to toggle the hover behavior by click instead of hover you can try something like this.
jQuery('.nav-add li.level0, .nav li').click(function(){
if(!$(this).data('clicked')){
jQuery(this)
.data('clicked', true)
.children('.nav-widget:not(.inSlide), ul:not(.inSlide)')
.addClass('inSlide')
.slideToggle(700,function(){
});
}
else{
jQuery(this)
.data('clicked', false)
.children('.nav-widget, ul:not(.active)')
.delay('2000')
.slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
});
jQuery('.nav-widget').hide();
The reason it doesn't work by simply replacing the .hover() with .click() is because the hover event needs two functions, one for onhover one for offhover. The .click() event only takes one function. I assume you want the top function as your click event.
jQuery('.nav-add li.level0, .nav li').click(
function(){
jQuery(this).children('.nav-widget:not(.inSlide),
ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
}
I have this menu http://jsbin.com/useqa4/3
The hover I think works correct, but what I want is the normal: when the user's cursor isn't on the "Solution" item or on the submenu then I want the div #submenuSolutions to return in "display:none".
How can I achieve this?
If you read the jQuery api more carefuly you will see that the hover function can take handle two events http://api.jquery.com/hover/
$("document").ready(function() {
$("#menuSolutions a").hover(function () {
$("#menuSolutions").addClass("menuHover");
$("#submenuSolutions").show("3000");
},function() {
$("#menuSolutions").removeClass("menuHover");
$("#submenuSolutions").hide("3000")});
});
This will work only if your menu is a suckerfish menu.
See Demo
Just added this code to hide it back when mouse leaves it:
$("#submenuSolutions").mouseleave(function(){
$(this).hide();
});
Since submenuSolutions is the id of your panel, you can use the mouseleave event which triggers when mouse leaves the area of element specified.