PDA

View Full Version : pause mouseover and resume on mouseout.



muratyil
08-11-2015, 09:16 AM
1) Script Title:
Featured Content Slider v2.5
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem:
Hello

I'm new to this forum I ve made a search but did not find the answer.

I would like to know how to go about modifying the script so as to pause the scrolling when the user mouseover and have it resume on mouseout when the auto rotation is activated.

Thank you for any assistance.

vwphillips
08-11-2015, 11:51 AM
modify function(changes in red)


buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
if (setting.autorotate&&setting.autorotate[1]){
sliderdiv.onmouseover=function(){ clearTimeout(window["fcsautorun"+setting.id]); }
sliderdiv.onmouseout=function(){
window["fcsautorun"+setting.id]=setTimeout( function(){ featuredcontentslider.turnpage(setting, "next"); featuredcontentslider.autorotate(setting); },200);
}
}
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
pdivlinks[i].style.display="none" //hide this toc link
continue
}
pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
pdivlinks[i][setting.revealtype]=function(){
featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
return false
}
setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
pdivlinks[i].onclick=function(){
featuredcontentslider.turnpage(setting, this.className)
return false
}
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
this.autorotate(setting)
}
},

muratyil
08-17-2015, 04:58 PM
Thanks for quick answer I ve made changes but nothing changed. Regards.

vwphillips
08-18-2015, 08:51 AM
I have retested using the red modifications in post #2
and example 1 of the demonstration
and it works for me

please post a link to your page

wisdomdrnet
08-10-2018, 08:50 PM
Hello may be I have resurrected this thread but after making that code change on JS file everything is fine with resume on mouseout but there is a problem when autorotation is off. The scripts continue to work when auto rotation is disabled. The code make slider pause the scrolling when the user mouseover and have it resume on mouseout when the auto rotation is activated. But script does not stop when you disabled auto rotation. It continue to change items. Any suggestion for this? Thanks in advance.