Javascript afficher/masquer

Résolu

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
ifisch Messages postés 188 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

A voir également:

Javascript afficher texte onclick
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide
Texte barré whatsapp - Guide
Telecharger javascript - Télécharger - Langages

20 réponses

Réponse 1 / 20

Mopra-L Messages postés 146 Date d'inscription Statut Membre Dernière intervention 6

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 Statut Membre Dernière intervention 475

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention 475

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 Statut Membre Dernière intervention 475

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 Statut Contributeur Dernière intervention 1 975

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 Statut Membre Dernière intervention 475

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

Réponse 6 / 20

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention 475

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention 17

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention 17

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention 17 > avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention

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

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507 > ifisch Messages postés 188 Date d'inscription Statut Membre Dernière intervention

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** ;)

ifisch Messages postés 188 Date d'inscription Statut Membre Dernière intervention 17 > avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention

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

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507 > ifisch Messages postés 188 Date d'inscription Statut Membre Dernière intervention

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

Réponse 11 / 20

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention 475

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

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507 > arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 475 > avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention

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 Statut Membre Dernière intervention 17


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 Statut Membre Dernière intervention 17

@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 Statut Membre Dernière intervention 475 > ifisch Messages postés 188 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 17

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 Statut Membre Dernière intervention 475

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 Statut Membre Dernière intervention 17

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 Statut Membre Dernière intervention 475

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 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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 Statut Membre Dernière intervention 17

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 Statut Membre Dernière intervention 17

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 Statut Membre Dernière intervention 475

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 Statut Membre Dernière intervention 17

Mais de rien ! Au plaisir :)

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?

Excel formule : savoir si une cellule contient partie texte

Votre réponse

Discussions similaires