Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Adding a Short Delay before Triggering MouseOver Event

  1. #1
    Join Date
    Feb 2012
    Location
    London
    Posts
    24
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Default Adding a Short Delay before Triggering MouseOver Event

    Hello,
    Hello, Could anyone help please?
    Problem: I would like to create a mouseover delay, to delay the image appearing when the list item is moused over, (by say 500 milliseconds).
    Here is the javascript code that I have:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    
    $(".infoPanel li a img").hide();
    
    $(".infoPanel li a").eq(0).addClass("current");
    $("a.current").next().show();
    $(".infoPanel li a.current img").show();
    
    $(".infoLink").click(function() {
       if (this.className.indexOf("current") == -1) {
           $("a.current").next().hide();
           $(".infoPanel li a.current img").hide();
           $("a.current").removeClass("current");
           $(this).addClass("current");
           $("a.current").next().show();
           $(".infoPanel li a.current img").show();
       }
    });
    
    
    });
    </script>
    and this is the HTML bit:

    Code:
    <ul class="infoPanel">
       <li><a class="infoLink" href="#url"><span>Paula Rego</span></a>
          <div class="img"><img src="assets/projects/P_Rego.jpg" alt="" />
           <div class="text"><p>Publisher: Marlborough Gallery<br />
           <a href=" http://www.marlboroughgallery.com/galleries/graphics/artists/paula-rego/graphics" title="www.marlboroughgallery.com" target="_blank" rel="external">www.marlboroughgallery.com</a></p>
          </div></div>
       </li>
    </ul>
    If you need more info please let me know. My knowledge of javascript is zero.
    Any help will be very much appreciated..
    Last edited by FrankieL; 02-11-2012 at 09:13 PM.

  2. #2
    Join Date
    Aug 2011
    Location
    both, Germany and Bulgaria
    Posts
    54
    Thanks
    14
    Thanked 10 Times in 10 Posts

    Default

    Hello,

    why not using the standard setTimeout() function of JavaScript??
    You have to put your code for what-should-happen-after-onmouseover into the brackets.

    Cheers

  3. The Following User Says Thank You to XManBG For This Useful Post:

    FrankieL (02-12-2012)

  4. #3
    Join Date
    Feb 2012
    Location
    London
    Posts
    24
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Default

    Hi, Thank you for your help but I do not know how to write javascript. The only way this is going to work is if you actually type that bit of code into the code that I have provided.Is this possible?

  5. #4
    Join Date
    Aug 2011
    Location
    both, Germany and Bulgaria
    Posts
    54
    Thanks
    14
    Thanked 10 Times in 10 Posts

    Default

    This is not easy possible using only the code of you posted inhere. Better would be to post a link to the page, where you would like to use the asked delay.

  6. The Following User Says Thank You to XManBG For This Useful Post:

    FrankieL (02-12-2012)

  7. #5
    Join Date
    Feb 2012
    Location
    London
    Posts
    24
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Default

    Thank you for replying. I hope it is possible.

    here is the link:
    Last edited by jscheuer1; 06-25-2012 at 04:20 PM. Reason: user request

  8. #6
    Join Date
    Aug 2011
    Location
    both, Germany and Bulgaria
    Posts
    54
    Thanks
    14
    Thanked 10 Times in 10 Posts

    Smile

    OK, let's say you have that code, which I've copied out of your site:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    $(".infoPanel li a img").hide();
    $(".infoPanel li a").eq(0).addClass("current");
    $("a.current").next().show();
    $(".infoPanel li a.current img").show();
    $(".infoLink").mouseover(function() {
    if (this.className.indexOf("current") == -1) {
    $("a.current").next().hide();
    $(".infoPanel li a.current img").hide();
    $("a.current").removeClass("current");
    $(this).addClass("current");
    $("a.current").next().show();
    $(".infoPanel li a.current img").show();
    }
    });
    });
    </script>
    Now to make the pictures come out with 500ms delay, you have to change it like this:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
      $(".infoPanel li a img").hide();
      $(".infoPanel li a").eq(0).addClass("current");
      $("a.current").next().show();
      $(".infoPanel li a.current img").show();
    
      $(".infoLink").mouseover(function() {
        var intPictureDelay;
        clearTimeout(intPictureDelay);
        intPictureDelay = setTimeout(function(){
          if (this.className.indexOf("current") == -1) {
            $("a.current").next().hide();
            $(".infoPanel li a.current img").hide();
            $("a.current").removeClass("current");
            $(this).addClass("current");
            $("a.current").next().show();
            $(".infoPanel li a.current img").show();
          }
        },500);
      });
    });
    </script>
    And something else: I would use following script line for including jQuery, instead of your local older version 1.4.2. Or just download the latest version to your site from the jQuery site.
    Code:
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    And a tip: why not using standard jQuery functions fadeIn() and fadeOut(), which make the showing and hiding of elements more smoother and nicer (on my opinion)... and you will not need that delay.

    Cheers

  9. The Following User Says Thank You to XManBG For This Useful Post:

    FrankieL (02-12-2012)

  10. #7
    Join Date
    Feb 2012
    Location
    London
    Posts
    24
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Default

    Thank you so much for your help XManBG.
    I downloaded the latest version of JQuery, all wel. Then I copied your code in, and then the images stopped showing. Oh dear. Can't see where I have gone wrong with your two well explained instructions. I have uploaded the changes for you to see.

    The jQuery functions fadeIn() and fadeOut() sounds great. I Googled it, tried working it out, multiple times but just can't get it to work. I think learning javascript is going to take time. Would you be kind enough to also show me what the code is for fadeIn() and fadeOut() ?
    I really do appreciate your help. Can't thank you enough.
    Regards
    Françoise

  11. #8
    Join Date
    Aug 2011
    Location
    both, Germany and Bulgaria
    Posts
    54
    Thanks
    14
    Thanked 10 Times in 10 Posts

    Wink

    No problem, the fadeIn-fadeOut solution is even easier:

    Code:
    $(document).ready(function() {
      $(".infoPanel li a img").hide();
      $(".infoPanel li a").eq(0).addClass("current");
      $("a.current").next().stop(true,true).fadeIn("slow");
      $(".infoPanel li a.current img").stop(true,true).fadeIn("slow");
      $(".infoLink").mouseover(function() {
    	  if (!$(this).hasClass("current")) {
    		$("a.current").next().stop(true,true).fadeOut("slow");
    		$(".infoPanel li a.current img").stop(true,true).fadeOut("slow");
    		$("a.current").removeClass("current");
    		$(this).addClass("current");
    		$("a.current").next().stop(true,true).fadeIn("slow");
    		$(".infoPanel li a.current img").stop(true,true).fadeIn("slow");
    	  }
      });
    });

  12. The Following User Says Thank You to XManBG For This Useful Post:

    FrankieL (02-12-2012)

  13. #9
    Join Date
    Feb 2012
    Location
    London
    Posts
    24
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Default

    That works. Fantastic! Thank you very much.
    Would it be possible to still add the delay on mouseover so that the images don't appear as you run your mouse accross the list?

    For example, see - http://whitecube.com/artists/

    If you could send me the code for that too that would be a cherry on the cake. I really do appreciate your wonderful help. Thank you.

  14. #10
    Join Date
    Aug 2011
    Location
    both, Germany and Bulgaria
    Posts
    54
    Thanks
    14
    Thanked 10 Times in 10 Posts

    Thumbs up

    Francoise, you should start with your example. Our conversation is a good example of how different and subjective could be the point of view of every person. Here you have the code, which I think comes very close to what you're looking for Enjoy!!

    Code:
    $(document).ready(function() {
    	$(".infoPanel li a img").hide();
    	$(".infoPanel li a").eq(0).addClass("current");
    	$("a.current").next().stop(true,true).fadeIn("slow");
    	$(".infoPanel li a.current img").stop(true,true).fadeIn("slow");
    
    	var intPictureDelay;
    	$(".infoLink").mouseenter(function() {
    		var what = $(this);
    		clearTimeout(intPictureDelay);
    		intPictureDelay = setTimeout(function(){
    			if (!what.hasClass("current")) {
    				$("a.current").next().stop(true,true).fadeOut("slow",function(){
    					$("a.current").removeClass("current");
    					what.addClass("current");
    					$("a.current").next().stop(true,true).fadeIn("slow");
    				});
    			}
    		},1000);
    	});
    	$(".infoLink").mouseleave(function(){
    		clearTimeout(intPictureDelay);
    	});
    });

  15. The Following User Says Thank You to XManBG For This Useful Post:

    FrankieL (02-12-2012)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •