Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Change  Mouseenter to permanent visibility

Posted on 2010-08-25
7
Medium Priority
?
474 Views
Last Modified: 2012-08-13
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
Comment
Question by:lshane
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33528245
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
 

Author Comment

by:lshane
ID: 33528294
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33528311
or else you can do some thing simpler

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

check this
http://api.jquery.com/mouseover/
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 2

Accepted Solution

by:
eoindevery earned 2000 total points
ID: 33528324
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33528664
that would likely be


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

0
 

Author Closing Comment

by:lshane
ID: 33531446
Perfect.
0
 

Author Comment

by:lshane
ID: 33531459
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question