login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Sluiten bij openen ander

Offline BladiN - 20/10/2004 18:55
Avatar van BladiNGouden medailleGouden medaille

Grafische gevorderde		 Als je naar http://bladin.mine.nu/PS/ gaat en op Menu klikt en daarna op Profiel, dan zie je dat ze allebij blijven staan. Hoe kan ik oplossen dat als ik bv eerst Menu open en dan op Profiel klikt dat Menu eerst weggaat?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript" type="text/javascript">
  2.   <!--
  3.   function _dSectionExpand(sec) {
  4.     document.getElementById("cSec"+sec).style.display = "none";
  5.     document.getElementById("xSec"+sec).style.display = "block";
  6.   }
  7.   function _dSectionCollapse(sec) {
  8.     document.getElementById("xSec"+sec).style.display = "none";
  9.     document.getElementById("cSec"+sec).style.display = "block";
  10.   }
  11.   // -->
  12.   </script>


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <td>
  2.         <span id="cSec1" style="">
  3.           <a onclick="return _dSectionExpand('1');"><img src="images/menu.png" width="70" height="29" alt="" class="menu" /></a>
  4.         </span>
  5.         <span id="xSec1" style="display: none">
  6.          <a onclick="return _dSectionCollapse('1');"><img src="images/menu.png" width="70" height="29" alt="" class="menu" /></a>
  7.          <div style="position: absolute;top: 110px;left: 410px;">
  8.            <div class="blok" style="width: 134px;">
  9.              <div class="blokin">
  10.                <div class="blokitem"><strong>:.</strong> Startpagina</div>
  11.                <div class="blokitem"><strong>:.</strong> Toplijsten</div>
  12.                <div class="blokitem"><strong>:.</strong> Verkiezingen</div>
  13.              </div>
  14.            </div>
  15.          </div>
  16.         </span>
  17.       </td>
  18.       <td>
  19.         <span id="cSec2" style="">
  20.           <a onclick="return _dSectionExpand('2');"><img src="images/menu_profiel.png" width="98" height="29" alt="" class="menu" /></a>
  21.         </span>
  22.         <span id="xSec2" style="display: none">
  23.          <a onclick="return _dSectionCollapse('2');"><img src="images/menu_profiel.png" width="98" height="29" alt="" class="menu" /></a>
  24.          <div style="position: absolute;top: 110px;left: 494px;">
  25.            <div class="blok" style="width: 134px;">
  26.              <div class="blokin">
  27.                <div class="blokitem"><strong>:.</strong> Mijn profiel</div>
  28.                <div class="blokitem"><strong>:.</strong> Mijn profiel wijzigen</div>
  29.                <div class="blokitem"><strong>:.</strong> Gegevens wijzigen</div>
  30.                <div class="blokitem"><strong>:.</strong> Fotobeheer</div>
  31.                <div class="blokitem"><strong>:.</strong> Postvak in (?)</div>
  32.                <div class="blokitem"><strong>:.</strong> Vriendjes</div>
  33.              </div>
  34.            </div>
  35.          </div>
  36.         </span>
  37.       </td>

9 antwoorden

Gesponsorde links
Offline twopeak - 20/10/2004 20:49
Avatar van twopeak Gouden medaille

PHP ver gevorderde		 ik heb je code niet gelezen, maar je zou iets kunnen doen van een functie
close_all()
dat ALLE menus sluit, en dan open je het gewenste menu!

