CSS hide/show layers zonder (!) javascript

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

Anoniem: 122676

Topicstarter
Hoi,

Lijkt simpel vraagje, maar bomen/bos verhaal, ik kom d'r niet uit.

Ik wil mijn website full CSS maken, zonder javascripts. Ik vroeg mij af of dit mogelijk was zonder javascript: http://www.cs.rpi.edu/~hollingd/eiw/notes/sjt/divs/divs.html. Dus graag zonder alleen het hover element maar een onClick functie. Uiteraard wordt een uitleg of voorbeeld bijzonder gewaardeerd.

alvast bedankt voor jullie hulp.

Acties:
  • 0 Henk 'm!

  • W1LL3M
  • Registratie: Augustus 2001
  • Laatst online: 01:38

W1LL3M

⭐⭐⭐⭐⭐

Gaat niet lukken, onclick IS javascript...
En css hover methode zitten ook haken en ogen aan als je het in de meest gebruikte browsers goed wilt laten werken.

Acties:
  • 0 Henk 'm!

  • T i M
  • Registratie: April 2004
  • Laatst online: 09:35
Het voorbeeld wat je noemt is niet te maken met alleen CSS. Voor dat soort dingen is JS juist bedoeld, het interactiever maken van je website. CSS is bedoeld voor de opmaak en positionering.

Acties:
  • 0 Henk 'm!

  • Ramon
  • Registratie: Juli 2000
  • Laatst online: 09:45
Welke reden heb je om geen javascript te gebruiken dan?

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/


Acties:
  • 0 Henk 'm!

  • b19a
  • Registratie: September 2002
  • Niet online
Dit voorbeeld is zeker wel na de maken zonder JavaScript!

HTML:
1
2
3
4
5
6
7
8
<div id="wrapper">
  <div class="layer"><a name="l1">Layer 1</a></div>
  <div class="layer"><a name="l2">Layer 2</a></div>
  <div class="layer"><a name="l3">Layer 3</a></div>
</div>
<a href="#l1">Toon 1</a>
<a href="#l2">Toon 2</a>
<a href="#l3">Toon 3</a>

Cascading Stylesheet:
1
2
3
4
5
6
7
#wrapper {
  height: 500px;
  overflow: hidden;
}
.layer {
  height: 500px;
}


De code moet je zelf maar wat tweaken; het is een voorbeeldje. Ik heb dit zelf een hele poos op m'n site gebruikt. Succes!

Acties:
  • 0 Henk 'm!

Anoniem: 122676

Topicstarter
top bouke, works like a charm, tx.

@ramon: omdat ik liever css gebruik. En vanwege nieuwsgierigheid :)

Acties:
  • 0 Henk 'm!

  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 21-08-2024

Clay

cookie erbij?

Als css3 eindelijk fatsoenlijk ondersteund wordt kan je hiervoor ook de :target psuedo gebruiken, je css zou dan zo worden:

Cascading Stylesheet:
1
2
3
4
5
6
7
.layer {
  display:none;
}

div.layer:target {
    display:block;
}

Dan link je dus de #hash van een link aan de id van een element in die pagina. En dan ben je in tegenstelling tot het voorbeeld met overflow niet afhankelijk van vaste hoogtes.

Atm werkt datechter alleen in firefox, safari, en opera 9.5 (alpha). IE8 weet ik niet.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin


Acties:
  • 0 Henk 'm!

  • Webgnome
  • Registratie: Maart 2001
  • Nu online
BoukeHaarsma schreef op zondag 16 maart 2008 @ 23:00:
Dit voorbeeld is zeker wel na de maken zonder JavaScript!

HTML:
1
2
3
4
5
6
7
8
<div id="wrapper">
  <div class="layer"><a name="l1">Layer 1</a></div>
  <div class="layer"><a name="l2">Layer 2</a></div>
  <div class="layer"><a name="l3">Layer 3</a></div>
</div>
<a href="#l1">Toon 1</a>
<a href="#l2">Toon 2</a>
<a href="#l3">Toon 3</a>

Cascading Stylesheet:
1
2
3
4
5
6
7
#wrapper {
  height: 500px;
  overflow: hidden;
}
.layer {
  height: 500px;
}


De code moet je zelf maar wat tweaken; het is een voorbeeldje. Ik heb dit zelf een hele poos op m'n site gebruikt. Succes!
Werkt dit stukje ook in IE 6?

Strava | AP | IP | AW


Acties:
  • 0 Henk 'm!

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 09:44

crisp

Devver

Pixelated

Anoniem: 122676 schreef op zondag 16 maart 2008 @ 23:12:
top bouke, works like a charm, tx.

@ramon: omdat ik liever css gebruik. En vanwege nieuwsgierigheid :)
Dat laatste snap ik nog wel enigszins, experimenteren is leuk, maar feit blijft dat je hier bezig bent met behaviour en dat CSS daar niet voor bedoelt is...

Intentionally left blank


Acties:
  • 0 Henk 'm!

  • Johnvh
  • Registratie: November 2003
  • Laatst online: 03-06 12:10

[...]
Werkt dit stukje ook in IE 6?
Jep, net getest :)

[ Voor 95% gewijzigd door Johnvh op 17-03-2008 10:32 ]


Acties:
  • 0 Henk 'm!

  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 10-06-2024
Helaas werkt het niet in Opera. Dit specifieke voorbeeld niet getest, maar in het verleden zelf ook met deze oplossing gekomen. Het is ook ietwat een hack eigenlijk... Leuk als fall-back als er geen JS is, dat wel.

Acties:
  • 0 Henk 'm!

  • DoubleJ
  • Registratie: December 2002
  • Laatst online: 07-02 09:46

DoubleJ

Een ninjja!

Son of Suckerfish Dropdowns.
12 regels javascript voor IE, wel overwegen waard lijkt me.

Resultaat is hier een menu, maar dit kan natuurlijk op van alles toegepast worden.

Artikel

[ Voor 3% gewijzigd door DoubleJ op 17-03-2008 11:55 ]

Pagina: 1