Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Featured Content Glider won't autorotate

  1. #1
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Featured Content Glider won't autorotate

    1) Script Title: Featured Content Glider

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

    3) Describe problem:

    My content glider won't start the auto rotation despite having the autorrotate boolean set to true. This was tested in Chrome, Firefox and IE6 with no luck. The only "major" modification that this version has compared to the example is that I removed the "Next" and "Previous" togglers and replaced the numbers in the togglers for whitespace (&nbsp. I made no modifications to the original Javascript file, only the CSS was modified.

    The glider works fine when activated manually though.

    Code posted below

    Any help will be much appreciated. Thanks for the superb script anyways.
    Last edited by retoriplastique; 11-02-2009 at 11:01 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

  3. #3
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    There it is, sorry, I hadn't uploaded it before.

    style.css
    Code:
    body {
    	font-family : 		Arial, Helvetica, Sans-serif; 
    	background: 		#333130 url('../images/bg.png') repeat-y center;
    	color:				#333130;
    	}
    
    
    a img:link {
    	border-bottom:		none;
    	}
    	
    #main {
    	background-color: 	white;
    	width: 				1000px;
    	margin:				auto;
    	position:			relative;		
    	}
    	
    	
    	
    /*HEADER*/	
    
    
    
    #header {
    	background:	 		url('../images/logo.png') no-repeat left;
    	height:				70px;
    	width:				910px;
    	margin:				auto;
    	
    	}
    	
    #headercontent {
    	background:	 		white;
    	height:				60px;
    	width:				750px;
    	float:				right;
    	margin:				5px 0 0 0;
    	}
    	
    #searchbox {
    	background-color:	white;
    	height:				22px;
    	width:				500px;
    	float:				right;
    	text-align:			right;
    	line-height:        1;
    	font-size:			11px;
    	position:			static;
    	padding:            0 0 4px 0;
    	overflow:           visible;
    	clear:				both;
    	}
    	
    #headertext {
    	background-color:	white;
    	height:				18px;
    	width:				330px;
    	float:				left;
    	text-align:			right;
    	line-height:        0.2;
    	font-size:			11px;
    	margin:             0;
    	/*position:			static;
    	overflow:           visible;
    	clear:				both;*/
    	}
    	
    a.header:link, a.header:visited {
    	color:              #5a7e92;
    	text-decoration:    none;
    	}
    	
    a.header:hover {
    	color:              #ff6418;
    	text-decoration:    none;
    	}
    	
    #navbar {
    	background-color:	#5a7e92;  /*#5a7e92;*/
    	height:				36px;
    	width:				745px;
    	float:				right;
    	clear:              both;
    	position:			relative;
    	z-index:			50;
    	}
    
    
    
    /* SLIDER */
    
    
    
    #contentslider {
    	width:				910px;
    	height:				335px;
    	margin:				20px auto 0 auto;
    	background:			white;
    	position:			static;
    	z-index:			-1;
    	}
    	
    #slidercontent1 {
    	background:			url('../images/slider4.png') no-repeat;
    	height:				307px;
    	}
    	
    #sliderbox {
    	height:				307px;
    	width:				420px;
    	background:			#36424a;
    	color:				white;
    	float:				right;
    	margin-right:		35px;
    	padding-left:       20px;
    	padding-right:      20px;
    	line-height:		0.05;
    	filter: 			alpha(opacity=40);
     	-moz-opacity: 		0.4;
     	opacity: 			0.4;
    	}
    	
    #sliderbutton {
    	height:				40px;
    	width:				211px;
    	background:			#ff6418 url('../images/sliderboxarrow.png') no-repeat right;
    	color:				white;
    	/*float:				right;*/
    	position:			relative;
    	z-index:			100;
    	top:				243px;
    	left:				642px;	
    	/*margin:				200px 35px 0 0;*/
    	}
    	
    p.sliderbutton {
    	font-size:			24px;
    	line-height:		1;
    	text-align:			center;
    	margin-top:			0px;
    	padding-top:        8px;
    	height:				33px;
    	width:				211px;
    	margin-bottom:		0px;
    	}
    
    
    a.sliderbutton:link, a.sliderbutton:visited {
    	color:				white;
    	text-decoration:	none;
    	}
    	
    a.sliderbutton:hover {
    	color:				white;
    	border-bottom:		dotted 1px white;
    	margin-bottom:		0px;
    	padding-bottom:     0px;
    	}
    	
    	
    h1.slider {
    	margin-top:			13px;
    	margin-bottom:		0px;
    	font-size:			60px;
    	text-align:			right;
    	line-height:		0.9;
    	}
    	
    p.slider {
    	font-size:			14px;
    	line-height:		1;
    	text-align:			right;
    	margin-top:			10px;
    	}
    	
    /*#sliderboxinabox {
    	height:				100px;
    	width:				100px;
    	background:			blue;
    	float:				left;
    	filter: alpha(opacity=100);
     	-moz-opacity: 1;
     	opacity: 1;
    	}*/
    
    
    
    /* BOXES */
    
    
    
    #boxes {
    	width: 				910px;
    	height:				170px;
    	margin:				-3px auto 0 auto;
    	background:			white;
    	z-index:			0;
    	}
    	
    #box1 {
    	width: 				296px;
    	height:				170px;
    	background:			#e1e1e1;
    	float:				left;
    	}
    	
    #box2 {
    	width: 				296px;
    	height:				170px;
    	margin-left:		11px;
    	background:			#e1e1e1;
    	float:				left;
    	}
    	
    #box3 {
    	width: 				296px;
    	height:				170px;
    	background:			#e1e1e1;
    	float:				left;
    	margin-left:		11px;
    	}
    featuredcontentglider.css
    Code:
    img { 
    border-style: none;
    float: right;
    
    z-index:-1;
    }
    
    .glidecontentwrapper{
    position: relative; /* Do not change this value */
    width: 910px;
    height: 307px; /* Set height to be able to contain height of largest content shown*/
    border: none;
    overflow: hidden;
    
    
    }
    /*
    	Total wrapper width: 886px+0px+0px=886px
    	Or width of wrapper div itself plus any left and right CSS border and padding
    	Adjust related containers below according to comments
    */
    
    
    .glidecontent{ /*style for each glide content DIV within wrapper.*/
    position: absolute; /* Do not change this value */
    background: white;
    padding: 0px;
    visibility: hidden;
    width: 910px;
    }
    
    
    /*
     Total glidecontent width: 886px+0px+0px=886px
    	Or width of wrapper div itself (not counting wrapper border/padding)
    */
    
    .glidecontenttoggler{ /*style for DIV used to contain toggler links. */
    width: 910px;
    height: 8px;
    margin-top: 4px;
    text-align: right; /*How to align pagination links: "left", "center", or "right"*/
    background: white;
    /*always declare an explicit background color for fade effect to properly render in IE*/
    }
    /*
     Total contenttoggler width: 350px+5px+5px=360px
    	Or total width of wrapper div (counting wrapper border/padding)
    */
    
    .glidecontenttoggler a{ /*style for every navigational link within toggler */
    display: -moz-inline-box;
    display: inline-block;
    height: 8px;
    /*border: 0px solid black;*/
    background: #e1e1e1;
    padding: 0px 0px;
    margin-right: 0px;
    font-weight: bold;
    text-decoration: none;
    }
    
    .glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
    height: 12px;
    background: #5a7e92;/*59778a*/
    color: black;
    }
    
    .glidecontenttoggler a:hover{
    height: 12px;
    background: #36424a;
    color: black;
    }
    
    .glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
    }
    
    .glidecontenttoggler a.prev, .glidecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
    }
    
    .glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{
    height: 5px;
    background: white;
    color: white;
    }

  4. #4
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I changed the initial zindex value in this one, but that didn't make a difference, before that auto rotation wasn't working either.


    featuredcotnentglider.js
    Code:
     //Featured Content Glider: By http://www.dynamicdrive.com
    //Created: Dec 22nd, 07'
    //Updated (Jan 29th, 08): Added four possible slide directions: "updown", "downup", "leftright", or "rightleft"
    //Updated (Feb 1st, 08): Changed glide behavior to reverse direction when previous button is clicked
    //Updated (Feb 12th, 08): Added ability to retrieve gliding contents from an external file using Ajax ("remotecontent" variable added to configuration)
    //Updated (July 21st, 09): Updated to work in jQuery 1.3.x
    
    jQuery.noConflict()
    
    var featuredcontentglider={
    	csszindex: 1,
    	ajaxloadingmsg: '<b>Generando contenido...</b>',
    	glide:function(config, showpage, isprev){
    		var selected=parseInt(showpage)
    		if (selected>=config.$contentdivs.length){ //if no content exists at this index position
    			alert("No content exists at page "+(selected+1)+"! Loading 1st page instead.")
    			selected=0
    		}
    		var $target=config.$contentdivs.eq(selected)
    		//Test for toggler not being initialized yet, or user clicks on the currently selected page):
    		if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){
    			var $selectedlink=config.$toc.eq(selected)
    			config.$next.attr('loadpage', (selected<config.$contentdivs.length-1)? selected+1+'pg' : 0+'pg')
    			config.$prev.attr('loadpage', (selected==0)? config.$contentdivs.length-1+'pg' : selected-1+'pg')
    			var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint
    			$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it
    			var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
    			$target.animate(endpoint, config.speed)
    			config.$toc.removeClass('selected')
    			$selectedlink.addClass('selected')
    			config.$togglerdiv.attr('lastselected', selected+'pg')
    		}
    	},
    
    	getremotecontent:function($, config){
    		config.$glider.html(this.ajaxloadingmsg)
    		$.ajax({
    			url: config.remotecontent,
    			error:function(ajaxrequest){
    				config.$glider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
    			},
    			success:function(content){
    				config.$glider.html(content)
    				featuredcontentglider.setuptoggler($, config)
    			}
    		})
    	},
    
    	aligncontents:function($, config){
    		config.$contentdivs=$("#"+config.gliderid+" ."+config.contentclass)
    		config.$contentdivs.css(config.leftortop, config.startpoint).css({height: config.$glider.height(), visibility: 'visible'}) //position content divs so they're out of view:
    	},
    
    	setuptoggler:function($, config){
    		this.aligncontents($, config)
    		config.$togglerdiv.hide()
    		config.$toc.each(function(index){
    				$(this).attr('pagenumber', index+'pg')
    				if (index > (config.$contentdivs.length-1))
    					$(this).css({display: 'none'}) //hide redundant "toc" links
    		})
    		var $nextandprev=$("#"+config.togglerid+" .next, #"+config.togglerid+" .prev")
    		$nextandprev.click(function(event){ //Assign click behavior to 'next' and 'prev' links
    			featuredcontentglider.glide(config, this.getAttribute('loadpage'), this.getAttribute('buttontype'))
    			event.preventDefault() //cancel default link action
    		})
    		config.$toc.click(function(event){ //Assign click behavior to 'toc' links
    			featuredcontentglider.glide(config, this.getAttribute('pagenumber'))
    			event.preventDefault()
    		})
    		config.$togglerdiv.fadeIn(1000, function(){
    			featuredcontentglider.glide(config, config.selected)
    			if (config.autorotate==true){ //auto rotate contents?
    				config.stepcount=0 //set steps taken
    				config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1] //Total steps limit: num of contents x num of user specified cycles)
    				featuredcontentglider.autorotate(config)
    			}
    		})
    		config.$togglerdiv.click(function(){
    			featuredcontentglider.cancelautorotate(config.togglerid)
    		})
    	},
    
    	autorotate:function(config){
    		var rotatespeed=config.speed+config.autorotateconfig[0]
    		window[config.togglerid+"timer"]=setInterval(function(){
    			if (config.totalsteps>0 && config.stepcount>=config.totalsteps){
    				clearInterval(window[config.togglerid+"timer"])
    			}
    			else{
    				config.$next.triggerHandler('click')
    				config.stepcount++
    			}
    		}, rotatespeed)
    	},
    
    	cancelautorotate:function(togglerid){
    		if (window[togglerid+"timer"])
    			clearInterval(window[togglerid+"timer"])
    	},
    
    	getCookie:function(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 null
    	},
    
    	setCookie:function(name, value){
    		document.cookie = name+"="+value
    	},
    
    	init:function(config){
    		jQuery(document).ready(function($){
    			config.$glider=$("#"+config.gliderid)
    			config.$togglerdiv=$("#"+config.togglerid)
    			config.$toc=config.$togglerdiv.find('.toc')
    			config.$next=config.$togglerdiv.find('.next')
    			config.$prev=config.$togglerdiv.find('.prev')
    			config.$prev.attr('buttontype', 'previous')
    			var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected
    			config.selected=(isNaN(parseInt(selected))) ? config.selected : selected //test for cookie value containing null (1st page load) or "undefined" string	
    			config.leftortop=(/up/i.test(config.direction))? "top" : "left" //set which CSS property to manipulate based on "direction"
    			config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width() //Get glider height or width based on "direction"
    			config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth //set initial position of contents based on "direction"
    			if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0)
    				featuredcontentglider.getremotecontent($, config)
    			else
    				featuredcontentglider.setuptoggler($, config)
    			$(window).bind('unload', function(){ //clean up and persist
    				config.$togglerdiv.unbind('click')
    				config.$toc.unbind('click')
    				config.$next.unbind('click')
    				config.$prev.unbind('click')
    				if (config.persiststate)
    					featuredcontentglider.setCookie(config.gliderid, config.$togglerdiv.attr('lastselected'))
    				config=null
    				
    			})
    		})
    	}
    }

  5. #5
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmm looking at your page I suspect the problem is due to a conflict with either another script on your page, or the numerous jQuery library versions you're referencing. For example, you're referencing jQuery v1.2.6, v1.3.1, and v1.3.2 all at the same time on the same page:
    Code:
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
    
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    etc.

    At the very least the above is redundant and adds a lot of extra bits to your page's size. You should remove all but just one reference, preferably the lastest version, which is v1.3.2.

    Then there's the possibility the problem is due to a conflict with another script on the page. To confirm this, try temporarily removing all scripts on the page except the glider, and see if that changes anything.
    DD Admin

  6. #6
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I tried removing the redundant scripts but, sadly, that didn't help. At least I reduced the initial page load .

    I tried removing the other javascript modules too with no luck, then I remembered that the problem exists since I tested the module alone, so it isn't produced by a conflict with other scripts. Could it be that the content slides are just images? That's one of the few thigns that I haven't tried yet. I'm going to convert each slide to actual content (as in the fourth slide) now, but I don't think how that could help.

    Thank you very much for your help nevertheless.

  7. #7
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Here is a test site containing only the slider, as in the example. Should be clearer and easier to debug.

  8. #8
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hum, is there a way to force the glider to auto rotate even if the user clicked on the togglers? Or a dirty way to force the script into scrolling?

  9. #9
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Ok after some debugging, I found the issue with the glider not auto rotate. In your pagination DIV, you're missing a "next" link, which the script right now requires in order to auto rotate. Add the following inside your pagination DIV:

    Code:
    <a class="next" style="display:none"></a>
    It's hidden, though will serve the purpose nonetheless. This is a bug, and I'll look at fixing it officially the next time the script is updated.
    DD Admin

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

    retoriplastique (11-13-2009)

  11. #10
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    You are god among men sir. Thank you very much.

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
  •