of iets sneller is dat je alles sluit en in je functieomschrijving zegt welke toch open moet!
mischien met een while-loopje en dan een controle of het degene is die open moet of niet!
Offline BladiN - 20/10/2004 21:27 (laatste wijziging 20/10/2004 22:57)
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde		 Ik heb het nu dus heel professorisch gedaan:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript" type="text/javascript">
  2.   <!--
  3.   function _dMenuExpand(sec) {
  4.     document.getElementById("cSec"+sec).style.display = "none";
  5.     document.getElementById("xSec"+sec).style.display = "block";
  6.  
  7.     document.getElementById("cSec2").style.display = "block";
  8.     document.getElementById("xSec2").style.display = "none";
  9.     document.getElementById("cSec3").style.display = "block";
  10.     document.getElementById("xSec3").style.display = "none";
  11.     document.getElementById("cSec4").style.display = "block";
  12.     document.getElementById("xSec4").style.display = "none";
  13.   }
  14.   function _dProfielExpand(sec) {
  15.     document.getElementById("cSec"+sec).style.display = "none";
  16.     document.getElementById("xSec"+sec).style.display = "block";
  17.  
  18.     document.getElementById("cSec1").style.display = "block";
  19.     document.getElementById("xSec1").style.display = "none";
  20.     document.getElementById("cSec3").style.display = "block";
  21.     document.getElementById("xSec3").style.display = "none";
  22.     document.getElementById("cSec4").style.display = "block";
  23.     document.getElementById("xSec4").style.display = "none";
  24.   }
  25.   function _dCommunitieExpand(sec) {
  26.     document.getElementById("cSec"+sec).style.display = "none";
  27.     document.getElementById("xSec"+sec).style.display = "block";
  28.  
  29.     document.getElementById("cSec1").style.display = "block";
  30.     document.getElementById("xSec1").style.display = "none";
  31.     document.getElementById("cSec2").style.display = "block";
  32.     document.getElementById("xSec2").style.display = "none";
  33.     document.getElementById("cSec4").style.display = "block";
  34.     document.getElementById("xSec4").style.display = "none";
  35.   }
  36.   function _dOverigExpand(sec) {
  37.     document.getElementById("cSec"+sec).style.display = "none";
  38.     document.getElementById("xSec"+sec).style.display = "block";
  39.  
  40.     document.getElementById("cSec1").style.display = "block";
  41.     document.getElementById("xSec1").style.display = "none";
  42.     document.getElementById("cSec2").style.display = "block";
  43.     document.getElementById("xSec2").style.display = "none";
  44.     document.getElementById("cSec3").style.display = "block";
  45.     document.getElementById("xSec3").style.display = "none";
  46.   }
  47.   function _dSectionCollapse(sec) {
  48.     document.getElementById("xSec"+sec).style.display = "none";
  49.     document.getElementById("cSec"+sec).style.display = "block";
  50.   }
  51.   // -->
  52.   </script>


Ik ben verder niet echt een javascript guru.. sorry.. maar kan dit dus korter? 
Offline Thomas - 21/10/2004 07:37
Avatar van Thomas Moderator Ja, alle elementen die het nummer sec in hun naam hebben krijgen die eerste stijl (none, block), en de rest krijgt die tweede stijl (block, none).
Die 4 expand functies, daar zou je één expand functie van moeten kunnen maken.
Offline BladiN - 21/10/2004 08:28
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde		 Ja klopt, maar moet ik dat gewoon doen door ze gewoon eerst allemaal te sluiten? en zo ja hoe dan? want ik kan wel alle nummers gaan invull emaar is er geen for() functie in javascript?
Offline Thomas - 21/10/2004 08:53
Avatar van Thomas Moderator Jawel hoor. JavaScript heeft een for()-constructie (en ook een foreach() {})

for(var i = 0; i < 10; i++) {
...
}

foreach(item in arrayvar) {
...
}
Offline BladiN - 21/10/2004 10:45 (laatste wijziging 21/10/2004 11:13)
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde		 Ok, dan ga ik daar eerst eens mee proberen bedankt Maar dan nog iets anders, als ik het menu open zeg maar met een klik, dan blijft hij vast staan, maar ik wil dat hij na bv 500 m/s automatisch verdwijnt, behalve als je er met je muis nog op het menu staat, dus die 500 m/s moeten pas ingaan als jij NIET meer met je muis op het menu staat (niet de link). Dus als je weer met je muis eroverheen zou gaan beginnen de 500 m/s natuurlijk weer opnieuw. Weet iemand dit?

Dit is één menu:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="position: absolute;top: 110px;left: 410px;"> 
  2.            <div class="blok" style="width: 134px;"> 
  3.              <div class="blokin"> 
  4.                <div class="blokitem"><strong>:.</strong> Startpagina</div> 
  5.                <div class="blokitem"><strong>:.</strong> Toplijsten</div> 
  6.                <div class="blokitem"><strong>:.</strong> Verkiezingen</div> 
  7.              </div> 
  8.            </div> 
  9.          </div>
Offline BladiN - 21/10/2004 15:34
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde		 Trouwens voor het verkorten had ik nu dit verzonnen:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript" type="text/javascript">
  2.   <!--
  3.   function _dMenuExpand(sec) {
  4.  
  5.     var i;
  6.  
  7.     for(i=0;i<=4;i++) {
  8.       document.getElementById("xSec"+i).style.display = "none";
  9.       document.getElementById("cSec"+i).style.display = "block";
  10.     }
  11.  
  12.     document.getElementById("cSec"+sec).style.display = "none";
  13.     document.getElementById("xSec"+sec).style.display = "block";
  14.   }
  15.   function _dMenuCollapse(sec) {
  16.     document.getElementById("xSec"+sec).style.display = "none";
  17.     document.getElementById("cSec"+sec).style.display = "block";
  18.   }
  19.   // -->
  20.   </script>


Wat is er fout aan?
Offline BladiN - 21/10/2004 16:41 (laatste wijziging 21/10/2004 16:45)
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde		 Ok verholpen, maar nu het volgende probleem, het automatisch sluiten zeg maar:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a onmouseover="return _dMenuExpand('1');" onmouseout="setTimeout('_dMenuCollapse(\'1\')',1000);"><img src="images/menu.png" width="70" height="29" alt="" class="menu" /></a>
  2.          <div class="menublok" id="xSec1" style="display: none">
  3.            <div class="blok" onmouseover="return _dMenuExpand('1');"  onmouseout="setTimeout('_dMenuCollapse(\'1\')',1000);">
  4.              <div class="blokin">
  5.                <div class="blokitem" id="m1" onmouseout="change_cell_color('m1', 'blokitem');" onmouseover="change_cell_color('m1', 'cblokitem');"><strong>:.</strong> Startpagina</div>
  6.                <div class="blokitem" id="m2" onmouseout="change_cell_color('m2', 'blokitem');" onmouseover="change_cell_color('m2', 'cblokitem');"><strong>:.</strong> Toplijsten</div>
  7.                <div class="blokitem" id="m3" onmouseout="change_cell_color('m3', 'blokitem');" onmouseover="change_cell_color('m3', 'cblokitem');"><strong>:.</strong> Verkiezingen</div>
  8.              </div>
  9.            </div>
  10.          </div>


php code - Bekijk de code zonder highlighting - Klap code in 
  1. function _dMenuExpand(sec) {
  2.  
  3.     for(var i = 1; i <= 4; i++) {
  4.       if(sec != i) {
  5.         document.getElementById("xSec"+i).style.display = "none";
  6.       }
  7.     }
  8.  
  9.     document.getElementById("xSec"+sec).style.display = "block";
  10.   }
  11.  
  12.   function _dMenuCollapse(sec) {
  13.     document.getElementById("xSec"+sec).style.display = "none";
  14.   }


Dat is de code, het is eigenlijk de bedoeling dat als je weer met je muis ergens overheen gaat hij de mouseout stop en pas als je er weer afgaat weer start, dus:
eraf -> mouseout -> 1000 ms stop
binne 1000 ms wer weer op -> stop mouseout -> eraf -> start mouseout
enz.

Het liefst eigenlijk gewoon, dat zodra je GEEN muispijl meer hebt op de container div (of ie er nu wel of niet over is geweest) dat hij verdwijnt na 1000ms, maar als je hem er weer over doet, dan wordt die functie stop gezet, ga je er dan weer af begint ie weer met die 1000ms aftellen.
Offline BladiN - 22/10/2004 15:11
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde		 Hmm sorry dat ik hier blijf posten, maar 1 stap is nu gelukt:
http://bladin.mine.nu/PS/

Het probleem is alleen het menu werkt in IE volledig, en in FF gaat alleen menu 1 auto weg en doet hij vaag bij de mousovers :S in het menu, weet iemand het probleem?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript" type="text/javascript">
  2.   <!--
  3.   function _MenuExpand(sec) {
  4.  
  5.     for(var i = 1; i <= 4; i++) {
  6.       if(sec != i) {
  7.         document.getElementById("xSec"+i).style.display = "none";
  8.       }
  9.     }
  10.  
  11.     document.getElementById("xSec"+sec).style.display = "block";
  12.   }
  13.  
  14.   function _MenuCollapse(sec) {
  15.     document.getElementById("xSec"+sec).style.display = "none";
  16.   }
  17.  
  18.   function change_cell_color(id,cl)
  19.   {
  20.     if (document.getElementById(id)) {
  21.       document.getElementById(id).className = cl;
  22.     }
  23.   }
  24.  
  25.   // -->
  26.   </script>


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="position: relative; margin: auto; width: 762px;">
  2.  
  3.     <table width="762" border="0" cellpadding="0" cellspacing="0" style="margin: auto;">
  4.     <tr>
  5.       <td colspan="2" rowspan="2" class="l_logo"><!-- Logo Links --></td>
  6.       <td colspan="5" class="r_logo"><!-- Logo Rechts --></td>
  7.     </tr>
  8.     <tr>
  9.       <td>
  10.          <a onmouseover="return _MenuExpand('1');"><img src="images/menu.png" width="70" height="29" alt="" class="menu" /></a>
  11.          <div class="menublok" id="xSec1" style="display: none">
  12.            <div class="blok" onmouseout="return _MenuCollapse('1');" onmouseover="return _MenuExpand('1');">
  13.              <div class="blokin">
  14.                <div class="blokitem" id="m1" onmouseout="change_cell_color('m1', 'blokitem');" onmouseover="change_cell_color('m1', 'cblokitem');"><strong>:.</strong> Startpagina</div>
  15.                <div class="blokitem" id="m2" onmouseout="change_cell_color('m2', 'blokitem');" onmouseover="change_cell_color('m2', 'cblokitem');"><strong>:.</strong> Toplijsten</div>
  16.                <div class="blokitem" id="m3" onmouseout="change_cell_color('m3', 'blokitem');" onmouseover="change_cell_color('m3', 'cblokitem');"><strong>:.</strong> Verkiezingen</div>
  17.              </div>
  18.            </div>
  19.          </div>
  20.       </td>
  21.       <td>
  22.          <a onmouseover="return _MenuExpand('2');"><img src="images/menu_profiel.png" width="98" height="29" alt="" class="menu" /></a>
  23.          <div class="profielblok" id="xSec2" style="display: none">
  24.            <div class="blok" onmouseout="return _MenuCollapse('2');" onmouseover="return _MenuExpand('2');">
  25.              <div class="blokin">
  26.                <div class="blokitem" id="p1" onmouseout="change_cell_color('p1', 'blokitem');" onmouseover="change_cell_color('p1', 'cblokitem');"><strong>:.</strong> Mijn profiel</div>
  27.                <div class="blokitem" id="p2" onmouseout="change_cell_color('p2', 'blokitem');" onmouseover="change_cell_color('p2', 'cblokitem');"><strong>:.</strong> Mijn profiel wijzigen</div>
  28.                <div class="blokitem" id="p3" onmouseout="change_cell_color('p3', 'blokitem');" onmouseover="change_cell_color('p3', 'cblokitem');"><strong>:.</strong> Gegevens wijzigen</div>
  29.                <div class="blokitem" id="p4" onmouseout="change_cell_color('p4', 'blokitem');" onmouseover="change_cell_color('p4', 'cblokitem');"><strong>:.</strong> Fotobeheer</div>
  30.                <div class="blokitem" id="p5" onmouseout="change_cell_color('p5', 'blokitem');" onmouseover="change_cell_color('p5', 'cblokitem');"><strong>:.</strong> Postvak in (?)</div>
  31.                <div class="blokitem" id="p6" onmouseout="change_cell_color('p6', 'blokitem');" onmouseover="change_cell_color('p6', 'cblokitem');"><strong>:.</strong> Vriendjes</div>
  32.              </div>
  33.            </div>
  34.          </div>
  35.       </td>
  36.       <td>
  37.          <a onmouseover="return _MenuExpand('3');"><img src="images/menu_communitie.png" width="146" height="29" alt="" class="menu" /></a>
  38.          <div class="communitieblok" id="xSec3" style="display: none">
  39.            <div class="blok" onmouseout="return _MenuCollapse('3');" onmouseover="return _MenuExpand('3');">
  40.              <div class="blokin">
  41.                <div class="blokitem" id="c1" onmouseout="change_cell_color('c1', 'blokitem');" onmouseover="change_cell_color('c1', 'cblokitem');"><strong>:.</strong> Het forum</div>
  42.                <div class="blokitem" id="c2" onmouseout="change_cell_color('c2', 'blokitem');" onmouseover="change_cell_color('c2', 'cblokitem');"><strong>:.</strong> Leden</div>
  43.                <div class="blokitem" id="c3" onmouseout="change_cell_color('c3', 'blokitem');" onmouseover="change_cell_color('c3', 'cblokitem');"><strong>:.</strong> Zoeken</div>
  44.              </div>
  45.            </div>
  46.          </div>
  47.       </td>
  48.       <td>
  49.          <a onmouseover="return _MenuExpand('4');"><img src="images/menu_overig.png" width="90" height="29" alt="" class="menu" /></a>
  50.          <div class="overigblok" id="xSec4" style="display: none">
  51.            <div class="blok" onmouseout="return _MenuCollapse('4');" onmouseover="return _MenuExpand('4');">
  52.              <div class="blokin">
  53.                <div class="blokitem" id="o1" onmouseout="change_cell_color('o1', 'blokitem');" onmouseover="change_cell_color('o1', 'cblokitem');"><strong>:.</strong> Account verwijderen</div>
  54.                <div class="blokitem" id="o2" onmouseout="change_cell_color('o2', 'blokitem');" onmouseover="change_cell_color('o2', 'cblokitem');"><strong>:.</strong> Uitloggen</div>
  55.              </div>
  56.            </div>
  57.          </div>
  58.       </td>
  59.       <td><img src="images/menu_rechts.png" width="30" height="29" alt="" /></td>
  60.     </tr>
  61.     </table>
  62.     </div>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.28s