[Javascript] mon petit menu deroullant
nexus
-
nexus -
nexus -
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>
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
- Petit 2 ✓ - Forum Bureautique
- Canon quick menu - Télécharger - Utilitaires
- Trier du plus petit au plus grand excel - Guide
- Comment écrire mètre carré avec un m+2 expos? ✓ - Forum Windows
1 réponse
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) :
=> La fonction augmente la hauteur de menubar de 10 et si elle est inférieure à 400, la fonction se relance au bout de 100ms.
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.
<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>