[CSS/ASP.NET] :Active actief houden

[Terranova]

Ik ben momenteel bezig met een tabbladachtige navigatie alleen ik zit nu met het probleem dat een tab wel van kleur veranderd maar niet blijft nadat je erop geklikt heb. Ik had al ergens gelezen dat :active niet werkt zoals het heet maar ik wil wel mijn tabblad de kleur laten houden zolang je op die pagina zit.

[RobIII]

Een eigen class "activetab" (of whatever) maken en die op het actieve element zetten? Als je geen request naar de server doet zul je de className property met JS moeten zetten en anders zet je server-side gewoon met PHP/ASP/whatever de class.

[ Voor 123% gewijzigd door RobIII op 04-02-2010 16:52 ]

[Terranova]

Oh vergeten te vertellen dat de links direct uit de database worden opgehaald dus in principe maar 1 class kan hebben voor de links

[RobIII]

HamburgerHenk schreef op donderdag 04 februari 2010 @ 16:52:
Oh vergeten te vertellen dat de links direct uit de database worden opgehaald dus in principe maar 1 class kan hebben voor de links

Want Heb je relevante(!!) code? Leg eens wat meer uit?
Ik neem aan dat je met "de links" doelt op de links waar de tabs naar verwijzen? Of...?

[ Voor 12% gewijzigd door RobIII op 04-02-2010 16:56 ]

[NMe]

HamburgerHenk schreef op donderdag 04 februari 2010 @ 16:52:
Oh vergeten te vertellen dat de links direct uit de database worden opgehaald dus in principe maar 1 class kan hebben voor de links

Da's onzin. Ook als links direct uit de database komen kun je er zelf classes aan hangen, desnoods met JS.

Verder kan ik inhoudelijk niet zoveel zeggen over je probleem want je hebt het nagelaten relevante code te posten.

[Terranova]

Ik heb hier momenteel geen code, ik had dit topic alvast geplaatst in de hoop dat er een oplossing zou zijn voordat ik thuis was(dacht dat het misschien niet zo moeilijk was)

De links worden opgehaald uit een database via de vb kant van een asp.net file en daarna via de pagina zelf via een asp:repeater getoond

[NMe]

...en daar kun je niet conditioneel een class tag aan toevoegen omdat...?

[OkkE]

A:active werkt alleen zolang de pagina niet refreshed, iets dat wel gebeurd wanneer je op een normaal linkje klikt. Je zal dus dmv serverside (of Javascript...) een extra class moeten toevoegen aan de tab waar je op dat moment bent. Easy.

[Terranova]

NMe schreef op donderdag 04 februari 2010 @ 17:01:
...en daar kun je niet conditioneel een class tag aan toevoegen omdat...?

Ik maar 1 stuk code heb(asp:hyperlink) waarin ik maar 1x cssclass kan doen, voor zoveer mijn kennis het toe laat dan

[RobIII]

HamburgerHenk schreef op donderdag 04 februari 2010 @ 17:05:
[...]

Ik maar 1 stuk code heb(asp:hyperlink) waarin ik maar 1x cssclass kan doen, voor zoveer mijn kennis het toe laat dan

Al kon je maar 1 class zetten (en dat is niet zo) dan maak je toch een kopie van die class en noem je 'm class_active en wijzig je de properties die je voor active wil wijzigen

[Terranova]

RobIII schreef op donderdag 04 februari 2010 @ 17:07:
[...]

Al kon je maar 1 class zetten (en dat is niet zo) dan maak je toch een kopie van die class en noem je 'm class_active en wijzig je de properties die je voor active wil wijzigen

Leg dat eens goed uit want je bent daar niet zo duidelijk in. Hoe kan ik 1 class aanspreken en dan vervolgens een kopie maken en die vervolgens niet aanspreken?

[BtM909]

Jij bent niet duidelijk met wat je wilt bereiken en hoe je dat zelf had bedacht

Laat eerst maar wat voorbeeldcode zien en dan kunnen we je wellicht weer verder helpen.

[RobIII]

HamburgerHenk schreef op donderdag 04 februari 2010 @ 17:09:
[...]

Leg dat eens goed uit want je bent daar niet zo duidelijk in.

Ik ben niet duidelijk?

HamburgerHenk schreef op donderdag 04 februari 2010 @ 17:09:
Hoe kan ik 1 class aanspreken en dan vervolgens een kopie maken en die vervolgens niet aanspreken?

Cascading Stylesheet:

.tab {
  property1:value1;
  property2:value2;
  property3:value3;
}
/* kopie: */
.activetab {
  property1:value1;
  property2:valueX; /* values verschillen */
  property3:valueY; /* values verschillen */
}

HTML:

<a class="tab">Bla</a>
<a class="tab">Bla</a>
<a class="activetab">Bla</a>  <!-- "Maar 1 class" -->
<a class="tab">Bla</a>

Normaliter zou je zo te werk gaan:

Cascading Stylesheet:

.tab {
  property1:value1;
  property2:value2;
  property3:value3;
}

/* Properties die verschillen voor een active tab */
.active {
  property2:valueX;
  property3:valueY;
}

HTML:

<a class="tab">Bla</a>
<a class="tab">Bla</a>
<a class="tab active">Bla</a>  <!-- Twee classes -->
<a class="tab">Bla</a>

Voila.

[ Voor 6% gewijzigd door RobIII op 04-02-2010 17:18 ]

[Terranova]

Ff uit mijn hoofd hoor

code:

<asp:repeater runat="server" id="tabbladen">
<itemtemplate>
<asp:hyperlink runat="server" id="tab" cssclass="menu"></asp:hyperlink>
</itemtemplate>

en dan

code:

Menu
{
fontzooi
}
Menu:Link
{
}
Menu:Visited
etc.

[ Voor 5% gewijzigd door Terranova op 04-02-2010 17:21 ]

[harrald]

HamburgerHenk schreef op donderdag 04 februari 2010 @ 17:09:
[...]

Leg dat eens goed uit want je bent daar niet zo duidelijk in. Hoe kan ik 1 class aanspreken en dan vervolgens een kopie maken en die vervolgens niet aanspreken?

met asp zet je een class door middel van CssClass="" als ik het goed heb.
stel daar staat in: CssClass="foo"

en je wil 2 classes hebben dan doe je CssClass="foo bar" of CssClass="foo bar active".

[RobIII]

Als je code post, gebruik dan aub code tags.

[Terranova]

harrald schreef op donderdag 04 februari 2010 @ 17:19:
[...]


met asp zet je een class door middel van CssClass="" als ik het goed heb.
stel daar staat in: CssClass="foo"

en je wil 2 classes hebben dan doe je CssClass="foo bar" of CssClass="foo bar active".

ja dat klopt, maar het punt is dat ik het maar 1x ophaal en dus alle links in 1x dus heb ik maar 1x de cssclass

[RaZ]

HamburgerHenk schreef op donderdag 04 februari 2010 @ 17:21:
[...]

ja dat klopt, maar het punt is dat ik het maar 1x ophaal en dus alle links in 1x dus heb ik maar 1x de cssclass

Dan moet je dus dat punt veranderen.

Zoals je het nu hebt gaat het met css dus niet werken.

[Terranova]

RaZ schreef op donderdag 04 februari 2010 @ 17:34:
[...]

Dan moet je dus dat punt veranderen.

Zoals je het nu hebt gaat het met css dus niet werken.

Dat gaat denk ik nu lukken want nu kan ik via de db zo pagina´s aan maken waardoor dat meteen in het menu verwerkt wordt zonder dat ik de code moet aanpassen

[RobIII]

Zeg; we zijn hier geen slowchat helpdesk. Als je nou eens even een stapje achteruit doet en bedenkt hoe je het zou kunnen oplossen (hint: gebruik een for-each of iets dergelijks en dus geen repeater) i.p.v. passief gaan zitten afwachten tot iemand het voorgekauwd op tafel legt voor je.

Verder schop ik dit naar PRG aangezien het niets (meer) met CSS te maken heeft.
WEB >> PRG

[ Voor 16% gewijzigd door RobIII op 04-02-2010 17:41 ]

[CH4OS]

Is het niet gewoon verstandiger een standaard CSS te maken (hoef je ook maar twee 'tabs' te stijlen, de inactieve en de active). Per request bekijk je dan welke class je dan aan de (betreffende) tab moet hangen.
Dan kan je die tab toch afwijkend laten zijn itt de rest?

[ Voor 22% gewijzigd door CH4OS op 04-02-2010 17:50 ]

[RobIII]

GJtje schreef op donderdag 04 februari 2010 @ 17:44:
Is het niet gewoon verstandiger een standaard CSS te maken (hoef je ook maar twee 'tabs' te stijlen, de inactieve en de active). Per request bekijk je dan welke class je dan aan de (betreffende) tab moet hangen.
Dan kan je die tab toch afwijkend laten zijn itt de rest?

Daar gaat het toch al het hele topic over

[MoietyMe]

Ik vraag altijd de naam van de huidige pagina op (cut_to_script) en check dan welke URL (uit de database) overeen komt met die naam. Die geef ik een extra class, hoe moeilijk kan dat zijn?

[MBV]

Als je echt geen idee hebt waar je mee bezig bent, waarom gebruik je dan niet een <asp:Menu> tag of <asp:TreeView> ? En als het echt niet anders kan zou ik een functie aan een onload-achtig event hangen bij die asp:hyperlink die het ding een andere cssClass geeft als je daar zin in hebt. * MBV kan zich een grijs verleden herinneren waarin hij dat heeft gedaan.

[gorgi_19]

Je hebt sowieso nog de HandleItemBound-event en TemplateField waar je mee kan spelen