Login  |  Register
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome, Guest. Please login or register.
Did you miss your activation email?

August 19, 2022, 05:58:35 AM

Login with username, password and session length
Members
  • Total Members: 3843
  • Latest: Tricky
Stats
  • Total Posts: 193479
  • Total Topics: 21088
  • Online today: 58
  • Online ever: 1035
  • (November 26, 2020, 04:45:12 AM)
Users Online
Users: 1
Guests: 52
Total: 53

Author Topic: Links Block  (Read 23304 times)

0 Members and 1 Guest are viewing this topic.

ontap

  • Guest
Links Block
« on: January 07, 2006, 04:34:00 PM »
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...

Code: [Select]
<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>
« Last Edit: January 21, 2006, 11:55:38 AM by On Tap »

crip

  • Guest
Re: Links Block
« Reply #1 on: January 07, 2006, 04:40:58 PM »
Wow..
even animated..very nice!

dave

  • Guest
Re: Links Block
« Reply #2 on: January 07, 2006, 09:14:30 PM »
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

  • Guest
Re: Links Block
« Reply #3 on: January 07, 2006, 10:04:06 PM »
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

Code: [Select]

<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

  • Guest
Re: Links Block
« Reply #4 on: January 07, 2006, 10:08:46 PM »
Thanks!

superQ

  • Guest
Re: Links Block
« Reply #5 on: January 22, 2006, 09:38:33 PM »
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
« Last Edit: April 09, 2006, 03:48:41 PM by superQ »

ontap

  • Guest
Re: Links Block
« Reply #6 on: January 24, 2006, 08:00:28 AM »

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

This Bit
Code: [Select]
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:
Code: [Select]
fcontent[2]="more can go here";
fcontent[3]="and again!";

This is how you can change Width & Height

Code: [Select]
var fwidth='150px'; //set scroller width
var fheight='100px'; //set scroller height
« Last Edit: January 24, 2006, 08:02:12 AM by On Tap »

Xarcell

  • Guest
Re: Links Block
« Reply #7 on: January 24, 2006, 01:34:25 PM »
Very nice sript...

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

fenris_w0lf

  • Guest
Re: Links Block
« Reply #8 on: January 26, 2006, 03:57:47 PM »
Hehehe, I really liked this one!! Thanks !! :)

breathwork

  • Guest
Re: Links Block
« Reply #9 on: July 04, 2006, 07:22:15 AM »
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
« Last Edit: July 07, 2006, 12:00:37 AM by breathwork »