Tablerow van kleur veranderen bij visited links

[DumbAss]

Iemand kwam met de volgende vraag:

Is het mogelijk dat als je een link, uit de lijst, aangeklikt hebt dat deze regel dan een iets ander kleurtje krijgt. Op deze manier is het duidelijk waar je gebleven bent als je door de lijst aan het zoeken bent?

Nu leek mij de enige mogelijkheid om dit met javascript te doen.
Ik wilde in php iedere <tr> een andere id geven en de link die in die rij zou staan een javscriptje met de volgende functionaliteit:
Als de link visited is (of misschien een bepaalde kleur?) dan moet de bgcolor van de tr veranderd worden. Maar is het in javascript mogelijk om de 'state' van een link uit te lezen?

[Creepy]

Javascript? Dat wordt een enkeltje Webdesign & Graphics
Zie ook HTML, CSS, JavaScript, Flash en Director topics *12-05*.

[Vecodo]

als ik het goed begrijp wil je dus de links die bezocht zijn een andere kleur geven ?

als dit de bedoeling is, dan kan je dit heel makkelijk toepassen door middel van CSS

[BtM909]

roy2001 schreef op maandag 15 augustus 2005 @ 11:15:
als ik het goed begrijp wil je dus de links die bezocht zijn een andere kleur geven ?

als dit de bedoeling is, dan kan je dit heel makkelijk toepassen door middel van CSS

Lees eens goed


TS: je zou eventueel middels onclick the class van je TR kunnen wijzigen. Dmv DOM kan je dan via je onclick-target de bijbehorende TR kunnen opzoeken

[Barracuda_82]

Ik zou het met CSS doen. Ik zou de link zelf (dus de A tag) een 100% width geven zodat ie de hele cell vult. Daarna met padding een hoogte opgeven en dit element een display: block geven. Dan vult de link de hele cell en kun je de visited style een andere achtergrondkleur geven.

Klinkt misschien wazig maar om het te illustreren een stukje CSS uit mijn hoofd:

HTML:

<tr><td class="link"><a href="http://www.google.nl">Google</a></td></tr>
<tr><td class="link"><a href="http://www.altavista.com">Altavista</a></td></tr>

Cascading Stylesheet:

.link a {
   display: block;
   background-color: #EEEEEE;
   padding: 5px 0 5px 0;
   width: 100%
}
.link a:visited {
   background-color: #E8E8E8;
}

Ik heb het niet getest, maar het zou eens goed kunnen dat dit werkt zo.

[Vecodo]

BtM909 schreef op maandag 15 augustus 2005 @ 11:22:
[...]

Lees eens goed


TS: je zou eventueel middels onclick the class van je TR kunnen wijzigen. Dmv DOM kan je dan via je onclick-target de bijbehorende TR kunnen opzoeken

Lezen is niet me sterkste kant . maar zo te zien zat ik wel half goed

[BtM909]

Barracuda_82 schreef op maandag 15 augustus 2005 @ 11:26:

HTML:

<tr><td class="link"><a href="http://www.google.nl">Google</a></td></tr>
<tr><td class="link"><a href="http://www.altavista.com">Altavista</a></td></tr>

Maar nu doe je een cel, terwijl TS een tablerow wilt

[ Voor 57% gewijzigd door BtM909 op 15-08-2005 11:29 ]

[Barracuda_82]

Hmmm... een TR wordt een beetje lastig op die manier

Je kunt dan wel proberen om alle info in 1 cell te batsen, dan werkt het misschien wel. Maar dat zal wel niet gaan. Zul je denk ik toch met JS aan de gang moeten.

[ Voor 12% gewijzigd door Barracuda_82 op 15-08-2005 11:31 ]

[DumbAss]

Barracuda_82 schreef op maandag 15 augustus 2005 @ 11:26:
Ik zou het met CSS doen. Ik zou de link zelf (dus de A tag) een 100% width geven zodat ie de hele cell vult. Daarna met padding een hoogte opgeven en dit element een display: block geven. Dan vult de link de hele cell en kun je de visited style een andere achtergrondkleur geven.

Klinkt misschien wazig maar om het te illustreren een stukje CSS uit mijn hoofd:

HTML:

<tr><td class="link"><a href="http://www.google.nl">Google</a></td></tr>
<tr><td class="link"><a href="http://www.altavista.com">Altavista</a></td></tr>

Cascading Stylesheet:

.link a {
   display: block;
   background-color: #EEEEEE;
   padding: 5px 0 5px 0;
   width: 100%
}
.link a:visited {
   background-color: #E8E8E8;
}

Ik heb het niet getest, maar het zou eens goed kunnen dat dit werkt zo.

Dat is idd een mooie oplossing. Echter... Het zou de hele tr moeten beslaan en niet een enkele cel.

