Eléphant du PHP |
360 Messages
05 avr. 2006, 17:52
Par contre un div caché dans une ligne de tableau, affiche quand même un espace vide non?
Non
Ça dépend de la méthode utilisée :
- Avec Visibility : hidden; l'espace sera vide dans les dimensions du bloc et laissera une place inoccuppée;
- Avec Display : none; rien n'apparaîtra du tout, pas même un espace.
Alors en fait, si la ligne caché fait parti d'un tableau créé avant le <div> caché, la ligne apparaitra quand même :
Code : Tout sélectionner
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Masquer/Afficher au clic de souris</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript">
/* <![CDATA[ */
function afficher()
{
if (document.getElementById("test").style.visibility=="hidden")
{
document.getElementById('afficher').firstChild.nodeValue = "Masquer l'adresse";
document.getElementById("test").style.visibility="visible";
}
else
{
document.getElementById('afficher').firstChild.nodeValue = "Afficher l'adresse";
document.getElementById("test").style.visibility="hidden";
}
}
/* ]]> */
</script>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<div onclick="afficher()" id="afficher">Afficher l'adresse</div>
<div id="test" style="visibility: hidden">
<tr>
<td>77777777777777777777</td>
<td>88888888888888888888</td>
<td>99999999999999999999</td>
</tr>
</div>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
</body>
</html>
Pas terrible ...
Même si l'on créer un tableau dans un tableau :
Code : Tout sélectionner
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Masquer/Afficher au clic de souris</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript">
/* <![CDATA[ */
function afficher()
{
if (document.getElementById("test").style.visibility=="hidden")
{
document.getElementById('afficher').firstChild.nodeValue = "Masquer l'adresse";
document.getElementById("test").style.visibility="visible";
}
else
{
document.getElementById('afficher').firstChild.nodeValue = "Afficher l'adresse";
document.getElementById("test").style.visibility="hidden";
}
}
/* ]]> */
</script>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<div onclick="afficher()" id="afficher">Afficher l'adresse</div>
<div id="test" style="visibility: hidden">
<table border="1">
<tr>
<td>77777777777777777777</td>
<td>88888888888888888888</td>
<td>99999999999999999999</td>
</tr>
</table>
</div>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
</body>
</html>
Pas terrible du tout !!!!
Pas contre si l'on créer un autre tableau le <div> est bien correctement caché puis affiché ... :
Code : Tout sélectionner
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Masquer/Afficher au clic de souris</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript">
/* <![CDATA[ */
function afficher()
{
if (document.getElementById("test").style.visibility=="hidden")
{
document.getElementById('afficher').firstChild.nodeValue = "Masquer l'adresse";
document.getElementById("test").style.visibility="visible";
}
else
{
document.getElementById('afficher').firstChild.nodeValue = "Afficher l'adresse";
document.getElementById("test").style.visibility="hidden";
}
}
/* ]]> */
</script>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<div onclick="afficher()" id="afficher">Afficher l'adresse</div>
<div id="test" style="visibility: hidden">
<table border="1">
<tr>
<td>77777777777777777777</td>
<td>88888888888888888888</td>
<td>99999999999999999999</td>
</tr>
</table>
</div>
<table border="1">
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
</body>
</html>
C'est pas vraiment génial surtout si l'on veut garder les dimension des précédentes colonnes, ou même insérer du contenu dans un tableau existant de manière quazi transparente...
J'en conclu qu'il est préférable soit de créer un nouveau tableau en fermant le précédent, soit de rajouter une ligne quoi qu'il en soit qui sera vide, puis qui affichera le contenu ...
Avec ce code ça fonctionne, mais il faut quand même créer un nouveau tableau a l'intérieur du <div> :
Code : Tout sélectionner
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Masquer/Afficher au clic de souris</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script>
function afficheId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
document.getElementById(baliseId).style.visibility='visible';
document.getElementById(baliseId).style.display='block';
}
}
function cacheId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
document.getElementById(baliseId).style.visibility='hidden';
document.getElementById(baliseId).style.display='none';
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr><td><div class="clicTitre">
<a href="javascript:afficheId('contenu')">Nous contacter</a>
</div>
<div class="contenant" id="contenu">
<div class="clicCacher">
<a href="javascript:cacheId('contenu');">Fermer</a>
</div>
blabla
<table>
<tr><td>Test</td></tr>
<tr><td>Afficher / masquer</td></tr>
</table>
</div></td></tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
</body>
</html>
Alors je n'ai pas non plus tout testé, si vous voyez des choses qui peuvent améliorer et surtout contredire ce que je viens d'écrire, n'hésitez surtout pas !!!
