[Résolu] Pb exécution fonction javascript

Question

evinrude

22 Feb 2015 à 08:51

j'ai bidouillé un menu vertical qui me donne entière satisfaction... Smiley biggrin

mais pas tout à fait quand même. Le menu "déroule" des div au click mais le scroll reste en haut de page Smiley fache

Peur de rien : je récupère une petite fonction en javascript pour scroller automatiquement en bas de page.
Impossible de l'associer au "onclick" des menus Smiley decu

je l'ai testé en insérant un bouton dans la page...
La fonction fonctionne (sic!) hors du menu mais pas dedans Smiley bawling

Help...

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Ecole Primaire Publique Fran&ccedil;ois Thomas</title>
<link href="images/icone.ico" rel="shortcut icon">

<style type="text/css">
*{
	margin:0;
	padding:0; 
}

td {
        vertical-align: top;
        background: Silver;
}

table {
        background: Silver;
}

#menu{
	width:500px;
	height:100%;
        background: sylver;
	text-align:center;
	vertical-align: middle;
	position: relative;
        margin-left: auto;
        margin-right: auto;
        font-size:20px;

}

.menu{
	height:52px;
	line-height:52px;
	width:500px;
	background-image:url(images/fond.png);
	text-align:center;
	vertical-align: middle;
	border: 1px solid grey;

}

.sousmenu{
	height:25px;
	line-height:25px;
	width:100%;
	padding:1px 0;
	background: Silver;
	vertical-align: middle;
	text-align:center;
	vertical-align: middle;

}
.menu a{
	display:block;
	width:100%;
	height:100%;
	font-family:arial,sans-serif;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
	vertical-align: middle;
	color:blue;
 

}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:blue;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	vertical-align: middle;
}

.menu a:hover {
	background:;
	color:yellow;


}

.sousmenu a:hover {
	background:#0186ba;
	color:yellow;


}
</style>

<script type="text/javascript">
function scrollbottom()
{
window.scrollTo(0,document.body.scrollHeight);
}

function afficheMenu(obj)
{

	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
	var Menu = document.getElementById(idMenu);


	if(sousMenu.style.display == "none"){
		sousMenu.style.display = "block";
                Menu.style.background='url(images/fond2.png)';

	}
	else{
		sousMenu.style.display = "none";
                Menu.style.background='url(images/fond.png)';

	}

}
</script>

</head>
<body>

<div id="menu">
<br><button onclick="scrollbottom()"> ici</button>
<!-- block menu partie 1 -->

<div class="menu" id="menu1" onclick="afficheMenu(this)">

     <a href="#"><button onclick="scrollbottom()"> ici</button>HOMONYMIES </a></div>

<div id="sousmenu1" style="display:none">
<table style="text-align: left; width: 500px;" border="0">
<tbody>
<tr>

        <td style="text-align: left; width: 50%;">
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o2.htm">son-sont</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o3.htm">&agrave;-a</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o4.htm">et-est-ai-es</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o5.htm">o&ugrave;-ou</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o6.htm">se-ce</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o7.htm">ses-ces</a></div>
        </td>

        <td style="text-align: left; width: 50%;">
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o8.htm">mes-mais</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o9.htm">c'est-s'est</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o10.htm">&eacute;-er-ez</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o11.htm">la-l'a-l'as</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/orthographe/o12.htm">qu'elle(s)-quelle(s)</a></div>
        </td>

</tr>
</table>
</div>

<!-- block menu partie 2 -->

<div class="menu" id="menu2" onclick="afficheMenu(this)">

     <a href="#">CALCUL MENTAL</a></div>

