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

Recent

Welcome to TinyPortal. Please login or sign up.

March 29, 2024, 05:26:59 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,105
  • Total Topics: 21,213
  • Online today: 319
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 321
  • Total: 321

Links Block

Started by ontap, January 07, 2006, 11:34:00 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

ontap

Heres a nice little javascript fader you could use for website links or anything really...

Make a javascript/html block and use the javascript code below...


<Script Type="text/javascript">

var delay = 4000; // Set delay between message change (in miliseconds)
var maxsteps=30; // Number of steps to take to change from start color to endcolor
var stepdelay=40; // Time in miliseconds of a single step

//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)

var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="<a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br>";
fcontent[1]="& More Links!...<br><a href='http://mylink.blaaa' target='_new'>My Other Links...</a><Br>";
closetag='</div>';

var fwidth='150px'; //set scroller width
var fheight='100px'; //set scroller height

var fadelinks=1;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.

/// No Need To Edit Anything Below This Line ///

var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;

/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
  if (index>=fcontent.length)
    index=0
  if (DOM2){
    document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
    document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
    if (fadelinks)
      linkcolorchange(1);
    colorfade(1, 15);
  }
  else if (ie4)
    document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
  index++
}

// colorfade() partially by Marcio Galli for Netscape Communications.  ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
  var obj=document.getElementById("fscroller").getElementsByTagName("A");
  if (obj.length>0){
    for (i=0;i<obj.length;i++)
      obj[i].style.color=getstepcolor(step);
  }
}

/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
  if(step<=maxsteps) {
    document.getElementById("fscroller").style.color=getstepcolor(step);
    if (fadelinks)
      linkcolorchange(step);
    step++;
    fadecounter=setTimeout("colorfade("+step+")",stepdelay);
  }else{
    clearTimeout(fadecounter);
    document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
    setTimeout("changecontent()", delay);

  }   
}

/*Rafael Raposo's new function*/
function getstepcolor(step) {
  var diff
  var newcolor=new Array(3);
  for(var i=0;i<3;i++) {
    diff = (startcolor[i]-endcolor[i]);
    if(diff > 0) {
      newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
    } else {
      newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
    }
  }
  return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

if (ie4||DOM2)
  document.write('<div id="fscroller" style="border:0px solid black;width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</Script>

crip

Wow..
even animated..very nice!

dave

Hiw can you do multiple blocks using the above code? I tried creating 2 spearate blocks with different names & different links but after I created & enabled the 2nd block, the 1st block went blank & the 2nd block displayed the links that were set in the 1st bloc.


Rasyr

To do a second one, you would have to change the variable names.

If you use the first script, you can use this modified version for the second:

It should work... heheh



<Script Type="text/javascript">

var delay = 4000; // Set delay between message change (in miliseconds)
var maxsteps=30; // Number of steps to take to change from start color to endcolor
var stepdelay=40; // Time in miliseconds of a single step

//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor2= new Array(255,255,255); // start color (red, green, blue)
var endcolor2=new Array(0,0,0); // end color (red, green, blue)

var fcontent2=new Array();
begintag2='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent2[0]="<a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br>";
fcontent2[1]="& More Links!...<br><a href='http://mylink.blaaa' target='_new'>My Other Links...</a><Br>";
closetag2='</div>';

var fwidth2='150px'; //set scroller width
var fheight2='100px'; //set scroller height

var fadelinks2=1;  //should links inside scroller content also fade like text? 0 for no, 1 for yes.

/// No Need To Edit Anything Below This Line ///

var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay2=0;
var index2=0;

/*Rafael Raposo edited function*/
//function to change content
function changecontent2(){
  if (index2>=fcontent2.length)
    index2=0
  if (DOM2){
    document.getElementById("fscroller2").style.color="rgb("+startcolor2[0]+", "+startcolor2[1]+", "+startcolor2[2]+")"
    document.getElementById("fscroller2").innerHTML=begintag2+fcontent2[index2]+closetag2
    if (fadelinks2)
      linkcolorchange2(1);
    colorfade2(1, 15);
  }
  else if (ie4)
    document.all.fscroller2.innerHTML=begintag2+fcontent2[index]+closetag2;
  index2++
}

// colorfade() partially by Marcio Galli for Netscape Communications.  ////////////
// Modified by Dynamicdrive.com

function linkcolorchange2(step){
  var obj=document.getElementById("fscroller2").getElementsByTagName("A");
  if (obj.length>0){
    for (i=0;i<obj.length;i++)
      obj[i].style.color=getstepcolor2(step);
  }
}

/*Rafael Raposo edited function*/
var fadecounter2;
function colorfade2(step) {
  if(step<=maxsteps) {
    document.getElementById("fscroller2").style.color=getstepcolor2(step);
    if (fadelinks2)
      linkcolorchange2(step);
    step++;
    fadecounter2=setTimeout("colorfade2("+step+")",stepdelay);
  }else{
    clearTimeout(fadecounter2);
    document.getElementById("fscroller2").style.color="rgb("+endcolor2[0]+", "+endcolor2[1]+", "+endcolor2[2]+")";
    setTimeout("changecontent2()", delay);

  }   
}

/*Rafael Raposo's new function*/
function getstepcolor2(step) {
  var diff2
  var newcolor2=new Array(3);
  for(var i=0;i<3;i++) {
    diff2 = (startcolor2[i]-endcolor2[i]);
    if(diff2 > 0) {
      newcolor2[i] = startcolor2[i]-(Math.round((diff2/maxsteps))*step);
    } else {
      newcolor2[i] = startcolor2[i]+(Math.round((Math.abs(diff2)/maxsteps))*step);
    }
  }
  return ("rgb(" + newcolor2[0] + ", " + newcolor2[1] + ", " + newcolor2[2] + ")");
}

if (ie4||DOM2)
  document.write('<div id="fscroller2" style="border:0px solid black;width:'+fwidth2+';height:'+fheight2+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent2, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent2)
else if (document.getElementById)
window.onload=changecontent2
</Script>



dave


superQ

#5
I just installed this script and wonder how to add the actual links into it.It also appears too wide.



Ok I see I have to edit the code. Not obvious to some like me,but what about the width of it. too wide.

Ok it don't work right on the right side. Moved it to left =ok

ontap

#6

the code in my first posts have links allready in the code,
just change them to your "urls"

This Bit

fcontent[0]="<a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br><a href='http://mylink.blaaa' target='_new'>My Links...</a><Br>";
fcontent[1]="& More Links!...<br><a href='http://mylink.blaaa' target='_new'>My Other Links...</a><Br>";


More Lines could be added also

Eg:

fcontent[2]="more can go here";
fcontent[3]="and again!";


This is how you can change Width & Height


var fwidth='150px'; //set scroller width
var fheight='100px'; //set scroller height


Xarcell

Very nice sript...

Good for showing blog links like: myspace, tagworld, yahoo, blogger, etc...

fenris_w0lf

Hehehe, I really liked this one!! Thanks !! :)

breathwork

#9
What needs to be changed so that it picks up a random home page link from a registered members info on the board? ie; any random link from registered member info?

Thanks  :o