TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

April 13, 2024, 04:06:52 PM

Login with username, password and session length
Members
  • Total Members: 3,885
  • Latest: Growner
Stats
  • Total Posts: 195,154
  • Total Topics: 21,219
  • Online today: 70
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 45
  • Total: 45

Scrolling text

Started by Amay_Zing, December 04, 2005, 12:09:52 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Amay_Zing

Scrolling textHi

I would like to have a small block on my tp that shows a little description and a link to a down load.

I found this



<!-- TWO STEPS TO INSTALL NEWSSCROLLER:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<style type="text/css">
<!--
.newsTxt1 {
  font-size: .8em;
  font-family: verdana, helvetica, arial, sans-serif;
}
.newsTxt2 {
  font-size: 1em;
  font-family: verdana, helvetica, arial, sans-serif;
  font-weight: bold;
}
-->
</style>


<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Robert Suppenbach ::webdevel.deezhosts.net */

var toScroll=new Array()
var ie=document.all
var dom=document.getElementById
var firstNews_obj;
var secondNews_obj;

function newsScroll(name){
  var c=this; c.name=name; c.mc=0; c.i=2;
  return this;
}

newsScroll.prototype.addItem = function(text,link,font,fontSize,fontStyle){
  var c = this;
  if (link !=''){
    if (font != '')
      toScroll[c.mc]="<a href='"+link+"'><font face='"+font+"' size='"+fontSize+"' Class='"+fontStyle+"'>"+text+"</font></a>";
    else
      toScroll[c.mc]="<a href='"+link+"'><font Class='"+fontStyle+"'>"+text+"</font></a>";
  }
  else {
    if (font != '')
      toScroll[c.mc]="<font face='"+font+"' size='"+fontSize+"' Class='"+fontStyle+"'>"+text+"</font>";
    else
      toScroll[c.mc]="<font Class='"+fontStyle+"'>"+text+"</font>";
  }
  c.mc++;
}

newsScroll.prototype.construct = function(){
  var c = this; theWidth = c.scrollerwidth; theHeight=c.scrollerheight; thebgColor = c.scrollerbgcolor; theBackground =c.scrollerbackground; theDelay=c.scrollerdelay;
  scroll_obj=eval(c.name);       
  if (ie||dom){
    document.writeln('<div id="main2" style="position:relative;width:'+theWidth+';height:'+theHeight+';overflow:hidden;background-color:'+thebgColor+' ;background-image:url('+theBackground+')">')
    document.writeln('<div style="position:absolute;width:'+theWidth+';height:'+theHeight+';clip:rect(0 '+theWidth+' '+theHeight+' 0);left:0;top:0">')
    document.writeln('<div id="firstNews" style="position:absolute;width:'+theWidth+';left:0;top:1">')
    document.write(toScroll[0])
    document.writeln('</div>')
    document.writeln('<div id="secondNews" style="position:absolute;width:'+theWidth+';left:0;top:0;visibility:hidden">')
    document.write(toScroll[dyndetermine=(toScroll.length==1)? 0 : 1])
    document.writeln('</div>')
    document.writeln('</div>')
    document.writeln('</div>')
  }
}

newsScroll.prototype.move = function(whichdiv){
  var c = this; theDelay = c.scrollerdelay; theHeight = c.scrollerheight;
  scroll_obj=eval(c.name);
  tdiv=eval(whichdiv)

  if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
    tdiv.style.top=0+"px"
    setTimeout("scroll_obj.move(tdiv)",theDelay)
    setTimeout("scroll_obj.move2(secondNews_obj)",theDelay)
    //document.write('Got Milk?')
  return
  }
  if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
    tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
    setTimeout("scroll_obj.move(tdiv)",50)
  }
  else {
    tdiv.style.top=parseInt(theHeight)+"px"
    tdiv.innerHTML=toScroll[c.i]
    if (c.i==toScroll.length-1)
      c.i=0
    else
      c.i++
  }
}

newsScroll.prototype.move2 = function(whichdiv){
  var c = this; theDelay = c.scrollerdelay; theHeight= c.scrollerheight;
  scroll_obj=eval(c.name);
  tdiv2=eval(whichdiv)

  if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
    tdiv2.style.top=0+"px"
    setTimeout("scroll_obj.move2(tdiv2)",theDelay)
    setTimeout("scroll_obj.move(firstNews_obj)",theDelay)
    return
  }
  if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
    tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
    setTimeout("scroll_obj.move2(secondNews_obj)",50)
  }
  else {
    tdiv2.style.top=parseInt(theHeight)+"px"
    tdiv2.innerHTML=toScroll[c.i]
    if (c.i==toScroll.length-1)
      c.i=0
    else
      c.i++
  }
}

newsScroll.prototype.startScroll = function(){
  var c = this;
  scroll_obj=eval(c.name);       
 
  if (toScroll.length >2)
    c.i = 2;
  else
    c.i = 0;
 
  firstNews_obj=ie? firstNews : document.getElementById("firstNews")
  secondNews_obj=ie? secondNews : document.getElementById("secondNews")
  setTimeout("scroll_obj.move(firstNews_obj)",c.scrollerDelay);
  secondNews_obj.style.top=theHeight;
  secondNews_obj.style.visibility='visible'
}
-->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<div align="center">
<script type="text/javascript">
<!-- Begin
theNews=new newsScroll("theNews"); //create our newsScroller object
   theNews.scrollerdelay = 5000; // pausetime 3000 = 3 Seconds
   theNews.scrollerwidth = 300;  // the width of the box
   theNews.scrollerheight = 100; // the height of the box
   theNews.scrollerbgcolor = ''; //  the box background color
   theNews.scrollerbackground = ''; // Set to blank if you don't want to use a background image

   //******************************************************************
   //
   // The addItem method below has 5 variables and is formated as follows:
   // addItem (text,link,font,fontSize,fontStyle)
   // text      - the text to be displayed.
   // link      - (optional) website, or page to link news item to.
   // font      - (optional) Font face to use on item.
   // fontSize  - (optional) size in pt format
   //     i.e. 1=8pt, 2=10pt, 3=12pt and so on.
   // fontStyle - (optional) css style to assign to font. You can use the class name.
   //
   //******************************************************************

   theNews.addItem('Welcome to <em>JavaScript Source</em><br><br>Feel free to use any of the scripts listed here<br>(<em>This item contains a link.</em>)','http://javascript.internet.com','','','newsTxt2');
   theNews.addItem('We have scripts for banner ads, graphics, forms, navigation, cookies, and more!','','','','newsTxt1');
   theNews.addItem('This scoller can be used to post current news, sales items, or new content. The listings can contain links or can just be text, like this one.','','','','');
   theNews.addItem('You can set the speed and size of the scroller box to be used. Add as many items as you like!','','','','newsTxt1');

   // the next 2 lines construct the news box, and start the scroller
   theNews.construct();
   theNews.startScroll();
// End -->
</script>
</div>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  6.79 KB -->


However it only shows first bit which stays and does not show other texts

Rather than have a big space for my downloads I thought that a scrolling block with the name of the download would be better for space saving.

Anyone help