Søg
Avatar billede donslund Nybegynder
16. september 2004 - 08:05 Der er 17 kommentarer og
1 løsning

Lidt sparring til show/hide

Jeg skal lave noget show/hide på nogle tabeller.

Mit forslag er, at jeg laver et antal tabeller med hver sit id (1,2,3,4,5,6...) og så laver jeg en funtion der kaldes når jeg fører musen hen over nogle billeder.

<script type="text/javascript">
            function skjulUndermenu() {
                for (i = 0; i < 3; i++) {
                    document.i.style.visibility = hidden;
                }
            }
           
            function visUndermenu(undermenu) {
                document.undermenu.style.visibility = visible;
            }
 
        </script>

Men jeg kunne godt lige bruge lidt hjælp til om tankegangen er rigtig.
Avatar billede donslund Nybegynder
16. september 2004 - 08:55 #1
Mit problem er, at når jeg så kalder visUndermenu med visUndermenu(a1) og har en tabel med id=a1, så melder den, at document.getElementById[...].style er null eller ikke et objekt.
Avatar billede donslund Nybegynder
16. september 2004 - 09:03 #2
Det problem løste jeg selv, men hvordan skjuler jeg alle mine tabeller til at starte med? Alle tabeller der skal skjules har en class=undermenu.
Avatar billede ldanielsen Nybegynder
16. september 2004 - 09:12 #3
Du skriver da bare visibility: hidden; i class'en
Avatar billede donslund Nybegynder
16. september 2004 - 09:23 #4
Ja, men jeg skal bruge en funktion der hide'r de viste tabller når der køres over et nyt billede. Det må jo være den samme funktion som skjuler alle tabeller til at starte med.
Avatar billede ldanielsen Nybegynder
16. september 2004 - 09:30 #5
næ, det behøver det da ikke være.

En sådan funktion kan alligevel først køre uden risiko for fejl efter at siden er indlæst i browseren, og derfor vil man evt. kunne se et glimt af tabellerne før de skjules.
Avatar billede donslund Nybegynder
16. september 2004 - 09:31 #6
Hvordan gør jeg det så? Når jeg kører hen over et nyt billede skal den første tabel væk og en ny vises.
Avatar billede donslund Nybegynder
16. september 2004 - 09:51 #7
Kan man ikke samle alle tabeller med class=undermenu i et array og så gennemløbe det i når der er noget der skal væk?
Avatar billede grunken Nybegynder
16. september 2004 - 11:26 #8
<style type="text/css">
.undermenu{
  visibility:hidden
}
</style>

<script type="text/javascript">
var tarr = [];

function findtabeller(){
  t = document.getElementsByTagName("table");
  for(i=0;i<t.length;i++)
  if(t[i].className=="undermenu")tarr[i]=t[i];
}

function visUndermenu(umenu){
  for(i=0;i<tarr.length;i++)
  tarr[i].style.visibility = (i==umenu)?"visible":"hidden";
}

function skjulUndermenu(umenu){
  tarr[umenu].style.visibility = "hidden";
}

window.onload = findtabeller;
</script>

<table id="u0" class="undermenu">
<tr>
  <td>
  indhold1
  </td>
</tr>
</table>

<table id="u1" class="undermenu">
<tr>
  <td>
  indhold2
  </td>
</tr>
</table>

og kaldes med


<img src="billede.gif" onmouseover="visUndermenu(0);">
<img src="billede.gif" onmouseover="visUndermenu(1);">
Avatar billede grunken Nybegynder
16. september 2004 - 11:27 #9
- burde hitte ;o)

Som jeg lige forstår det!
Avatar billede donslund Nybegynder
16. september 2004 - 12:45 #10
tarr[...].style er null eller ikke et objekt.

Hvorfor skriver den det?
Avatar billede donslund Nybegynder
16. september 2004 - 12:48 #11
Jeg har også en ide om, at jeg gerne vil bruge display i stedet for visibility.
Avatar billede grunken Nybegynder
16. september 2004 - 12:50 #12
Fordi objektet ikke eksisterer, du må have lavet en fejl :o)
Avatar billede donslund Nybegynder
16. september 2004 - 12:51 #13
Ja, det gættede jeg også ;-)
Avatar billede donslund Nybegynder
16. september 2004 - 12:53 #14
For sjov skyld, hele koden:

<html>

    <head>
