Javascript afficher/masquer

Résolu/Fermé

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 22 déc. 2009 à 10:53
ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 - 24 janv. 2010 à 19:06

Bonjour,
J'ai placé un javascript sur mon site qui fonctionne parfaitement.
Celui-ci me permet d'afficher/masquer des élements.
Le seul problème, c'est que celui fait remonter la page en haut quand je clique sur le lien qui active l'affichage/masquage des éléments. J'ai déjà vu des systèmes similaires qui ne font pas remonter la page en cliquant dessus.
Je sais pas si j'ai été très clair.
En fait c'est comme s'il y avait un ancre en début de page.
Le lien étant # l'affichage de la page reviens en haut (en début de page).

Par exemple sur cette page: http://arthezius.fr/projets.html , si on descends avec la scrollbar et qu'on clique sur Autre dans le menu de gauche, la page remonte et le sous menu apparaît (le tout sans recharger la page ce qui est le but.
Comment faire en sorte que la page ne remonte pas systématiquement ?

Mon code javascript:

function switchMenu(obj)
{
	var elIcon = document.getElementById(obj+"_icon");
	var el = document.getElementById(obj);
	if(el.style.display != "block")
	{ 
		el.style.display = "block"; 
		elIcon.src = icons["up"].src;
	}
	else
	{ 
		el.style.display = "none"; 
		elIcon.src = icons["down"].src;
	}
}

var icons = new Object();

function load()
{
	icon = new Image();
	icon.src = "images/fleche_haut.gif	";
	icons["up"] = icon;
	
	icon = new Image();
	icon.src = "images/fleche_bas.gif";
	icons["down"] = icon;	
}

Le lien Autre:

<a onclick="switchMenu('m_aut');" href="#" >Autre</a>
<div id="m_aut" style="display:none;border-left:3px solid #ccc;background:#fff;">
<p style="margin-left:6px;"><a href="fun.html">Fun</a></p>
<p style="margin-left:6px;"><a href="http://blog.arthezius.fr/">Blog</a></p>
<p style="margin-left:6px;"><a href="contact.html">Contact</a></p>
<p style="margin-left:6px;"><a href="about.html">&Agrave; propos</a></p>
</div>

Merci d'avance.

A voir également:

Afficher/masquer div javascript onclick
Telecharger javascript - Télécharger - Langages
Masquer conversation whatsapp - Guide
Afficher appdata - Guide
Comment masquer les amis sur facebook - Guide
Afficher mot de passe wifi android - Guide

20 réponses

Réponse 1 / 20

Mopra-L Messages postés 146 Date d'inscription lundi 29 juin 2009 Statut Membre Dernière intervention 23 mai 2012 6
22 déc. 2009 à 11:12

Bonjour,

Tu as plusieurs choix, pour ce genre de probleme.

Le premier serait d'enlever le href, tout simplement, mais je ne sais pas si ca fonctionne, par contre

Le 2eme serait de remplacer ton contents/droits/liens-hypertextes.php3 lien hypertexte par un bouton

Enfin, le 3eme serait de créer une "ancre" juste au niveau de ton lien, et, en cliquant dessus, on se retrouverait donc au même endroit (mais il y aura tout de même un decalage de la page)

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 janv. 2010 à 02:09

Je suis désolé de ne pas avoir répondu plus tôt mais en effet en enlevant le href="#" en en ajoutant un CSS style="cursor:pointer;" j'obtiens ce que je veux.
J'ai un lien simulé par le CSS et qui fais ce que je veux.

Je voudrai toutefois faire une modif sur le code javascript mais je n'ai pas de connaissance en ce domaine.
Je souhaiterai y rajouter un effet.
J'ai identifié précisément l'effet et je voudrai: Effect.BlindDown

Voici mon script actuel:

<script type="text/javascript">
function switchMenu(obj)
{
var el = document.getElementById(obj);
if(el.style.display != "block")
{ el.style.display = "block"; }
else
{ el.style.display = "none"; }
}
</script>

Réponse 2 / 20

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
16 janv. 2010 à 16:52

Ajoute return:false; à la fin de ta fonction switchMenu

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 janv. 2010 à 19:42

Mon code actuel fonctionne très bien.
Tu peux le voir ici en action: http://space.arthezius.fr/faq.html

Je voulais juste rajouter un effet de transition pour l'affichage du bloc.
J'ai trouvé l'effet que j'ai mentionné plus haut mais je ne sais pas comment l'adapter a mon code.

Réponse 3 / 20

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
16 janv. 2010 à 19:47

