Avatar billede svjensen Nybegynder
02. marts 2006 - 22:39 Der er 9 kommentarer og
2 løsninger

show/hide div

Jeg har behov for at kunne få vist henholdsvis skjult en div ved at klikke på et link.
Jeg har prøvet et par af løsningerne fra andre tilsvarende spørgsmål, men det vil ikke rigtig du'.

Mit script ser således ud:

<head>
<link rel="stylesheet" type="text/css" href="<?= $css_main;?>">

<script type="text/javascript">
<!-- //
var shown = false;

function showHideLayers(layerID) {
  if (document.getElementById) {
    if (!shown) {
      document.getElementById(layerID).style.visibility = "hidden";
    }
    if (shown) {
      document.getElementById(layerID).style.visibility = "visible";
    }
  }
  shown = !shown;
}
// -->
</script>


</head>
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script language="JavaScript" src="include/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
<center>

.
.
.

    #Overskrift skrives

    echo "<tr onMouseover=\"this.style.backgroundColor='lightblue';\" onMouseout=\"this.style.backgroundColor='white';\">";
    echo "<td><a href='#' onClick=\"showHideLayers('Layer1');return false;\">+</a></td>";
    echo "<td class=TDLeft><font color='blue'><b>Indkomst</b></font></td>";

    for($i = 1; $i < count($indkomst_sum_arr)+1; $i=$i+1)
    {
        echo "<td><font color='blue'><b>".number_format($indkomst_sum_arr[$i], 2, ',', '.')."</b></font></td>";
    }

    echo "</tr>";


    #Data skrives

    echo "<div id=\"indkomst\" style=\"display: none;\">";

    for($i = 1; $i < count($indkomst_arr)+1; $i=$i+1)
    {

        echo "<tr onMouseover=\"this.style.backgroundColor='lightblue';\" onMouseout=\"this.style.backgroundColor='white';\">";
        echo "<td></td>";
        echo "<td class=TDLeft>".$indkomst_arr[$i][tekst]."</td>";
        echo "<td>".number_format($indkomst_arr[$i][jan], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][feb], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][mar], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][apr], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][maj], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][jun], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][jul], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][aug], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][sep], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][okt], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][nov], 2, ',', '.')."</td>";
        echo "<td>".number_format($indkomst_arr[$i][dece], 2, ',', '.')."</td>";
        echo "<td></td>";
        echo "<td>";
        echo "&nbsp;<a href='budget.php?action=delete_indkomst&uid=".$indkomst_arr[$i][uid]."' onclick=\"return confirm('Er du sikker på at du ønsker at slette?');\"><img src=\"images/trashcan.gif\" border=0></a>&nbsp;";
        echo "&nbsp;<a href=\"#\" onclick=\"window.open('budget_edit.php?kategori=indkomst&action=edit&uid=".$indkomst_arr[$i][uid]."', 'vindue', 'width=1000,height=300,status=no,scrollbars=yes,top='+(screen.availHeight-900)/2+',left='+(screen.availWidth-1200)/2);return false\"><img src='images/blyantdb.gif' border=0></a>";
        echo "</td>";
        echo "</tr>";

    }

    echo "</div>";

Er der nogen der kan hjælpe med at finde problemet?
Avatar billede schaefner Juniormester
02. marts 2006 - 22:56 #1
<script type="text/javascript">
function showHideLayers(layerID)
{
    if (document.getElementById)
    {
        obj = document.getElementById(layerID);
     
        obj.style.display = (obj.style.display == "none" ? "block" : "none");
    }
}
</script>

<div id="hej" style="display: none">Test/</div>

<hr>

<a href="#" onclick="showHideLayers('hej')">Skjul/vis</a>
Avatar billede svjensen Nybegynder
02. marts 2006 - 23:05 #2
Samme resultat.
Når siden loades vises div'en, hvilket jo ikke lige er meningen. Jeg tænkte, om det kan have noget at gøre med at jeg har tabelrækker inde i div??
Avatar billede mclemens Nybegynder
02. marts 2006 - 23:27 #3
Duer det her???

<script type="text/javascript">
<!-- //

function showHideLayers() {
if(document.getElementById("indkomst").style.visibility=="hidden"){
document.getElementById("indkomst").style.visibility="visible"}
else if(document.getElementById("indkomst").style.visibility=="visible"){
document.getElementById("indkomst").style.visibility="hidden"}
}

// -->
</script>

...

echo "<td><a href='#' onClick=\"showHideLayers();return false;\">+</a></td>";

...