<div id="sousmenu2" style="display:none">
<table style="text-align: left; width: 500px;" border="0">
<tr>

        <td>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/somme1.htm">sommes 1</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/somme2.htm">sommes 2</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/somme3.htm">sommes 3</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/somme4.htm">sommes 4</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/somme5.htm">sommes 5</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/complement100.htm">compl&eacute;ments &agrave; 100</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/complement1000.htm">compl&eacute;ments &agrave; 1 000</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/complementunite.htm">compl&eacute;ments &agrave; l'unit&eacute;</a></div>
        </td>
        
        <td>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/differences2.htm">diff&eacute;rences 2</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/differences3.htm">diff&eacute;rences 3</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/differences4.htm">diff&eacute;rences 4</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/differences5.htm">diff&eacute;rences 5</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/doubles3.htm">doubles 3</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/doubles4.htm">doubles 4</a></div>
        </td>

        <td>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/moities1.htm">moiti&eacute;s 1</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/moities2.htm">moiti&eacute;s 2</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/moities3.htm">moiti&eacute;s 3</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/quotient.htm">quotients</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/produits.htm">produits</a></div>
        <div class="sousmenu"><a target="_blank" href="cycle3/math/x10.htm">par 10, par 100</a></div>
        </td>
</tr>
</tbody></table>
</div>

<!-- block menu partie 3 -->

<div class="menu" id="menu3" onclick="afficheMenu(this)">

     <a href="#">TITRE 3</a></div>

<div id="sousmenu3" style="display:none">
<table style="text-align: left; width: 500px;" border="0">
<tbody>
<tr>

        <td>
        <div class="sousmenu"><a href="#">Sous-Menu 3.1</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 3.2</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 3.3</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 3.4</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 3.5</a></div>
        </td>

</tr>
</tbody></table>
</div>

<!-- block menu partie 4 -->

<div class="menu" id="menu4" onclick="afficheMenu(this)">

     <a href="#">TITRE 4</a></div>

<div id="sousmenu4" style="display:none">
<table style="text-align: left; width: 500px;" border="0">
<tbody>
<tr>

        <td>
        <div class="sousmenu"><a href="#">Sous-Menu 4.1</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 4.2</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 4.3</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 4.4</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 4.5</a></div>
        </td>

</tbody></table>
</div>

<!-- block menu partie 4 -->
        
<div class="menu" id="menu5" onclick="afficheMenu(this) ">

     <a href="#">TITRE 5</a></div>

<div id="sousmenu5" style="display:none">
<table style="text-align: left; width: 500px;" border="0">
<tbody>
<tr>

        <td>
        <div class="sousmenu"><a href="#">Sous-Menu 4.1</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 4.2</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 4.3</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 4.4</a></div>
        <div class="sousmenu"><a href="#">Sous-Menu 4.5</a></div>
        </td>

</tbody></table>
</div>
<br>

</div></div>
</body>
</html>

evinrude

22 Feb 2015 à 10:12

En fait, mon problème c'est comment intégrer ma fonction
scrollbottom()
dans
<div class="menu" id="menu1" onclick="afficheMenu(this);" >

pour que le menu se déroule en étant visible à l'écran...

... j'ai peu d'espoir...
il faudrait qu'une "tronche" en javascript (une vraie !) m'entende et cela se fait rare Smiley cligne

evinrude

22 Feb 2015 à 10:14

non mais c'est vrai quoi ! les forum c'est plus ce que c'était...
désormais c'est plein de gens comme moi qui causent tout seul Smiley bawling

lddsoft

22 Feb 2015 à 10:52

Bonjour,

Y a pas grand'chose à changer à ton code. Je te mets pour le premier lien du menu :

<!-- block menu partie 1 -->
<div class="menu" id="menu1" onclick="afficheMenu(this);scrollbottom();">
	HOMONYMIES
</div>

Dans le style, place aussi pour la classe ".menu" un petit "cursor:pointer;" Smiley cligne

Attention, toutefois : question accessibilité, ce n'est pas le top!
Modifié par lddsoft (22 Feb 2015 - 11:03)

evinrude

22 Feb 2015 à 11:13

Merci de ta réponse, mais non ça marche pas,
onclick (de ce que j'ai lu...) n'accepte pas d'exécuter 2 fonctions (mais ça reste à prouver, en tout cas ça marche pas ; chez moi...)

en définitive, je viens de prendre le problème à l'envers : empécher la page de scroller automatiquement au top après chaque ouverture...

et là... YOUPI ! c'est href="#" le responsable (ben oui on en apprend tous les jours Smiley smile

du coup je complète
onclick="afficheMenu(this);
par
onclick="afficheMenu(this);return false;

et j'évite de me pourrir le weekend Smiley biggrin

MERCI

Sujet clos