Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Fade Effect for Content Glider

    Hello everybody,

    I am a complete Javascript novice but I'm hoping that you kind, intelligent, and beautiful people will find it in your hearts to help me.

    I'm pretty sure what I'm trying to do is very simple but I just can't get it working!

    Found a nice bit of code for a content 'glider' I want to use...

    Code:
    var featuredcontentglider={
    	csszindex: 100,
    	ajaxloadingmsg: '<b>Fetching Content. Please wait...</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.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){
    		$(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
    				
    			})
    		})
    	}
    }
    http://www.dynamicdrive.com/dynamici...tentglider.htm

    It does exactly what I want EXCEPT I would like a nice fading effect (instead of gliding), just as per this code:

    Code:
    var fadecontentviewer={
    	csszindex: 100,
    	fade:function($allcontents, togglerid, selected, speed){
    		var selected=parseInt(selected)
    		var $togglerdiv=$("#"+togglerid)
    		var $target=$allcontents.eq(selected)
    		if ($target.length==0){ //if no content exists at this index position (ie: stemming from redundant pagination link)
    			alert("No content exists at page number "+selected+"!")
    			return 
    		}
    		if ($togglerdiv.attr('lastselected')==null || parseInt($togglerdiv.attr('lastselected'))!=selected){
    			var $toc=$("#"+togglerid+" .toc")
    			var $selectedlink=$toc.eq(selected)
    			$("#"+togglerid+" .next").attr('nextpage', (selected<$allcontents.length-1)? selected+1+'pg' : 0+'pg')
    			$("#"+togglerid+" .prev").attr('previouspage', (selected==0)? $allcontents.length-1+'pg' : selected-1+'pg')
    			$target.css({zIndex: this.csszindex++, visibility: 'visible'})
    			$target.hide()
    			$target.fadeIn(speed)
    			$toc.removeClass('selected')
    			$selectedlink.addClass('selected')
    			$togglerdiv.attr('lastselected', selected+'pg')
    		}
    	},
    
    	setuptoggler:function($allcontents, togglerid, speed){
    		var $toc=$("#"+togglerid+" .toc")
    		$toc.each(function(index){
    				$(this).attr('pagenumber', index+'pg')
    		})
    		
    		var $next=$("#"+togglerid+" .next")
    		var $prev=$("#"+togglerid+" .prev")
    		$next.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('nextpage'), speed)
    			return false
    		})
    		$prev.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('previouspage'), speed)
    			return false
    		})
    		$toc.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('pagenumber'), speed)
    			return false
    		})
    	},
    
    	init:function(fadeid, contentclass, togglerid, selected, speed){
    		$(document).ready(function(){
    			var faderheight=$("#"+fadeid).height()
    			var $fadecontents=$("#"+fadeid+" ."+contentclass)
    			$fadecontents.css({top: 0, left: 0, height: faderheight, visibility: 'hidden'})
    			fadecontentviewer.setuptoggler($fadecontents, togglerid, speed)
    			setTimeout(function(){fadecontentviewer.fade($fadecontents, togglerid, selected, speed)}, 100)
    			$(window).bind('unload', function(){ //clean up
    				$("#"+togglerid+" .toc").unbind('click')
    				$("#"+togglerid+" .next", "#"+togglerid+" .prev").unbind('click')
    			})
    		})
    	}
    }
    http://javascriptkit.com/script/scri...ntviewer.shtml

    To my untrained eyes the codes seem very similar, both use jquery, and I have tried chopping and changing code, but I'm buggered if I can get it to work.

    Any help would be massively appreciated, I wouldn't normally ask but it just seems like it should be really simple

    Anyhoo, thanks in advance x

  • #2
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    I think this should answer your question: http://www.dynamicdrive.com/forums/blog.php?b=7
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • Users who have thanked WA for this post:

    ShinyHappySimon (03-16-2009)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thankyou so much, I searched for ages for something like this!

    Cheers


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •