Avatar billede mrbonus Novice
04. juni 2007 - 15:40 Der er 7 kommentarer og
1 løsning

Javascript problemer, med visibility og position i style

Her nedenunder postet et ummidelbart simpelt javascript, hvor hvis man trykker på en af de tre knapper, bliver den tilhørende <div> sat til visible og position relative, og de andre bliver sat til hidden og position absolute.

Dette virker fint, når man skifter imellem knapperne, men hvis man trykker på den samme knap 2 gange, så forsvinder den tilhørende <div>, hvilket jeg ikke forstår en meter af.

nogen der kan forklare mig hvad der går galt?


<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
<div>

        <div id="Panel1" style="visibility:hidden;position:absolute;">Panel 1</div>
        <div id="Panel2" style="visibility:hidden;position:absolute;">Panel 2</div>

        <div id="Panel3" style="visibility:visible;position:relative;">Panel 3</div>

        <input type="button" name="ButtonPanel1" value="Show Panel 1" onclick="createPanelChooser_ButtonPanel1('Panel1',event);" id="ButtonPanel1" />
        <input type="button" name="ButtonPanel2" value="Show Panel 2" onclick="createPanelChooser_ButtonPanel1('Panel2',event);" id="ButtonPanel2" />
        <input type="button" name="ButtonPanel3" value="Show Panel 3" onclick="createPanelChooser_ButtonPanel1('Panel3',event);" id="ButtonPanel3" />

<div>

<script type="text/javascript">
<!--
function createPanelChooser_ButtonPanel1(panID,evt)
{
document.getElementById('Panel1').style.visibility = 'hidden';
document.getElementById('Panel1').style.position = 'absolute';
document.getElementById('Panel2').style.visibility = 'hidden';
document.getElementById('Panel2').style.position = 'absolute';
document.getElementById('Panel3').style.visibility = 'hidden';
document.getElementById('Panel3').style.position = 'absolute';

document.getElementById(panID).style.visibility = 'visible';
document.getElementById(panID).style.position = 'relative';
}
-->
</script>

</body>
</html>
Avatar billede roenving Novice
04. juni 2007 - 15:58 #1
Prøv i stedet sådan noget:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Untitled Page</title>
</head>
<body>
<div>

        <div id="Panel1" style="display:none;">Panel 1</div>
        <div id="Panel2" style="display:none;">Panel 2</div>
        <div id="Panel3" style="display:block;">Panel 3</div>

        <input type="button" name="ButtonPanel1" value="Show Panel 1" onclick="showPanel(1);" id="ButtonPanel1">
        <input type="button" name="ButtonPanel2" value="Show Panel 2" onclick="showPanel(2);" id="ButtonPanel2">
        <input type="button" name="ButtonPanel3" value="Show Panel 3" onclick="showPanel(3);" id="ButtonPanel3">

<div>

<script type="text/javascript">
function showPanel(panID){
  var i = 1;
  while(document.getElementById("Panel" + i))
    document.getElementById("Panel" + i++).style.display = "none";
  document.getElementById("Panel" + panID).style.display = "block";
}
</script>

</body>
</html>
Avatar billede mrbonus Novice
04. juni 2007 - 16:37 #2
Ja det virker, det forklarer dog ikke hvorfor det andet ikke virker, men det er en fin løsning.
Løkken kan jeg dog ikke anvende, panel1 til panel3, var bare test navne, så skulle jeg i hvert fald lave et array med navne i først, men det var måske heller ikke det dummeste at gøre.
Sender du lige et svar
Avatar billede crazysnap Seniormester
04. juni 2007 - 19:52 #3
Hej mrbonus,


Hvis du vil slippe for et array med navne kan du bare bruge en temp-variabel til at gemme hvilket et panel som er åbent. Når det så klikkes på en ny knap lukkes det panel som er åbent hvorefter det nye panel åbnes. Prøv javascriptet nedenfor! :)


<script type="text/javascript">

//Assigner prevPanel til det start-element som har
//display = 'block' (kan også sættes til null, hvis ingen paneler
//er sat til display = 'block' fra start af)
var prevPanel = document.getElementById('Panel3');

function createPanelChooser_ButtonPanel1(panID,evt)
{
    if(prevPanel != null && prevPanel.id != panID)
        prevPanel.style.display = 'none';

    prevPanel = document.getElementById(panID);
    prevPanel.style.display = 'block';
}

</script>


Mvh.

- Snap :)
Avatar billede roenving Novice
04. juni 2007 - 23:08 #4
-- det der med arrayet er bestemt ikke nogen dårlig idé, men at opbevare et tidligere åbnet er bestemt heller ikke en dårlig idé, men jeg ville nu nok:

...
var prevPanel = null;
window.onload = function(){
  prevPanel = document.getElementById("Panel3");
}
...

-- og så var et af de væsentlige budskaber, at du i den slags situationer ikke bør bruge visibility men display, da den helt fjerner elementet henholdvis viser det frem !-)

Velbekomme '-)
Avatar billede mrbonus Novice
05. juni 2007 - 06:45 #5
Crazysnap,
Avatar billede mrbonus Novice
05. juni 2007 - 06:55 #6
WTF, man kan åbenbart svare OG smide en kommentar samtidig, det var ikke meningen.

Crazysnap, ja bestemt smart, tror dog at hvis jeg ændrer den at jeg vælger et array, da det så resetter alle paneler samtidigt. Så kan man ikke senere tilføje nyt javascript på siden, som vil kunne ødelægge dette script, fordi det kun restter den sidst åbne.
Avatar billede mrbonus Novice
05. juni 2007 - 06:59 #7
Men jo jeg fik godt fat i budskabet roensving :)

>Ja det virker, det forklarer dog ikke hvorfor det andet ikke virker, men det er en fin løsning.
>Løkken kan jeg dog ikke anvende,
Avatar billede roenving Novice
05. juni 2007 - 23:54 #8
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