High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Compter les occurences d'un tag en JS

Dernière réponse le 23 avr 2009 à 15:50:07 Judes-Emile Bornes IV, le 23 avr 2009 à 01:45:04 
 Signaler ce message aux modérateurs

Bonjour,
J'essaye de compter le nombre de li d'une liste de menu qui sera agrandie par la proprio du site que je réalise, ceci dans le but de calculer la taille en hauteur du container de menu (ul). (en effet la fonction auto n'est pas applicable ici car la hauteur est modifiée en temps réelle par un jquery hoverintent (pour ce qui ne connaissent pas c'est un JS de menu déroulants dynamiques).
voici mon code il ne marche pas! HELP please 

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("#menu1").hoverIntent(makeTall,makeShort);
			}); // close document.ready
		$SEARCHLI = document.li.ul.getElementsByTagName("li");
		for (i = 0; i <= $SEARCHLI.length; i++) {
 		$NUMBEROFLI = i;
		}
		$MENUHEIGHT = ($NUMBEROFLI*30);
		function makeTall(){ $("#menu li ul").animate({"height":$MENUHEIGHT},200);}
		function makeShort(){ $("#menu li ul").animate({"height":0},200);}
</script>
Configuration: Mac OS X
Firefox 3.0.8

Meilleures réponses pour « compter les occurences d'un tag en JS » dans :
[MSN] Compte MSN Messenger piraté / Piratage de compte Hotmail VoirPiratage de compte Vous vous êtes fait pirater votre compte MSN Messenger ou bien votre compte hotmail a été hacké et vous souhaitez absolument le récupérer ! Nettoyage de l'ordinateur Compte inaccessible - Contact du support MSN Attention...
[Outlook Express] Relever/consulter boite hotmail ou compte MSN VoirIl est possible de relever ses messages sur un compte Hotmail ou MSN à l'aide du client de messagerie Outlook Express 5 ou supérieur. Attention: depuis le premier trimestre 2005 cette option est payante ! Configuration d'Outlook Express * Dans le...
Logiciels de gestion et comptabilité VoirLogiciels de gestion et comptabilité De nombreux logiciels sont disponibles sur le marché pour vous faciliter la gestion de votre entreprise, notamment dans le domaine de l'architecture et du bâtiment. Comptabilité, facturation, gestion...
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - Les variables VoirLe concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Javascript - L'objet Date VoirLes particularités de l'objet Date L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on peut toujours utiliser. La...
Posez votre question Répondre

1

Judes-Emile Bornes IV, le 23 avr 2009 à 02:33:04

$LICOUNT = document.li.ul.getElementsByTagName("li").length;
$MENUHEIGHT = ($LICOUNT*30);

avec ça ça marche

merci quand même

   
Répondre à Judes-Emile Bornes IV

2

Judes-Emile Bornes IV, le 23 avr 2009 à 03:31:23

Heu en fait non ça marche pas... désolé je me suis trompé. cette fonction ne stoppait plus la fonction suivante, mais j'avais remplacé la réf $MENUHEIGHT par un chiffre c'est pourquoi je pensais que ça marchait

   
Répondre à Judes-Emile Bornes IV

3

Judes-Emile Bornes IV, le 23 avr 2009 à 04:12:27

Bon visiblement ça vient pas de cette fonction, mais plutot de JQuery qui n'accepte pas de variable pour modifier la hauteur css... bon à savoir mais méga frustrant. Je suis bon pour une feature request. 

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("#menu1").hoverIntent(makeTall,makeShort);
		var LImenu = document.getElementById("menu1");
		var LIs = LImenu.getElementsByTagName("li");
		var LIsCOUNT = LIs.length;
		$MENUHEIGHT = (LIsCOUNT*30);
		alert ("Le menu aura la hauteur suivante : " + $MENUHEIGHT + "px");
		function makeTall(){ $("#menu li ul").animate({"height":90},100);}
		function makeShort(){ $("#menu li ul").animate({"height":0},100);}
		}); // close document.ready
</script>

   
Répondre à Judes-Emile Bornes IV

4

 Judes-Emile Bornes IV, le 23 avr 2009 à 15:50:07

Bon personne pour m'aider sur ce topic mais j'ai pu trouver la soluce pour ceux que ça intéresse voici le code complet:

HTML: 

