Partage

Modification du Dom, ou pas !

Sujet résolu

8 mars 2010 à 21:28:19

Salutation
Bon, voila, j'ai besoin d'un peu d'aide car une de mes fonction à un comportement bizard sur un attribut selon si il a été donné dans le html ou via le css.

explication concrete :
Il s'agit de faire apparaitre/disparaitre un un bloc en cliquant sur un lien... banal

donc j'ai un lien qui déclanche la fonction, et une cible qui disparait ou apparait en modifiant l'attribut display.

<a href="javascript:visibilite('cible1')">lien</a>
<!-- la cible1 disparait et apparait correctement -->
<div id="cible1" style="display:none;">blabla</div>

<a href="javascript:visibilite('cible2')">lien</a>
<!-- rien ne se passe pour la cible 2 -->
<div id="cible2" class="off">re blabla</div>

#content .off
	{
		display:none;
	}

function visibilite(thingId) {
	var targetElement;
	targetElement = document.getElementById(thingId) ;
	if (targetElement.style.display == "none") {
		targetElement.style.display = "" ;
	}
	else {
		targetElement.style.display = "none" ;
	}
}

Petit indice... en suivant le changement de la balise avec firebug. je constate qu'il rajoute et enlève style="display:none;" mais il ne touche pas propriété venant du css.

quelqu'un vois a quoi c'est du ?
Merci d'avance.

Jeny30

8 mars 2010 à 21:34:58

function visibilite(thingId) {
	var targetElement;
	targetElement = document.getElementById(thingId) ;
	if (targetElement.style.display == "none") {
		targetElement.style.display = "block" ;
	}
	else {
		targetElement.style.display = "none" ;
	}
}

Tu avait oublier de mettre block

Si tu ne précise pas (écrase en quelque sorte) la propriété css que tu veux modifier, sa ne marchera pas...

GeoffreyRV

8 mars 2010 à 21:37:37

function visibilite(thingId) {
/*	var targetElement;
	targetElement = document.getElementById(thingId) ;

	autant mettre sinon var targetElement = document.getElementById(thingId) ;
*/
	document.getElementById(thingId).style.display = (document.getElementById(thingId) .style.display == 'none') ? 'block' : 'none';
         return '#'+thingId;
}

Jeny30

8 mars 2010 à 21:38:53

C'est bien beau le ternaire mais tu ne lui explique rien !

Cobs

8 mars 2010 à 21:43:55

no souci, je sais lire le ternaire, enfin... juste assez pour voir que si je fait un == au lieu d'une affectation = du display je suis pas sur que ça marche.

Jeny30

8 mars 2010 à 21:44:56

Bien envoyer ^^.
Tu a lu ma solution au moins ?

xavierm02

8 mars 2010 à 21:47:02

T'as mis 2 = et en plus tu récupères deux fois l'élément alors qu'il faudrait le stocker dans une variable...
Le code de l'éléphant est mieux. Sauf qu'il sait pas qu'on peut déclarer et remplir une variable en même temps :-°

Jeny30

8 mars 2010 à 21:49:58

J'ai juste régler le problème de code, pas d'éthique

GeoffreyRV

8 mars 2010 à 21:50:58

Citation : Jeny30

Bien envoyer ^^.

enflure!

Citation : xavierm02

T'as mis 2 = et en plus tu récupères deux fois l'élément alors qu'il faudrait le stocker dans une variable...

Faute de frappe!

Citation : xavierm02

Le code de l'éléphant est mieux. Sauf qu'il sait pas qu'on peut déclarer et remplir une variable en même temps

Bien envoyé!

Cobs

8 mars 2010 à 21:53:03

Jeny30, ça fonctionne, mais sous réserve.
J'ai besoin de 2 clics pour faire apparaitre la div.

selon firebug ça donne un truc de ce genre

// aucun clic
#content .off {
display:none;
}

//1er clic
element.style {
display:none;
}
#content .off {
display:none;
}

//2eme clic, la div apparait

element.style {
display:block;
}
#content .off {
display:none;
}

Jeny30

8 mars 2010 à 21:53:35

Citation : IgiX

Citation : xavierm02

Le code de l'éléphant est mieux. Sauf qu'il sait pas qu'on peut déclarer et remplir une variable en même temps

Bien envoyé!

Citation : Jeny30

J'ai juste régler le problème de code, pas d'éthique

Edite

function visibilite(thingId)
{
	var targetElement = document.getElementById(thingId) ;
	if (targetElement.style.display != "block")
		targetElement.style.display = "block" ;
	else
		targetElement.style.display = "none" ;
}

GeoffreyRV

8 mars 2010 à 21:55:18

tu veux qu'en ca de 1clic on masque?
en cas de 2clic on affiche?

Cobs

8 mars 2010 à 21:58:30

IgiX -> ma div est masqué par défaut.

le problème actuel est que :
- 1er clic : rien ne se passe
- 2eme clic : la div apparait

ensuite, tout fonctionne correctement, il sufit d'un seul clic pour masquer/afficher.

Jeny30

8 mars 2010 à 22:01:40

Citation : Jeny30

function visibilite(thingId)
{
	var targetElement = document.getElementById(thingId) ;
	if (targetElement.style.display != "block")
		targetElement.style.display = "block" ;
	else
		targetElement.style.display = "none" ;
}

GeoffreyRV

8 mars 2010 à 22:03:20

<script>
var thingId_visible = 'cible1';
function visibilite(thingId)
{
	thingId_visible = thingId;
	document.getElementById(thingId).style.display = (document.getElementById(thingId) .style.display == 'none') ? 'block' : 'none';
}
function hide_visible()
{
	document.getElementById(thingId_visible).style.display = 'none';
}
</script>

<a href="javascript:hide_visible();" ondblclick="visibilite('cible1');">lien</a>
<!-- la cible1 disparait et apparait correctement -->
<div id="cible1" style="display:none;">blabla</div>

<a href="javascript:hide_visible();" ondblclick="visibilite('cible2');">lien</a>
<!-- rien ne se passe pour la cible 2 -->
<div id="cible2" class="off">re blabla</div>

<script>
function visibilite(thingId)
{
	document.getElementById(thingId).style.display = (document.getElementById(thingId).style.display != 'block') ? 'block' : 'none';
}
</script>

<a href="javascript:visibilite('cible1')" >lien</a>
<!-- la cible1 disparait et apparait correctement -->
<div id="cible1" style="display:none;">blabla</div>

<a href="javascript:visibilite('cible2')">lien</a>
<!-- rien ne se passe pour la cible 2 -->
<div id="cible2" class="off">re blabla</div>

Cobs

8 mars 2010 à 22:04:31

Bien joué jeny, ca marche, juste un peu honteux de pas l'avoir trouver tout seul celui là :lol:

GeoffreyRV

8 mars 2010 à 22:06:54

Mince, j'me fais chambrer, et j'ne résolve pas le problème :'(

Jeny30

8 mars 2010 à 22:07:40

ya d'autre topic

Cobs

8 mars 2010 à 22:08:11

Bon, allez, pour te faire plaisir, je remplace le if/else par un ternaire.

GeoffreyRV

8 mars 2010 à 22:09:19

Remplace ta fonction par ma LIGNE

Jeny30

8 mars 2010 à 22:11:14

Mutinerie !

GeoffreyRV

8 mars 2010 à 22:13:48

<troll ternaire=" :pirate:

"/>

Cobs

8 mars 2010 à 22:13:49

function visibilite(thingId)
{
	var targetElement = document.getElementById(thingId) ;
	targetElement.style.display = (targetElement.style.display != "block")?"block":"none";
}

je garde la variable car j'aime pas avoir une ligne qui sort de l'écran

heureux quand même ?

xavierm02

8 mars 2010 à 22:16:34

Mets des {} pour les blocs...
Deux codes potables :

function visibilite(id) {
	var element = document.getElementById(id);
	if (element.style.display === 'none') {
		element.style.display = 'block';
	} else {
		element.style.display = 'none';
	}
}

function visibilite(id) {
	var element = document.getElementById(id);
	element.style.display = (element.style.display === 'none') ? 'block' : 'none';
}

L'indentation, les ' à la place des " et les parenthèses pour la condition de l'opérateur ternaire, c'est mon style.
Par contre, le === à la place du == et la mise en variable de element, c'est obligatoire (pour avoir un code potable).

@Cobs : Tupeux faire comme ça aussi mais mets !== à la place de !=.

Jeny30

8 mars 2010 à 22:23:37

Ehhh ! J'indente comme je veux !

GeoffreyRV

8 mars 2010 à 22:27:05

avant, j'indentais comme xavierm02 mais, je me met à respecter une norme, et c'est plus claire sous la forme (j'ai pris le premiers code sous les yeux, j'ai plus moche!)

<?php
class My_PDO extends PDO
{
	private $hote;
	private $database;
	private $login;
	private $password;
	
	private $flux;
	
	
	public function __construct ( $h, $db, $log, $pass)
	{
		$this->hote 	= $h;
		$this->database = $db;
		$this->login 	= $log;
		$this->password = $pass;
	}
	
	public function connect()
	{
		try
		{
			$this->flux = parent::__construct ( 'mysql:host='.$this->hote.';dbname='.$this->database, $this->login, $this->password );
		}
		catch ( Exception $erreur )
		{
			return 'erreur : ' . $erreur->getMessage() .' <br />Code : '.$erreur->getCode();
		}
		return true;
	}
}

xavierm02

9 mars 2010 à 5:31:03

Citation : Jeny30

Ehhh ! J'indente comme je veux !

Oui mais tu dois utiliser les {} et le ===.
Et il n'y a pas vraiment de norme...

GeoffreyRV

9 mars 2010 à 7:31:19

Citation : IgiX

[...] je me met à respecter une norme

une pas la!

xavierm02

9 mars 2010 à 7:33:12

Mouai...
Mais qu'est-ce que tu fous ici à cette heure matinale ?
T'as rien à foutre de ta vie :-°

? (tu as interdiction de me retourner la question)

GeoffreyRV

9 mars 2010 à 7:37:54

Bah la même chose que toi!