Søg
Avatar billede mercutio Nybegynder
20. oktober 2006 - 22:54 Der er 12 kommentarer og
1 løsning

Hvordan laves et fade out tablerow background colour?

Hej Eksperter.

Jeg har brug for et javascript jeg kan kalde med en table row eller et id til en table row i en tabel. Hvis det er muligt vil jeg gerne kunne kalde det med en fade_fra_farve og fade_til_farve så jeg ligesom kan genbruge det til andre farver.

Det der skal ske er at jeg med ajax kalder min server og hvis der er ændringer til de data jeg har i tabellen vil jeg gerne at der hurtigt fades ind til en farve og farven skal så lige blive der i et par sekunder før den langsomt fader tilbage til baggrundsfarven igen.

Så lidt ekstra ønsker.
public fade(waitMilisBeforeStartFade, fadeOverSoManyMiliseconds, fromColour, ToColour, tablerow)

Håber den metode jeg skal kalde kommer til at se således ud.

Det skal også virke hvis jeg starter koden for flere forskellige rows på forskellig tid. :-) Jeg kender selv lidt til javascript så et link til noget lignende er også en god hjælp.

På forhånd tak.
Avatar billede jhe-ting Nybegynder
22. oktober 2006 - 20:13 #1
Det var da en fin idé at lave en real-time table row highlighting.

Det her ser ud til at virke:
________________________________________
<HTML>
<HEAD>
<TITLE>Fade row test</TITLE>
<SCRIPT language=javascript>
function fadeRow(waitStart, fadeTime, fromCol, toCol, tableRow){
    var _maxSteps = 20;
    var _minDelay = 10;
    // First find the TableRow
    if (typeof(tableRow)=="string") tableRow = document.getElementById(tableRow);
   
    var steps = _maxSteps;
    var dly = fadeTime / _maxSteps;
    if (dly < _minDelay){
        dly = minDelay;
        steps = fadeTime / dly;
    }
   
    // debug info into table data
    tableRow.cells.item(0).innerText = "fade:"+fadeTime+" st:"+steps+" dl:"+dly;
   
    setTimeout("fadeTimer("+steps+",0,"+dly+",'"+
        fromCol+"','"+toCol+"','"+tableRow.uniqueID+"')",waitStart);
}

function blendTo(frac, col1, col2){
    if (col1.length != 6 ||
        col2.length != 6 ) return "";
    var c1,c2,cc,tt,ss="";
    for (var ii=0; ii<6; ii+=2){
        c1 = parseInt("0x"+col1.substr(ii,2));
        c2 = parseInt("0x"+col2.substr(ii,2));
        cc = Math.round(c1 + frac*(c2-c1))
        tt = cc.toString(16);
        if (tt.length<2) tt="0"+tt;
        ss += tt;
    }
    return ss;
}

function fadeTimer(totalSteps, progress, delay, fromCol, toCol, tableRow){
    var oRow = document.getElementById(tableRow);
    var frac = progress/totalSteps;
    if (frac>1) frac = 1;
    var sCol = blendTo(frac, fromCol, toCol);
    oRow.style.backgroundColor = "#"+sCol;
    progress = parseInt(progress)+1
    // debug info into table data
    oRow.cells.item(2).innerText = "prog:"+progress;
   
    if (frac < 1) {
        setTimeout("fadeTimer("+totalSteps+
            ","+progress+","+delay+",'"+fromCol+"','"+toCol+"','"+tableRow+"')", delay)
    }
}

function simulate(){
    fadeRow(500,1000, "FFFFCC", "CCCCFF", row1);
    fadeRow(500,1000, "FFFFCC", "CCCCFF", row2);
    fadeRow(500,1000, "FFFFCC", "CCCCFF", row3);
    setTimeout(sim2,4000);
}

function sim2(){
    fadeRow(1000,8000, "CCCCFF", "FFFFCC", "row1");
    fadeRow(1000,8000, "CCCCFF", "FFFFCC", "row2");
    fadeRow(1000,8000, "CCCCFF", "FFFFCC", "row3");
}
</SCRIPT>

</HEAD>
<BODY>
<h1>RowFade test</h1>
<A href="java script:simulate();">Simulate events</A>
<TABLE border=1 style="background-color:#FFFFCC; width=100%">
  <TR id=row1>
    <TD>Cell 1 1</TD>
    <TD>Cell 1 2</TD>
    <TD>Cell 1 3</TD>
  </TR>
  <TR id=row2>
    <TD>Cell 2 1</TD>
    <TD>Cell 2 2</TD>
    <TD>Cell 2 3</TD>
  </TR>
  <TR id=row3>
    <TD>Cell 3 1</TD>
    <TD>Cell 3 2</TD>
    <TD>Cell 3 3</TD>
  </TR>
</TABLE>
</BODY>
</HTML>
________________________________________
Avatar billede mercutio Nybegynder
23. oktober 2006 - 08:26 #2
Det må jeg sige. Jeg tester det lige af men umiddelbart ser det rigtig god ud. Tak skal du have!
Avatar billede jhe-ting Nybegynder
23. oktober 2006 - 09:01 #3
Det kan måske være nødvendigt at indføre afbrydelse af igangværende fade på en given tabelrække når der startes en ny. Ellers kan det flimre hvis flere hændelser opstår i hurtig rækkefølge.
Avatar billede mercutio Nybegynder
23. oktober 2006 - 14:04 #4
Hej Jhe-ting ja det har jeg opdaget :-) men det prøver jeg lige om jeg selv kan få lavet. Tak for hjælpen.
Avatar billede jhe-ting Nybegynder
23. oktober 2006 - 18:24 #5
Tip: Tilføj en værdi til en række der er igang; f.eks.:

tableRow.timerID = setTimeout("fadeTimer("+steps+",0,"+dly+",'"+
        fromCol+"','"+toCol+"','"+tableRow.uniqueID+"')",waitStart);
Avatar billede mercutio Nybegynder
24. oktober 2006 - 09:48 #6
Hmm ja har fundet ud af hvordan jeg kan annulere en kørsel med clearTimeout men det er kun scripts der ikke er kørt endnu. Men kan man også stoppe en der er igang?
Avatar billede jhe-ting Nybegynder
24. oktober 2006 - 10:11 #7
Øh. Jeg mener ikke et event-script kan afbrydes ved hjælp af nye event's. Event's der opstår medens et script afvikles sættes i kø, og behandles først når det igangværende afsluttes.
Her må man vist slå sig til tåls med at forhindre flere timer-events:

  if (tableRow.timerID) {
      clearTimeout(tableRow.timerID);
      tableRow.timerID = null;
  }
Avatar billede mercutio Nybegynder
24. oktober 2006 - 13:41 #8
Ok. Det prøver jeg at finde ud af. Tusind tak for hjælpen.
Avatar billede mercutio Nybegynder
25. oktober 2006 - 22:02 #9
Ahh doh. Dette script virker ikke i mozilla... er det noget du lige har et hurtigt tip til?
Avatar billede jhe-ting Nybegynder
26. oktober 2006 - 05:16 #10
Ak ja. :P
Der er så meget man kan tillade sig med IE som ikke går med FF.
Denne udgave har jeg testet på FF v. 2.0 og de virker den fint.

<HTML>
<HEAD>
<TITLE>Fade row test http://www.eksperten.dk/spm/739871</TITLE>
<SCRIPT language=javascript>
function _gel(elm){
    return document.getElementById(elm);
}

function fadeRow(waitStart, fadeTime, fromCol, toCol, tableRow){
    var _maxSteps = 200;
    var _minDelay = 20;
    // First find the TableRow
    //alert(typeof(tableRow));
    if (typeof(tableRow)=="string") tableRow = _gel(tableRow);
    //alert(tableRow.id);
    var steps = _maxSteps;
    var dly = fadeTime / _maxSteps;
    if (dly < _minDelay){
        dly = _minDelay;
        steps = fadeTime / dly;
    }
   
    // debug info into table data
    tableRow.cells[0].innerHTML = "fade:"+fadeTime+" st:"+steps+" dl:"+dly;
   
    setTimeout("fadeTimer("+steps+",0,"+dly+",'"+
        fromCol+"','"+toCol+"','"+tableRow.id+"')",waitStart);
}

