Mouseover help with Featured Content Slider

**p15** · 09-14-2010, 07:08 PM

Script Title: Featured Content Slider v2.4

Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

-----------
I am really struggling with the mouseover function working with the auto rotate setting. I am using the latest js version and have tried an additonal Javascript file that works once that is available @ http://www.dynamicdrive.com/forums/blog.php?b=6.

This seems a great bit of code generally and the auto-rotate works great with the standard js it's just getting it to pause on mouseover (and follow the mouseover through the menu)

Thanks

Matt

**ddadmin** · 09-15-2010, 04:10 AM

Just to clarify then, you're having difficulty getting the modified .js file mentioned in the blog post to work as described on your page? Do you have a link to the problem page on your site?

**p15** · 09-15-2010, 12:47 PM

Unfortunately I am just working with it on localhost at the moment. I am trying to get either JS file to work with the auto rotate setting. it doesn't work at all in the v2.4 JS, and only works on 1 mouseover then stops in the file published on the blog post. If it helps I can post the various code I am using later when I have access to it again?

**p15** · 09-15-2010, 09:33 PM

This all relates to the "Splash Container Div"

The relevant CSS of the page I am working on:

Code:

#splashcontainer {
float: left;
width: 770px;
height: 400px;
}

#splashcontainer #splashmain {
float: left;
width: 510px;
height: 400px;
background: #ffffff;
}

#splashcontainer #splashmain a img {
border: none;
}

.contentdiv {
height: 400px;
}


#splashcontainer #paginate-splashmain{
float: left;
width: 260px;
height: 100px;
background: #ccccc1;
}

#splashcontainer #paginate-splashmain a img{
width: 260px;
height: 100px;
border: 0px solid gray;
margin-top: 0px;
}

#splashcontainer #paginate-splashmain a img:hover, #paginate-slider4 a.selected img{
border: 1px solid red;
}

The HTML of the page I am working on:

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>Site with Splash Menu</title> 
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress2/wp-content/themes/splashtheme/style.css" /> 
<script type="text/javascript" src="http://localhost/wordpress2/wp-content/themes/splashtheme/contentslider.js"> 
 
/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
 
</script> 
</head> 
<body> 
<div id="container"> 
<div id="headercontainer"> 
<div class="headercontent"> 
<h1>Site with Splash menu</h1> 
</div> 
<div class="mainnavigation"> 
<li class="pagenav"><h1><ul><li class="page_item page-item-8 current_page_item"><a href="http://localhost/wordpress2/" title="Home">Home</a></li> 
<li class="page_item page-item-11"><a href="http://localhost/wordpress2/?page_id=11" title="About">About</a></li> 
<li class="page_item page-item-15"><a href="http://localhost/wordpress2/?page_id=15" title="New Page">New Page</a></li> 
<li class="page_item page-item-13"><a href="http://localhost/wordpress2/?page_id=13" title="Donate">Donate</a></li> 
</ul></li></div> 
</div><div id="contentcontainer"> 
<div id="splashcontainer"> 
<div id="splashmain" class="sliderwrapper"> 
<div class="contentdiv"> 
<a href="http://www.p15design.co.uk" class="toc"><img src="http://localhost/wordpress2/wp-content/themes/splashtheme/splashimages/red.jpg" /> 
</div> 
<div class="contentdiv"> 
<a href="http://www.p15design.co.uk" class="toc"><img src="http://localhost/wordpress2/wp-content/themes/splashtheme/splashimages/green.jpg" /> 
</div> 
<div class="contentdiv"> 
<a href="http://www.p15design.co.uk" class="toc"><img src="http://localhost/wordpress2/wp-content/themes/splashtheme/splashimages/yellow.jpg" /> 
</div> 
<div class="contentdiv"> 
<a href="http://www.p15design.co.uk" class="toc"><img src="http://localhost/wordpress2/wp-content/themes/splashtheme/splashimages/blue.jpg" /> 
</div> 
</div> 
 
<div id="paginate-splashmain" style="background:white"> 
<a href="http://www.p15design.co.uk" class="toc"><img src="http://localhost/wordpress2/wp-content/themes/splashtheme/splashimages/redsmall.jpg" /></a> 
</div> 
<div id="paginate-splashmain" style="background:white"> 
<a href="http://www.stjamescarlisle.org.uk" class="toc someclass"><img src="http://localhost/wordpress2/wp-content/themes/splashtheme/splashimages/greensmall.jpg" /></a> 
</div> 
<div id="paginate-splashmain" style="background:white"> 
<a href="http://www.keswickministries.org.uk" class="toc someotheclass"><img src="http://localhost/wordpress2/wp-content/themes/splashtheme/splashimages/yellowsmall.jpg" /></a> 
</div> 
<div id="paginate-splashmain" style="background:white"> 
<a href="http://www.gmail.com" class="toc someotheclass"><img src="http://localhost/wordpress2/wp-content/themes/splashtheme/splashimages/bluesmall.jpg" /></a> 
</div> 
<script type="text/javascript"> 
 
