Avatar billede hanz Nybegynder
25. oktober 2003 - 16:46 Der er 18 kommentarer og
1 løsning

Tænde/slukke div'er med display

Jeg har en side med en masse div'er hvor nogen af dem skal erstattes med en i samme størrelse ved onmouseover... Jeg har tidlige brugt visibility i tabeller. Det virker fint. Men med display block|none kan jeg ikke få det til at virke...

Enybody?
Avatar billede Slettet bruger
25. oktober 2003 - 17:03 #1
Er det ved onmouseover på div'en, det skal ske? Eller et det et link/billede?
Avatar billede bearhugx Nybegynder
25. oktober 2003 - 17:03 #2
<script>
  function toggleDisplay(who) {
    elem = document.getElementById(who);
    if( elem.style.display == "none" ) {
      elem.style.display = "block";
    } else {
      elem.style.display = "none";
    }
  }
</script>


<div onclick="toggleDisplay('felt1')"> tænd/sluk felt 1</div>
<div id="felt1" style="display:none;">
Hejsa
</div>
Avatar billede bearhugx Nybegynder
25. oktober 2003 - 17:06 #3
det nederste skal selvfølgelig være i body

script-blokken bør være i HEAD-delen

og så bør man måske sætte MIME-type på
<script type="text/javascript">...</script>
Avatar billede hanz Nybegynder
25. oktober 2003 - 17:18 #4
Jeg har 12 div'er sat lige under hinanden med float:left i en øvre div container med fast højde og bredde. Div'erne lægger sig i containeren 3 pr. række. Jeg har så 3 ekstra div med display:none som skal "tændes" ved mouseover på 3 andre. Det kan jeg godt men display skal "slukke/erstatte" de 3 første... Som det er nu bliver der bare sat 3 ekstra ind...
Avatar billede bearhugx Nybegynder
25. oktober 2003 - 17:55 #5
Kan du så ikke lige poste din kode ... -- Det vil være nemmere at fejlsøge ...
Avatar billede hanz Nybegynder
25. oktober 2003 - 18:01 #6
Here U go:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <title>CV</title>
<script language="JavaScript">
function findObj(n, d)
{
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
  {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
  }
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function showLayers()
{
  var g,b,k,f,args=showLayers.arguments;
  var a = parseInt(args[0]);if(isNaN(a))a=0;
  if(!document.setc)
  {
    c=new Array();document.setc=true;
    for (var u=0;u<10;u++)
    {
      c[u] = new Array();
    }
  }
  for(k=0; k<c[a].length; k++)
  {
  if((g=findObj(c[a][k]))!=null)
  {
    b=(document.layers)?g:g.style;b.display="none";
  }
}
for(k=1; k<args.length; k++)
{
  if((g=findObj(args[k])) != null)
  {
    b=(document.layers)?g:g.style;b.display="block";f=false;
    for(j=0;j<c[a].length;j++)
      {
        if(args[k]==c[a][j])
        {
          f=true;
        }
      }
      if(!f)
      {
        c[a][c[a].length++]=args[k];
      }
    }
  }
}
</script>
</head>

<body bgcolor="#ccccccc">
<div id="sitecontainer" style="width : 408px; height : 408px; padding : 2px 1px 3px 1px; background-color : #ffffff;">
  <div id="html" style="float : left; display : none; width : 97px; height : 97px; margin : 2px; z-index : 10;"><img src="grafik/top_left.gif" width="97" height="97" border="0"></div>
  <div id="html2" style="float : left; width : 97px; height : 97px; margin : 2px; background-color : #3A9AF0; z-index : 11;"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/top_left2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/top_right2.gif" width="97" height="97" border="0"></div>
  <div id="word" style="float : left; display : none; margin : 2px;"><img src="grafik/top_right.gif" width="97" height="97" border="0"></div>
  <div id="word2" style="float : left; width : 97px; height : 97px; margin : 2px; background-color : #01018F;"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_left.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_left2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_right2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_right.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_bottom_left.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_bottom_left2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><a onmouseover="showLayers(0,'html')"><img src="grafik/middle_bottom_right2.gif" width="97" height="97" border="0"></a></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><a onmouseover="showLayers(0,'word')"><img src="grafik/middle_bottom_right.gif" width="97" height="97" border="0"></a></div>
  <div id="pdf" style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_left.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_left2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_right2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_right.gif" width="97" height="97" border="0"></div>
</div>
</body>
</html>
Avatar billede bearhugx Nybegynder
25. oktober 2003 - 18:19 #7
hmm ... hvordan skal det lige virke - hvis man f.eks. trykker på på div[id=pdf] skal den så vise de tre div som er nedenunder eller ?
Avatar billede bearhugx Nybegynder
25. oktober 2003 - 18:29 #8
kan du med ord prøve at forklare, hvad det er du gerne vil have ... Noget siger mig at du er igang med at lave noget kode som er mere kompleks end hvad der er brug for.
Avatar billede hanz Nybegynder
25. oktober 2003 - 19:20 #9
De 3 div'er der har id skal skifte med dem der ligger lige nedenunder og hedder det samme med et 2 tal efter. Jeg poster det lige igen (har rettet lidt i det)

<div id="sitecontainer" style="width : 408px; height : 408px; padding : 2px 1px 3px 1px; background-color : #ffffff;">
  <div id="html" style="float : left; display : none; width : 97px; height : 97px; margin : 2px;"><img src="grafik/top_left.gif" width="97" height="97" border="0"></div>
  <div id="html2" style="float : left; width : 97px; height : 97px; margin : 2px; background-color : #3A9AF0;"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/top_left2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/top_right2.gif" width="97" height="97" border="0"></div>
  <div id="word" style="float : left; display : none; margin : 2px;"><img src="grafik/top_right.gif" width="97" height="97" border="0"></div>
  <div id="word2" style="float : left; width : 97px; height : 97px; margin : 2px; background-color : #01018F;"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_left.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_left2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_right2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_top_right.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_bottom_left.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/middle_bottom_left2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><a onmouseover="showLayers(0,'html')"><img src="grafik/middle_bottom_right2.gif" width="97" height="97" border="0"></a></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><a onmouseover="showLayers(0,'word')"><img src="grafik/middle_bottom_right.gif" width="97" height="97" border="0"></a></div>
  <div id="pdf" style="float : left; display : none; width : 97px; height : 97px; margin : 2px; background-color : #CC3333;"></div>
  <div id="pdf2" style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_left.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_left2.gif" width="97" height="97" border="0"></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><a onmouseover="showLayers(0,'pdf')"><img src="grafik/bottom_right2.gif" width="97" height="97" border="0"></a></div>
  <div style="float : left; width : 97px; height : 97px; margin : 2px;"><img src="grafik/bottom_right.gif" width="97" height="97" border="0"></div>
</div>
Avatar billede bearhugx Nybegynder
25. oktober 2003 - 20:05 #10
en lille tanke : hvis det er at alle felter alligevel skal være 97x97 px store og have en margin på 2px, samt float:left, så ville det virkelig være en ide at samle en class omkring den definition

<div class="felt">

og

.felt {
  float:left;
  width: 97px;
  height: 97px;
  margin: 2px;
}
Avatar billede bearhugx Nybegynder
25. oktober 2003 - 20:21 #11
jeg er næsten ved at give op - jeg kan simpelthen ikke gennemskue, hvad det er du vil med den kode...

Kan du ikke (som jeg skrev tidligere) prøve at forklare, hvad det er du vil... Uden brug af kode... Prøv at forklar hvad du vil opnå, og hvordan du havde tænkt dig at det skulle gøres...

Jeg er sikker på at det kan gøres noget simplere... og selv har jeg ikke tid til at skulle gætte på hvad variabler som

  n, d, x, g, b, k, c og f skal arbejde med.... (nogle af dem kan gættes nemt -andre er stadig et mysterium)

Jeg vil gerne hjælpes- men for at hjælpe skal jeg vide, hvad du egenligt pønser på....

Derfor -- væk med koden og lad os høre, hvad det egenligt er du vil ...
Avatar billede hanz Nybegynder
25. oktober 2003 - 20:47 #12
fint nok... jeg styler div'erne senere så glem det. Jeg vil have at div'en "html" skifter med div'en "html2" og vise versa med "word" og "word2" og "pdf" og "pdf2". Det der sker nu er at 2'erne vises ved mouseover på de 3 andre, men dem uden 2 lukker ikke... så derfor er der for mange "åbne" div'er. Er jeg helt gal på den?
Avatar billede bearhugx Nybegynder
25. oktober 2003 - 20:54 #13
vil du vise nogle divs eller taler vi om at "bytte html ud med html2" osv
Avatar billede hanz Nybegynder
25. oktober 2003 - 20:59 #14
bytte..
Avatar billede bearhugx Nybegynder
25. oktober 2003 - 21:05 #15
ok. to sek
Avatar billede hanz Nybegynder
25. oktober 2003 - 21:17 #16
thanks
Avatar billede bearhugx Nybegynder
25. oktober 2003 - 21:28 #17
ok... her er et eksempel, som du nok kan arbejde videre med...

<html>
    <script>
        function toggleBetween( diva, divb ) {
          A= document.getElementById(diva);
          B= document.getElementById(divb);
          if(A.style.display == "none") {
              A.style.display = "block";
              B.style.display = "none";
          } else {
              B.style.display = "block";
              A.style.display = "none";
          }     
      }
    </script>
    <body>
        <div onclick="toggleBetween('feltA', 'feltB')"> feltA eller feltB </div>
        <div id="feltA" style="display:block;">
            FELT A
        </div>
        <div id="feltB" style="display:none;">
            FELT B
        </div>
    </body>
</html>

/Søren
Avatar billede hanz Nybegynder
25. oktober 2003 - 23:08 #18
eller tak for hjælpen. jeg klarede den sådan her:

function vis(navn){
  var arr_elementer = new Array('html','word','pdf');
 
  for (var i=0;i< arr_elementer.length;i++)
  {
    document.getElementById(arr_elementer[i]).style.display='none';
    document.getElementById(arr_elementer[i]).style.visibility='hidden';
    document.getElementById(arr_elementer[i]+'2').style.display='block';
    document.getElementById(arr_elementer[i]+'2').style.visibility='visible';
  }
  if (navn !=null)
  {
    document.getElementById(navn+'2').style.display='none';
    document.getElementById(navn+'2').style.visibility='hidden';
    document.getElementById(navn).style.display='block';
    document.getElementById(navn).style.visibility='visible';
  }
}
Avatar billede hanz Nybegynder
26. oktober 2003 - 22:26 #19
bearhugx -> Tak for hjælpen...
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

IT-JOB