HOME       >>       Programming

Scrollerbox Repeating


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.

 

I think it is the javascript part that is causing the problem but i don't know where or which part.

 

scroller.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ 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 type="text/css" href="sagscroller.css" /><script src="sagscroller.js">/************************************************ SAG Content Scroller- © Dynamic Drive DHTML code library (http://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" > <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

/*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.3var 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 ><div ></div><div ><div ></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,{ 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,{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 >' +(/description/.test(rssdata.displayoptions)? entries[i].content : entries[i].contentSnippet) +'</div>' +'<div >' +(/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) }}

it is also using the script from here as well http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js


dsjoes

i think it might be this part of the sagscroller.js

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") },



VIEW ORIGINAL REGISTER GET FREE HOSTING

Xisto.com offers Free Web Hosting to its Members for their participation in this Community. We moderate all content posted here but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2001-2019 by Xisto Corporation. All Rights Reserved.