PDA

Volledige versie bekijken : Active moet active blijven?

SaphuA
%Europe/Berlin %926 %2006, 22:14
Hey mensen,
Ik heb een klein probleempje met het active houden van mijn link.

Waneer je nu op een link klikt en een pagina wordt geopend, wordt de kleur van de link veranderd door de stijl a:active aan te passen. Waneer je nu echter ergens anders op de site klikt wordt de stijl weer gereset.

Is dit te voorkomen?

Bedankt,
~Sph
kevinrommen
%Europe/Berlin %929 %2006, 22:18
a:link
Defines the style for normal unvisited links.

a:visited
Defines the style for visited links.

a:active
Defines the style for active links.

A link will be active as long as you hold down your left mouse button.

a:hover
Defines the style for hovered links.


active is dus een mousedown. Zoals ik je vraag lees wil je een visited state laten zien. Wil je mensen laten zien of ze al op de link hebben geklikt.

edit
----------------------------------
of bedoel je als je ergens op geklikt hebt dat mensen kunnen zien in welk deel van de pagina ze zijn????

dat zou je kunnen oplossen door het zo te doen


a:hover, #header_activepage {
color: #FFFFFF;
text-decoration:underline;

}

a {
color: #0b6179;
text-decoration:none;
font-weight:bold;
}


dan geef je de desbetreffende link een extra id mee aan de link
SaphuA
%Europe/Berlin %932 %2006, 22:22
Nee visited moet ik ook niet hebben, dat is dus mijn probleem.
De achtergrond moet zo blijven zolang de bijbehorende pagina open staat, waneer je dus op een andere link klikt moet de achtergrond weer teruggezet worden.

Moet ik dit anders met javascript op gaan lossen? :(

~Sph
kevinrommen
%Europe/Berlin %955 %2006, 22:55
kijk naar mijn edit saphua


a:hover, #header_activepage {
color: #FFFFFF;
text-decoration:underline;

}

a {
color: #0b6179;
text-decoration:none;
font-weight:bold;
}


<a href="fotoalbum.php" id="header_activepage">Fotoalbums</a>


zo geef je dus een extra id mee aan je code die zegt dat die pagina actief is.
SaphuA
%Europe/Berlin %103 %2006, 02:28
Hey Kevin,
Dit werkt helaas niet, aangezien je zo alle links altijd active maakt. Wat ik wil is dat alleen de link die hoort bij de huidige pagina op active staat.

Alsnog bedankt,
~Sph
SaphuA
%Europe/Berlin %175 %2006, 04:12
Ok, voor wat meer visualisatie heb ik even een voorbeeldje:
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<iframe name="test"></iframe>
<center>
<a href="" target="test">Link</a>
<a href="" target="test">Link</a>
</center>
</body>
</html>
css
body
{
margin: 0px 0px 0px 0px;
}

a:hover
{
background-color: #353535;
color: #cccccc;
}

a:active
{
background-color: #5C5239;
color: #ffffff;
}

a
{
padding: 1px 0px 0px 0px;
float: left;
font-family: arial;
font-size: 12px;
text-decoration: none;
color: #cccccc;
width: 131px;
height: 17px;
display: block;
background-color: #202020;
}

Waneer je nu op een link klikt, wordt de achtergrondkleur ervan lichtbruin. Waneer je vervolgens binnen de pagina op de achtergrond klikt, veranderd de link weer naar zijn normale donkere staat. Dit moet dus alleen gebeuren waneer je op een andere link klikt.

~Sph
mknol
%Europe/Berlin %538 %2006, 12:55
Of gebruik mijn zelfgeschreven actieve link script. Deze maakt in een opgegeven div op de actieve link een class genaamd 'aktief' aan.

function ClassAanAktieveLinkToewijzen(divID) {
var DHTML = (document.getElementById || document.all || document.layers); // DHTML check
if ( !DHTML ) alert('Uw browser ondersteund geen DHTML');

if (document.getElementById) { // check op browser-functies
var Obj = document.getElementById(divID);
} else if (document.all) {
var Obj = document.all[divID];
} else if (document.layers) {
var Obj = document.layers[divID];
}

var URL = window.location.href; // URL van pagina
var inhoud = Obj.getElementsByTagName("a"); // vind links in divID

if (inhoud.length != 0) { // als er inhoud in zit,
for(i=0; i<inhoud.length; i++) { // maak een loop met alle links
if (URL.indexOf(inhoud[i].innerHTML.toLowerCase()) > -1) { // check of inhoud van link overeenkomt met URL
inhoud[i].className ="aktief"; // Class toewijzen
}
if (URL.indexOf("index") > -1 && inhoud[i].innerHTML.toLowerCase() =="home") { // extra - als je home gebruikt op index-pagina
inhoud[i].className ="aktief"; // Class toewijzen
}
}
}
}

window.onload = function() {
ClassAanAktieveLinkToewijzen("navigatie"); // verander hier je ID van je div/table.
}

plaats dit in een extern javascript en verander onderin je ClassAanAktieveLinkToewijzen("navigatie"); naar je div Id-naam.

Maak in je stylesheet de class 'aktief' aan, bijvoorbeeld
#navigatie .aktief { color:red }
en je bent klaar.

Let op:
Noem de pagina's hetzelfde als wat je in de linktekst geplaatst heb.
Dus bij bv. <a href="contact.html">Contact</a> komt de linktekst overeen met de href.

Hopelijk kan je er wat mee. Ik maak (als het bevalt) er een tutorial van. Zie de bijlage voor een werkend voorbeeld. let maar niet op het taalgebruik/spelling in de bijlage.
SaphuA
%Europe/Berlin %560 %2006, 13:26
Perfect :D
mknol
%Europe/Berlin %580 %2006, 13:55
Perfect :DHeb je het makkelijk werkend gekregen? Laat me even je mening weten, dan maak ik er misschien een tutorial van.
SaphuA
%Europe/Berlin %688 %2006, 16:31
Ik ben het nog een beetje aan het uitvogelen etc. En daarna moet ik het in mijn site gaan proberen te verwerken. Ik zal je op de hoogte houden.
kevinrommen
%Europe/Berlin %793 %2006, 19:02
hey mknol..

net scriptje!! Het is in principe hetzelfde wat ik doe alleen ik heb het nu bij een site die ik had handmatig gedaan. Was te lui om het anders te doen :)


if (URL.indexOf("index") > -1 && inhoud[i].innerHTML.toLowerCase() =="home") { // extra - als je home gebruikt op index-pagina
inhoud[i].className ="aktief"; // Class toewijzen
}

Dit is als ik het goed begrijp de naam van de pagina (index.html) zonder het html erachter dan omdat deze niet in de adressbar staan toch????

maar vet scriptje!!

@ SaphuA

laat ons je bevindingen weten of het gelukt is.
SaphuA
%Europe/Berlin %706 %2006, 16:58
Hey mensen,
Ik ben er mee wezen spelen, en heb best een hoop aan moeten passen, aangezien ik met frames werkte en het geheel iets anders in elkaar zat.

Ik moet zeggen dat ik er erg trots op ben sinds dat ik er 0,0 verstand van had, hoewel het een vrij logische aanpassing is geweest. Ik laat nu de functie aanroepen in de onClick van de link.

Er zit nog één kleine bug in, waar ik nog even naar moeten kijken. Deze bug gebeurt waneer je je pagina refreshed, dan blijft de pagina in het content-frame staan maar de actieve link reset omdat deze op 'home' gezet wordt bij een onLoad.

Edit: Oude versie verwijderd, zie onder.

In ieder geval ERG bedankt!
~Sph
SaphuA
%Europe/Berlin %525 %2006, 12:37
Update:
Nu ik er wat dieper op ben ingegaan en er wat meer van begrijp, heb ik nog enkele aanpassingen gemaakt.

Aangezien ik een frame gebruik voor het menu hoef ik er geen rekening mee te houden of de links wel/niet binnen een div van een bepaalde class staan. Ik heb daardoor dus een hoop code kunnen verwijderen.

Ook heb ik de css file aangepast op de manier hoe ik het heb geleerd, ik weet niet of deze beter is maar voor mij wel duidelijk ;) Opmerkingen mag altijd! (Graag zelfs)

Omdat de code nu zo kort is heb ik hem nu ook in de html geplaatst, zodat het wat bereikbaarder is.

Hij is nu hier te vinden:
http://www.drewsrestaurant.com/saphua/campman/activenieuw/

Nogmaals bedankt!
~Sph

Edit1: Een probleem gevonden
Ik zit met een klein probleem bij het aanpassen van deze 'app' aan de site waar het voor bedoeld is. Er is een link aanwezig met de naam 'Care & Fair', maar het &-teken werkt de code niet. Ik heb al geprobeerd er een \-teken voor te zetten maar dit werkt niet. Iemand een idee?SetActive('Care \& Fair')~Sph

