login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Divje schuift niet mee

Offline X3ore - 01/11/2005 13:54
Avatar van X3oreHTML interesse Hoi allemaal,..

Ik maak met behulp van een div layer een menu die open en dicht kan gaan..

http://www.i-st...52222.html

Hij verbergt wel als je op hide drukt maar dat witte vlak blijft ertussen normaal zouden die toch gesloten moeten worden? als je begrijpt wat ik bedoel..


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <table width="151" border="0" cellpadding="0" cellspacing="0">
  2.     <tr>
  3.         <td class="left_menu_tit" colspan="3" height="17" style="background-image: url(images/gfx_25.gif); height: 17px; width: 151px;">
  4.         <!--titel-->
  5.         </td>
  6.     </tr>
  7.     <tr>
  8.         <td colspan="2" valign="top" height="19">
  9.         <!--cellen-->
  10.         <div id="hideshow_Leden" style="display: block;">
  11.             <table width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
  12.                 <tr>
  13.                     <td class="left_menu_nav" onMouseOver="this.style.backgroundColor='#99CC00';" onMouseOut="this.style.backgroundColor='#669900';">
  14.                         <img border="0" src="images/arrow.gif" width="7" height="7">
  15.                         <a href="#">Inloggen</a>
  16.                     </td>
  17.                 </tr>
  18.             </table>
  19.         </div>
  20.         <!--einde-cellen-->    
  21.         </td>
  22.         <td style="background-image: url(images/gfx_26.gif); width: 1px;" height="19">
  23.             </td>
  24.     </tr>
  25.     <tr>
  26.         <td height="13">
  27.             <!--1--><a href="#" OnCLick="hideshow_Leden.style.display='inline'"><img src="images/gfx_27.gif" width="118" height="13" alt="" border=""></a></td>
  28.         <td colspan="2" height="13">
  29.             <!--2--><a href="#" OnCLick="hideshow_Leden.style.display='none'"><img src="images/gfx_28.gif" width="33" height="13" alt="" border="0"></a></td>
  30.     </tr>
  31.     <tr>
  32.         <td>
  33.             <img src="22/images/spacer.gif" width="118" height="1" alt=""></td>
  34.         <td>
  35.             <img src="22/images/spacer.gif" width="32" height="1" alt=""></td>
  36.         <td>
  37.             <img src="22/images/spacer.gif" width="1" height="1" alt=""></td>
  38.     </tr>
  39. </table>

11 antwoorden

Gesponsorde links
Offline SvenP - 01/11/2005 14:33 (laatste wijziging 01/11/2005 14:35)
Avatar van SvenP PHP interesse duz je wil, de hide/show knop enzo wat naar boven halen?
wat je kan probeeren is van de onderste tabel/cel of wat ook maar,
ook een div van make, die omhoog gaat als je op hide klikt.
Offline X3ore - 01/11/2005 14:35
Avatar van X3ore HTML interesse ja als je op hide klikt moet de inhoud tussen de bovenbalk en onderbalk helemaal verdwijnen maar nu blijft er een leeg vlak tussen..
Offline Ontani - 01/11/2005 14:45
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 document.getElementById("hideshow_Leden").style.height = "0px":
Offline X3ore - 01/11/2005 14:46
Avatar van X3ore HTML interesse Kun je iets uitgebreider uitleggen? Van javascript ken ik niet veel  
Offline haytjes - 01/11/2005 14:49 (laatste wijziging 01/11/2005 14:53)
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde
php code - Bekijk de code zonder highlighting - Klap code in 
  1. ...
  2. <td colspan="2" valign="top" height="19">
  3. ...

die height="19" zorgt ervoor dat je td niet inklapt.

Als je dan de height op 0 zet, klapt hij in:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById("hideshow_Leden").parentNode.style.height = "0px";


uitleg:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. document.getElementById("hideshow_Leden")  // = de div
  2. document.getElementById("hideshow_Leden").parentNode // = de td die erboven staat
  3. document.getElementById("hideshow_Leden").parentNode.style.height // = de hoogte
Offline Ontani - 01/11/2005 14:50 (laatste wijziging 01/11/2005 14:51)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 bijvoorbeeld:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. <!--
  3. function verberg() 
  4. {
  5.  document.getElementById("hideshow_Leden").style.height = "0px":
  6.  document.getElementById("hideshow_Leden").style.display = "none";
  7. }
  8.  
  9. function toon() 
  10. {
  11.   document.getElementById("hideshow_Leden").style.height = "19px":
  12.  document.getElementById("hideshow_Leden").style.display = "block";
  13. }
  14. //-->
  15. </script>
  16.  
  17. <a href="javascript:(verberg());">Hide</a>
  18. <a href="javascript:(toon());">Show</a>
Offline haytjes - 01/11/2005 14:52
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 moet het niet de TD zijn die een height=0; is??????

dus: parentNode
Offline Ontani - 01/11/2005 14:53 (laatste wijziging 01/11/2005 14:57)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 als em gewoon geen hoogte meegeeft aan die td is't ook inorde

edit: hou der rekening mee dat het script dat je nu gebruikt niet werk in Firefox, Netscape of Mozilla, enkel in Internet Explorer

edit 2: hier staat een voorbeeld:
dit zou in alle browsers moeten werken
Offline X3ore - 01/11/2005 15:00 (laatste wijziging 01/11/2005 15:12)
Avatar van X3ore HTML interesse Oke bedankt, heb het met behulp van de functie van Ontani kunnen oplossen 

Iedereen bedankt!

//Edit, idd dat werkte niet in ff, maar die manier die je nu zei met da voorbeeld werkt wel goed bedankt
Offline Ultimatum - 01/11/2005 16:39
Avatar van Ultimatum PHP expert X3ore, zou je het script dat je gebruikt (goeie ) hier neer kunnen zette zodat ik het ook zou kunnen gebruike 

(die op je site staat werkt wel in FF )
Offline Ontani - 01/11/2005 18:17
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 effe laten weten dat wat je hier:

http://www.i-st...ite%20base

gebruikt niet werkt in netscape
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.233s