Ah ok, désolé, j'avais mal compris, j'essayais de répondre à "Le seul problème, c'est que celui fait remonter la page en haut quand je clique sur le lien qui active l'affichage/masquage des éléments. J'ai déjà vu des systèmes similaires qui ne font pas remonter la page en cliquant dessus.".

Tu peux utiliser une bibliothèque comme JQuery ou Script.aculo.us (basé sur Prototype).
J'ai déjà recherché une fonction pour ne pas avoir à sortir les librairies mais sans succès.

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
18 janv. 2010 à 06:05

Pas grave ^^

Je vais me renseigner sur ces librairies et je reviendrai ici au besoin.

Réponse 4 / 20

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
24 janv. 2010 à 00:35

J'ai un autre problème auquel je me suis intéressé suite à un autre topic.

Je reprends mon javascript:

<script type="text/javascript">
function switchMenu(obj)
{
var el = document.getElementById(obj);
if(el.style.display != "block")
{ el.style.display = "block"; }
else
{ el.style.display = "none"; }
}
</script>

Il s'applique sur des div auxquels j'ajoute un style par défaut:

style="display:none;"

Le problème est que si Javascript est désactivé, le bloc que pourra pas être afficher.
Sur le topic en question, la personne disais que la solution est que le bloc soit visible par défaut et que ce soit javascript qui le masque par défaut.
En gros le bloc est masqué par défaut via javascript et change ensuite également quand on clique grace a lui.
Ainsi, si javascript est désactivé, le bloc sera apparent ce qui est plus logique et pose moins de souci.
Comment donc, adapter ce script en ce sens ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 20

graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
24 janv. 2010 à 00:41

enfin un site sobre et joli ( a part l' image de l' espace, effet bouton en trop), ca fait plaisir un site qui pique pas les yeux

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
24 janv. 2010 à 00:45

Je demande pas de critiquer mon site mais une réponse à ma dernière question.

Réponse 6 / 20

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
24 janv. 2010 à 00:55

J'avais pas fait gaf à la réponse #8, désolé.
L'astuce est d'effectivement de masquer les bloques avec Javascript, au chargement de la page.
Entre <head> et </head> :

window.onload = function() {
    document.getElementById('prem').style.display = 'none';
    // ...
};

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
24 janv. 2010 à 01:21

Mon bloc en question s'appelle valid.

<h5><a onclick="switchMenu(\'valid\');" style="cursor:pointer;">Suivi des validations <img id="valid_icon" src="images/fleche_bas.gif" alt="" style="position:relative;top:-3px;"/></a></h5>
<div id="valid" style="display:block;">
...
</div>

Précédement, display était sur none.
Là, je l'ai donc modifié en block pour le rendre visible et ai ajouté la ligne que tu m'as donnée.
Si je comprends bien, je lui redonne le nom de bloc de la manière suivante:

window.onload = function() {
    document.getElementById('valid').style.display = 'none';
    // ...
};

Mon javascript complet devient donc:

<script type="text/javascript">
window.onload = function() {
    document.getElementById('valid').style.display = 'none';
    // ...
};
function switchMenu(obj)
{
	var elIcon = document.getElementById(obj+"_icon");
	var el = document.getElementById(obj);
	if(el.style.display != "block")
	{ 
		el.style.display = "block"; 
		elIcon.src = icons["up"].src;
	}
	else
	{ 
		el.style.display = "none"; 
		elIcon.src = icons["down"].src;
	}
}

var icons = new Object();

function load()
{
	icon = new Image();
	icon.src = "images/fleche_haut.gif";
	icons["up"] = icon;
	
	icon = new Image();
	icon.src = "images/fleche_bas.gif";
	icons["down"] = icon;	
}
</script>

(Ce javascript est plus long que le précédent car il comporte en plus un système pour afficher une flèche suivant que le bloc soit affiché ou non)

Bref avec ce dernier code ça ne fonctionne pas.

Réponse 7 / 20

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
24 janv. 2010 à 14:25

Tu parles de quelle page ?
Parce que je ne vois l'effet afficher/masquer que sur la FAQ ...

Réponse 8 / 20

ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 17
24 janv. 2010 à 14:37

Bonjour !

Pour que tes textes soient affiché par défault si javascript est désactivé et ... appliquent leur un display: block en css html .

Ensuite tu ajoutes javascript :

window.onload = function() {
    document.getElementById('prem').style.display = 'none';

Ce qui les cacheras par défault si javascript est ativé :) . enfin .. adpates le code Javascript a ton site ;) .

Réponse 9 / 20

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
24 janv. 2010 à 14:48

