Bannieres-Pub ! moteur de recherche de bannieres publicitaires et supports pub et régies. Vous cherchez de la pub à mettre sur votre site, bannières pub, popups, popunder et tous supports de publicité, il vous faut donc une régie publicitaire, une compagnie ou une plateforme d'affiliation, utilisez notre moteur et profitez d'un service de qualité, une interface privée est mise à votre disposition dès lors que vous utilisez le moteur.
Bannieres-Pub.com est également un site orienté vers la qualité, pour que la pub sur internet soit plus propre, plus élégante, plus agréable.

Cacher / Afficher un texte dans un DIV en Javascript
>> Cliquez ici pour dérouler l'article - Vous avez le Javascript activé bien sûr
(code complet utilisable en bas de page à copier/coller)

Et hop ! Vous l'avez reconnu ? C'est le même petit script utilisé sur la ShootBox. Rien de bien spectaculaire me direz vous, mais c'est quand même bien pratique pour gagner de la place à l'écran, en tout cas pour le visiteur qui a le javascript activé.

Alors comment ca marche ce truc ?

La base : Afficher / Cacher du texte
> La clé javascript réside dans l'élément document.getElementById()
> La clé Html réside dans le bon usage des "id" appliqués à vos " DIV"
> La clé CSS dansl'usage et la modification du style "display"

1) Partie HTML
On va donc utiliser un lien Html qui appelle la fonction Javascript (ci-après) appliqué à " id_1" :

<a href="#" onclick="javascript:visibilite('id_1'); return false;" >Le lien à cliquer </a>

Puis on ajoute le DIV (le conteneur) ayant l'id spécifié ci-dessus et on cache l'affichage avec le style display:none

<div id="id_1" style="display:none" > mon texte ici </div>

Pour l'Html c'est fini !!


2) Partie JavaScript
Voici le petit script qui fait toute la différence :)
<script language="javascript">
function visibilite(thingId) { var targetElement; targetElement = document.getElementById(thingId); if (targetElement.style.display == "none"){ targetElement.style.display = "" ; } else { targetElement.style.display = "none" ; } }
</script>

Notez en rouge la fonction qui permet de récupérer les "id" des calques (DIV) sur lesquels on va travailler, et en orange la fonction qui va modifier le comportement du DIV c'est à dire son Style.
Il ne vous reste plus qu'à copier/coller ce bout de code pour le tester, la partie Html dans le <body> bien sûr et le javascript dans l'entête.

Et là vous me direz.... oui mais !! Mais quoi ?! Oui c'est bien tant qu'on a le javascript activé !
Si on désactive le JavaScript on constate que le DIV se comporte comme indiqué par défaut, "dispaly:none", et ne laisse donc rien paraitre.


L'add-in
: S'assurer que tout s'affiche si le javascript est désactivé :)
> Rendre le DIV visible par défaut, on ne spécifie rien au calque ce qui revient au même.
> Javascript est activé ? Alors on peut "fermer" les DIV au chargement de la page.
> Enfin on fait de nouveau appel au script précédent.

1) Partie HTML
Un code Html simplifié : <div id="id_1" > mon texte ici </div>


2) Partie JavaScript
La fonction que l'on va ajouter pour initialiser nos DIV :
Vous noterez l'usage de la fonction ByTagName pour compter le nombre de DIV.
Par ailleurs iil est trés important d'avoir une suite logique pour les id des DIV car on va travailler par concaténation et incrément pour accéder à chaque DIV selon le nom de l'id, il est donc judicieux d'opter pour des noms tels que id_1, id_2, etc .. si vous avez plusieurs DIV à initialiser. Dans notre exemple nous utilisons donc les id id_x
function cacher(){
 var i;
 var x;
 var targetElement;
 mesDiv = document.getElementsByTagName("div"); // compte le nombre de div
 x=mesDiv.length+1;  // nous renvoit le nombre de div comptés
                     // on ajoute 1 car le 1er élément a 0 pour valeur  

	for (i = 1; i < x; i++) { // début de la boucle
	  targetElement = document.getElementById("id_" + i) ; //concaténation
	  targetElement.style.display = "none" ; // modification du style
	}// fin de la boucle 
}

window.onload = cacher; // On exécute la fonction au chargement de la page
Et voilà on a fait le tour. En espérant que tout cela est suffisamment clair je vous propose un code complet ci-dessous à copier/coller dans une nouvelle page Html ;)

<script language="javascript">
function visibilite(thingId) {
var targetElement;
targetElement = document.getElementById(thingId);

	if (targetElement.style.display == "none"){
	targetElement.style.display = "" ;
	} 
	else {
	targetElement.style.display = "none" ;
	}
}

function cacher(){
 var i;
 var x;
 var targetElement;
 mesDiv = document.getElementsByTagName("div");
 x=mesDiv.length+1;  

	for (i = 1; i < x; i++) { 
	  targetElement = document.getElementById("id_" + i) ;
	  targetElement.style.display = "none" ;
	 } 
}

window.onload = cacher;
</script>

<a href="" onclick="javascript:visibilite('id_1'); return false;" >Lien 1</a>
<div id="id_1">Mon texte 1</div><br>
<br>
<a href="" onclick="javascript:visibilite('id_2'); return false;" >Lien 2</a>
<div id="id_2">Mon texte 2</div>

pub régies et bannières
 
Email Mot de passe
 




info pub lexique

Bannieres-Pub.com

24 octobre 2017

A la recherche de
bannière publicitaire ?

Lancez votre
recherche


La Page d'Annonces
est ouverte !
C'est Gratuit alors allez-y ;)

Des questions ?
page de Contact


Perdu dans le
vocabulaire ?
le " lexique "


bonne pub ;)