Toon posts:

[JS] toggle en CSS footer

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik heb een site opgebouwd met behulp van deze site en heb m'n footer eindelijk netjes onderaan staan. Maar als ik nu het volgende togglescriptje gebruik en iets uitklap rekt de hoogte van m'n div maar gaat de footer niet mee naar beneden.

Javascript
code:
1
2
3
4
5
6
7
8
9
function toggle (postid) {
   whichclass = document.getElementById(postid);
   if (whichclass.className=="show") {
      whichclass.className="hide";
   }
   else {
      whichclass.className="show";
   }
}


CSS
code:
1
2
3
4
5
6
7
.hide {
  display:none;
}

.show {
  display: inline;
}

Ik heb bij de display property van .show al vanalles ingevuld, maar zonder resultaat. Ook als ik bepaalde hoogten toevoeg aan de divs heeft het geen effect. Is hier een oplossing voor?

Verwijderd

als je je footer daarna ook toggelt, dus display: none naar display: block doet ie het wel denk ik.

Verwijderd

Topicstarter
Verwijderd schreef op donderdag 23 juni 2005 @ 17:20:
als je je footer daarna ook toggelt, dus display: none naar display: block doet ie het wel denk ik.
Yup dat werkt! Het probleem is alleen dat de footer ook weergegeven moet worden wanneer de toggle is ingeklapt. Met display:none gebeurt dat dus niet. Als ik de footer standaard op bijv. display:table zet en bij het uitklappen op display:block werkt het in IE wel, maar in FF niet.

Wat wel werkt voor beide browsers is als ik twéé footers maak, en beide toggle.
Footer_1 bij ingeklapte toggle: display:none;
Footer_1 bij uitgeklapte toggle: display:block;
Footer_2 bij ingeklapte toggle: display:;
Footer_2 bij uitgeklapte toggle: display:none;

Dan werkt het zowel in FF als in IE, maar dan heb ik weer 'n dubbel toggle en dit is wel vrij omslachtig. Idee hoe dit gewoon met één footer kan in beide browsers?

  • gvdh81
  • Registratie: Juli 2001
  • Laatst online: 02-05 14:26

gvdh81

To got or not to got..

dit doe ik altijd om elementen te hiden en te showen:
code:
1
2
3
4
5
6
7
8
9
.hide
{
  display:none;
}

.show
{
  display: block;
}