• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 484
  • Last Modified:

Change Mouseenter to permanent visibility

Hello, all.

I have a script that was available on the net for a fading slideshow.  All is working fine.

I just want to tweak it one little bit.

The slideshow displays images in a fading manner.  When the mouse enters the image area, a caption slides up from the bottom, and then it disappears when leaving the image area.

I would like the caption to remain on all the time.

I will attach the .js file.


I noticed in the script, around line 76-ish, that there are 3 lines of code that seemed relevant:
                  else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
                        setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
                        setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
                  }


I see the "mouseenter" and "mouseleave" lines.  I altered the "mouseleave" to "SHOW" when the mouse left the image, and that worked fine.

My main question is... is there some other handler (not sure what it's called) that could replace "mouseenter" so the caption would be on all the time.  I tried removing the "mouseleave" line and removing the "mouseenter" portion to only have the function to "show" the panel, but that did not work.

The file is attached for context.

That little block of code seems to be where the action is for that feature, but being a Javascript amateur, I'm not sure how to make it permanently visible.

Your help is always appreciated.

Thanks,
Shane
fadeslideshow.js
0
lshane
Asked:
lshane
1 Solution
 
Gurvinder Pal SinghCommented:
try doing the same thing at mouseleave also
i.e.

 else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
                        setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
                        setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('show')})
                  }

0
 
lshaneAuthor Commented:
Hi, gurvinder372.

Yeah, I tried that one before.  It definitely keeps the caption visible... AFTER it slides up from the bottom, and it remains visible when leaving the area, and when it goes to the next slide without a caption.

I was just thinking that "mouseenter" could be replaced with something like "always", or something like that.  I am truly shooting in the dark.  I would think this little area is where the tweak would take place, but I'm not versed enough in Javascript to really parse the code effectively.

Any other ideas?
0
 
Gurvinder Pal SinghCommented:
or else you can do some thing simpler

setting.$wrapperdiv.mouseover(function() {
  slideshow.showhidedescpanel('show');
});

check this
http://api.jquery.com/mouseover/
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
eoindeveryCommented:
Replace

else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
                        setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
                        setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
                  }


with

else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
                        slideshow.showhidedescpanel('show')})
}


The script has some settings that can be tweaked in the html file by the looks of it. There is a setting
    setting.descreveal="always";
which should be set to if you want the description to always be visible.

Something like:

var mySlideshow=new fadeSlideShow("descreveal":"always");

in the HEAD section of the page.


0
 
Michel PlungjanIT ExpertCommented:
that would likely be


var mySlideshow=new fadeSlideShow({"descreveal":"always"});

0
 
lshaneAuthor Commented:
Perfect.
0
 
lshaneAuthor Commented:
Thank you, eoindevery.

I would not have thought it would have been in the HEAD section.

I found it and changed from "ondemand" to "always" = Worked perfectly.


Thank you!
Shane
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now