Avatar billede mstorgaard Praktikant
04. november 2005 - 14:59 Der er 13 kommentarer og
1 løsning

Vis/skjul boks

Jeg har den her side: http://melfex.dk/system/tifo.php som jeg gerne vil have lavet sådan så man kan åbne og lukke de der bokse der er ved at trykke på navnet på den blå bjælke...

De blå bjælker skal hele tiden være synlige, men man skal kunne skjule de billeder der er lige under hver bjælke. De skal starte skjult.
Avatar billede roenving Novice
04. november 2005 - 15:11 #1
F.eks. sådan:

  <table cellpadding="0" cellspacing="0">
    <tr>
      <td style="background-color: #190099; width: 600px;">
      <a href="java script:visSjul('Layer1');">
        <font class="bottom" style="text-decoration: bold;">
          FCK
        </font>
      </a>
      </td>
    </tr>
    <tr id="layer1">
      <td style="border: 1px solid #000000; width: 600px;">
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      <br>
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      <br>
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      </td>
    </tr>
  </table>

<script type="text/javascript">
var cssTables;
function visSkjul(elm){
  if(!cssTables){
    var ua = navigator.userAgent.toLowerCase();
    cssTables = ua.indexOf('msie') > -1 && ua.indexOf('opera') == -1 ? 1 : 2;
  }
  elm = document.getElementById(elm);
  elm.style.display = elm.style.display != 'none' ? 'none' : cssTables == 1 ? 'block' : 'table-row';
}
</script>

-- som det fremgår har jeg fjernet den ulovlige nesting af divs direkte i tabellen, og som det også fremgår har jeg lavet et primitivt browser-check, da specielt Opera flipper helt ud hvis man giver en tabel-række en anden visning end table-row !-)

-- men egentlig ville jeg nok tænke i at gøre det med andre elementer, når du nu slet ikke har brug for tabel-egenskaberne ...
Avatar billede mstorgaard Praktikant
04. november 2005 - 15:35 #2
Nu har jeg prøvet at sætte det ind, men det virker ikke :S
Avatar billede roenving Novice
04. november 2005 - 16:23 #3
Uff, jeg opdagede ikke at navnene i kaldet og id'et er forskellige, for 'layer1' er _ikke_ det samme som 'Layer1' !-)

-- sæt dem til det samme !-)
Avatar billede mstorgaard Praktikant
04. november 2005 - 16:48 #4
+ du også lige lavede en tastefejl i toppen:
      <a href="java script:visSjul('Layer1');">
Skal være:
      <a href="java script:visSkjul('Layer1');">

;o)
Avatar billede roenving Novice
05. november 2005 - 13:09 #5
Jepz ,-(
Avatar billede mstorgaard Praktikant
06. november 2005 - 12:55 #6
Nu har jeg rettet det, men det ser stadig ikke ud til at virke
Avatar billede roenving Novice
07. november 2005 - 13:09 #7
Hrm, du fik da ikke rettet tavetossen !-)

      <a href="java script:visSkjul('Layer1');">
Avatar billede mstorgaard Praktikant
07. november 2005 - 13:50 #8
Det gjorde jeg da :-)

  <table cellpadding="0" cellspacing="0">
    <tr>
      <td style="background-color: #190099; width: 600px;">
      <a href="java script:visSjul('Layer1');">
        <font class="bottom" style="text-decoration: bold;">
          FCK
        </font>
      </a>
      </td>
    </tr>
    <tr id="Layer1">
      <td style="border: 1px solid #000000; width: 600px;">
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      <br>
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      <br>
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      <img src="1.jpg" width="100px" height="100px">
      </td>
    </tr>
  </table>

<script type="text/javascript">
var cssTables;
function visSkjul(elm){
  if(!cssTables){
    var ua = navigator.userAgent.toLowerCase();
    cssTables = ua.indexOf('msie') > -1 && ua.indexOf('opera') == -1 ? 1 : 2;
  }
  elm = document.getElementById(elm);
  elm.style.display = elm.style.display != 'none' ? 'none' : cssTables == 1 ? 'block' : 'table-row';
}
</script>
Avatar billede mstorgaard Praktikant
07. november 2005 - 13:51 #9
Næh det gjorde jeg ikke :D
Avatar billede mstorgaard Praktikant
07. november 2005 - 13:52 #10
Hvordan gør man så sådan at den starter foldet ind?
Avatar billede roenving Novice
07. november 2005 - 13:55 #11
<tr id="Layer1" style="display:none">
Avatar billede mstorgaard Praktikant
07. november 2005 - 14:01 #12
Tak for det :o)

Læg et svar
Avatar billede roenving Novice
07. november 2005 - 14:50 #13
Velbekomme '-)
Avatar billede roenving Novice
07. november 2005 - 14:55 #14
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester