rosebloomca / jquery-content-panel-switcher

Automatically exported from code.google.com/p/jquery-content-panel-switcher
0 stars 0 forks source link

Switch on mouseover? #3

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
Is there any way to alter the code so that it triggers switcher-content on 
mouseover rather than click?

Here's my example : http://nerotic.net/auxout/

This is the code I was using, including my animating the switcher-content 
panels until the trigger dots are mousedover: 

   $(document).ready(function() {
   jcps.fader(100, '#switcher-panel');
   var timeouts = new Array();
   var cities = ["#berlin", "#wired", "#sicily", "#sterephile", "#dave", "#hometheatre", "#lsd", "#lefsetz", "#musicart", "#videohifi", "#alu", "#unplggd", "#alfa", "#digitaltrends", "#playboy", "#uncrate"];
   var timeoutLength = 7400;
   for (i = 0; i < cities.length; i++)
   {
       timeouts[i] = setTimeout("callCity('" + cities[i] +"')", timeoutLength * (i + 1));
   }
       $('.switcher').mouseover(function() {
          for( key in timeouts )
          {  
            clearTimeout(timeouts[key]);  
             }
           });
   });
   function callCity(city)
    {
    $(city).trigger('click');
    }

I've tried:

    $(city).trigger('mouseover');
    $(city).trigger('onMouseOver');

I then saw some information on jquery live() and tried this:

    $("a.fb").live('onMouseOver', function(){ 
                $(city).trigger();
        });

and this:

    $("a.fb").live('mouseover', function(){ 
                $(city).trigger();
        });

However, none works.  In all cases the map continues to function in the same 
way, the click event continues to work and no errors are returned.

How would I continue to have the animation stop on mouseover as well as trigger 
the click event?

Original issue reported on code.google.com by ner...@gmail.com on 18 Nov 2011 at 10:50

GoogleCodeExporter commented 8 years ago
A buddy of mine sorted this for me:

It was as simple as I thought, just needed to change:

    $('.switcher' + panel).click(function() {

to

    $('.switcher' + panel).mouseover(function() {

in the called js file. 

Original comment by ner...@gmail.com on 18 Nov 2011 at 3:39

GoogleCodeExporter commented 8 years ago
nero21 is correct there, except you have to be careful with using the native 
mouseover function,  its prone to event queuing.  It doesnt compensate for when 
people accidently roll their mouse over.

You should use hoverIntent instead, which is a simple replacement for mouseover 
or hover()

See it here: http://plugins.jquery.com/project/hoverIntent

Original comment by cheyne.w...@gmail.com on 18 Nov 2011 at 4:44

GoogleCodeExporter commented 8 years ago
[deleted comment]
GoogleCodeExporter commented 8 years ago
I love your Plugin. Thanks so much for taking the time to create it.

My client asked to use the mouseover instead of click so I've heeded the 
information above and went the .mouseover direction. For some reason, 
.hoverIntent isn't working for me. All's good though. I'm happy.

My problem is I would love for the image to go back to default after user is no 
longer mousing over.

Any suggestions would be most appreciated.

Thanks,
John

Original comment by CrabbyMa...@gmail.com on 17 Jul 2013 at 7:51