Edit2: Het refresh probleem
Ook zou ik toch nog graag ideeën horen over het refresh probleem wat ik eerder noemde. Ik zal het hier nog opeens beschrijven; Waneer je op een link drukt wordt er in het iframe 'content' een nieuwe pagina geladen en wordt de class van deze link op active gezet, dit werkt gewoon. Waneer je nu echter op de 'refresh' knop drukt, wordt door de onLoad in het menu de knop voor 'home' op active gezet, maar de pagina het het iframe 'content' blijft gewoon staan. Waar ik dus naar zoek is een manier om een van de volgende oplossingen te realiseren:
- Bij het refreshen van de pagina wordt in het iframe 'content' de pagina home ook werkelijk geladen.
- Bij het refreshen van de pagina mag de onLoad in de body van het menu niet meer gecalled worden. (Deze lijkt me het minst haalbaar, maar zou ik wel het liefst hebben)

Edit3: Nog een refresh probleem
En ik heb weer een probleem gevonden; Waneer je op een button klikt zodat de class ervan op active wordt gezet, en je drukt vervolgens meteen op refresh dan wordt deze class niet van de button verwijderd. Je hebt dan dus dat de knop Home op active wordt gezet, maar de vorige knop wordt op a:active gezet. Dus pas waneer je buiten het veld klikt krijgt deze knop weer zijn goede staat terug. Waneer ik de tweede optie van het probleem hierboven realiseerbaar kan maken hoef ik mij hier geen zorgen over te maken, maar anders is dit ook een probleem.

Ik weet dat ik inmiddels om een hoop dingen vraag, maar dit is voor mij een vrij nieuw gebied dus alle hulp die ik kan krijgen is welkom. En ik ben zelf zeker bezig met het zoeken naar antwoorden.

~Sph
mknol
%Europe/Berlin %445 %2006, 10:42
gaaf, je bent echt verder mee gegaan. In jouw frameset is deze script-oplossing idd beter. Ik zie ook dat je er een aantal dingen uit gehaald hebt. Het is wat dat betreft een redelijk open script waar je meer mee kan dan ik gedaan heb.

tip: & kun je ook misschien als &amp; proberen?
anders kun je misschien weer met indexOf aan de slag gaan. Dit pakt een selectie uit de opgegeven tekst. dan kun je alleen care als ID opgeven.
SaphuA
%Europe/Berlin %517 %2006, 12:24
indexOf zou inderdaad een goede oplossing zijn ja, dat van die &amp; zal ik nog even moeten proberen als ik thuis ben.

Heb je verder nog tips voor de refresh-problemen? Deze zijn nog even mijn grootste zorg. Wat het denk ik allemaal makkelijk oplost, is er gewoon voor zorgen dat alle pagina's en frames helemaal opnieuw geladen wordt (ofwel, het frame content komt weer op de home te staan).

Nogmaals bedankt,
~Sph
mknol
%Europe/Berlin %525 %2006, 12:36
Tja, ik gebruik zelf geen framesets (en is er eigenlijk ook niet echt voor gemaakt), dus ik heb dat probleem niet echt. Ik zou inderdaad (wat je zegt) proberen dat je de frameset helemaal opnieuw laad. Alleen tis niet echt handig ofzo.
SaphuA
%Europe/Berlin %910 %2006, 21:50
Oke ik heb alle bugs eruit gewerkt, de pagina wordt nu bij een refresh geheel opnieuw geladen. Ik heb dit met javascript opgelost met de volgende code (zelf bedacht dus weet niet of het een logische manier is).
function LoadPage() {
content.location = "content/home.html";
menu.location = "menu/menu.html";
}
Ik zou graag willen weten of ik de goede oplossing gebruik, of dat er misschien een andere betere oplossing beschikbaar is.

Bedankt,
~Sph
mknol
%Europe/Berlin %378 %2006, 09:04
Oke ik heb alle bugs eruit gewerkt, de pagina wordt nu bij een refresh geheel opnieuw geladen. Ik heb dit met javascript opgelost met de volgende code (zelf bedacht dus weet niet of het een logische manier is).
function LoadPage() {
content.location = "content/home.html";
menu.location = "menu/menu.html";
}
Ik zou graag willen weten of ik de goede oplossing gebruik, of dat er misschien een andere betere oplossing beschikbaar is.

