Page 1 of 1

scroll box repeating

Posted: Tue Feb 15, 2011 5:54 pm
by dsjoes
i have got the code below it is for a scroll box and i have added the php part of it so that i can change the text from the admin page. the problem is that the scroller code is duplicating the text so it shows twice. how do i stop it from happening.

scroller.php

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="sagscroller.css" />

<script src="sagscroller.js">

/***********************************************
* SAG Content Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<style type="text/css">

div#mysagscroller{
width: 200px;  /*width of scroller*/
height:250px;
background:#FFF;
}

div#mysagscroller ul li{
background:#FFFF48;
color:Black;
padding:5px;
margin-bottom:5px; /*bottom spacing between each LI*/
}

div#mysagscroller ul li:first-letter{
font-size:28px;
background:#009fc6;
color:white;
padding:0 2px;
margin-right:2px;
}

</style>

<script>

var sagscroller1=new sagscroller({
	id:'mysagscroller',
	mode: 'manual' //<--no comma following last option
})
</script>
</head>
<body>
<div id="mysagscroller" class="sagscroller">
	<ul>
	<?php
$con = mysql_connect("host","user","pass");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("group_news", $con);
$result = mysql_query("SELECT * FROM News");
while($row = mysql_fetch_array($result))
{
echo nl2br($row['News']);
}
mysql_close($con);
?>
	</ul>
</div>
</body>
</html>
sagscroller.js

Code: Select all

/*Sag Content Scroller (Aug 7th, 2010)
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Updated Aug 28th, 10 to v1.3

var sagscroller_constants={
	navpanel: {height:'16px', downarrow:'/pics/main/down1.gif', opacity:0.6, title:'Go to Next Content', background:'black'},
	loadingimg: {src:'/pics/main/ajaxloading.gif', dimensions:[100,15]}
}

function sagscroller(options){

	this.setting={mode:'manual', inittype:'stunted', pause:3000, animatespeed:500, ajaxsource:null, rssdata:null, refreshsecs:0, navpanel:{show:true, cancelauto:false}} //default settings
	jQuery.extend(this.setting, options) //merge default settings with options
	options=null
	this.curmsg=0
	this.addloadingpanel(jQuery, 'preload')
	if (this.setting.rssdata) //if rss contents
		google.load("feeds", "1") //init google ajax api
	var slider=this
	jQuery(function($){ //on document.ready
		slider.$slider=$('#'+slider.setting.id)
		if (slider.setting.ajaxsource||slider.setting.rssdata)
			slider.$slider.empty()
		slider.addloadingpanel(jQuery, 'show')
		if (slider.setting.ajaxsource) //if ajax data
			slider.getajaxul(slider.setting.ajaxsource)
		else if (slider.setting.rssdata){ //if rss data
			slider.fetchfeeds()
		}
		else{ //if inline content
			if (slider.setting.inittype=="onload") //load scroller when page has completely loaded?
				$(window).load(function(){slider.init($)})
			else //load scroller immediately and get dimensions progressively instead
				slider.init($)
		}
	})
}

sagscroller.prototype={

	getajaxul:function(path){
		var $=jQuery, slider=this
		this.stopscroll() //stop animation/ scrolling of slider, in the event this is a subsequent call to getajaxul()
		this.$loadingpanel.show()
		$.ajax({
			url: path, //path to external content
			async: true,
			error:function(ajaxrequest){
				slider.$slider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
			},
			success:function(content){
				slider.reloadul(content)
				if (slider.setting.refreshsecs>0) //refetch contents every x sec?
					setTimeout(function(){slider.getajaxul(path)}, slider.setting.refreshsecs*1000)
			}
		})
	},

	addloadingpanel:function($, mode){
		var loadingimgref=sagscroller_constants.loadingimg
		if (mode=="preload"){
			var loadingimg=new Image(loadingimgref.dimensions[0], loadingimgref.dimensions[1])
			loadingimg.src=loadingimgref.src
			this.$loadingimg=$(loadingimg).css({position:'absolute', zIndex:1003})
		}
		else{
			var sliderdimensions=[this.$slider.width(), this.$slider.height()]
			var $loadingpanel=$('<div />').css({position:'absolute', left:0, top:0, background:'black', opacity:0.5, width:sliderdimensions[0], height:sliderdimensions[1], zIndex:1002}).appendTo(this.$slider)
			this.$loadingimg.css({left:sliderdimensions[0]/2-loadingimgref.dimensions[0]/2, top:sliderdimensions[1]/2-loadingimgref.dimensions[1]/2}).appendTo(this.$slider)
			this.$loadingpanel=$loadingpanel.add(this.$loadingimg)
		}
	},

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

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

	reloadul:function(newhtml){ //function to empty out SAG scroller UL contents then reload with new contents
		this.$slider.find('ul').remove()
		this.ulheight=null
		this.curmsg=0;
		this.$slider.append(newhtml)
		this.init($)		
	},

	setgetoffset:function($li){
		var recaldimensions=(this.setting.ajaxsource || this.setting.rssdata) && this.setting.inittype=="onload" //bool to see if script should always refetch dimensions
		if (this.curmsg==this.$lis.length)
			return (!this.ulheight || recaldimensions)? this.ulheight=this.$mainul.height() : this.ulheight
		else{
			if (!$li.data('toppos') || recaldimensions)
				$li.data('toppos', $li.position().top)
			return $li.data('toppos')
		}
	},

	scrollmsg:function(repeat){
		var slider=this, setting=this.setting
		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+1 : 0
			if (slider.curmsg==slider.$lis.length+1){ //if at end of UL
				slider.resetuls() //swap between main and sec UL
				slider.curmsg=1
			}
			if (repeat)
				slider.scrolltimer=setTimeout(function(){slider.scrollmsg(repeat)}, setting.pause)
		})
		var secendpoint=endpoint+ulheight
		this.$secul.animate({top: secendpoint}, setting.animatespeed)
	},

	stopscroll:function(){
		if (this.$mainul){
			this.$mainul.add(this.$secul).stop(true, false)
			clearTimeout(this.scrolltimer)
		}
	},

	init:function($){
		var setting=this.setting
		this.$loadingpanel.hide()
		this.$mainul=this.$slider.find('ul:eq(0)').css({zIndex:1000})
		this.$lis=this.$mainul.find('li')
		if (setting.navpanel.show)
			this.addnavpanel()
		this.$secul=this.$mainul.clone().css({top:this.$mainul.height(), zIndex:999}).appendTo(this.$slider) //create sec UL and add it to the end of main UL
		this.scrollmsg(setting.mode=="auto")
	},

	///////////////////////RSS related methods below///////////////////


	fetchfeeds:function(){
		var slider=this, rssdata=this.setting.rssdata
		this.stopscroll() //stop animation/ scrolling of slider, in the event this is a subsequent call to fetchfeeds()
		this.$loadingpanel.show()
		this.entries=[] //array holding combined RSS feeds' entries from Feed API (result.feed.entries)
		this.feedsfetched=0
		for (var i=0; i<rssdata.feeds.length; i++){ //loop through the specified RSS feeds' URLs
			var feedpointer=new google.feeds.Feed(rssdata.feeds[i][1]) //create new instance of Google Ajax Feed API
			feedpointer.setNumEntries(rssdata.entries) //set number of items to display
			feedpointer.load(function(label){
				return function(r){
					slider.storefeeds(r, label)
				}
			}(rssdata.feeds[i][0])) //call Feed.load() to retrieve and output RSS feed.
		}	
	},

	storefeeds:function(result, label){
		var thisfeed=(!result.error)? result.feed.entries : "" //get all feed entries as a JSON array or "" if failed
		if (thisfeed==""){ //if error has occured fetching feed
			alert("Google Feed API Error: "+result.error.message)
		}
		for (var i=0; i<thisfeed.length; i++){ //For each entry within feed
			result.feed.entries[i].label=label //extend it with a "label" property
		}
		this.entries=this.entries.concat(thisfeed) //add entry to array holding all feed entries
		this.feedsfetched+=1
		if (this.feedsfetched==this.setting.rssdata.feeds.length){ //if all feeds fetched
			if (this.setting.rssdata.groupbylabel){ //sort by label name?
				this.entries.sort(function(a,b){
					var fielda=a.label.toLowerCase(), fieldb=b.label.toLowerCase()
					return (fielda<fieldb)? -1 : (fielda>fieldb)? 1 : 0
				})
			}
			else{ //just sort by date
				this.entries.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})
			}
			this.formatfeeds()
		}
	},

	formatfeeds:function(){
		function formatdate(datestr, showoptions){
			var itemdate=new Date(datestr)
			var parseddate=(showoptions.indexOf("datetime")!=-1)? itemdate.toLocaleString() : (showoptions.indexOf("date")!=-1)? itemdate.toLocaleDateString() : ""
			return "<span class='datefield'>"+parseddate+"</span>"
		}
		var sagcontent='<ul>'
		var slider=this, rssdata=this.setting.rssdata, entries=this.entries
		for (var i=0; i<entries.length; i++){
			sagcontent+='<li><a href="'+entries[i].link+'" target="'+rssdata.linktarget+'">'+entries[i].title+'</a>'
				+'<div class="rsscontent">'
				+(/description/.test(rssdata.displayoptions)? entries[i].content : entries[i].contentSnippet)
				+'</div>'
				+'<div class="rsslabel">'
				+(/label/.test(rssdata.displayoptions)? "<b>Source("+(i+1)+"):</b> "+entries[i].label+" " : "")
				+(/date/.test(rssdata.displayoptions)? formatdate(entries[i].publishedDate, rssdata.displayoptions): "")
				+'</div>'
				+'</li>\n\n'
		}
	sagcontent+='</ul>'
	this.reloadul(sagcontent)
	if (slider.setting.refreshsecs>0) //refetch contents every x sec?
		setTimeout(function(){slider.fetchfeeds()}, slider.setting.refreshsecs*1000)
	}
}

Re: scroll box repeating

Posted: Tue Feb 15, 2011 11:35 pm
by Jonah Bron
Instead of the while loop, try this:

Code: Select all

$row = mysql_fetch_array($result);
echo nl2br($row['News']);

Re: scroll box repeating

Posted: Wed Feb 16, 2011 12:50 pm
by dsjoes
nothing has changed it sill repeats it

Re: scroll box repeating

Posted: Wed Feb 16, 2011 12:55 pm
by Jonah Bron
Then there must be a problem with the Javascript. Could you give us just the part that's relevant to the problem?

Re: scroll box repeating

Posted: Wed Feb 16, 2011 3:31 pm
by dsjoes
i don't know what is causing it but this is the code

Code: Select all

/*Sag Content Scroller (Aug 7th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Updated Aug 28th, 10 to v1.3

var sagscroller_constants={
        navpanel: {height:'16px', downarrow:'/pics/main/down1.gif', opacity:0.6, title:'Go to Next Content', background:'black'},
        loadingimg: {src:'/pics/main/ajaxloading.gif', dimensions:[100,15]}
}

function sagscroller(options){

        this.setting={mode:'manual', inittype:'stunted', pause:3000, animatespeed:500, ajaxsource:null, rssdata:null, refreshsecs:0, navpanel:{show:true, cancelauto:false}} //default settings
        jQuery.extend(this.setting, options) //merge default settings with options
        options=null
        this.curmsg=0
        this.addloadingpanel(jQuery, 'preload')
        if (this.setting.rssdata) //if rss contents
                google.load("feeds", "1") //init google ajax api
        var slider=this
        jQuery(function($){ //on document.ready
                slider.$slider=$('#'+slider.setting.id)
                if (slider.setting.ajaxsource||slider.setting.rssdata)
                        slider.$slider.empty()
                slider.addloadingpanel(jQuery, 'show')
                if (slider.setting.ajaxsource) //if ajax data
                        slider.getajaxul(slider.setting.ajaxsource)
                else if (slider.setting.rssdata){ //if rss data
                        slider.fetchfeeds()
                }
                else{ //if inline content
                        if (slider.setting.inittype=="onload") //load scroller when page has completely loaded?
                                $(window).load(function(){slider.init($)})
                        else //load scroller immediately and get dimensions progressively instead
                                slider.init($)
                }
        })
}

sagscroller.prototype={

        getajaxul:function(path){
                var $=jQuery, slider=this
                this.stopscroll() //stop animation/ scrolling of slider, in the event this is a subsequent call to getajaxul()
                this.$loadingpanel.show()
                $.ajax({
                        url: path, //path to external content
                        async: true,
                        error:function(ajaxrequest){
                                slider.$slider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
                        },
                        success:function(content){
                                slider.reloadul(content)
                                if (slider.setting.refreshsecs>0) //refetch contents every x sec?
                                        setTimeout(function(){slider.getajaxul(path)}, slider.setting.refreshsecs*1000)
                        }
                })
        },

        addloadingpanel:function($, mode){
                var loadingimgref=sagscroller_constants.loadingimg
                if (mode=="preload"){
                        var loadingimg=new Image(loadingimgref.dimensions[0], loadingimgref.dimensions[1])
                        loadingimg.src=loadingimgref.src
                        this.$loadingimg=$(loadingimg).css({position:'absolute', zIndex:1003})
                }
                else{
                        var sliderdimensions=[this.$slider.width(), this.$slider.height()]
                        var $loadingpanel=$('<div />').css({position:'absolute', left:0, top:0, background:'black', opacity:0.5, width:sliderdimensions[0], height:sliderdimensions[1], zIndex:1002}).appendTo(this.$slider)
                        this.$loadingimg.css({left:sliderdimensions[0]/2-loadingimgref.dimensions[0]/2, top:sliderdimensions[1]/2-loadingimgref.dimensions[1]/2}).appendTo(this.$slider)
                        this.$loadingpanel=$loadingpanel.add(this.$loadingimg)
                }
        },

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

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

        reloadul:function(newhtml){ //function to empty out SAG scroller UL contents then reload with new contents
                this.$slider.find('ul').remove()
                this.ulheight=null
                this.curmsg=0;
                this.$slider.append(newhtml)
                this.init($)           
        },

        setgetoffset:function($li){
                var recaldimensions=(this.setting.ajaxsource || this.setting.rssdata) && this.setting.inittype=="onload" //bool to see if script should always refetch dimensions
                if (this.curmsg==this.$lis.length)
                        return (!this.ulheight || recaldimensions)? this.ulheight=this.$mainul.height() : this.ulheight
                else{
                        if (!$li.data('toppos') || recaldimensions)
                                $li.data('toppos', $li.position().top)
                        return $li.data('toppos')
                }
        },

        scrollmsg:function(repeat){
                var slider=this, setting=this.setting
                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+1 : 0
                        if (slider.curmsg==slider.$lis.length+1){ //if at end of UL
                                slider.resetuls() //swap between main and sec UL
                                slider.curmsg=1
                        }
                        if (repeat)
                                slider.scrolltimer=setTimeout(function(){slider.scrollmsg(repeat)}, setting.pause)
                })
                var secendpoint=endpoint+ulheight
                this.$secul.animate({top: secendpoint}, setting.animatespeed)
        },

        stopscroll:function(){
                if (this.$mainul){
                        this.$mainul.add(this.$secul).stop(true, false)
                        clearTimeout(this.scrolltimer)
                }
        },

        init:function($){
                var setting=this.setting
                this.$loadingpanel.hide()
                this.$mainul=this.$slider.find('ul:eq(0)').css({zIndex:1000})
                this.$lis=this.$mainul.find('li')
                if (setting.navpanel.show)
                        this.addnavpanel()
                this.$secul=this.$mainul.clone().css({top:this.$mainul.height(), zIndex:999}).appendTo(this.$slider) //create sec UL and add it to the end of main UL
                this.scrollmsg(setting.mode=="auto")
        },

        ///////////////////////RSS related methods below///////////////////


        fetchfeeds:function(){
                var slider=this, rssdata=this.setting.rssdata
                this.stopscroll() //stop animation/ scrolling of slider, in the event this is a subsequent call to fetchfeeds()
                this.$loadingpanel.show()
                this.entries=[] //array holding combined RSS feeds' entries from Feed API (result.feed.entries)
                this.feedsfetched=0
                for (var i=0; i<rssdata.feeds.length; i++){ //loop through the specified RSS feeds' URLs
                        var feedpointer=new google.feeds.Feed(rssdata.feeds[i][1]) //create new instance of Google Ajax Feed API
                        feedpointer.setNumEntries(rssdata.entries) //set number of items to display
                        feedpointer.load(function(label){
                                return function(r){
                                        slider.storefeeds(r, label)
                                }
                        }(rssdata.feeds[i][0])) //call Feed.load() to retrieve and output RSS feed.
                }      
        },

        storefeeds:function(result, label){
                var thisfeed=(!result.error)? result.feed.entries : "" //get all feed entries as a JSON array or "" if failed
                if (thisfeed==""){ //if error has occured fetching feed
                        alert("Google Feed API Error: "+result.error.message)
                }
                for (var i=0; i<thisfeed.length; i++){ //For each entry within feed
                        result.feed.entries[i].label=label //extend it with a "label" property
                }
                this.entries=this.entries.concat(thisfeed) //add entry to array holding all feed entries
                this.feedsfetched+=1
                if (this.feedsfetched==this.setting.rssdata.feeds.length){ //if all feeds fetched
                        if (this.setting.rssdata.groupbylabel){ //sort by label name?
                                this.entries.sort(function(a,b){
                                        var fielda=a.label.toLowerCase(), fieldb=b.label.toLowerCase()
                                        return (fielda<fieldb)? -1 : (fielda>fieldb)? 1 : 0
                                })
                        }
                        else{ //just sort by date
                                this.entries.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})
                        }
                        this.formatfeeds()
                }
        },

        formatfeeds:function(){
                function formatdate(datestr, showoptions){
                        var itemdate=new Date(datestr)
                        var parseddate=(showoptions.indexOf("datetime")!=-1)? itemdate.toLocaleString() : (showoptions.indexOf("date")!=-1)? itemdate.toLocaleDateString() : ""
                        return "<span class='datefield'>"+parseddate+"</span>"
                }
                var sagcontent='<ul>'
                var slider=this, rssdata=this.setting.rssdata, entries=this.entries
                for (var i=0; i<entries.length; i++){
                        sagcontent+='<li><a href="'+entries[i].link+'" target="'+rssdata.linktarget+'">'+entries[i].title+'</a>'
                                +'<div class="rsscontent">'
                                +(/description/.test(rssdata.displayoptions)? entries[i].content : entries[i].contentSnippet)
                                +'</div>'
                                +'<div class="rsslabel">'
                                +(/label/.test(rssdata.displayoptions)? "<b>Source("+(i+1)+"):</b> "+entries[i].label+" " : "")
                                +(/date/.test(rssdata.displayoptions)? formatdate(entries[i].publishedDate, rssdata.displayoptions): "")
                                +'</div>'
                                +'</li>\n\n'
                }
        sagcontent+='</ul>'
        this.reloadul(sagcontent)
        if (slider.setting.refreshsecs>0) //refetch contents every x sec?
                setTimeout(function(){slider.fetchfeeds()}, slider.setting.refreshsecs*1000)
        }
}
and there is this one aswell http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js

Re: scroll box repeating

Posted: Fri Feb 18, 2011 5:19 am
by dsjoes
anyone :banghead:

Re: scroll box repeating

Posted: Mon Feb 21, 2011 6:42 am
by dsjoes
i think it might be this part

Code: Select all

   init:function($){
      var setting=this.setting
      this.$loadingpanel.hide()
      this.$mainul=this.$slider.find('ul:eq(0)').css({zIndex:1000})
      this.$lis=this.$mainul.find('li')
      if (setting.navpanel.show)
         this.addnavpanel()
      this.$secul=this.$mainul.clone().css({top:this.$mainul.height(), zIndex:999}).appendTo(this.$slider) //create sec UL and add it to the end of main UL
      this.scrollmsg(setting.mode=="auto")
   },