Mhh, beetje laat met mijn opmerking. Maar is het mogelijk om de kleur / state van een link te checken? Want dat is feitelijk wat ik nodig heb.

[ Voor 15% gewijzigd door DumbAss op 15-08-2005 11:35 . Reden: te laat ]

[Verwijderd]

Op de website van w3schools staat een handig overzicht van properties van een anchor-opbject:
http://www.w3schools.com/htmldom/dom_obj_anchor.asp

Helaas staat er niet iets bij als visited, dus echt bepalen of een link al eens bezocht is wordt heel lastig, zo niet onmogelijk. Wel is het natuurlijk mogelijk om via onclick de achtergrondkleur van de tablerow te wijzigen, maar na het vernieuwen van de pagina's zijn alle achtergrondkleuren dan weer normaal. Of je moet moeilijk gaan doen door weer in een cookie op te slaan of er al eens op de link geklikt is, maar dat lijkt me wat overdreven..

[Kippenijzer]

Je kunt toch de kleur opvragen? Mits die gewoon afwijkt tussen visited en niet visited kun je toch met een for loopje in js de pagina links doorlopen en als de kleur "niet standaard" is, is hij dus visited. Als je geen uiterlijk kleurverschil wilt, kun je denk ik zelf slecht 1 afwijken (ffffff tov fffffe bijvoorbeeld). Ik *denk* dat je dat gewoon uit kunt lezen, en dus daarnaa kunt handelen...

[Blue-eagle]

Het kan wel, maar het is wel erg.. vies.. Zonder javascript in ieder geval. Ik weet niet of dit valideerd.

http://www.mobdb.com/got/highlight_visited_table_row.html

Werkt bij mij ook niet in FF, alleen in IE

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test page</title>
<style>
    a:visited tr td { background: #efefef; color: red; }
</style>
</head>

<body>

<table border="1" cellpadding="2" cellspacing="2">
    <a href="http://www.google.com">
        <tr>
            <td>Google</td>
            <td><a href="http://www.google.com">www.google.com</a></td>
        </tr>
    </a>
    
    <a href="http://www.tweakers.net">
        <tr>
            <td>Tweakers</td>
            <td><a href="http://www.tweakers.net">www.tweakers.net</a></td>
        </tr>
    </a>
    
    <a href="http://www.nu.nl">
        <tr>
            <td>Fok!</td>
            <td><a href="http://www.nu.nl">www.nu.nl</a></td>
        </tr>
    </a>
    
</table>

</body>
</html>

[ Voor 33% gewijzigd door Blue-eagle op 15-08-2005 11:58 ]

[DumbAss]

Blue-eagle schreef op maandag 15 augustus 2005 @ 11:56:
Het kan wel, maar het is wel erg.. vies.. Zonder javascript in ieder geval. Ik weet niet of dit valideerd.

http://www.mobdb.com/got/highlight_visited_table_row.html

Werkt bij mij ook niet in FF, alleen in IE

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test page</title>
<style>
    a:visited tr td { background: #efefef; color: red; }
</style>
</head>

<body>

<table border="1" cellpadding="2" cellspacing="2">
    <a href="http://www.google.com">
        <tr>
            <td>Google</td>
            <td><a href="http://www.google.com">www.google.com</a></td>
        </tr>
    </a>
    
    <a href="http://www.tweakers.net">
        <tr>
            <td>Tweakers</td>
            <td><a href="http://www.tweakers.net">www.tweakers.net</a></td>
        </tr>
    </a>
    
    <a href="http://www.nu.nl">
        <tr>
            <td>Fok!</td>
            <td><a href="http://www.nu.nl">www.nu.nl</a></td>
        </tr>
    </a>
    
</table>

</body>
</html>

Hèhè Als laatste oplossing vind ik dit wel aardig. Maar bij mij doet 'ie het helemaal niet. Noch in IE als in FF.

[supakeen]

Dat word dan waarschijnlijk met javascript aan de slag

Maar nog even tussendoor die linkjes staan wel zo dat een tabel MOET gebruikt worden? Met andere woorden: is dit tabulaire data?

[Savantas]

Ok, ik sla de vraag over tabulaire data maar even wijselijk over...
Er zijn javascripts die elementen van classes kunnen veranderen. Dan kan je via een onMouseClick zorgen dat de class van een tr veranderd. Verder hoef je dan alleen je CSS aan te vullen. Iets als:

code:

tr.bezocht td { background-color: kleur }

Je zal alleen bij elke link dus het scriptje aan moeten roepen.
Maar als het dynamisch (php/asp/...) gebouwt word, kan je misschien via een XMLHttpRequest werken. /me Savantas heeft ergens over gehoord, maar waar de klepel hangt...