I am using the following javascript code for the drop-down menu. It has come default with the template. Now I want to remove the slide up option as it flickers a lot. I want that menu just fades out or simply hidden after the mouse-out.
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.menu-nav li').hover(
function() {
$j(this).addClass("active");
$j(this).find('.ulwrapper').stop(false, true).slideDown();
$j(this).find('.ulwrapper .ulwrapper').stop(false, true).slideUp();
},
function() {
$j(this).removeClass("active");
$j(this).find('div').stop(false, true).slideUp();
}
);
$j('.ulwrapper').hover(function() {
$j('.parent').addClass("active_tab");
}, function() {
$j('.parent').removeClass("active_tab");
});
});
</script>
Will really appreciate the solutions.
function() {
$j(this).addClass("active");
$j(this).find('.ulwrapper').stop(false, true).slideDown();
$j(this).find('.ulwrapper .ulwrapper').stop(false, true).fade();
},
function() {
$j(this).removeClass("active");
$j(this).find('div').stop(false, true).fade();
}
Hope this helps :-)
Related
I have the following code http://jsfiddle.net/largan/2n2Lf/25/
The idea is the div called soc_text to fade and fade out when hover on the soc_button div.
I have this script, but it doesn't seems to work.
$(document).ready(function()
{
$("div.soc_button").hover(
function () {
$("div.soc_text").fadeIn('slow');
},
function () {
$("div.soc_text").fadeOut('slow');
}
);
});
Any ideas?
Thanks
$(document).on("mouseover", "div.soc_button", function(){
$(this).find("div.soc_text").fadeToggle("slow");
});
Here's the answer:
$(document).ready(function () {
$("div.soc_button img").hover(
function () {
console.log();
$(this).parent().find('div.soc_text').fadeIn('slow');
},
function () {
$(this).parent().find('div.soc_text').fadeOut('slow');
}
);
});
I guess the code is self explanatory,
Regards
This applies the method to all matches with all div tags with soc_text css class
$("div.soc_text").fadeIn('slow');
Change this to
$(this).children('div.soc_text').fadeIn('slow');
is there any option to prevent slideUp() when hover its related div ?
$('#member1').hover(function () {
$("#memberdetails2").hide();
$("#memberdetails1").stop(true, true).slideDown();
}, function () {
$("#memberdetails1").stop(true, true).slideUp();
});
$('#memebr2').hover(function () {
$("#memberdetails1").hide();
$("#memberdetails2").stop(true, true).slideDown();
}, function () {
$("#memberdetails2").stop(true, true).slideUp();
});
DEMO http://jsfiddle.net/sweetmaanu/zDYyB/
Are you talking about something like this?
http://jsfiddle.net/zDYyB/2/
If you want the members detail to be always visible, remove
$('#company').on('mouseleave', function(e) {
$('.membersare').hide();
});
I'm having issues with two jQuery toggle buttons. They are used for mobile navigation buttons:
(function($) {
$(function() {
$('#mobile-nav-button').toggle(
function() {
$('#fullpage').animate({ left: 250 }, 'normal', function() {
$('#mobile-nav-button').html('Close');{
$('#social-nav-panel').hide();
}
});
},
function() {
$('#fullpage').animate({ left: 0 }, 'normal', function() {
$('#mobile-nav-button').html('Open');
});
}
);
$('#social-nav-button').toggle(
function() {
$('#fullpage').animate({ right: 250 }, 'normal', function() {
$('#social-nav-button').html('Close');
});
},
function() {
$('#fullpage').animate({ right: 0 }, 'normal', function() {
$('#social-nav-button').html('Open');
});
}
);
});
})(jQuery);
On their own they work fine. The first button #mobile-nav-button works perfectly each time. The second button #social-nav-button also works fine. However, if #mobile-nav-button is selected, then #social-nav-button will cease to work (this does not apply the other way round, as #mobule-nav-button will always work, even if #social-nav-button has been selected).
I've seen a lot of similar posts on stack overflow (though not the same problem), but my JS/jQuery knowledge is sadly nowhere near good enough to apply any fixes to my issue.
Any help would be massively appreciated!
You can check my example: Toggle Buttons show and hide
HTML:
<button type="button" id="mobile_bt">Mobile</button>
<button type="button" id="social_bt">Social</button>
JS using jQuery:
$('#mobile_bt').click(function() {
var help= $(this);
$('#social_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});
$('#social_bt').click(function() {
var help= $(this);
$('#mobile_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});
<script type="text/javascript">
$(function() {
jQuery(".attachment-thumbnail")
.pixastic("desaturate")
.pixastic("sepia")
});
</script>
I got this pixastic script working, now I need to revert the effects on rollover. I don't really know how to do that though.
The link is here if you want to take a look, http://mentor.com.tr/wp/?page_id=218
jQuery(".attachment-thumbnail").live({
mouseenter: function() {
Pixastic.revert(this);
},
mouseleave: function() {
jQuery(this).pixastic("desaturate");
}
});
Note that sepia won't do anything combined with desaturate
The plugin is not very well documented, so in the future I suggest taking a look into the source code, in this example line 403 shows
revert : function(img) {
$(window).load(function () {
$(".thumb").pixastic('desaturate');
$(".thumb").live({
mouseenter: function() {
Pixastic.revert(this);
},
mouseleave: function() {
$(this).pixastic("desaturate");
}
});
})
Hi guys everything said above works great if you're directly setting hover events on the image.
Whereas in my situation I wanted the the image to blur if I hover on the image container (which contains other divs too, not just the image).
Here is my code in case anyone else is dealing with something similar:
$(function () {
$('.col1.w1').mouseenter(function () {
var origImg = ($(this).find('.imageUrl'));
if (origImg.is('img')) {
Pixastic.process(origImg[0], 'blurfast', { amount: 2 });
}
});
$('.col1.w1').mouseout(function () {
var origImg = ($(this).find('.imageUrl'));
Pixastic.revert($(this).find('.imageUrl')[0]);
});
});
I'm further along in making this all work, but when I try to add some code that hides the others when one is clicked it expects a second click to hide again. How do I only show one menu at a time? PS These are not sibling menus.
$(function() {
$("a[rel=tooltip]").tooltip({ position:"bottom" });
$(".dd").toggle(function() {
$("ul", this).show();
$(this).addClass("on");
$("ul a", this).click(function(e) {
e.stopPropagation();
});
if $(".button1").click() {
$("#contextMenu2, #contextMenu3").hide();
};
if $(".button2").click() {
$("#contextMenu1, #contextMenu3").hide();
};
if $(".button3").click() {
$("#contextMenu1, #contextMenu2").hide();
};
},
function() { $("ul", this).hide(); $(this).removeClass('on'); }
);
});
I got this to work how I wanted it. Thanks to this thread jQuery Toggle State
$(".dd").click(function() {
$("ul", ".dd").not(this).hide();
$("ul", this).toggle();
});
$(".wrapper").click(function() {
$("ul", ".dd").hide();
});