Results 1 to 5 of 5

Thread: pause mouseover and resume on mouseout.

  1. #1
    Join Date
    Aug 2015
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default pause mouseover and resume on mouseout.

    1) Script Title:
    Featured Content Slider v2.5
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...tentslider.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.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    modify function(changes in red)

    Code:
    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)
    	}
    },
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Aug 2015
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for quick answer I ve made changes but nothing changed. Regards.
    Last edited by muratyil; 08-17-2015 at 05:29 PM.

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Aug 2018
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Animate along path - pause-resume - on hover
    By robertvanroon in forum JavaScript
    Replies: 6
    Last Post: 12-13-2011, 01:04 AM
  2. Changing the background button for pause/resume states
    By nickrowe_2k in forum JavaScript
    Replies: 0
    Last Post: 08-05-2011, 01:58 PM
  3. Ajax Tabs Content Script: Pause/Resume slidehow?
    By guvenck in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-23-2010, 09:29 AM
  4. Featured Content Slider v2.4 pause and resume
    By Azteccoupe in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-28-2009, 03:21 AM
  5. Mouseover - Mouseout HELP!
    By ubh in forum JavaScript
    Replies: 2
    Last Post: 08-29-2005, 10:42 PM

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
  •