function blendTo(frac, col1, col2){
    if (col1.length != 6 ||
        col2.length != 6 ) return "";
    var c1,c2,cc,tt,ss="";
    for (var ii=0; ii<6; ii+=2){
        c1 = parseInt("0x"+col1.substr(ii,2));
        c2 = parseInt("0x"+col2.substr(ii,2));
        cc = Math.round(c1 + frac*(c2-c1))
        tt = cc.toString(16);
        if (tt.length<2) tt="0"+tt;
        ss += tt;
    }
    return ss;
}

function fadeTimer(totalSteps, progress, delay, fromCol, toCol, tableRow){
    var oRow = _gel(tableRow);
    var frac = progress/totalSteps;
    if (frac>1) frac = 1;
    var sCol = blendTo(frac, fromCol, toCol);
    oRow.style.backgroundColor = "#"+sCol;
    progress = parseInt(progress)+1;
    // debug info into table data
    oRow.cells[2].innerHTML = "prog:"+progress;
   
    if (frac < 1) {
        setTimeout("fadeTimer("+totalSteps+
            ","+progress+","+delay+",'"+fromCol+"','"+toCol+"','"+tableRow+"')", delay)
    }
}

function simulate(){
    fadeRow(500,1000, "FFFFCC", "CCCCFF", _gel("row1"));
    fadeRow(500,1000, "FFFFCC", "CCCCFF", _gel("row2"));
    fadeRow(500,1000, "FFFFCC", "CCCCFF", _gel("row3"));
    setTimeout(sim2,4000);
}

function sim2(){
    fadeRow(1000,8000, "CCCCFF", "FFFFCC", "row1");
    fadeRow(1000,8000, "CCCCFF", "FFFFCC", "row2");
    fadeRow(1000,8000, "CCCCFF", "FFFFCC", "row3");
}
</SCRIPT>

</HEAD>
<BODY>
<h1>RowFade test</h1>
<A href="java script:simulate();">Simulate events</A>
<TABLE border=1 style="background-color:#FFFFCC; width:100%">
  <TR id=row1>
    <TD>Cell 1 1</TD>
    <TD>Cell 1 2</TD>
    <TD>Cell 1 3</TD>
  </TR>
  <TR id=row2>
    <TD>Cell 2 1</TD>
    <TD>Cell 2 2</TD>
    <TD>Cell 2 3</TD>
  </TR>
  <TR id=row3>
    <TD>Cell 3 1</TD>
    <TD>Cell 3 2</TD>
    <TD>Cell 3 3</TD>
  </TR>
</TABLE>
</BODY>
</HTML>
Avatar billede mercutio Nybegynder
26. oktober 2006 - 06:45 #11
Tusind tak. Hmm jeg syntes jeg har kigget begge scripts igennem og jeg syntes ikke rigtigt jeg kan finde en forskel. Kun lige at du har lavet den getElementById metode... men det er vel ikke det der gør at det også virker i firefox?
Avatar billede mercutio Nybegynder
26. oktober 2006 - 15:56 #12
ahh fant forskellen. tableRow.id i stedet for uniqueid
Avatar billede jhe-ting Nybegynder
26. oktober 2006 - 16:45 #13
Lidt ekstra kode kan fjerne den nuværende afhængighed af hver række skal have et ID. Det er egentlig kun nøvendigt hvis du finder frem til rækken som et objekt via DOM. Ellers skal der jo være et ID for at referere til det i koden.

if (tableRow.id=="") tableRow.id = "row"+tableRow.rowIndex;

dermed slipper du for 'uniqueID'
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:45 AJAX kode -javascript Af Asky i Programmeringsværktøjer
I går 11:50 Vælg indstilling - blå skærm med med flere muligheder for fejlretning Af Uvanga i Windows
14/0523:24 Google sheets beregning udfra dato Af rickiegrayholm i Office & Kontorpakker
14/0518:09 Outlook Classic, lukker ikke Af mort1 i E-mail programmer
13/0520:48 Bred buet skærm vs. 2 skærme Af Nanarsi i Skærme
White papers
Flere white papers »