mouseOut effect with a mask - javascript

The following code produces a mask on a web page when hovering over a menu, my question is how do I edit this code to make the mask go away with mouseout event? As it sits now I have to click for the mask to go away. Any help is appreciated.
<script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
});
</script>

$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
$("#menuwrapper").mouseout(function() {
$(this).hide();
});
});

Or more succinctly:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).hide(); } // opposite of expose() function
);

If you are using the expose library, you can setup the event like this:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).unexpose(); } // opposite of expose() function
);

Related

Using the script i have, I am able to show .menu on click, but can not get it to disappear again on second click to return to default?

$(document).ready(function(){
$('.nav').hide();
$(".menu").click( function() {
$(".menu").toggleClass("close");
$('.nav').show();
});
});
Try this:
$(document).ready(function(){
$('.nav').hide(); //Class nav in the begin should be closed.
$(".menu").click( function() {
$(".menu").toggleClass("close");
$('.nav').toggle();
});
});
Hope 'll help you :)
Using toggle will work for you.
$(document).ready(function(){
$('.nav').hide();
$(".menu").click( function() {
$(".menu").toggleClass("close");
$('.nav').toggle();
});
});

Stop second event

I'm building a multi-level menu, where the submenu is being displayed with jquery.
It drops down when a main link is hovered, then slides up when the mouse leaves.
I want to stop the mouseleave action, when mouseover is active, but i can't stop the second event (animate->margin-bottom). I'm new to jquery, so i went through many questions and googled a lot, but i don't really understand what i'm supposed to do here. Any help will be greatly appreciated!
jQuery(".item-102 a").on('mouseenter', function() {
jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
jQuery("#submenu").slideDown("slow");
});
jQuery("#submenu").on('mouseleave',function() {
jQuery("#submenu").delay(2000).slideUp("slow");
jQuery("#horizontal-menu").delay(2000).animate({"margin-bottom": "+20px"}, 200);
});
jQuery("#submenu").on('mouseover', function() {
jQuery(this).stop();
});
Just try with:
jQuery("#submenu").on('mouseover', function()
{
jQuery(this).stop();
jQuery("#horizontal-menu").stop();
});
I've managed to do it, thanks everyone. Hsz's answer was good, but it didn't fully stop the event, so here's the solution:
function(){
jQuery(".item-102 a").on('mouseenter', function() {
jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
jQuery("#submenu").slideDown("slow");
});
var hover_off = false;
jQuery("#submenu").mouseover(function (){
hover_off = false;
});
jQuery("#submenu").mouseleave(function() {
hover_off = true;
setTimeout(myMouseOut, 1000);
});
function myMouseOut(){
if (hover_off == true){
jQuery("#submenu").delay(1000).slideUp("slow");
jQuery("#horizontal-menu").delay(1000).animate({"margin-bottom": "+20px"}, 200);
}
};

hiding div when clicked outside the div

Please look at the code here : http://jsbin.com/esokic/10/edit#source
When I click on customer support a div is shown
What I want is when someone clicks out of the div, the div should hide, I tried a couple of things, but they don't seem to work..
$(document.body).one("click", function() {$(".cust-support-outer").hide();
});
Also:
$("body").click(function(e){
if(e.target.className !== "csupport-drop")
{
$(".cust-support-outer").hide();
}
});
Would appreciate any help...
--Arnab
Arnab
I did this change in your js and worked
try this, use this js code
$(function(){
$(".csupport-drop").click(function(){
$(".csupport-drop").addClass("active-drop-tab");
$(".cust-support-outer").show();
return false
});
$(document).bind("click", function(e) {
if(!$(e.target).hasClass("get-daily-alerts-outer")){
$(".get-daily-alerts-outer").hide()
}
});
$(".close").click(function(){$(".get-daily-alerts-outer").hide();
return false
});
$(".get-deal-alerts").click(function(){$(".get-daily-alerts-outer").show();
return false
});
});
I just changed how you bind the "click" event to the document and pass the Event object to the function so you can check over what element the click event was fire.
Try:
var mouse_is_inside = false;
$(document).ready(function()
{
$('.cust-support-outer').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.cust-support-outer').hide();
});
});
Bind this to body
$("body").click(function() {
if ($(this).attr("class") == "cust-support-outer") {
// inside
} else {
// not inside
}
});

How to revert the pixastic effect?

<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]);
});
});

Help needed Pausing/Resuming FadeIn and FadeOut

Hopefully this is a simple request. I found this code that will work perfectly for what I want to do (Rotate through list items while fading in and out) http://jsfiddle.net/gaby/S5Cjm/1/ . However, I am looking to have the animation pause on mouse over and resume on mouse out. I am a novice at the moment with Javascript and JQuery, so any help would be appreciated.
Thanks.
EDIT: Side questions: Is there a benefit to using JQuery to do this? Would a stand alone script be more appropriate?
I attached the hover event to your list items. The over function stops the animation and all following animations using jQuery.stop(true). The out function resumes the animation:
http://jsfiddle.net/US4Fc/1/
var duration = 1000
function InOut(elem) {
elem.delay(duration).fadeIn(duration).delay(duration).fadeOut(
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function() {
$('#content li').hide().hover(
function() {
$(this).stop(true)
},
function() {
var curOp = Number($(this).css("opacity"));
$(this).fadeTo(duration*(1-curOp), 1, function() {
InOut($(this))
});
}
);
InOut($('#content li:first'));
});
Will this work for you?
$(function(){
var active;
$('#content li').hide().hover(
function(){
active = $(this).stop();
},
function(){
active && InOut(active);
}
);
InOut( $('#content li:first') );
});

Categories