[JavascriptJ Javascript fading ticker kleuren

[klaaz]

Ik heb van www.dynamicdrive.com een leuk Javascriptje gedownload om een fadende ticker op mijn pagina te krijgen. Werkt prima, het enige probleem is dat ik de kleuren niet goed krijg afgestemd. Nu kan ik redelijk JavaScript lezen maar kom er toch niet uit. Ben nu eenmaal meer een PHP mannetje

Het volgende script laat de berichten 'infaden'. De startkleur is ingesteld als wit (255,255,255) en de eindkleur is ingesteld als 'groen' (209,223,181), dit was 0,0,0,

Het probleem is dat het faden verloopt van WIT -> ZWART, ondanks de andere instellingen. Het fadertickertje staat in een layer die de JUISTE achtergrond kleur heeft. Na het faden van wit naar zwart veranderd de kleur ook in groen, de juiste kleur.

Wat ik wil is natuurlijk laten faden van WIT -> GROEN.

Het script:

code:

<script language="JavaScript1.2">
//default speed is 4.5 seconds, Change that as desired
var speed=4500
var news=new Array()
news[0]="<a href='http://www.pulse.nl' target='_blank'>[img]'images/tickerpuls.gif'[/img]</a>"
news[1]="<a href='http://www.citrix.nl' target='_blank'>[img]'images/tickercitrix.gif'[/img]</a>"
news[2]="<a href='http://www.emc2.nl' target='_blank'>[img]'images/tickercitrix.gif'[/img]</a>"
//expand or shorten this list of messages as desired

var fadescheme=0 //set 0 to fade bgcolor from (white to black), 1 for (black to white)
var hex=(fadescheme==0)? 255 : 0
var startcolor=(fadescheme==0)? "rgb(255,255,255)" : "rgb(209,223,181)"
var endcolor=(fadescheme==0)? "rgb(209,223,181)" : "rgb(255,255,225)"
var frame=20;

var ie=document.all
var ns6=document.getElementById
var ns4=document.layers

i=0
tickerobject=ie? subtickertape: ns6? document.getElementById("subtickertape") : document.tickertape.document

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}

function bgcolorfade() {                
// 20 frames fading process
if(frame>0) {   
hex=(fadescheme==0)? hex-12 : hex+12 // increase or decrease color value depd on fadescheme
tickerobject.style.backgroundColor="rgb("+hex+","+hex+","+hex+")"; // Set color value.
frame--;
setTimeout("bgcolorfade()",20); 
}
else{
tickerobject.style.backgroundColor=endcolor;
frame=20;
hex=(fadescheme==0)? 255 : 0
}   
}

function updatecontent(){
if (ie||ns6)
bgcolorfade()
if (ns4){
tickerobject.subtickertape.document.write('<span vAlign="middle" class="subtickertapefont">'+news[i]+'</span>')
tickerobject.subtickertape.document.close()
}
else 
tickerobject.innerHTML=news[i]

if (i<news.length-1)
i++
else
i=0
setTimeout("updatecontent()",speed)
}
</script>

Het gaat dus puur om de start en eind fade kleuren. De ticker werkt verder correct.

Hier zou het volgens mij moeten zitten:

code:

var fadescheme=0 //set 0 to fade bgcolor from (white to black), 1 for (black to white)
var hex=(fadescheme==0)? 255 : 0
var startcolor=(fadescheme==0)? "rgb(255,255,255)" : "rgb(209,223,181)"
var endcolor=(fadescheme==0)? "rgb(209,223,181)" : "rgb(255,255,225)"
var frame=20;

Ik heb echter alle mogelijke combinaties al geprobeerd...

[André]

Misschien fadescheme op 1 zetten?

Heb je de html er ook bij, dan wil ik hem wel even debuggen.

[ Voor 51% gewijzigd door André op 07-10-2003 14:02 ]

[crisp]

ranzig scriptje, het probleem zit 'm trouwens hier:

JavaScript:

