Disparition de div

par **Stef** » 26 nov. 2010, 23:31

Je voulais juste signaler la pseudo classe css :target, qui permet de s'affranchir de javascript, mais n'est hélas pas prise en charge par quelques navigateurs...

Ex.:

<style type="text/css">
#zeudiv {
    display: none;
}
#zeudiv:target { display: block; }
</style>
<p><a href="#zeudiv" title="Afficher zeu div masqué">Target c'est sympa</a></p>

par **Cry13** » 15 nov. 2010, 19:22

Voila ce que j'ai trouver :

Code : Tout sélectionner

window.onload = function()
{
	for(var i=1; i<32; i++)
	{
		var id = 'tableau' + i;
		document.getElementById(id).style.display = "none";
	}
}

function switchDiv(n)
{
    // Identifiant du bloc à traiter
    var id = 'tableau' + n;
    // Récupération du statut courant
    var sc = document.getElementById(id).style.display;
    // Définition du nouveau statut
    var ns = (sc == 'block') ? 'none' : 'block';
	//on cache tout sauf le séléctioné 
	for(var i=1; i<32; i++)
	{
		var id2 = 'tableau' + i;
		if (id != id2)
		document.getElementById(id2).style.display = "none";
		document.getElementById(id).style.display = ns;
	}
}

Si vous trouver quelques chose de mieux ou à simplifié n'hésitez pas

++

par **Cry13** » 15 nov. 2010, 18:43

Merci jojo,

mais forcément si je cache tout je cache aussi la div sélectionné donc ça ne marche pas...

par **jojolapine** » 03 nov. 2010, 20:23

function hideAllDivs(){
   for(var i=1; i<32; i++)
   {
      var id = 'tableau' + i;
      document.getElementById(id).style.display = "none";
   }

}

function switchDiv(n)
{
    // Identifiant du bloc à traiter
    var id = 'tableau' + n;
    // Récupération du statut courant
    var sc = document.getElementById(id).style.display;
    // Définition du nouveau statut
    var ns = (sc == 'block') ? 'none' : 'block';
    // on cache tout
    hideAllDivs();
    // Application du nouveau statut
    document.getElementById(id).style.display = ns;
}

window.onload = function()
{
hideAllDivs();
}

Pas testé mais sur le principe ça devrait le faire

par **Cry13** » 03 nov. 2010, 20:07

ça fais quelques jours qu'il est résolu

par tes soins bien sur.

Par contre ton nouveau code ne permet pas le switch entre deux div une fois qu'une div est afficher je ne peut la faire disparaitre qu'en cliquant sur son propre bouton, comment puis-je procédé pour quel disparaisse aussi si je clic sur une autre ?

par **Cyrano** » 03 nov. 2010, 20:00

Ben voilà, je ne suis pas amateur des Simpsons, mais ton code est correct. Il te reste plus qu'à marquer le sujet comme résolu (En haut à droite de la réponse qui a résolu la question)

par **Cry13** » 03 nov. 2010, 19:56

Ouh OUh (le ou ou de homer simpson)

Code : Tout sélectionner

window.onload = function()
{
	for(var i=1; i<32; i++)
	{
		var id = 'tableau' + i;
		document.getElementById(id).style.display = "none";
	}
}

ça marche ! Merki

Par contre au niveau de faire disparaitre les div à l'apparition d'un autre avec ton new code tu peut m'aiguillé stp ?

ps : oui je sait 32 tableau à faire et j'en suis qu'au 14em... pfffiou

par **Cyrano** » 03 nov. 2010, 19:36

Ben oui mais regarde ton code attentivement :

window.onload = function()
{
    i = i+1;
    var id = 'tableau' + i;
    document.getElementById(id).style.display = "none";
}

Ta variable i n'est jamais initialisée, ce qui revient à faire i = null + 1, ce qui n'a pas de sens. Et du coup les lignes suivantes n'ont pas davantage de sens et rien ne se passe.

L'idée est là, mais il te manque une boucle avec une valeur de départ et une valeur limite. Que ce soit du JS, du PHP ou n'importe quel langage, le principe reste strictement le même. Je te laisse un peu méditer là dessus, continue sur cette lancée.

par **Cry13** » 03 nov. 2010, 19:08

Re et merci, ta function marche sauf un détaille lorsque je clique pour faire apparaitre une autre div, la précédente ne disparait pas.

Du coup voilà ce que j'ai aujourd'hui :

Code : Tout sélectionner

<!--
window.onload = function () { 
	document.getElementById('tableau1').style.display = "none"; 
	document.getElementById('tableau2').style.display = "none"; 
	document.getElementById('tableau3').style.display = "none"; 
	document.getElementById('tableau4').style.display = "none"; 
	document.getElementById('tableau5').style.display = "none"; 
	document.getElementById('tableau6').style.display = "none"; 
	document.getElementById('tableau7').style.display = "none"; 
	document.getElementById('tableau8').style.display = "none"; 
	document.getElementById('tableau9').style.display = "none"; 
	document.getElementById('tableau10').style.display = "none"; 
	document.getElementById('tableau11').style.display = "none"; 
	document.getElementById('tableau12').style.display = "none"; 
	document.getElementById('tableau13').style.display = "none"; 
	document.getElementById('tableau14').style.display = "none"; 
	}

function switchDiv(n)
{
    // Identifiant du bloc à traiter
    var id = 'tableau' + n;
    // Récupération du statut courant
    var sc = document.getElementById(id).style.display;
    // Définition du nouveau statut
    var ns = (sc == 'block') ? 'none' : 'block';
    // Application du nouveau statut
    document.getElementById(id).style.display = ns;
}
-->

Pour l'amélioré encore j'ai tenté :

Code : Tout sélectionner

window.onload = function(){
i = i+1;
var id = 'tableau' + i;
document.getElementById(id).style.display = "none";
}

Mais ca marche pas. lool c'est le début du js pour moi hein je trifouille

par **Cyrano** » 30 oct. 2010, 01:22

Allez, j'ajoute que tu peux même avantageusement simplifier ta fonction de switchDiv :

function switchDiv(n)
{
    // Identifiant du bloc à traiter
    var id = 'produits' + n;
    // Récupération du statut courant
    var sc = document.getElementById(id).style.display;
    // Définition du nouveau statut
    var ns = (sc == 'block') ? 'none' : 'block';
    // Application du nouveau statut
    document.getElementById(id).style.display = ns;
}

Essaye ça, normalement ça devrait fonctionner correctement quel que soit le nombre de blocs à utiliser.

par **Cyrano** » 30 oct. 2010, 01:07

Exactement.

par **Cry13** » 30 oct. 2010, 01:04

Merci encore, mais je te rassure ma page est terminer c'est juste que je ne vais pas vous copier un pavé je ne met que le plus important,

et j'ai réglé mon souci avec :

Code : Tout sélectionner

window.onload = function () { 
	document.getElementById('produits1').style.display = "none";
	document.getElementById('produits2').style.display = "none";
	}

C'est ce à quoi tu penser ?

par **Cyrano** » 30 oct. 2010, 00:59

Tu pars à l'envers : commence par préparer un code qui affiche tout, et ensuite seulement masque le superflu avec JavaScript. De cette manière, en désactivant le JavaScript, ton site reste navigable et le contenu est toujours là, même si c'est moins heureux visuellement.

Donc, crée tes tableaux avec leur contenu, ensuite, utilise un gestionnaire d'évènement body.onload pour masquer les éléments à ne faire apparaitre que sous condition, le survol d'un élément par la souris par exemple.

par **Cry13** » 30 oct. 2010, 00:55

Alors voilà :

Je me suis décidé à utilisé js j'ai donc mes bouton :

<li><a title="nom" onclick="switchDiv(1)" href="#produits1"><img width="180" height="40" alt="nom" src="img/produits/btn_nom.png"/></a></li>
<li><a title="nom" onclick="switchDiv(2)"  href="#produits2"><img width="180" height="40" alt="nom" src="img/produits/btn_nom.png"/></a></li>

Ainsi que mes tableau :

<table id="produits1" class="produits" width="880" border="0" style="display:none;"></table>
<table id="produits2" class="produits" width="880" border="0" style="display:none;"></table>

et mon js :

Code : Tout sélectionner

<!--
function switchDiv(n) {
   var id;
   var hide = 0;
   switch(n) {
      case 1 : id = "produits1"; break;
      case 2 : id = "produits2"; break;
      }
   if ( document.getElementById(id).style.display == "block" ) hide = 1;
   document.getElementById('produits1').style.display = "none";
   document.getElementById('produits2').style.display = "none";
   if ( hide != 1 ) document.getElementById(id).style.display = "block";
   }
-->

Hors, lorsque je désactive JavaScript, je n'es pas accès au information... Un tchio coup de main ?

par **Cry13** » 29 oct. 2010, 15:31

yeah je vois tout à fais ce que u veux dire

Et c'est d'autant plus important pour un bon référencement.

Disparition de div

Répondre

Étendre la vue Revue du sujet : Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div

Re: Disparition de div