[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
Menu démarrer windows 11 - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide

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 859
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 859
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

du tonnerre merci bcp

Discussions similaires

petit colis

comment écrire des petits chiffres ?

les entrées et les sortées

Dimensions L x l x H : comment lire ces infos ?

"Votre colis est arrivé sur son site de distribution", cad ?

Discussions similaires

Newsletters