<meta name="Generator" content="Stone's WebWriter 4">
        <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
       
        <title>Velkommen til A/S H. Sindby &amp; Co.</title>
        <!-- <meta http-equiv="refresh" content="10;URL=http://sindby.fe2.tangora.com"> -->
        <style type="text/css">
.undermenu{
  display:none;
}
</style>

       
        <script type="text/javascript">
var tarr = [];

function findtabeller(){
  t = document.getElementsByTagName("table");
  for(i=0;i<t.length;i++)
  if(t[i].className=="undermenu")tarr[i]=t[i];
}

function visUndermenu(umenu){
  for(i=0;i<tarr.length;i++)
  tarr[i].style.display = (i==umenu)?"":"none";
}

function skjulUndermenu(umenu){
  tarr[umenu].style.display = "none";
}

window.onload = findtabeller();
</script>


    </head>

    <body bgcolor="black">
        <div align="center">
                <table border=1 cellspacing=0 cellpadding=0>
<tr>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(0);"></td>
    <td><img src="setup/1x1.gif" width="10px" border=0></td>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(1);"></td>
    <td><img src="setup/1x1.gif" width="10px" border=0></td>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(2);"></td>
    <td><img src="setup/1x1.gif" width="10px" border=0></td>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(3);"></td>
    <td><img src="setup/1x1.gif" width="10px" border=0></td>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(4);"></td>
    <td><img src="setup/1x1.gif" width="10px" border=0></td>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(5);"></td>
</tr>
<tr>
    <td colspan=10>
   
    <table id=u0 class=undermenu>
<tr>
    <td bgcolor="#00FF00"><img src="setup/1x1.gif" width="10px" border=0></td>
</tr>
</table>
<table id=u1 class=undermenu>
<tr>
    <td bgcolor="#FF0000"><img src="setup/1x1.gif" width="10px" border=0></td>
</tr>
</table>

   
    </td>
    <td><img src="setup/1x1.gif" width="1px" height="80px" border=0></td>
</tr>
<tr>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(6)"></td>
    <td><img src="setup/1x1.gif" width="10px" border=0></td>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(7)"></td>
    <td><img src="setup/1x1.gif" width="10px" border=0></td>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(8)"></td>
    <td><img src="setup/1x1.gif" width="10px" border=0></td>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(9)"></td>
    <td><img src="setup/1x1.gif" width="10px" border=0></td>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(10)"></td>
    <td><img src="setup/1x1.gif" width="10px" border=0></td>
    <td style="width:100px; height:150px;" onMouseOver="visUndermenu(11)"></td>
</tr>
</table>
           
        </div>
    </body>

</html>
Avatar billede grunken Nybegynder
16. september 2004 - 13:15 #15
hvofor har du ændret

window.onload = findtabeller;

til

window.onload = findtabeller();

???

- det er i hvert tilfælde en af fejlene ;o)

- en anden er en lille stavetosse af mig, funktionerne skal se sådan ud :o)

<script type="text/javascript">
var tarr = [];

function findtabeller(){
  t = document.getElementsByTagName("table");
  alert(t.length);
  for(i=0;i<t.length;i++)
  if(t[i].className=="undermenu")tarr[tarr.length]=t[i];
}

function visUndermenu(umenu){
  for(i=0;i<tarr.length;i++)
  tarr[i].style.display = (i==umenu)?"inline":"none";
}

function skjulUndermenu(umenu){
  tarr[umenu].style.display = "none";
}

window.onload = findtabeller;
</script>

- og så skal du vist have nogle flere tabeller :o)
Avatar billede donslund Nybegynder
16. september 2004 - 13:17 #16
Perfekt. Tak for hjælpen.
Avatar billede grunken Nybegynder
16. september 2004 - 13:35 #17
men at lave ovenstående på den måde kan godt blive noget rod, for du skal være ret konsekvent med placeringen af dine elementer :/ - så vi ændrer lige funktionen til at vise dem en lille smule ;o)

function visUndermenu(umenu){
  for(i=0;i<tarr.length;i++)
  tarr[i].style.display = (tarr[i]==document.getElementById("u"+umenu))?"inline":"none";
}

- og så burde den være i vinkel - jeg kaster et svar ;o)
Avatar billede grunken Nybegynder
16. september 2004 - 13:36 #18
.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 10:19 Kan jeg beholde Publisher på min maskine efter at MS stopper med support Af KurtG i Office & Kontorpakker
02/0814:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
01/0809:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
White papers
Flere white papers »