<!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>Le journal d'Audrey Arbion</title>
<link href="media/Mandala_Audrey.ico" rel="shortcut icon" type="image/gif" />
<link href="AA.css" rel="stylesheet" type="text/css" />
<!-- script du menu -->
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("#menu1").hoverIntent(makeTall,makeShort);
		var LImenu = document.getElementById("menu1");
		var LIs = LImenu.getElementsByTagName("li");
		var LIsCOUNT = LIs.length;
		$MENUHEIGHT = (LIsCOUNT*30);
		function makeTall(){ $("#menu li ul").animate({"height":$MENUHEIGHT},100);}
		function makeShort(){ $("#menu li ul").animate({"height":0},100);}
		//li with fade class
   		$("li.fade").hover(function(){$(this).fadeOut(50);$(this).fadeIn(600);});

		}); // close document.ready
</script>
</head>

<body>
<div id="container">
<div id="banplusnav">
<ul id="menu">
	<li><a href="intro.html" target="subframe">Introduction</a></li>
    <li id="menu1"><a href="#">Le journal d'Audrey</a>
    <ul>
    <li class="fade"><a href="02-09-2005.html" target="subframe">02-09-2005</a></li>
<li class="fade"><a href="24-09-2005.html" target="subframe">24-09-2005</a></li><li class="fade"><a href="03-11-2005.html" target="subframe">03-11-2005</a></li></ul>
    </li>
    <li><a href="contact.html" target="subframe">Contact</a></li>
    <li id="spacerli">&nbsp;</li>
    <li><a href="administration-login.php" target="subframe">administration (acc&egrave;s r&eacute;serv&eacute;)</a></li>
</ul>
</div>
<div id="iframediv"><iframe scrolling="auto" frameborder="0" src="intro.html" width="870" height="100%" name="subframe" id="subframe"></iframe></div>
</div>
<div id="containerbas">
</div>
</body>
</html>


CSS: 
body {
	background-color: #FFF;
	margin: 0px;
}
#container {
	background-attachment: fixed;
	background-image: url(media/fondrepeat-y.gif);
	background-repeat: repeat-y;
	background-position: center top;
	width: 880px;
	margin-right: auto;
	margin-left: auto;
}
#containerbas {
	background-image: url(media/fondbas.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 5px;
	width: 880px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
#banplusnav  {
	height: 130px;
	width: 870px;
	margin-top: 0px;
	margin-left: 5px;
	overflow: visible;
	position: relative;
	background-image: url(media/banniere.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
#menu   {
	background-color: #360;
	display: block;
	height: 30px;
	width: 870px;
	margin-top: 100px;
	margin-right: 0px;
	margin-left: 0px;
	position: absolute;
	padding: 0px;
	margin-bottom: 0px;
}
#menu li   {
	display: inline;
	list-style-type: none;
	margin-left: 0px;
	float: left;
	padding-right: 0px;
	padding-left: 0px;
	position: relative;
}
#menu li a   {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 30px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	padding-right: 10px;
	padding-left: 10px;
}
#menu li a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCC;
	background-color: #090;
	font-weight: bold;
	padding-top: 8px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 10px;
}
#menu li ul  {
	filter: progid:DXImageTransform.Microsoft.alpha(opacity=80);
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	display: block;
	margin-top: 0px;
	margin-left: 0px;
	background-color: #360;
	padding-left: 0px;
	float: none;
	position: absolute;
	width: 133px;
	overflow: hidden;
	padding-top: 0px;
	height: 0px;
	z-index: 4;
}
#menu li ul li   {
	height: 30px;
	margin-left: 0px;
	list-style-type: none;
	padding-left: 0px;
	float: none;
	position: relative;
	display: block;
}
#menu li ul li a   {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 30px;
	font-weight: bold;
	color: #FFF;
	background-color: #360;
	margin-left: 0px;
	width: 100%;
	padding-right: 150px;
	padding-left: 10px;
}
#menu li ul li a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 30px;
	font-weight: bold;
	color: #FFF;
	background-color: #090;
	margin-left: 0px;
	width: 100%;
	padding-top: 8px;
	padding-right: 150px;
	padding-bottom: 8px;
	padding-left: 10px;
}
#menu #spacerli   {
	width: 380px;
	height: 30px;
}
#iframediv  {
	height: 670px;
	width: 870px;
	margin-top: 0px;
	margin-left: 5px;
	position: relative;
}
.arial12noir {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
}

   
Répondre à Judes-Emile Bornes IV
Posez votre question Répondre
Ils ont besoin de votre aide