featuredcontentslider.init({
id: "splashmain", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [false, 0.5], //[true/false, fadedegree]
autorotate: [true, 1000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
 
</script> 
 
</div> 
 
 
<div id="maincontent"> 
<div class="news"> 
<h3> Latest News </h3> 
</div> 
<div class="text"> 
</div> 
</div> 
</div> 
<div id="footercontainer"> 
<div class="footermenu"> 
</div> 
<div class="copyright"> 
</div> 
</div> 
</div> 
</body> 
</html>

**ddadmin** · 09-16-2010, 08:09 AM

Hmm just based on the code you posted it doesn't tell me why the script is behaving this way. Try creating a blank page locally on your hard drive with just Featured Content Slider on it and using the modified .js file- does it behave the way it should onMouseover? If so this at least tells me the issue is specific to your actual page somehow, and not with the script.

**p15** · 09-16-2010, 09:19 PM

Hi thanks for your help so far.

Have been playing with it tonight starting with jsut running it on its own. I ahve managed to get the mosueover working properly (it doesn't like the extra paginate divs i had put around each image - putting them in a table seems to ahve fixed this).

However, once i use the mouseover the auto rotate still stops.

here is the cleaner code i used with the modified JS file from the blog post.

Thanks again

Matt

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
 
<style type="text/css"> 
 
#slidercontainer {
float: left;
width: 770px;
height: 400px;
}
 
#slider4{
border-color: darkred;
margin-left: 15px;
height: 280px
}
 
.contentdiv{
height: 400px;
}
 
 
#paginate-slider4{
float: left;
background-color: darkred;
border-color: darkred;
margin-left: 15px;
}
 
#paginate-slider4 a img{
width: 80px;
height: 60px;
border: 2px solid gray;
margin-top: 5px;
}
 
#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: 2px solid red;
}
 
</style> 
 
<script type="text/javascript" src="contentslider.js"> 
 
/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
 
</script> 
  <body> 
 
 
<body> 
<div id="slidercontainer"> 
<div id="slider4" class="sliderwrapper"> 
 
<div class="contentdiv" style="background: url(red.jpg) center left no-repeat"> 
</div> 
 
<div class="contentdiv" style="background: url(blue.jpg) center left no-repeat"> 
</div> 
 
<div class="contentdiv" style="background: url(green.jpg) center left no-repeat"> 
</div> 
 
<div class="contentdiv" style="background: url(yellow.jpg) center left no-repeat"> 
</div> 
 
</div> 
 
<div id="paginate-slider4" style="background:white"> 
<a href="#" class="toc" style="margin-left: 35px"><img src="redsmall.jpg" /></a> 
 
<a href="#" class="toc someclass"><img src="bluesmall.jpg" /></a> 
 
<a href="#" class="toc someotheclass"><img src="greensmall.jpg" /></a> 
 
<a href="#" class="toc someotheclass"><img src="yellowsmall.jpg" /></a> 
 
</div> 
 
 
<script type="text/javascript"> 
 
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
 
</script> 
</div> 
 
  </body> 
</html>

**ddadmin** · 09-18-2010, 12:01 AM

I think I understand your issue now- right now if you mouse over the pagination links, it selects the desired slide while canceling the auto rotate feature. What you want is for the slider to resume rotating onmouseout of the pagination links.

Firstly, to understand why the script is doing this even with the modified .js file, the reason is when you set revealtype="mouseover" inside your initialization code, mousing over a pagination link is the same as actually selecting a slide to view, or clicking on the link. In that case, the script is designed to stop the slider, unlike simply mousing over and out of the slider display area.

To get the modified .js file working as I'm speculating how you want it to, inside the modified .js file, find the below lines:

Code:

		pdiv[setting.revealtype]=function(){
			featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
		}

and make the change in red to it:

Code:

		pdiv['click']=function(){
			featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
		}

**azoomer** · 09-18-2010, 12:41 AM

Bingo. That's it. Thanks a lot DD

Thread: Mouseover help with Featured Content Slider

Thread Tools

Search Thread

Mouseover help with Featured Content Slider

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions