Results 1 to 9 of 9

Thread: Featured Content Slider skipping last contendiv

  1. #1
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Featured Content Slider skipping last contendiv

    1) Script Title:
    Featured Content Slider Nov 3, 2007

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

    3) Describe problem:
    I am trying to have 6 featured slides on this site (http://www.thecompliancecenter.com) and Everything works perfectly except on the 5th slide the rotation skips right over the last (6th) slide and restarts the loop.

    That is the exact HTML part.

    Code:
    <div id="wrap">
          <div id="topFeatured" class="contentslide">
            <div class="opacitylayer">
              <div class="contentdiv"><a href="/publications/ghs.htm?id=featured"><img src="img/ads/homepage-featured/medium/med_bk1_bk2.png" alt="New GHS within OSHA compliance Manuals!" border="0" /></a></div>
              <div class="contentdiv"><a href="/services/msds.htm?id=featured"><img src="img/ads/homepage-featured/medium/med_msds.png" alt="ICC is the leader in compliance and can help your company stay in compliance with our msds services" border="0" /></a></div>
              <div class="contentdiv"><a href="/schemplianceweb/index.htm?id=featured"><img src="img/ads/homepage-featured/medium/med_chemplianceweb.png" alt="ChemplianceWeb has made msds management and GHS label printing easy" border="0" /></a></div>
              <div class="contentdiv"><a href="/posters/ghs.htm?id=featured"><img src="img/ads/homepage-featured/medium/med_ghs_posters_charts.png" alt="Our GHS posters and charts keep your employees informed." border="0" /></a></div>
              <div class="contentdiv"><a href="/services/msds.htm?id=featured"><img src="img/ads/homepage-featured/medium/med_erg.png" alt="Pre-order your 2012 ERG today!" border="0" /></a></div>
              <div class="contentdiv"><a href="/labels/ghs/index.htm?id=featured"><img src="img/ads/homepage-featured/medium/med_ghs_labels.png" alt="Our years of regulatory expertise has prepared us to provide compliant labels and label services to our customers" border="0" /></a></div>
            </div>
          </div>
          <div class="pagination" id="paginate-topFeatured" style="background: none;"> 
            <script type="text/javascript">
    	  		var linktext=["&middot;", "&middot;", "&middot;", "&middot;", "&middot;", "&middot;"]
    	  		//var nexttext=[' ']
    			//var nexttext=['<img src="img/featured_next.gif" border="0" alt="" style="margin: 1px 0 1px 0;" />']
    	  		ContentSlider("topFeatured", 5000, linktext) //Example: ContentSlider("topFeatured", 5000, linktext, nexttext)		
          </script> 
          </div>
        </div>
    CSS

    Code:
    .contentslide {
    	color: #000000;
    	height:180px;
    	width: 490px;	
    }
    
    .contentslide .opacitylayer {
    	height: 100%;
    	filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
    	opacity: 1;
    	width: 100%;
    	-moz-opacity: 1;
    }
    
    .contentslide .contentdiv {
    	display: none;
    }
    
    .pagination {
    	height: 15px;
    	padding: 4px 0 4px 0;
    	text-align: center;
    	width: 490px;
    }
    
    * html .pagination {
    	width: 490px;
    }
    
    .pagination a {
    	background: url('../img/featured_choice.gif') no-repeat center;
    	color: #e1e1e1;
    	left: 4px;
    	padding: 4px;
    	position: relative;
    }
    
    .pagination a:hover {
    	background: url('../img/featured_rollover.gif') no-repeat center;
    	color: #c8c8c8;
    	text-decoration: none;
    }
    
    .pagination a.selected {
    	background: url('../img/featured_current.gif') no-repeat center;
    	color: #999999;
    	text-decoration: none;
    }
    
    #wrap {
    	float: left;
    	margin: 0 5px 25px 0;
    	padding-left: 12px; 
    }

  2. #2
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is the Javascript:

    Code:
    //** Featured Content Slider script-  Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    //** Last updated: Nov 3rd- 07- Added optional fade transition effect.
    
    ////Ajax related settings
    var csbustcachevar=0 //bust potential caching of external pages after initial Ajax request? (1=yes, 0=no)
    var enabletransition=1 //enable fade into view transition effect? (1=yes, 0=no)
    var csloadstatustext="<img src='../img/loading.gif' /> Requesting content..." //HTML to indicate Ajax page is being fetched
    var csexternalfiles=[] //External .css or .js files to load to style the external content(s), if any. Separate multiple files with comma ie: ["cat.css", dog.js"]
    
    ////NO NEED TO EDIT BELOW////////////////////////
    var enablepersist=true
    var slidernodes=new Object() //Object array to store references to each content slider's DIV containers (<div class="contentdiv">)
    var csloadedobjects="" //Variable to store file names of .js/.css files already loaded (if Ajax is used)
    
    function ContentSlider(sliderid, autorun, customPaginateText, customNextText){
    	var slider=document.getElementById(sliderid)
    	if (typeof customPaginateText!="undefined" && customPaginateText!="") //Custom array of pagination links text defined?
    		slider.paginateText=customPaginateText
    	if (typeof customNextText!="undefined" && customNextText!="") //Custom HTML for "Next" link defined?
    		slider.nextText=customNextText
    	slidernodes[sliderid]=[] //Array to store references to this content slider's DIV containers (<div class="contentdiv">)
    	ContentSlider.loadobjects(csexternalfiles) //Load external .js and .css files, if any
    	var alldivs=slider.getElementsByTagName("div")
    	for (var i=0; i<alldivs.length; i++){
    		if (alldivs[i].className=="opacitylayer")
    			slider.opacitylayer=alldivs[i]
    		else if (alldivs[i].className=="contentdiv"){
    			slidernodes[sliderid].push(alldivs[i]) //add this DIV reference to array
    			if (typeof alldivs[i].getAttribute("rel")=="string") //If get this DIV's content via Ajax (rel attr contains path to external page)
    				ContentSlider.ajaxpage(alldivs[i].getAttribute("rel"), alldivs[i])
    		}
    	}
    	ContentSlider.buildpagination(sliderid)
    	var loadfirstcontent=true
    	if (enablepersist && getCookie(sliderid)!=""){ //if enablepersist is true and cookie contains corresponding value for slider
    		var cookieval=getCookie(sliderid).split(":") //process cookie value ([sliderid, int_pagenumber (div content to jump to)]
    		if (document.getElementById(cookieval[0])!=null && typeof slidernodes[sliderid][cookieval[1]]!="undefined"){ //check cookie value for validity
    			ContentSlider.turnpage(cookieval[0], parseInt(cookieval[1])) //restore content slider's last shown DIV
    			loadfirstcontent=false
    		}
    	}
    	if (loadfirstcontent==true) //if enablepersist is false, or cookie value doesn't contain valid value for some reason (ie: user modified the structure of the HTML)
    		ContentSlider.turnpage(sliderid, 0) //Display first DIV within slider
    	if (typeof autorun=="number" && autorun>0) //if autorun parameter (int_miliseconds) is defined, fire auto run sequence
    		window[sliderid+"timer"]=setTimeout(function(){ContentSlider.autoturnpage(sliderid, autorun)}, autorun)
    }
    
    ContentSlider.buildpagination=function(sliderid){
    	var slider=document.getElementById(sliderid)
    	var paginatediv=document.getElementById("paginate-"+sliderid) //reference corresponding pagination DIV for slider
    	var pcontent=""
    	for (var i=0; i<slidernodes[sliderid].length; i++) //For each DIV within slider, generate a pagination link
    		pcontent+='<a href="#" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', '+i+'); return false\">'+(slider.paginateText? slider.paginateText[i] : i+1)+'</a> '
    	pcontent+=''
    	//pcontent+='<a href="#" style="font-weight: bold;" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', parseInt(this.getAttribute(\'rel\'))); return false\">'+(slider.nextText || "Next")+'</a>'
    	paginatediv.innerHTML=pcontent
    	paginatediv.onclick=function(){ //cancel auto run sequence (if defined) when user clicks on pagination DIV
    	if (typeof window[sliderid+"timer"]!="undefined")
    		clearTimeout(window[sliderid+"timer"])
    	}
    }
    
    ContentSlider.turnpage=function(sliderid, thepage){
    	var paginatelinks=document.getElementById("paginate-"+sliderid).getElementsByTagName("a") //gather pagination links
    	for (var i=0; i<slidernodes[sliderid].length; i++){ //For each DIV within slider
    		paginatelinks[i].className="" //empty corresponding pagination link's class name
    		slidernodes[sliderid][i].style.display="none" //hide DIV
    	}
    	paginatelinks[thepage].className="selected" //for selected DIV, set corresponding pagination link's class name
    	if (enabletransition){
    		if (window[sliderid+"fadetimer"])
    			clearTimeout(window[sliderid+"fadetimer"])
    		this.setopacity(sliderid, 0.1)
    	}
    	slidernodes[sliderid][thepage].style.display="block" //show selected DIV
    	if (enabletransition)
    		this.fadeup(sliderid, thepage)
    	//Set "Next" pagination link's (last link within pagination DIV) "rel" attribute to the next DIV number to show
    	paginatelinks[paginatelinks.length-1].setAttribute("rel", thenextpage=(thepage<paginatelinks.length-2)? thepage+1 : 0)
    	if (enablepersist)
    		setCookie(sliderid, sliderid+":"+thepage)
    }
    
    ContentSlider.autoturnpage=function(sliderid, autorunperiod){
    	var paginatelinks=document.getElementById("paginate-"+sliderid).getElementsByTagName("a") //Get pagination links
    	var nextpagenumber=parseInt(paginatelinks[paginatelinks.length-1].getAttribute("rel")) //Get page number of next DIV to show
    	ContentSlider.turnpage(sliderid, nextpagenumber) //Show that DIV
    	window[sliderid+"timer"]=setTimeout(function(){ContentSlider.autoturnpage(sliderid, autorunperiod)}, autorunperiod)
    }
    
    ContentSlider.setopacity=function(sliderid, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
    	var targetobject=document.getElementById(sliderid).opacitylayer || null //reference slider container itself
    	if (targetobject && targetobject.filters && targetobject.filters[0]){ //IE syntax
    		if (typeof targetobject.filters[0].opacity=="number") //IE6
    			targetobject.filters[0].opacity=value*100
    		else //IE 5.5
    			targetobject.style.filter="alpha(opacity="+value*100+")"
    		}
    	else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
    		targetobject.style.MozOpacity=value
    	else if (targetobject && typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
    		targetobject.style.opacity=value
    	targetobject.currentopacity=value
    }
    
    ContentSlider.fadeup=function(sliderid){
    	var targetobject=document.getElementById(sliderid).opacitylayer || null //reference slider container itself
    	if (targetobject && targetobject.currentopacity<1){
    		this.setopacity(sliderid, targetobject.currentopacity+0.1)
    		window[sliderid+"fadetimer"]=setTimeout(function(){ContentSlider.fadeup(sliderid)}, 100)
    	}
    }
    
    function getCookie(Name){ 
    	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
    	if (document.cookie.match(re)) //if cookie found
    		return document.cookie.match(re)[0].split("=")[1] //return its value
    	return ""
    }
    
    function setCookie(name, value){
    	document.cookie = name+"="+value
    }
    
    ////////////////Ajax Related functions //////////////////////////////////
    
    ContentSlider.ajaxpage=function(url, thediv){
    	var page_request = false
    	var bustcacheparameter=""
    	if (window.XMLHttpRequest) // if Mozilla, Safari etc
    		page_request = new XMLHttpRequest()
    	else if (window.ActiveXObject){ // if IE
    		try {
    		page_request = new ActiveXObject("Msxml2.XMLHTTP")
    		} 
    		catch (e){
    		try{
    		page_request = new ActiveXObject("Microsoft.XMLHTTP")
    		}
    		catch (e){}
    		}
    	}
    	else
    		return false
    	thediv.innerHTML=csloadstatustext
    	page_request.onreadystatechange=function(){
    		ContentSlider.loadpage(page_request, thediv)
    	}
    	if (csbustcachevar) //if bust caching of external page
    		bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    	page_request.open('GET', url+bustcacheparameter, true)
    	page_request.send(null)
    }
    
    ContentSlider.loadpage=function(page_request, thediv){
    	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    		thediv.innerHTML=page_request.responseText
    }
    
    ContentSlider.loadobjects=function(externalfiles){ //function to load external .js and .css files. Parameter accepts a list of external files to load (array)
    	for (var i=0; i<externalfiles.length; i++){
    		var file=externalfiles[i]
    		var fileref=""
    		if (csloadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    			if (file.indexOf(".js")!=-1){ //If object is a js file
    				fileref=document.createElement('script')
    				fileref.setAttribute("type","text/javascript");
    				fileref.setAttribute("src", file);
    			}
    			else if (file.indexOf(".css")!=-1){ //If object is a css file
    				fileref=document.createElement("link")
    				fileref.setAttribute("rel", "stylesheet");
    				fileref.setAttribute("type", "text/css");
    				fileref.setAttribute("href", file);
    			}
    		}
    		if (fileref!=""){
    			document.getElementsByTagName("head").item(0).appendChild(fileref)
    			csloadedobjects+=file+" " //Remember this object as being already added to page
    		}
    	}
    }

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Update to the most recent version of the script styles. Yours is dated: Nov 3rd- 07, the current update is: Dec 20th, 12.

    This may or may not help, but it's worth a shot.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I've tried

    I tried updating the script and it completely broke the slider, because it was semi customized before I took over the site.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, either put it back then and when I or someone else has the time we can go through the modified code a line at a time to see if anything jumps out at us. Or start over with the current version from scratch following the instructions.

    What exactly was it modified to do? If it's something simple we can add that to the current code once you get that working.

    Hmm, one other thought - have you tried putting in a seventh throwaway slide? Like a duplicate of the sixth. If it currently skips the sixth, perhaps then it would skip the seventh while showing the sixth.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    I have tried that and I think it was modified so that the class names were consistent with our stylesheets, but if nothing jumps out at you, I will add a duplicate slid just to get the full rotation for now. That's a great idea.

    Thanks.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If that works, under the circumstances I would consider it an acceptable outcome. Does it work?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default

    the error is in red


    Code:
    ContentSlider.turnpage=function(sliderid, thepage){
    	var paginatelinks=document.getElementById("paginate-"+sliderid).getElementsByTagName("a") //gather pagination links
    	for (var i=0; i<slidernodes[sliderid].length; i++){ //For each DIV within slider
    		paginatelinks[i].className="" //empty corresponding pagination link's class name
    		slidernodes[sliderid][i].style.display="none" //hide DIV
    	}
    	paginatelinks[thepage].className="selected" //for selected DIV, set corresponding pagination link's class name
    	if (enabletransition){
    		if (window[sliderid+"fadetimer"])
    			clearTimeout(window[sliderid+"fadetimer"])
    		this.setopacity(sliderid, 0.1)
    	}
    	slidernodes[sliderid][thepage].style.display="block" //show selected DIV
    	if (enabletransition)
    		this.fadeup(sliderid, thepage)
    	//Set "Next" pagination link's (last link within pagination DIV) "rel" attribute to the next DIV number to show
    	paginatelinks[paginatelinks.length-1].setAttribute("rel", thenextpage=(thepage<paginatelinks.length-1)? thepage+1 : 0)
    	if (enablepersist)
    		setCookie(sliderid, sliderid+":"+thepage)
    }
    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/

  9. #9
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for all your help, John. That would have worked.

    vwphillips, Thanks the part you highlighted in red wasn't the issue, but you did change the right part of the code. Thanks so much, my Featured Content Slider is now working as intended.

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
  •