[Javascript] mon petit menu deroullant

Fermé

nexus - 9 mai 2009 à 10:02
nexus - 10 mai 2009 à 12:26

Bonjour,

je suis en train de coder un menu déroullant ( qui deroulle vraiment )
le principe et simple: le div a dérouler pointe sur une fonction qui incremente un compteur, celui ci est converti en string et modifie la largeur/hauteur , le tout dans un boucle

le code doit marcher puisque le menu s'affiche, mais il ne se deroulle pas, j'ai ajouté une fonction qui stoppe l'exécution pendant un laps de temps mais rien n'y fait le menu s'affiche directement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="position.css" rel="stylesheet" type="text/css" />

<body>

<div class="bigbox">
<script type='text/javascript'>

// JavaScript Document
var objet;
function pausecomp(millis)
{
var date = new Date();
var curDate = null;

do { curDate = new Date(); }
while(curDate-date < millis);
}

function extend(objet,taillemax)
{
var regexp = new RegExp("[0-9]{3}");
var taille = "300px";
var i = 300;
taillemax = 400;

while(1)
{
document.getElementById("menubar").style.height = taille;

if (i == taillemax)
{break;}

i+=10 ;
var tailleString = i.toString();
var taille = taille.replace(regexp,tailleString);

pausecomp(10);
}

}
</script>

<div class="menubar" Id="menubar" onmouseover="extend()">menubar</div>
<div class="contenu" id="contenu">content</div>

</div>

</body>
</html>

A voir également:

[Javascript] mon petit menu deroullant
Menu déroulant excel - Guide
Telecharger javascript - Télécharger - Langages
Windows 11 menu démarrer classique - Guide
Réinitialiser menu démarrer windows 10 - Guide
Canon quick menu - Télécharger - Utilitaires

1 réponse

Réponse 1 / 1

bizu53 Messages postés 1274 Date d'inscription samedi 30 août 2008 Statut Membre Dernière intervention 21 juin 2015 861
9 mai 2009 à 14:51

Ohlala la prise de tête pour rien avec une while() et des Date pour un chrono... utilise la fonction setTimeout() elle est faite pour ça.
Avec un code du genre (je te l'improvise, pas sûr qu'il fonctionne brut comme ça) :

function agrandirMenu() {
   document.getElementById("menubar").style.height += 10;
   if(document.getElementById("menubar").style.height < 400) {
      setTimeout("agrandirMenu();", 100);
   }
}

=> La fonction augmente la hauteur de menubar de 10 et si elle est inférieure à 400, la fonction se relance au bout de 100ms.

bizu53 Messages postés 1274 Date d'inscription samedi 30 août 2008 Statut Membre Dernière intervention 21 juin 2015 861
9 mai 2009 à 15:27

Comme je m'ennuyais j'ai rectifié ma fonction pour qu'elle fonctionne bien. (D'ailleurs au passage pas besoin de regexp dans un cas si simple.)

<html>
<head>
<script language="JavaScript">
function agrandirMenu() {
	var heightpx = document.getElementById("menubar").style.height;
	var height = parseInt(heightpx.substring(0,heightpx.length-2));
	height += 20;
	document.getElementById("menubar").style.height = height+"px";

	if(height < 400) {
		setTimeout("agrandirMenu()",10);
	}
}
</script>
</head>

<body>
<div id="menubar" style="height:20px; width:100px; background:blue;" onmouseover="agrandirMenu();" onmouseout="this.style.height='20px';"></div>
</body>
</html>

nexus > bizu53 Messages postés 1274 Date d'inscription samedi 30 août 2008 Statut Membre Dernière intervention 21 juin 2015
10 mai 2009 à 12:26

Discussions similaires