Forums

This topic is locked

vertical news ticker (help)

Posted 10 Jun 2007 18:08:31
1
has voted
10 Jun 2007 18:08:31 Nick (NR) posted:
I'm having a little trouble adding more news items to this vertical scroller, I've added an extra pausecontent<img src=../images/dmxzone/forum/icon_smile_question.gif border=0 align=middle>, then the scroller disappears
, so I tweaked part of the java, to add extra parts to the function pausescroller and pausescroller.prototype.initialize=function(), which now shows the scroller, but as you can see on my forum it runs fine, but it shows one bit of news twice before running in the order given, I'm not sure where I've gone wrong with the edits to the java?

portalogy.myfastforum.org/index.php

Vertical scroller is from:
www.dynamicdrive.com/dynamicindex2/crosstick.htm

This is what I have so far:
<pre id=code><font face=courier size=2 id=code>&lt;style type="text/css"&gt;

/*CSS for the scroller*/

#pscroller1{
width: 155px;
height: 60px;
padding: 5px;
background-color: #000000;
color: #FF0000;
font-size:10px;
}

#pscroller1 a{
text-decoration: none;
}
#pscroller1 a:hover{
text-decoration: underline;
}

#pscroller2{
width: 350px;
height: 20px;
border: 1px solid black;
padding: 3px;
}

#pscroller2 a{
text-decoration: none;
}

.someclass{ //class to apply to your scroller(s) if desired
}

&lt;/style&gt;

&lt;script type="text/javascript"&gt;

/*Example message arrays for the two demo scrollers*/

var pausecontent=new Array()
pausecontent[0]='We have a few new images accross the forum including folder icons and the post buttons.'
pausecontent[1]='&lt;img src=templates/myfs_portalogy1/images/strelka.gif align=top width=20 height=11 border=0&gt;Featuring: The only portal support forum for myff, run and maintained by myff support moderator Nick(NR).'
pausecontent[2]='&lt;img src=templates/myfs_portalogy1/images/strelka.gif align=top width=20 height=11 border=0&gt;&lt;a href="portalogy.myfastforum.org/about56.html"&gt;View details of our newly coded vertical news ticker.&lt;/a&gt;'
pausecontent[3]='&lt;img src=templates/myfs_portalogy1/images/strelka.gif align=top width=20 height=11 border=0&gt;&lt;a href="portalogy.myfastforum.org/about40.html" target="_new"&gt;We have finally got a howtodoit search portal compiled and created by CodyT07 and Nick(NR).&lt;/a&gt;'

var pausecontent2=new Array()
pausecontent2[0]='&lt;a href="www.news.com"&gt;News.com: Technology and business reports&lt;/a&gt;'
pausecontent2[1]='&lt;a href="www.cnn.com"&gt;CNN: Headline and breaking news 24/7&lt;/a&gt;'
pausecontent2[2]='&lt;a href="news.bbc.co.uk"&gt;BBC News: UK and international news&lt;/a&gt;'

&lt;/script&gt;

&lt;script type="text/javascript"&gt;

/***********************************************
* Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('&lt;div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"&gt;&lt;div class="innerDiv" style="position: absolute; width: 100%" visibility: visible" id="'+divId+'1"&gt;'+content[0]+'&lt;/div&gt;&lt;div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2"&gt;'+content[1]+'&lt;/div&gt;&lt;div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'3"&gt;'+content[2]+'&lt;/div&gt;&lt;div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'4"&gt;'+content[3]+'&lt;/div&gt;&lt;/div&gt;')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}

// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------

pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1"
this.hiddendiv=document.getElementById(this.tickerid+"2"
this.hiddendiv=document.getElementById(this.tickerid+"3"
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}


// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------

pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)&gt;(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}

// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------

pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}

pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}

// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------

pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1&gt;ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}

pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "".getPropertyValue("padding-top"
else
return 0
}

&lt;/script&gt;</font id=code></pre id=code>

Reply to this topic