CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

dreyfusdk Nybegynder

19. marts 2006 - 18:25 Der er 11 kommentarer og
1 løsning

Gem javascript-ting i fil

Hej,

Jeg har en masse tabeller på min hjemmeside hvor der er en effekt på hver eneste kolonne. Jeg benytter denne kode på mine kolonner:

<table>
<tr>
<td ONMOUSEOVER="this.style.backgroundColor='WHITESMOKE'; return true;" ONMOUSEOUT="this.style.backgroundColor=''; return true;">
En eller anden tekst...
</td>
</tr>
</table>

Det er jo meget fancy, men det gør at siden fylder en del + det gør det besværgeligt hvis jeg på sigt ønsker at ændre fx. farven e.lig.

Mit spørgmål går derfor på, hvordan kan jeg styre det (hvilken kode skal der til) fra central hold - fx. fra en javascript fil eller stylesheet for at det er mest optimalt?

Venlgi hilsen

- Magnus

Synes godt om

mclemens Nybegynder

19. marts 2006 - 18:52 #1

Sådan her?

"filnavn.html"

<html><head>

<script type="text/JavaScript" language="JavaScript" src="si.js"></script>

</head>

<body onLoad="showit();">

<table>
<tr>
<td>
En eller anden tekst...
</td>
</tr>
</table>
</body></html>

samt "si.js"

function showit() {
alert(document.body.innerHTML);

document.body.innerHTML=document.body.innerHTML.replace(/<td/gi, "<td ONMOUSEOVER=\"this.style.backgroundColor='WHITESMOKE'; return true;\" ONMOUSEOUT=\"this.style.backgroundColor=''; return true;\"");

alert(document.body.innerHTML);
}

Synes godt om

mclemens Nybegynder

19. marts 2006 - 18:55 #2

eller hvis du har flere tables så definer de td's der skal have js værdien tildelt med class="si"...

"filnavn.html"

<html><head>

<script type="text/JavaScript" language="JavaScript" src="si.js"></script>

</head>

<body onLoad="showit();">

<table>
<tr>
<td class="si">
En eller anden tekst...
</td>
<td>
En eller anden tekst... der ikke får baggrund
</td>
</tr>
</table>
</body></html>

"si.js"
function showit() {
alert(document.body.innerHTML);

document.body.innerHTML=document.body.innerHTML.replace(/<td class=si/gi, "<td class=\"si\" ONMOUSEOVER=\"this.style.backgroundColor='WHITESMOKE'; return true;\" ONMOUSEOUT=\"this.style.backgroundColor=''; return true;\"");

alert(document.body.innerHTML);
}

Synes godt om

mclemens Nybegynder

19. marts 2006 - 19:12 #3

Åh, jo m.h.t. css fidusen så kan det ikke gøres da :hover kun virker på links...
Her er et eksempel på at det ikke virker ;) - js er vejen man må gå :/ ... medmindre det havde været til en menu selvfølgelig ...

<html><head><style>
p.bg{color:black;background-color:white;}
p.bg:hover{color:black;background-color:whitesmoke;}

a.bg{text-decoration:none;display:block;color:black;background-color:white;}
a.bg:hover{display:block;color:black;background-color:whitesmoke;}
</style></head><body>

<table><tr>
<td ><p class="bg">tekst</p></td>
<td ><a href="#" class="bg">tekst</a></td>
</tr></table>
</body></html>

Synes godt om

dreyfusdk Nybegynder

19. marts 2006 - 19:30 #4

Super, jeg har fået det til at fungere med JS :-) Sparer en del på både loadtider og trafikudgifter :-p

Men kan det passe at det ikke fungerer i Firefox?

Synes godt om

mclemens Nybegynder

19. marts 2006 - 19:55 #5

Men kan det passe at det ikke fungerer i Firefox?
.. checker lige - det kan vi jo ikke have :P

Synes godt om

mclemens Nybegynder

19. marts 2006 - 19:57 #6

ja, hov script to duer ikke... kigger lige på den plus de alerts skal vist også lige fjernes de blev brugt til at teste med :/

