PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
k

div hidden/visible

Door klaas op 11-05-2007 15:56
3.744 views
Ik wil doormiddel van een klik een div laten verschijnen op mijn site. Op dit moment doet hij dat alleen laat gelijk de rest van de div's verdwijnen. Ik wil dat hij alleen de div laat verdwijnen en zien die een id hebben. Heeft iemand een idee hoe ik dat kan declareren in de functie. Ik weet dat dit in dit gedeelte moet: var divs = document.getElementsByTagName('div');
alleen ik weet niet hoe ik precies in het ('div') gedeelte ook kan aangeven dat hij een id moet zien.

javascript in de header

	<script language=javascript type='text/javascript'>
    function showdiv(pass) {

    
		<b>var divs = document.getElementsByTagName('div'); ,</b>
		for(i=0;i<divs.length;i++){
         if(divs[i].id.match(pass)){//if they are 'see' divs
          if (document.getElementById) // DOM3 = IE5, NS6
          divs[i].style.visibility="visible";// show/hide
         else
        if (document.layers) // Netscape 4
        document.layers[divs[i]].display = 'visible';
        else // IE 4
        document.all.divs[i].visibility = 'visible';
        } else {
        if (document.getElementById)
        divs[i].style.visibility="hidden";
        else
        if (document.layers) // Netscape 4
        document.divs[i].visibility = 'hidden';
        else // IE 4
        document.all.divs[i].visibility = 'hidden';
       }
      }
     }
    </script>



div output

   echo "<td><div id=\"". $var_id ."\" style=\"position: absolute; left:10px; top:54px; background-color: #EEEEEE; border: 1px none #000000; visibility: hidden\"></td>\n";
   echo "</tr>\n";
O Onbekend Onbekend
11-05-2007 16:02
Je kunt beter werken met display, none of block;)
k klaas
11-05-2007 16:06
je bedoelt dat ik alles zet op : ivs[i].style.visibility="display"; // show/hide

maar dan heb ik nog het zelfde probleem. het gaat er mij om hoe ik dit javascript aan een specifieke div kan toewijzen.
R Remco
11-05-2007 16:21
dat moet met getElementById('idvandiv') in plaats van getElementsByTagName
k klaas
11-05-2007 16:23
Probeer het inderdaad nu daarmee maar als ik dit gebruik


   var divs = document.getElementById(['<? . $var_id .?>']);


lukt het ook niet
Crispijn -
11-05-2007 16:39
ik gebruik altijd deze functie:

<?php
//show hide ingegeven element
function showHide( ele ) {
var div = document.getElementById (ele);

if (div.style.display == 'none') {
div.style.display = 'block';
}else {
div.style.display = 'none';
}
}
?>

werkt als een trein.

p.s. php tags toegevoegd voor de kleurtjes!
k klaas
11-05-2007 16:42
maar hoe kan ik een variabele in het getElementById('<hier wil ik een variabel in hebben> ') idee krijgen?

dit gebruik ik nu : var divs = document.getElementById([$var_id]);

dit is de gehele code:



<?
include("config.php");  
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Engelen</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />
	
	<script language=javascript type='text/javascript'>
    function showdiv(pass) {

   var divs = document.getElementById([$var_id]);  
 
   
	
	//	var divs = document.getElementsByTagName('div');
		for(i=0;i<divs.length;i++){
         if(divs[i].id.match(pass)){//if they are 'see' divs
          if (document.getElementById) // DOM3 = IE5, NS6
          divs[i].style.visibility="visible";// show/hide
         else
        if (document.layers) // Netscape 4
        document.layers[divs[i]].display = 'visible';
        else // IE 4
        document.all.divs[i].visibility = 'visible';
        } else {
        if (document.getElementById)
        divs[i].style.visibility="hidden";
        else
        if (document.layers) // Netscape 4
        document.divs[i].visibility = 'hidden';
        else // IE 4
        document.all.divs[i].visibility = 'hidden';
       }
      }
     }
    </script> 


  </head>
  <body>
  
   <div id="pagewrapper">
   
  	<div id="headerleft"></div>
	
	
	
	<div id="headercenter"><img src="image/stuurDEF.jpg" width="400" height="170"  /></div>
	<div id="headerright"><img src="image/management-en-consultancy.gif" width="168" height="170"  /></div>
      <div id="left">
	   <?
	  include("hoofdmenu.php");

	   ?>  
	 </div>
     <div id="center">
       <h1>Opdrachtgevers</h1>
<p>&#160;</p>
<p class="inleiding">Hiernaast ziet u de logo&#8217;s van opdrachtgevers van EC&amp;I. Klik op één van de logo&#8217;s om direct naar de bijbehorende tekst te gaan.</p>
<p>&#160;</p> 			
		   

 
<?
 $sql = "SELECT * FROM opdrachtgevers ORDER BY naamopdrachtgever ASC";
 $query = mysql_query($sql);
 while($rij = mysql_fetch_object($query)) {
  $var_id = htmlspecialchars($rij->id);
  $var_opdrachtgever = htmlspecialchars($rij->naamopdrachtgever);
  $var_omschrijving = htmlspecialchars($rij->omschrijving);
  $var_website = htmlspecialchars($rij->website);

 //  echo "<div id=\"". $var_id ."\" style=\"position: absolute; left:10px; top:54px; background-color: #EEEEEE; border: 1px //none #000000; visibility: hidden\">";
   
   echo "</table>\n";
   
   echo "<tr>\n";
   echo "<td><div id=\"". $var_id ."\" style=\"position: absolute; left:10px; top:54px; background-color: #EEEEEE; border: 1px none #000000; visibility: hidden\"></td>\n";
   echo "</tr>\n";
   
   echo "<tr>\n";
   echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
   echo "</tr>\n";
   
   echo "<tr>\n";
    echo "<td><p>" . $var_omschrijving . "</p></td>\n";
   echo "</tr>\n";   
   
   echo "<tr>\n";
   echo "<td><a target=\"_blank\" href=http://" . $var_website . ">" . $var_website . "</a></td>\n";
   echo "</tr>\n";

  
 
   echo "</table><br/>\n";
  echo " </div>\n";
  }
?>	


<?php /*?><?
 $sql = "SELECT * FROM opdrachtgevers ORDER BY naamopdrachtgever ASC";
 $query = mysql_query($sql);
 while($rij = mysql_fetch_object($query)) {
  $var_id = htmlspecialchars($rij->id);
  $var_opdrachtgever = htmlspecialchars($rij->naamopdrachtgever);
  $var_omschrijving = htmlspecialchars($rij->omschrijving);
  $var_website = htmlspecialchars($rij->website);

   echo "<table border=\"0\">\n";
   
   echo "<tr>\n";
   echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
   echo "</tr>\n";
   
   echo "<tr>\n";
    echo "<td><p>" . $var_omschrijving . "</p></td>\n";
   echo "</tr>\n";   
   
   echo "<tr>\n";
   echo "<td><a target=\"_blank\" href=http://" . $var_website . ">" . $var_website . "</a></td>\n";
   echo "</tr>\n";

  
 
   echo "</table><br/>\n";
  }
?>	<?php */?>	   
     </div> 
  
	 <div id="right">
	 <table>
      <tr>
    <td><img src="image/opdrachtgevers.jpg" width="97" height="19" /></td>
  </tr>
  </table>
  
<? 
 $sql = "SELECT * FROM opdrachtgevers ORDER BY naamopdrachtgever ASC";
 $query = mysql_query($sql);
 while($rij = mysql_fetch_object($query)) {
  $var_id = htmlspecialchars($rij->id);
  $var_opdrachtgever = htmlspecialchars($rij->naamopdrachtgever);
  $var_omschrijving = htmlspecialchars($rij->omschrijving);
  $var_website = htmlspecialchars($rij->website);

   echo "<table border=\"0\">\n";   
     
   echo "<tr>\n";
   echo "<td><img src=\"afbeelding.php?id=" . $var_id . "\"></td>\n"; 
   echo "</tr>\n"; 
   
 //  echo "<tr>\n";
  // echo "<td><p><b>" . $var_opdrachtgever . "</b></p></td>\n";
  // echo "</tr>\n";
   
   echo "<tr>\n";
 ///echo "<td><a href=\"javascript:showdiv('". $var_id ."')\">" . $var_opdrachtgever . "</a></td>\n";
  echo "<td><div onclick=\"showdiv('".$var_id ."')\">" . $var_opdrachtgever . "</div></td>\n";

   
   echo "</tr>\n";  
    
	



   echo "</table><br/>\n";
  }
?> 
  
  

      </div>
  </div>
  </body>
</html>

R Remco
11-05-2007 18:51
ik zou het zo doen:

<script language=javascript type='text/javascript'>
function showdiv() {
  var main = document.getElementById('main');
  var divs = main.getElementsByTagName('div');
  for(i=0;i<divs.length;i++){
    if(divs[i].id) {
      divs[i].style.display = (divs[i].style.display == 'none') ? 'block' : 'none'
    }
  }
}
</script>


je moet een div om de andere divs heen zetten met de id main.

elke keer als je de functie aanroept, verschijnen of verdwijnen de divs met een id.

ik hoop dat dat was wat je nodig had?
k klaas
12-05-2007 20:49
Ik begrijp dat remco alleen ik wil juist dat het id variabel is. Omdat ik verschillende id's aanroep en die worden uit de database gehaalt.

hij pakt nu alleen de eerste div en niet de andere div. Zie http://engelen.vigourmedia.nl/opdrachtgevers.php. Als je op de naam van de opdrachtgever klikt moet je de div zien, is de bedoeling.
k klaas
14-05-2007 00:11
Heel erg bedankt RedCrew dit is exact wat ik wil hebben. Ik ben op dit moment bezig met dit te realiseren op mijn website. Ik vraag me alleen af waar hij de gegevens aanroept (email, naam etc. ) over de student. Is dat in stud_toon.php?

Aan de linkerkant krijg ik nu iedergeval de opdrachtgevers. Maar ik begrijp nog niet helemaal hoe ik de data kan tonen.

http://engelen.vigourmedia.nl/opdrachtgevers2.php

Reageren

Inloggen om te reageren