[CSS/HTML] Linken van Image menuknop naar een <td>

[Slurpie Blauw]

Geachte tweakers,

Ik ben bezig met een eenvoudige site voor mijn muziekhobby. Ik probeer om resolutieproblemen te voorkomen te werken met css scripts.

Ik stuit op een probleem op dit moment; ik wil met een menuknop(via a href of het image onclick object) te linken naar een <td>. Echter weet ik niet hoe ik dat object kan "targetten".

Is dit mogelijk?

[C0rnelis]

Als je bedoelt dat je met een anchor wilt scrollen naar een bepaalde positie in een pagina zodat die in beeld komt: dat kan.

Zie voor een simpel voorbeeld: http://jsfiddle.net/VXKct/

Er zijn twee manieren:

HTML:

<a href="#positie2">Ga naar td #2</a> <!-- verwijst naar <td id="positie2"> -->
<a href="#positie4">Ga naar td #4</a> <!-- verwijst naar <a name="positie4"> -->

[ Voor 4% gewijzigd door C0rnelis op 08-05-2012 00:30 ]

[Slurpie Blauw]

C0rnelis schreef op dinsdag 08 mei 2012 @ 00:29:
Als je bedoelt dat je met een anchor wilt scrollen naar een bepaalde positie in een pagina zodat die in beeld komt: dat kan.

Zie voor een simpel voorbeeld: http://jsfiddle.net/VXKct/

Er zijn twee manieren:

HTML:

<a href="#positie2">Ga naar td #2</a> <!-- verwijst naar <td id="positie2"> -->
<a href="#positie4">Ga naar td #4</a> <!-- verwijst naar <a name="positie4"> -->

Ja zoiets. Ik zat meer te denken aan div layers die op dezelfde plek staan die naar voren komen als je op zo'n menuknop klikt. Net als in photoshop, kun je de prioriteit aangeven welke boven de andere komt. Dus in noobtaal:

knop 1 <a href= "div1"> en de lap tekst en image komt naar voren
knop 2 <a href =<div2"> en die lap tekst en images komen naar voren

etc.

En die divs staan allemaal in dat <td> kadertje.

Maar dat zal wel niet meer met enkel css/html kunnen, maar met javascript.. ben ik bang.

Iemand?

[I-King]

Misschien kun je hier wat inspiratie opdoen: http://epicthemes.net/pioneer/shortcodes-2/toggles/
Kijk ook even in het menu Features --> tabs.

Edit: Kant en klaar voorbeeld: http://css-tricks.com/functional-css-tabs-revisited/

[ Voor 23% gewijzigd door I-King op 08-05-2012 09:06 ]

[R4gnax]

I-King schreef op dinsdag 08 mei 2012 @ 09:04:
Misschien kun je hier wat inspiratie opdoen: http://epicthemes.net/pioneer/shortcodes-2/toggles/
Kijk ook even in het menu Features --> tabs.

Edit: Kant en klaar voorbeeld: http://css-tricks.com/functional-css-tabs-revisited/

En als je dat kant en klaar voorbeeld leest zul je zien dat het onder Safari pas vanaf 5.1 werkt. Gaan Apple gebruikers die nog op de 5.01 reeks zitten leuk vinden.

Wil je een tabset hebben dan kun je dat vooralsnog het beste gewoon via JavaScript doen ipv HTML en CSS features te misbruiken. (Serieus; radiobutton form inputs als tabs? Goed gevonden dat het kan, maar: )

[Slurpie Blauw]

Mensen, bedankt. Hier kan ik wat mee. Ik ben een kneus met scripts, maar dit moet toch wel met wat tweaks lukken.

En idd geen radio buttons, images die klikbaar zijn.

Ik ga maar eens brainstormen..

[C0rnelis]

Bas_ schreef op dinsdag 08 mei 2012 @ 09:44:
Mensen, bedankt. Hier kan ik wat mee. Ik ben een kneus met scripts, maar dit moet toch wel met wat tweaks lukken.

En idd geen radio buttons, images die klikbaar zijn.

Ik ga maar eens brainstormen..

Als het neerkomt op tabs met javascript, bekijk dan eens de source (en css) van jQuery UI Tabs.
http://jqueryui.com/demos/tabs/

[Slurpie Blauw]

C0rnelis schreef op dinsdag 08 mei 2012 @ 18:41:
[...]

Als het neerkomt op tabs met javascript, bekijk dan eens de source (en css) van jQuery UI Tabs.
http://jqueryui.com/demos/tabs/

Ja, die gebruik ik wel als voorbeeld. Maar ik wil zo min mogelijk met javascript doen, omdat ik er gewoon slecht in ben. CSS is voor getalblinden zoals ik nog wel te doen. Ik zit te brainstormen om met het visibility object iets te doen.

Dus ik klik om de homeknop -> divhome wordt visible, andere divs worden invisible.

Nu nog de uitvoering

[Barryvdh]

Dan is Javascript toch echt het makkelijkste.
Gewoon heel simpel, je verbergt alle vakjes standaard in je css (bijvoorbeeld de class .tab-content). Alleen de class .tab-content.active laat je zien.
Met javascript haal je dan de .active weg van de huidige tab, en voeg je hem toe aan de div die je kan weergeven.
Dat is met jQuery echt maar een paar regels.

[Slurpie Blauw]

Het is gelukt!

Met CSS positioneer ik alle divs opdezelfde plek

En deze geniale javascript functie heb ik er bij verzonnen:

code:

function tab_kontent(inhoud,inhoud2,inhoud3,inhoud4,inhoud5)
    {       
    window.document.getElementById(inhoud).style.visibility="visible";  
    
    window.document.getElementById(inhoud2).style.visibility="hidden";  
    window.document.getElementById(inhoud3).style.visibility="hidden";      
    window.document.getElementById(inhoud4).style.visibility="hidden";
    window.document.getElementById(inhoud5).style.visibility="hidden";
    }

Die trigger ik alsvolgt:

code:

<a href="#hometab" onclick="javascript:tab_kontent('home','bio','gigs','store','diary')">

Ik switch de variabelen in de volgorde die ik hebben wil op alle knoppen. Niet mooi, maar het werkt.

Mocht er iemand geroepen voelen om voor de netheid de code net iets slimmer te maken, hoor ik het graag.
Anders dank voor de pointers.

[RobIII]

Bas_ schreef op maandag 07 mei 2012 @ 23:59:
Ik probeer om resolutieproblemen te voorkomen te werken met css scripts.

Laat ik even duidelijk stellen dat CSS niet meer/minder geschikt is om "resolutieproblemen" te voorkomen dat gewoon je afmetingen e.d. in width/height/whathaveyou attributen op te nemen. Het doel van CSS is vormgeving/opmaak en inhoud van elkaar scheiden. Niet meer, niet minder.

Bas_ schreef op woensdag 09 mei 2012 @ 23:05:
Mocht er iemand geroepen voelen om voor de netheid de code net iets slimmer te maken, hoor ik het graag.

Ik, nu, in ieder geval niet. Maar laat ik wel vast verklappen dat dit een gedrocht van een stukje code is en dat je met het doorlopen van een simpele JS (of algemeen programmeren) tutorial of 2 dit zelf ook heel makkelijk kunt verbeteren/versimpelen/verfraaien. En we verwachten hier wel een klein beetje eigen moeite/inzet en ook net dat kleine beetje basiskennis

[ Voor 38% gewijzigd door RobIII op 09-05-2012 23:31 ]

[Slurpie Blauw]

RobIII schreef op woensdag 09 mei 2012 @ 23:29:
[...]

Laat ik even duidelijk stellen dat CSS niet meer/minder geschikt is om "resolutieproblemen" te voorkomen dat gewoon je afmetingen e.d. in width/height/whathaveyou attributen op te nemen. Het doel van CSS is vormgeving/opmaak en inhoud van elkaar scheiden. Niet meer, niet minder.


[...]

Ik, nu, in ieder geval niet. Maar laat ik wel vast verklappen dat dit een gedrocht van een stukje code is en dat je met het doorlopen van een simpele JS (of algemeen programmeren) tutorial of 2 dit zelf ook heel makkelijk kunt verbeteren/versimpelen/verfraaien. En we verwachten hier wel een klein beetje eigen moeite/inzet en ook net dat kleine beetje basiskennis

Dan laat ik het hierbij. Ben een Artiest, geen Tweaker!