Bedankt,
~Sph
Opzich kan dit wel. maar het lijkt me niet echt handig om alles handmatig op te geven. Het streven vind ik wel dat je het script kopieert, je class aanmaakt en je navigatie-div opgeeft en verder niets ;)

Ik gebruik het script tot nu toe alleen bij sites met (text)buttons met een korte inhoud (geen spaties ed). Dan volstaat het. Toch vind ik het wel goed als problemen zoals spaties of mappen eruit gehaald kunnen worden.

even over je laatste script:
function LoadPage() {
content= "content/home.html";
menu= "menu/menu.html";
}lijkt me al voldoende toch? je kunt de content en menu gewoon als variable gebruiken. Of niet?
CoLdAsIcE
%Europe/Berlin %498 %2006, 11:58
hey mknol2000, ik zou ook graag gebruik willen maken van jouw scriptje, alleen bij mij werkt het op de 1 of andere manier niet.

Uiteindelijk zou ik willen dat het script zn werk doet bij 2 verschillende menuutjes, ik weet alleen niet of je met jouw script 2 tegelijkertijd kunt doen. Maar zover kom ik al niet, ik heb nu 1 id opgegeven voor 1 menu, maar ook dit werkt niet...

hier is een voorbeeld van hoe het er nu uitziet:
test site (http://www.cmd.tech.nhl.nl/users/haar300/Site/)

het gaat om het verticale menu. Het is de bedoeling dat wanneer er opgeklikt is dat dan het pijltje bij de link blijft staan en de kleur van de tekst veranderd.

Enig idee waarom het bij mij niet werkt?
mknol
%Europe/Berlin %520 %2006, 12:29
Enig idee waarom het bij mij niet werkt?
window.onload = function() {
ClassAanAktieveLinkToewijzen("navigatie2");
ClassAanAktieveLinkToewijzen("navigatie1");
}

Dit moet je anders noteren. Zie bovenstaand. Dan moet het werken.
CoLdAsIcE
%Europe/Berlin %969 %2006, 23:16
hmmm ik heb het even veranderd zoals jij het had aangegeven....

maar er gebeurd nog niets. ik snap echt ff niet waarom :S
Hier mn site nogmaals (http://www.cmd.tech.nhl.nl/users/haar300/Site/)
mknol
%Europe/Berlin %395 %2006, 09:29
haal in je body de onload=" blurLinks()" weg, je kunt niet meerdere soorten onloads gebruiken, dat kan conflicteren.
Plaats het 'blurLinks' hierbij: (is het echt nodig, waarvoor dient het?)

window.onload = function() {
ClassAanAktieveLinkToewijzen("navigatie2");
ClassAanAktieveLinkToewijzen("navigatie1");
blurLinks();
}
En heb je wel een class aangemaakt die anders is? maak die class voor de test even rood.
CoLdAsIcE
%Europe/Berlin %488 %2006, 11:44
ok ik zal even kijken of ik het zo in orde kan maken.

blurlinks is trouwens voor firefox. wanneer je daar normaal gesproken een link selecteerd komt er gelijk zo'n border omheen... dat wordt nu weggeblurt

---edit---

nope werkt nog steeds niet... wanneer ik deze regel aanpasif (URL.indexOf(inhoud[i].innerHTML.toLowerCase()) > -1) door bijvoorbeeld > -1 weg te halen, krijg je juist alleen maar de style van aktief te zien... maar dan bij elke link P)

Dus hij leest dan iig wel de waarden van de class aktief, het is alleen nog niet goed toegepast hiero.

hier mn style voor actief nu:
#navigatie2 .aktief {
color: red;
background: url(../images/arrow.gif) no-repeat;
background-position: 0px;
}
#navigatie2 .aktief:hover {
color: red;
background: url(../images/arrow.gif) no-repeat;
background-position: 0px;
}

de actieve link zou nu dus iig rood moeten worden... maar dat gebeurd verder niet.
Ik weet het niet hoor, maar zou het ook kunnen komen dat het niet werkt omdat ik de <a> in een lijst <ul> heb staan?
mknol
%Europe/Berlin %547 %2006, 13:07
dat wordt nu weggeblurt
kan ook in je stylesheet (veel makkelijker)
*:focus {
-moz-outline:none;
outline:none;
}

Ik denk dat het misschien met je href van links te maken heb?

<a href="template.php?thisPage=index1">home</a></li>

edit: ik zie het al:
/*function ClassAanAktieveLinkToewijzen(divID) {
var DHTML = (document.getElementById || document.all || document.layers); // DHTML check
if ( !DHTML ) alert('Uw browser ondersteund geen DHTML');

if (document.getElementById) { // check op browser-functies
var Obj = document.getElementById(divID);
} else if (document.all) {
var Obj = document.all[divID];
} else if (document.layers) {
var Obj = document.layers[divID];
}

var URL = window.location.href; // URL van pagina
var inhoud = Obj.getElementsByTagName("a"); // vind links in divID

if (inhoud.length != 0) { // als er inhoud in zit,
for(i=0; i<inhoud.length; i++) { // maak een loop met alle links
if (URL.indexOf(inhoud[i].innerHTML.toLowerCase()) > -1) { // check of inhoud van link overeenkomt met URL
inhoud[i].className ="aktief"; // Class toewijzen
}
if (URL.indexOf("index") && inhoud[i].innerHTML.toLowerCase() =="home") { // extra - als je home gebruikt op index-pagina
inhoud[i].className ="aktief"; // Class toewijzen
}
}
}
}*/

haal de /* en */ weg!!!!
CoLdAsIcE
%Europe/Berlin %578 %2006, 13:52
hehe tsja als dat het nou eens was :P

nee ik heb die functie van jouw maar ff uitgeschakeld aangezien ik jouw script toch echt niet aan de praat kreeg. ik ben nu bezig met een php oplossing(waarmee het me nu dus wel gelukt is )

tnx voor je hulp anyway :)
Symbiont
%Europe/Berlin %754 %2007, 18:06
hehe tsja als dat het nou eens was :P

nee ik heb die functie van jouw maar ff uitgeschakeld aangezien ik jouw script toch echt niet aan de praat kreeg. ik ben nu bezig met een php oplossing(waarmee het me nu dus wel gelukt is )

tnx voor je hulp anyway :)

Eindelijk een discussie waarop oplossingen zijn gevonden voor het probleem dat me al een tijdje bezig houdt! :)

Het script van mknol werkt prima.

Ik was zelf ook bezig geweest met een oplossing te scripten in php, alhoewel ik een scripter ben vanuit de design hoek :O Dus ik kan het niet hardcore.

Voorheen had ik het opgelost door in de include-pagina een stylesheet weg te schrijven die de id waarde overschrijft. Niet echt een fraaie oplossing dus. Maar het werkt :)

Maar nu ben ik toch benieuwd naar de oplossing van CoLdAsIcE. Care to share?
mknol
%Europe/Berlin %380 %2007, 09:08
Lekker een oud topic ophalen :P Script werkt idd gewoon goed, gebruik het regelmatig.
maikel
%Europe/Berlin %718 %2007, 17:14
Ik heb niet het hele ding doorgelezen he, maar als je gewoon op iedere nodige pagina aangeeft welke geselecteerd moet blijven door het toevoegen van een class (al dan niet met php).

en je zet in je css:

a:visited.active { color: #ff3; }

dan ben je de man.

Cheers!

Maikel!
Symbiont
%Europe/Berlin %867 %2007, 20:49
Lekker een oud topic ophalen :P Script werkt idd gewoon goed, gebruik het regelmatig.
ja joh ik was er dus niet vanaf het begin erbij :P Ik ben via het googlen op dit topic terechtgekomen.
Ik heb me aangemeld om mee te kunnen bemoeien met dit al aardige oude topic :D


a:visited.active { color: #ff3; }
Maikel!
Dit zou ook wel kunnen in combi met php.

Om mezelf een beetje nuttig te maken in dit topic wil ik mijn laatste bevindingen met jullie delen.
Voor mensen die nog een goede script oplossing zoeken in php, kan je terecht op: http://alistapart.com/articles/keepingcurrent/

Het artikel bescrhrijft ook hoe je aan de hand van een kleine aanpassingen van hetzelfde script een website kan optimaliseren voor zoekmachines.
Gijs_
%Europe/Berlin %580 %2007, 14:56
Ook ik kom hier in dit oude topic terrecht via google. Is er nog ergens een script van SaphuA mét uitleg beschikbaar? De links in dit topic zijn dood, waardoor ik het nog niet helemaal kan volgen!
SaphuA
%Europe/Berlin %925 %2007, 23:13
Een werkende versie is hier te vinden:
http://www.campmancarpets.nl/
Gijs_
%Europe/Berlin %549 %2007, 14:11
Super, bedankt! :)