function bgcolorfade() {                
// 20 frames fading process
if(frame>0) {   
hex=(fadescheme==0)? hex-12 : hex+12

het enige wat dit doet is 20x de R, G en B waarde met 12 vermeerderen of verminderen, er is geen enkele check met de eindkleur die je opgeeft, noch houd hij rekening met relatieve verschillen in R, G en B waarde tussen begin en eindkleur.
Ik zou het zelf schrijven als ik jou was, +/- 8 regels moet mogelijk zijn

[klaaz]

André schreef op 07 October 2003 @ 14:02:
Misschien fadescheme op 1 zetten?

Nee dan gaat ie van zwart naar wit

Heb je de html er ook bij, dan wil ik hem wel even debuggen.

Dat zou fijn zijn:

code:

<style type="text/css">
<!--

#tickertape{
position:relative;
margin-left:9px;
layer-background-color:#D1DFB5;
width:120px;
height:80px;
}

#subtickertape{
position:absolute;
background-color:#D1DFB5;
width:120px;
height:80px;

}

.subtickertapefont{
font:bold 12px Verdana;
text-decoration:none;
color:black;
}

.subtickertapefont a{
color:black;
text-decoration:none;
}
-->
</style>

<body  leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="if (ie||ns6||ns4) {regenerate2();updatecontent()}">

<div id="tickertape"> 
    <div id="subtickertape" class="subtickertapefont">Initialiseren..</div>
</div> 

<script language="JavaScript1.2">
//default speed is 4.5 seconds, Change that as desired
var speed=4500
var news=new Array()
news[0]="<a href='http://www.pulse.nl' target='_blank'>[img]'images/tickerpuls.gif'[/img]</a>"
news[1]="<a href='http://www.citrix.nl' target='_blank'>[img]'images/tickercitrix.gif'[/img]</a>"
news[2]="<a href='http://www.emc2.nl' target='_blank'>[img]'images/tickercitrix.gif'[/img]</a>"
//expand or shorten this list of messages as desired

var fadescheme=0 //set 0 to fade bgcolor from (white to black), 1 for (black to white)
var hex=(fadescheme==0)? 255 : 0
var startcolor=(fadescheme==0)? "rgb(255,255,255)" : "rgb(209,223,181)"
var endcolor=(fadescheme==0)? "rgb(209,223,181)" : "rgb(255,255,225)"
var frame=20;

var ie=document.all
var ns6=document.getElementById
var ns4=document.layers

i=0
tickerobject=ie? subtickertape: ns6? document.getElementById("subtickertape") : document.tickertape.document

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}

function bgcolorfade() {                
// 20 frames fading process
if(frame>0) {   
hex=(fadescheme==0)? hex-12 : hex+12 // increase or decrease color value depd on fadescheme
tickerobject.style.backgroundColor="rgb("+hex+","+hex+","+hex+")"; // Set color value.
frame--;
setTimeout("bgcolorfade()",20); 
}
else{
tickerobject.style.backgroundColor=endcolor;
frame=20;
hex=(fadescheme==0)? 255 : 0
}   
}

function updatecontent(){
if (ie||ns6)
bgcolorfade()
if (ns4){
tickerobject.subtickertape.document.write('<span vAlign="middle" class="subtickertapefont">'+news[i]+'</span>')
tickerobject.subtickertape.document.close()
}
else 
tickerobject.innerHTML=news[i]

if (i<news.length-1)
i++
else
i=0
setTimeout("updatecontent()",speed)
}
</script>

[ Voor 27% gewijzigd door klaaz op 07-10-2003 14:33 ]

[klaaz]

crisp schreef op 07 October 2003 @ 14:02:
ranzig scriptje, het probleem zit 'm trouwens hier:

JavaScript:

function bgcolorfade() {                
// 20 frames fading process
if(frame>0) {   
hex=(fadescheme==0)? hex-12 : hex+12

het enige wat dit doet is 20x de R, G en B waarde met 12 vermeerderen of verminderen, er is geen enkele check met de eindkleur die je opgeeft, noch houd hij rekening met relatieve verschillen in R, G en B waarde tussen begin en eindkleur.
Ik zou het zelf schrijven als ik jou was, +/- 8 regels moet mogelijk zijn

Dat zou ik graag willen maar vanwege mijn beperkte kennis van JavaScript op dit moment gaat me dat een dag of wat kosten. En ik zit een beetje krap in mijn tijd op dit moment. Later zal ik me meer in JavaScript gaan verdiepen.

[crisp]

opzetje:

HTML:

<html>
<head>
<title>fader</title>
<script>

var start_color = [255,255,255];
var end_color = [209,223,181];
var fade_direction = -1;
var R,G,B;
var step = 20;
var delay = 100;

function init_fade() {

  R = fade_direction == -1? start_color[0]:end_color[0];
  G = fade_direction == -1? start_color[1]:end_color[1];
  B = fade_direction == -1? start_color[2]:end_color[2];

  document.getElementById('fader').style.backgroundColor = 'rgb('+R+','+G+','+B+')';
  document.getElementById('button').disabled = false;

}

function fade() {

  document.getElementById('button').disabled = true;

  R += ((start_color[0] - end_color[0]) / step) * fade_direction;
  G += ((start_color[1] - end_color[1]) / step) * fade_direction;
  B += ((start_color[2] - end_color[2]) / step) * fade_direction;
  var Rr = Math.round(R);
  var Gr = Math.round(G);
  var Br = Math.round(B);

  if ((fade_direction == -1 && Rr == end_color[0] && Gr == end_color[1] && Br == end_color[2]) ||
      (fade_direction == 1 && Rr == start_color[0] && Gr == start_color[1] && Br == start_color[2])) {
    fade_direction *= -1;
    init_fade();
  } else {
    document.getElementById('fader').style.backgroundColor = 'rgb('+Rr+','+Gr+','+Br+')';
    setTimeout('fade()', delay);
  }

}

</script>
</head>
<body onload="init_fade()">
<div id="fader">fading background color</div><br />
<input id="button" type="button" onclick="fade()" value="fade in/out" disabled="disabled" />
</body>
</html>

[André]

HTML:

<html>
  <head>
    <style type="text/css">
      #tickertape {
        position: relative;
        margin-left: 9px;
        background-color: #D1DFB5;
        width: 120px;
        height: 80px;
      }

      #subtickertape {
        position: absolute;
        background-color: #D1DFB5;
        width: 120px;
        height: 80px;
      }

      .subtickertapefont {
        font: bold 12px Verdana;
        text-decoration: none;
        color: black;
      }

      .subtickertapefont a {
        color: black;
        text-decoration: none;
      }
    </style>
    <script language="JavaScript1.2">
      var speed = 4500; //default speed is 4.5 seconds, Change that as desired
      var framez = 50; // aantal stapjes dat hij kleuren veranderd
      var startR = 255; var startG = 255; var startB = 255;
      var endR   = 209; var endG   = 223; var endB   = 181;
      
      var news = new Array();
      news[0]="Tekst 1";
      news[1]="Tekst 2";
      news[2]="Tekst 3";
            
      frame = 0;
      stepR = (startR - endR) / framez;
      stepG = (startG - endG) / framez;
      stepB = (startB - endB) / framez;
      i = 0;
      
      function bgcolorfade()
      {             
        if (frame < framez)
        {   
          tickerobject.style.backgroundColor = "rgb(" + (startR - (frame * stepR)) + "," + (startG - (frame * stepG)) + "," + (startB - (frame * stepB)) + ")";
          frame++;
          setTimeout("bgcolorfade()", speed / framez);  
        }
        else
        {
          tickerobject.style.backgroundColor = "rgb(" + endR + "," + endG + "," + endB + ")";
          frame = 0;
          updatecontent();
        }   
      }

      function updatecontent()
      {
        tickerobject = document.getElementById("subtickertape");
        bgcolorfade();
        tickerobject.innerHTML = news[i];
        if (i < news.length - 1) { i++; } else { i=0; }
      }
    </script>
  </head>
  <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="updatecontent()">
    <div id="subtickertape" class="subtickertapefont">Initialiseren..</div>
  </body>
</html>

[klaaz]

Jeetje: perfect zeg... Nu moet ik nog kiezen...

Jullie zijn TE goed voor mij!