echo "<div id=\"indkomst\" style=\"visibility: hidden;\">";
Avatar billede schaefner Juniormester
03. marts 2006 - 08:29 #4
Så vidt jeg kan se så har du en div midt inde i en tabel-række. Det kan man ikke.

Du burde kunne sætte din id på din <tr> eller lave en stor celle hvor du putter en div i. Der i kan du så lave en ny tabel med dine kolonner.
Avatar billede mclemens Nybegynder
03. marts 2006 - 10:22 #5
Schaefner: Jo, det kan man godt.
- tjek min... det virker fint ;)
(dog giver jeg dig ret i at sammenblanding
af tables og divs i hinanden ikke er ideel)
Avatar billede mclemens Nybegynder
03. marts 2006 - 15:52 #6
... Eller hvis du vil bruge oprindelig script:

<script type="text/javascript">
<!-- //
var shown="false";

function showHideLayers(layerID) {
  if (document.getElementById(layerID)) {
    if (!shown) {document.getElementById(layerID).style.visibility = "hidden";
    }
    if (shown) {
      document.getElementById(layerID).style.visibility = "visible";
    }
  }
  shown=!shown;
}
// -->
</script>

...

echo "<td><a href='#' onClick=\"showHideLayers('indkomst');return false;\">+</a></td>";

...

echo "<div id=\"indkomst\" style=\"visibility: hidden;\">";
Avatar billede svjensen Nybegynder
03. marts 2006 - 21:15 #7
Der er stadig ingen af løsningerne der kan håndtere den oprindelige brug af div. Og jeres pointer med sammenblanding af div og tabel var min oprindelige mistanke.
Jeg har prøvet at flytte id til <tr>, hvilket virker, men kun på den første række, og det skulle gerne skjule hele det pågældende afsnit.

Jeg giver det lige et par dages eksperimenteren mere, inden jeg opretter en tabel inde i en td.
Gode ideer er naturligvis velkomne ;-)
Avatar billede mclemens Nybegynder
03. marts 2006 - 22:03 #8
Hvad var der galt med mit sidste indlæg?
- Jeg bruger stadig den oprindelige div.
... Gentager lige mit indlæg for en sikkerheds skyld...:

Skift linien:
echo "<td><a href='#' onClick=\"showHideLayers('Layer1');return false;\">+</a></td>";
Ud med:
echo "<td><a href='#' onClick=\"showHideLayers('indkomst');return false;\">+</a></td>";

og skift linien:
echo "<div id=\"indkomst\" style=\"display: none;\">";
ud med:
echo "<div id=\"indkomst\" style=\"visibility: hidden;\">";
Avatar billede mclemens Nybegynder
04. marts 2006 - 00:21 #9
tillæg til sidste indlæg
skift også lige:
var shown = false;
over til:
var shown = true;
Avatar billede mclemens Nybegynder
04. marts 2006 - 01:32 #10
...ups my bad det virker ikke --- havde ikke fjernet alt echo" og "; da jeg testete ... sorry :/
Avatar billede mclemens Nybegynder
04. marts 2006 - 02:18 #11
Schaefner: Undskyld jeg modsagde dit før :/

svjensen:
... hvis du har mod på at droppe div'en så:
(schaefner har 100% ret enten en stor td med en tabel omsluttet af en div / eller ene divs / eller ene tabeller) ... nedenstående løsning minimerer ikke tabellen bagefter - eneste løsning på det er ene div's ...

slet echo "<div id=\"indkomst\" style=\"display: none;\">";
og echo "</div>";


prøv at skifte:
echo "<tr onMouseover=\"this.style.backgroundColor='lightblue';\" onMouseout=\"this.style.backgroundColor='white';\">";

til:
echo "<tr id=\"visible\" onMouseover=\"this.style.backgroundColor='lightblue';\" onMouseout=\"this.style.backgroundColor='white';\">";


samt skift:
echo "<td><a href='#' onClick=\"showHideLayers('Layer1');return false;\">+</a></td>";

til:
echo "<td><a href='#' onClick=\"hideit()\">+</a></td>";


samt: <body>
til: <body onload="hideit()">


Og indsæt dette script i head... hvis mere end 200 tr's skal skjules/vises skal atab øges...

<script language="javascript">
function hideit() {
if(!document.getElementById("hidden")){mcv="visible";mcvx="hidden";}
else if(!document.getElementById("visible")){mcv="hidden";mcvx="visible";}

atab=200;for(mc=0;mc<atab;mc++){
if(!document.getElementById(mcv))mc=atab;else{
document.getElementById(mcv).style.visibility=mcvx;
document.getElementById(mcv).id=mcvx;}}}
</script>
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