PDA

View Full Version : SAG Scroller: Reverse Direction of Scroll?



Varen
02-04-2011, 08:12 PM
1) Script Title: SAG Content Scroller

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/sagscroller.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
02-06-2011, 09:52 PM
Can anyone please help with this???

vwphillips
02-07-2011, 10:43 AM
similar but with features you require

http://www.vicsjavascripts.org.uk/StepCarouselIV/StepCarouselIV.htm

uandme
02-21-2012, 09:26 AM
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
03-11-2012, 10:23 AM
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
02-01-2013, 07:33 PM
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
02-02-2013, 06:52 AM
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
})