06. august 2005 - 19:54Der er
35 kommentarer og 2 løsninger
Kompliceret skift af baggrundsfarve, i bestemt <td>
Hej :-)
Jeg har en FAQ der, lige som med alle andre FAQ's, fungerer ved at brugeren klikker på et link øverst på siden, og derefter sendes længere ned ad siden.
Spørgsmål: Hvordan kan jeg ved klik på følgende: <a href="#svar4">Spørgsmål4</a>
... Få baggrunden på denne (længere nede ad siden)...: <td id="Svar4"></td>
... til at skifte farve i 10 sekunder, og derefter vende tilbage til sin oprindelige baggrundsfarve?
Meningen er at når en bruger klikker på et bestemt spørgsmål i FAQ'en, skal baggrunden fremhæves så brugeren hurtigt kan finde svarets overskrift mellem de andre svar.
Kan det laves forholdsvis simpelt, uden kilometerlang og tung kode?
Støv, fibre og metalliske partikler kan påvirke både uptime, levetid og driftssikkerhed. Derfor arbejder flere datacentre systematisk med contamination control.
kan man ikke gøre noget ala -- function setFarve(id){ document.getElementById(id).style.bgcolor = 'farve'; setTimeout('fjernFarve(id)', 10000); } function fjernFarve(id){ document.getElementById(id).style.bgcolor = 'farve'; }
Jeg har sat følgende i <head>: <script type="text/javascript"> function setFarve(id){ document.getElementById(id).style.bgcolor='#CA0000'; setTimeout('fjernFarve(id)', 10000); } function fjernFarve(id){ document.getElementById(id).style.bgcolor='#725B56'; } </script>
Da jeg gætter på at det er stedet, scriptet skal placeres.
denne her gider den første men ikke tilbage igen --- <html> <head> <script type="text/javascript"> function setFarve(id){ var elm = document.getElementById(id); elm.style.background = '#FFFFFF'; setTimeout('fjernFarve('+elm+')', 5000); } function fjernFarve(elm){ elm.style.background = '#00FF00'; } </script> </head> <body> <a href="#Svar4" onclick="setFarve('Svar4');">Spørgsmål4</a>
nu kan jeg jo lige så godt lære lidt når ole er her :o) Jeg synes jeg prøvede som en gal med style.background-color og bgcolor osv Men den meldte fejl på begge burde background-color ikke virke?
altså hvis din baggrund skal være hvid før og efter men grøn undervejs, så .----- <head> <script type="text/javascript"> function setFarve(id){ var elm = document.getElementById(id); elm.style.background = '#00FF00'; setTimeout("fjernFarve('"+id+"')", 5000); } function fjernFarve(id){ document.getElementById(id).style.background = '#FFFFFF'; } </script> </head> <body> <a href="#Svar4" onclick="setFarve('Svar4');">Spørgsmål4</a>
Man kan i øvrigt også bruge en anonym funktion i timeOut'en og dermed medsende en reference til selve objektet:
function setFarve(id){ var elm = document.getElementById(id); elm.style.backgroundColor = '#FFFFFF'; setTimeout(function(){fjernFarve(elm)}, 5000); } function fjernFarve(elm){ elm.style.background = '#00FF00'; }
"Spørgsmål: Hvordan kan jeg ved klik på følgende: <a href="#svar4">Spørgsmål4</a> ... Få baggrunden på denne (længere nede ad siden)...: <td id="Svar4"></td>"
"function setFarve(id){ function setFarve(id).style.bgcolor = 'farve'; setTimeout('fjernFarve(id)', 10000); } function fjernFarve(id){ document.getElementById(id).style.bgcolor = 'farve'; } <a href="#svar4" onclick="setFarve('Svar4');">Spørgsmål4</a>"
- og da brugen af den anonyme funktion jo i virkeligheden er dobbelkonfekt, kunne vi ligeså godt korte det ned til:
function setFarve(id){ var elm = document.getElementById(id); elm.style.backgroundColor = '#FFFFFF'; setTimeout(function(){elm.style.backgroundColor="#00FF00"}, 5000); }
- og endda kan vi nøjes med at retablere farven ved at sætte den til 'den tomme streng':
function setFarve(id){ var elm = document.getElementById(id); elm.style.backgroundColor = '#FFFFFF'; setTimeout(function(){elm.style.backgroundColor=""}, 5000); }
- hvilket gør koden lidt lettere at vedligeholde. Endnu lettere at vedligeholde bliver det, hvis highlight farven sættes i en global variabel, hvor sidens andre variabler sættes (hvis der er tale om flere scripts):
var hiLight = "#ffffff";
function setFarve(id){ var elm = document.getElementById(id); elm.style.backgroundColor = hiLight; setTimeout(function(){elm.style.backgroundColor=""}, 5000); }
Jeg skiftede scriptene ud i takt med olebole skiftede scriptene ud, så jeg er kommet frem til:
<script type="text/javascript"> var hiLight = "#ffffff";
function setFarve(id){ var elm = document.getElementById(id); elm.style.backgroundColor = hiLight; setTimeout(function(){elm.style.backgroundColor=""}, 5000); } </script>
busschou>> Ja, da det er så kort et uddtryk, der skal afvikles, er det nok bedst her.
Er der tale om en større funktion, ville det dog give bedst overblik at bruge en separat funktion, som blev kaldt fra den anonyme funktion - som i det første eksempel :)
- var der ikke hele tiden tydelige fremskridt for en pæn flok brugere, tror jeg ikke, der ville være noget benzin til at drive Eksperten. Det er dét, der gør det sjovt at hænge ud og hjælpe for 'svarerne' :)
Det har du jo ret i. Og man kan virkelig lære meget her på E, hvis man vil. Mere end man umiddelbart kan læse sig til i alverdens tutorials netop fordi, der her er mulighed for, at spørge omkring specifikke problemstillinger; og via svarene 'lære sig frem' til brugbare løsninger, på baggrund af andres viden og erfaringer.
Samtidig er det både sjovt og lærerigt, at hjælpe andre herinde, når man kan :-)
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.