Les div sont par défaut en display:block; alors autant ne rien mettre.

Réponse 10 / 20

ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 17
24 janv. 2010 à 15:15

C'est certains mais c'est pour que ce soient plus clair vu que si je balance : "tu mets des none partout" avec un petit code js je ne suis sur a 40% qu'une personne qui survolle le message va se dire : "mais t'es bète ! il veux pas tout cacher" ^^ .

Voila, sinon si je peux me permettre moi même une remarque sur ton site, ca fait du bien un site sobre je confirme :) .

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
24 janv. 2010 à 15:17

Voila, sinon si je peux me permettre moi même une remarque sur ton site, ca fait du bien un site sobre je confirme :)

Merci, mais tu parles du design de mon blog ou du design de mon projet "Webnoze" ?

ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 17 > avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024
24 janv. 2010 à 15:33

Je parlais du site de arthezius ^^" . Les tients je ne les connais pas ...

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505 > ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015
24 janv. 2010 à 15:44

Ah ok :-/
C'est vrai que son site est bien, mais comme il ne demandait pas l'avis de son site, je me suis tu.
Et pour éviter toute confusion quand tu t'adresse à quelqu'un puis à une autre personne, précise à qui tu parles.
Moi je fais comme ça :

@personne1 : {message}
@personne2 : {message}

Ça évitera de me faire passer pour un c** ;)

@avion : Désolé. Mais je veux bien voir ton site du coup :)

Regarde dans mon profil.
Mais faudrait stopper les hors-sujet :)

Réponse 11 / 20

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
24 janv. 2010 à 15:16

J'utilise le même code sur le menu d'un autre site: http://arthezius.fr/accueil.html
J'ai fais ce que tu m'as dit et comme tu peux le voir, le menu CV n'est pas caché.

Réponse 12 / 20

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
24 janv. 2010 à 15:21

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

Forcément, tu n'as aucun div avec #prem ...
Essaye plutôt avec ça :

window.onload = function() {
    document.getElementById('m_cv').style.display = 'none';
    document.getElementById('m_tr').style.display = 'none';
    document.getElementById('m_web').style.display = 'none';
    document.getElementById('m_aut').style.display = 'none';
}

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
24 janv. 2010 à 15:27

J'ai fais la modif mais ça ne change rien.
Le bloc CV ne se cache pas.

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505 > arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016
24 janv. 2010 à 15:30

Retire le "display:block;" parce que il est prioritaire sur le Javascript.
Et tu peux aussi retirer le "display:none;" sur les autres div.

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475 > avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024
24 janv. 2010 à 15:32

En fait j'avais déjà fait l'essai mais rien a faire.

Réponse 13 / 20

ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 17
24 janv. 2010 à 15:22


window.onload = function() {
    document.getElementById('prem').style.display = 'none';
    document.getElementById('vist').style.display = 'none';
    document.getElementById('pi').style.display = 'none';
    document.getElementById('ex').style.display = 'none';
};

Enfin tu dois le mettre pour se que tu veux cacher par défaut ou créer une fonction qui va les lister en mee temps a l'intérieur du window.onload = function () { ... };

C'est le principe de toute manière moi je fait comme ça ...

ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 17
24 janv. 2010 à 15:57

@avion16 : Hors-sujet stop .

@arlthezuis : Désolé pour le contre-temps, mais a tu essayé ce code ?

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475 > ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015
24 janv. 2010 à 16:03

Mon dernier essai est en ligne: http://arthezius.fr/accueil.html

Le script complet:

<script type="text/javascript">
window.onload = function() {
    document.getElementById('m_cv').style.display = 'none';
    document.getElementById('m_tr').style.display = 'none';
    document.getElementById('m_web').style.display = 'none';
    document.getElementById('m_aut').style.display = 'none';
}

function switchMenu(obj)
{
	var elIcon = document.getElementById(obj+"_icon");
	var el = document.getElementById(obj);
	if(el.style.display != "block")
	{ 
		el.style.display = "block"; 
		elIcon.src = icons["up"].src;
	}
	else
	{ 
		el.style.display = "none"; 
		elIcon.src = icons["down"].src;
	}
}

var icons = new Object();

function load()
{
	icon = new Image();
	icon.src = "images/fleche_haut.gif	";
	icons["up"] = icon;
	
	icon = new Image();
	icon.src = "images/fleche_bas.gif";
	icons["down"] = icon;	
}

</script>

J'ai aussi enlevé les display du CSS.
Mais ça ne marche pas.

Réponse 14 / 20

ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 17
24 janv. 2010 à 16:32

As tu essayer de mettre une alert(); dans function () {}; histoire de voir si les commandes sont executé deja ? Ce serait deja un bon début parceque la ... Je trifouille et je patauge ..

EDIt : alert(" Je suis une alerte ");

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
24 janv. 2010 à 17:05

J'ai testé et rien ne s'affiche.

Voir ici: http://arthezius.fr/accueil.html

window.onload = function() {
	alert(" Je suis une alerte ");
    document.getElementById('m_cv').style.display = 'none';
    document.getElementById('m_tr').style.display = 'none';
    document.getElementById('m_web').style.display = 'none';
    document.getElementById('m_aut').style.display = 'none';
}

Réponse 15 / 20

ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 17
24 janv. 2010 à 18:09

J'ai trouvé ... testé et approuvé ...

en fait la fontion Onload est deja appelé dans ton body . Cette fonction ne pouvant pas etre appelé deux fois deux solutions s'offre a toi . Soit tu mets le contenu de ta fonction load dans "window.onload = function() {
" soit tu mets les : "document.getElementById('m_cv').style.display = 'none';" dans ta fonction Load() . La plus propre étant la première solution .

;)

Réponse 16 / 20

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
24 janv. 2010 à 18:22

J'ai changé ça comme ça:

<script type="text/javascript">
window.onload = function() {

var icons = new Object();


	icon = new Image();
	icon.src = "images/fleche_haut.gif	";
	icons["up"] = icon;
	
	icon = new Image();
	icon.src = "images/fleche_bas.gif";
	icons["down"] = icon;	

    document.getElementById('m_cv').style.display = 'none';
    document.getElementById('m_tr').style.display = 'none';
    document.getElementById('m_web').style.display = 'none';
    document.getElementById('m_aut').style.display = 'none';
}

function switchMenu(obj)
{
	var elIcon = document.getElementById(obj+"_icon");
	var el = document.getElementById(obj);
	if(el.style.display != "block")
	{ 
		el.style.display = "block"; 
		elIcon.src = icons["up"].src;
	}
	else
	{ 
		el.style.display = "none"; 
		elIcon.src = icons["down"].src;
	}
}

</script>

Et viré le onload de la balise <body>.
Les bloc sont bien caché mais les flèches ne changent plus.

Tu veux bien m'aider sur ce point ?

Réponse 17 / 20

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
24 janv. 2010 à 18:24

var icons = new Object();

	icon = new Image();
	icon.src = "images/fleche_haut.gif	";
	icons["up"] = icon;
	
	icon = new Image();
	icon.src = "images/fleche_bas.gif";
	icons["down"] = icon;

Ce n'est pas à mettre dans le onload.

Réponse 18 / 20

ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 17
24 janv. 2010 à 18:34

Oui c'est normal a mon avis car

var icons = new Object();

n'était pas dans la fonction Load avant, je regarde ça de plus près .

Réponse 19 / 20

ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 17
24 janv. 2010 à 18:46

Voila comment moi j'aurais et apparement ca fonctionne :) .

<script type="text/javascript">

var icons = new Object();

function Load() {
	icon = new Image();
	icon.src = "images/fleche_haut.gif	";
	icons["up"] = icon;
	
	icon = new Image();
	icon.src = "images/fleche_bas.gif";
	icons["down"] = icon;	
}

function switchMenu(obj)
{
	var elIcon = document.getElementById(obj+"_icon");
	var el = document.getElementById(obj);
	if(el.style.display != "block")
	{ 
		el.style.display = "block"; 
		elIcon.src = icons["up"].src;
	}
	else
	{ 
		el.style.display = "none"; 
		elIcon.src = icons["down"].src;
	}
}

window.onload = function() {
    document.getElementById('m_cv').style.display = 'none';
    document.getElementById('m_tr').style.display = 'none';
    document.getElementById('m_web').style.display = 'none';
    document.getElementById('m_aut').style.display = 'none';
    
    Load();
}

</script>

J'ai mit window.onload en bas parceque je trouve ça plus logique . Et pour bien faire tu pourrais même mettre ton code javascript dans un fichier a part avec <script type="text/javascript" src="lien.js"></script>

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
24 janv. 2010 à 19:01

Vi merci.
ça fonctionne au poil comme je voulais.
Je te remercie beaucoup, ça m'aide bien.

Réponse 20 / 20

ifisch Messages postés 188 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 21 octobre 2015 17
24 janv. 2010 à 19:06

Mais de rien ! Au plaisir :)

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

code pour cacher le numero orange cameroun

comment masquer son numero portable Orange