Synes godt om

mclemens Nybegynder

19. marts 2006 - 20:04 #7

Ny .js fil --- prøver lige en comprimere den lidt...

function showit() {
document.body.innerHTML=document.body.innerHTML.replace(/<td class="si"/gi, "<td class=\"si\" ONMOUSEOVER=\"this.style.backgroundColor='WHITESMOKE'; return true;\" ONMOUSEOUT=\"this.style.backgroundColor=''; return true;\"");

document.body.innerHTML=document.body.innerHTML.replace(/<td class=si/gi, "<td class=\"si\" ONMOUSEOVER=\"this.style.backgroundColor='WHITESMOKE'; return true;\" ONMOUSEOUT=\"this.style.backgroundColor=''; return true;\"");
}

Synes godt om

mclemens Nybegynder

19. marts 2006 - 20:06 #8

... det hjalp lidt :)

function showit() {
reptxt="<td class=\"si\" ONMOUSEOVER=\"this.style.backgroundColor='WHITESMOKE'; return true;\" ONMOUSEOUT=\"this.style.backgroundColor=''; return true;\"";

document.body.innerHTML=document.body.innerHTML.replace(/<td class="si"/gi, reptxt);

document.body.innerHTML=document.body.innerHTML.replace(/<td class=si/gi, reptxt);
}

Synes godt om

mclemens Nybegynder

19. marts 2006 - 20:26 #9

.. problemet var at IE definere class i document.body.innerHTML som class=si uanset hvad man gør i sin html bodyen mens FF definerer det til clas="si"

Synes godt om

roenving Novice

20. marts 2006 - 00:16 #10

Hrm, ville det ikke være meget bedre at tildele funktionerne i stedet for at manipulere innerHTML, so jo heller ikke er fremtidssikret, da det aldrig bør kunne virke i en xhtml-sammenhæng (men vist er implementeret i Gecko-maskinen (som bl.a. FireFox bruger !-)

<script type="text/javascript">
window.onload = function(){
var tds = document.getElementsByTagName("td");
for(i=0;tds.length>i;i++){
if(tds[i].className.match(/\bsi\b|\bsa\b/)){
tds[i].onmouseout = function(){this.style.backgroundColor = "";};
if(tds[i].className.match(/\bsi\b/))
tds[i].onmouseover = function(){this.style.backgroundColor = "whitesmoke";};
else
tds[i].onmouseover = function(){this.style.backgroundColor = "armygreen";};
}
}
}
</script>

-- hvor jeg så også viser muligheden for at have forskellige effekter aktiveret ved samme script (class="si" giver whitesmoke ved mouseover, class="sa" giver armygreen !-)

Synes godt om

mclemens Nybegynder

20. marts 2006 - 02:09 #11

roenving> Tak for dit input - ny i js ... fik bog(nærmere hæfte) i julegave ... js 1.5 fra IDG's forlag... lærer lidt nyt herinde dag for dag :)

ændrede lige baggrundsfarven på class sa... og kastede den ind i en test for syns skyld /der er ikke noget armygreen (gav fejl før - ellers skal der bruges #00ff00 eller rgb(0,255,0) værdier... )/

<html><head><script type="text/javascript">
window.onload = function(){
var tds = document.getElementsByTagName("td");
for(i=0;tds.length>i;i++){
if(tds[i].className.match(/\bsi\b|\bsa\b/)){
tds[i].onmouseout = function(){this.style.backgroundColor = "white";};
if(tds[i].className.match(/\bsi\b/))
tds[i].onmouseover = function(){this.style.backgroundColor = "whitesmoke";};
else tds[i].onmouseover = function(){this.style.backgroundColor = "green";};
}
}
}
</script></head>

<body>

<table><tr>
<td class="si">tekst</td>
<td class="sa">tekst</td>
<td>tekst</td>
</tr></table>
</body></html>

Synes godt om

mclemens Nybegynder

22. februar 2007 - 18:45 #12

Tak for point :o)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS