ansaurus

Question

Image Hidden, then on mouse movement Fade-In, Fade-Out and Fade-In again.

Answer 1

+1 A:

I've updated my answer with an all-in-one page. Hopefully this will make things more clear. Better to have javascript in its own file, but this will get you going.

Make sure that this line:

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>

correctly points to your jQuery file with the right location and name.

Let me know how it goes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<title>tester page</title>  

<style> 
    <!--

    -->
 </style>

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>

<script type="text/javascript"> 

    $(document).ready(function() {
    var $top = $('#top');
    var $document = $(document);
    var timer = null;
    var timerIsRunning = false;

    $top.hide();

    $('#menu').mousemove(function(e){
        e.stopPropagation();
    });
    setTimeout(function() {
                        $document.mousemove(function(e) {
                                if($top.is(':hidden')) {
                                    $top.fadeIn();
                                } else {
                                    if(!timerIsRunning) {
                                        timerIsRunning = true;
                                        clearTimeout(timer);
                                        timer = setTimeout(function() { $top.fadeOut();  }, 5000);
                                        setTimeout(function() {timerIsRunning = false;}, 2000);
                                    }
                                }
                        });
                }, 500);

});

</script>
</head>
<body>
<div id="top">
   <img src="graphics/logo/logo.psd" title="" alt="">
</div>
</body>
</html>

patrick dw 2010-02-11 22:06:29

Thanks for the the help Patrick but I can't seem to get that to work :(

Laurence Benson 2010-02-11 22:19:21

Sorry, I didn't pay close attention to the rest of your code. Do you have jQuery imported in your html file? I'll update my answer with a more thorough solution in just a minute.

patrick dw 2010-02-11 22:23:06

I am so sorry. I just can't get this to work! Did you try this and got it working? Thanks so much for your help! :)

Laurence Benson 2010-02-12 12:16:15

Hi Laurence. I do see that I mis-named the `top` as `top_mailing`. That line should say `var $top = $('#top');`. Sorry about that. Try to change it, and let me know if it works.

patrick dw 2010-02-12 12:32:39

Thanks alot Patrick,That works really well.There are 2 things that I wondered if were possible.1. Can it start hidden until the mouse moves, rather than starts on and only disappears when the mouse is inactive. 2. When the mouse is over a serperate div (known as "index_wrapper_menu") it will also fade away. So when it is on the main part of the page the minor part ("top") remains hidden?Thanks so much for your help!!!!!!! :)

Laurence Benson 2010-02-12 15:48:59

Not a problem. Looks like the mousemove event gets fired when the page loads even if there's no movement. So what I did was I updated my answer to use another setTimeout to delay the 'mousemove' event handler from getting assigned for about half a second. That way, then the document fires its initial 'mousemove' the handler won't pick it up.

patrick dw 2010-02-12 16:18:34

Regarding your other issue, I don't get that behavior when I add elements to the page. Mouse movement over those triggers the handler just like normal. What does your page layout look like?

patrick dw 2010-02-12 16:19:33

To the first part... BRILLIANT :) thanks sooooo much

Laurence Benson 2010-02-12 16:30:25

The second part: the site is very simple. There are 2 div sections, one of which is the header. While you view the images in the 2nd div I don't want to show the header. When the user is confused then he/she will start moving the mouse, then the header will appear with a brief description. Sooooo, while users are working on the div for main part of the page, the header remains blank, but then when they are confused and start moving about the header appears.

Laurence Benson 2010-02-12 16:35:29

I think I misunderstood your question. Are you saying that you want the top to remain hidden when it is hovering over a specific div?

patrick dw 2010-02-12 16:50:26

Yes, "top" to remain hidden when hovering over "main" or the mouse being inactive (like now).

Laurence Benson 2010-02-12 16:58:34

With a 5 second delay as the mouse moves onto the div "main".

Laurence Benson 2010-02-12 17:01:48

I think I see. Just to clarify, `#top` only gets shown when 'entering' `#main`. But as long as you remain 'on' `#main`, you can move the mouse around without showing `#top`. Is that right? It is hard to tell exactly what you're after without seeing your page layout.

patrick dw 2010-02-12 17:17:41

Almost :). #top gets shown when moving the mouse. When the mouse 'enters' #main, #top fades away after 5 seconds. As long as you remain 'on' #main, you can move the mouse around without showing #top.

Laurence Benson 2010-02-12 17:27:10

Ok, got it. I edited my answer. I added a 'mousemove' event handler to '#menu' (the name is probably wrong), then referenced the event and called stopPropagation(). Since events in jQuery 'bubble' from the inner-most element up to the top (document), you can halt the bubbling with stopPropagation(). That way your menu will catch 'mousemove' and not let it go any further. I also added a line to make '#top' fade immediately.

patrick dw 2010-02-12 17:46:47

Really close :) thanks :) I've put it up at: http://erbimages.com/demo/ If you look closely and play around there are 2 things I would like to change. I would like there to be a 5 sec time delay when #top fades out. I also don't understand why, when you go over #main and then go off #main, #top fades in and out very fast. I am sure you will see what I mean when you play around.

Laurence Benson 2010-02-12 18:15:31

Sorry... typo...Change: I would like there to be a 5 sec time delay when #top fades out.To: I would like there to be a 5 sec time delay when #top fades out after the mouse 'enters' #main.

Laurence Benson 2010-02-12 18:26:15

You don't have an element called #main. Do you mean #menu (the photo area)? If so, then just delete the line under stopPropagation() that reads: `$top.fadeOut();`. Also, in the setTimeout function where it says 3000, that represents 3 seconds. If you want 5 seconds, replace it with 5000. *When you say 'time delay', I assume you mean the 'time delay' before the fading starts. Not the duration it takes for the fading to occur.*

patrick dw 2010-02-12 19:10:21

Thanks Patrick :)... but there is a problem, i am sure it is the final one :) if you scroll the mouse for 5 seconds it fades out and then back in. Can we stop it fading out? Thanks :)

Laurence Benson 2010-02-12 19:39:36

Sorry for all the updates. I think I've got something workable. You'll may end up tweaking the numbers a little, but it seems to do what you're looking for.

patrick dw 2010-02-13 02:05:29

Great Patrick :) :) Exactly what I was looking for!!! I can't thank you enough!!! :D :D

Laurence Benson 2010-02-13 15:14:31

My pleasure. :o)

patrick dw 2010-02-13 17:30:24

Patrick. I am moving on, lol. Do you think you could help on this topic. http://stackoverflow.com/questions/2283495/image-gallery-like-getty-images-but-with-no-database you seem to be the best guy around here! Thanks so much. :)

Laurence Benson 2010-02-17 18:55:54

Answer 2

+1 A:

Try this:

$(document).ready(function() {
    var timer;
    // hide initially
    $('#top').hide();

    $(document).mousemove(function() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
        $('#top').fadeIn();
        timer = setTimeout(function() {
            $('#top').fadeOut();
        }, 3000)
    });
});

Ben Rowe 2010-02-11 22:29:01

Thanks Ben,It doesn't seem to work. Could you show me how you would lay this out in a script to make sure that it is not me being such a novice!

Laurence Benson 2010-02-12 12:10:44

instead of using a setTimeout, why not use jQuery's .delay()???

jhanifen 2010-09-14 18:33:27

Answer 3

A:

I too used this script and it works perfectly. However, I just realized that on touch devices (i.e. Ipad, Iphone), the div will not appear since there is no "mouse activity". Since this is my navigation bar, you could see why this would be problematic. Is there a conditional statement that could be incorporated so that it doesn't disappear on ipads or iphones? Or any other way? Thanks in advance for the help.

Dean 2010-09-14 18:31:43

ansaurus

tags:

views:

answers:

Image Hidden, then on mouse movement Fade-In, Fade-Out and Fade-In again.

related questions