SAG Scroller: Reverse Direction of Scroll?

[Varen]

1) Script Title: SAG Content Scroller

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

3) Describe problem:

I have setup the scroller and it works just fine but for my needs the scrolling direction must be reversed so that new content shows at the TOP of the list (as opposed to the bottom).

I have seen this question asked in other threads and didn't find any answers. Can you please offer me a solution to this?

Peter

[Varen]

Can anyone please help with this???

[vwphillips]

similar but with features you require

http://www.vicsjavascripts.org.uk/St...CarouselIV.htm

[uandme]

I had the same issue a couple of days ago. I managed to modify the control scroller so that it now scrolls both ways, with up and down arrows to the side. If you are still after a copy I will post it. Essentially what you need to do is create two navpanels, ie

var sagscroller_constants={
	navpanel_up: {height:'16px', uparrow:'img/ui/up-arrow.png', opacity:0.6, title:'Go to Next Content', background:'white'},
	navpanel: {height:'16px', downarrow:'img/ui/down-arrow.png', opacity:0.6, title:'Go to Next Content', background:'white'},
	loadingimg: {src:'img/ui/ajax-loader.gif', dimensions:[80,15]}
}

and

addnavpanel_up:function(){
		var slider=this, setting=this.setting
		var $navpanel=$('<div class="sliderdesc"><div class="sliderdescbg"></div><div class="sliderdescfg"><div class="sliderdesctext"></div></div></div>')
			.css({position:'absolute', width:'25%', left:'0px', top:-1000, zIndex:'1001'})
			.find('div').css({position:'absolute', left:'122px', top: '-66px', width:'100%'})
			.eq(0).css({background:sagscroller_constants.navpanel_up.background, opacity:sagscroller_constants.navpanel_up.opacity}).end() //"sliderdescbg" div
			.eq(1).css({color:'white'}).end() //"sliderdescfg" div
			.eq(2).css({textAlign:'center', cursor:'pointer', left:'0px', top: '-2px', paddingTop:'2px'}).html('<img src="'+sagscroller_constants.navpanel_up.uparrow+'"/>').end().end()
			.appendTo(this.$slider)
		var $descpanel=$navpanel.find('div.sliderdesctext').attr('title', sagscroller_constants.navpanel_up.title).click(function(){ //action when nav bar is clicked on
			slider.stopscroll()
			slider.scrollmsg_up(setting.mode=="auto" && !setting.navpanel_up.cancelauto? true : false)
		})
		$navpanel.css({top:this.$slider.height()-parseInt(sagscroller_constants.navpanel_up.height), height:sagscroller_constants.navpanel_up.height}).find('div').css({height:'100%'})
	},

[mike3098]

I would welcome a copy of your code - this is a great scripting skills arnt up to adding the up arrow as well. many thanks

[K_Nasco]

I had the same issue a couple of days ago. I managed to modify the control scroller so that it now scrolls both ways, with up and down arrows to the side. If you are still after a copy I will post it. Essentially what you need to do is create two navpanels, ie

var sagscroller_constants={
	navpanel_up: {height:'16px', uparrow:'img/ui/up-arrow.png', opacity:0.6, title:'Go to Next Content', background:'white'},
	navpanel: {height:'16px', downarrow:'img/ui/down-arrow.png', opacity:0.6, title:'Go to Next Content', background:'white'},
	loadingimg: {src:'img/ui/ajax-loader.gif', dimensions:[80,15]}
}

and

addnavpanel_up:function(){
		var slider=this, setting=this.setting
		var $navpanel=$('<div class="sliderdesc"><div class="sliderdescbg"></div><div class="sliderdescfg"><div class="sliderdesctext"></div></div></div>')
			.css({position:'absolute', width:'25%', left:'0px', top:-1000, zIndex:'1001'})
			.find('div').css({position:'absolute', left:'122px', top: '-66px', width:'100%'})
			.eq(0).css({background:sagscroller_constants.navpanel_up.background, opacity:sagscroller_constants.navpanel_up.opacity}).end() //"sliderdescbg" div
			.eq(1).css({color:'white'}).end() //"sliderdescfg" div
			.eq(2).css({textAlign:'center', cursor:'pointer', left:'0px', top: '-2px', paddingTop:'2px'}).html('<img src="'+sagscroller_constants.navpanel_up.uparrow+'"/>').end().end()
			.appendTo(this.$slider)
		var $descpanel=$navpanel.find('div.sliderdesctext').attr('title', sagscroller_constants.navpanel_up.title).click(function(){ //action when nav bar is clicked on
			slider.stopscroll()
			slider.scrollmsg_up(setting.mode=="auto" && !setting.navpanel_up.cancelauto? true : false)
		})
		$navpanel.css({top:this.$slider.height()-parseInt(sagscroller_constants.navpanel_up.height), height:sagscroller_constants.navpanel_up.height}).find('div').css({height:'100%'})
	},

I copied your code and it is still not working for me.....

[vwphillips]

modify(in red)

	scrollmsg:function(repeat){
		var slider=this, setting=this.setting,ud=typeof(setting.direction)=='number'&&setting.direction<0?-1:1;
		var ulheight=this.ulheight || this.$mainul.height()
		var endpoint=-this.setgetoffset(this.$lis.eq(this.curmsg))
		this.$mainul.animate({top: endpoint}, setting.animatespeed, function(){
			slider.curmsg=(slider.curmsg<slider.$lis.length+1)? slider.curmsg+ud : 0
			if (slider.curmsg==slider.$lis.length+1){ //if at end of UL for uo
				slider.resetuls() //swap between main and sec UL
				slider.curmsg=1
			}
		if (slider.curmsg<1){ //if at end of UL  for down
				slider.curmsg=slider.$lis.length
			slider.resetuls2() //swap between main and sec UL
			}
			if (repeat)
				slider.scrolltimer=setTimeout(function(){slider.scrollmsg(repeat)}, setting.pause)
		})
		var secendpoint=endpoint+ulheight
		this.$secul.animate({top: secendpoint}, setting.animatespeed)
	},

add new function

 

	resetuls2:function(){ //function to swap between primary and secondary ul
		var $tempul=this.$secul
		this.$secul=this.$mainul.css({zIndex:1000})
		this.$mainul=$tempul.css({zIndex:999})
		this.$mainul.css('top',this.ulheight)
	},

plus new option

var sagscroller2=new sagscroller({
	id:'mysagscroller2',
	mode: 'auto',
	pause: 2500,
    direction:-1,
	animatespeed: 400 //<--no comma following last option
})