Sujet Précédent Sujet Suivant

Compter les occurences d'un tag en JS

Résolu/Fermé
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 - 23 avril 2009 à 01:45
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 - 23 avril 2009 à 15:50
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>
A voir également:

4 réponses

Réponse 1 / 4
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 12
23 avril 2009 à 15:50
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;
}
2
Réponse 2 / 4
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 12
23 avril 2009 à 02:33 
$LICOUNT = document.li.ul.getElementsByTagName("li").length;
$MENUHEIGHT = ($LICOUNT*30);

avec ça ça marche

merci quand même
0
Réponse 3 / 4
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 12
23 avril 2009 à 03:31
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
0
Réponse 4 / 4
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 12
23 avril 2009 à 04:12
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>
0

Discussions similaires

Que signifie la pop up "nouveau tag ajouté" sur Huawei P8 Lite ?
ArianeKathleen -
Mn -

25 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Comment créer un compte torrent ?
Gotdann2003 -
Redbart -

1 réponse
créer une adresse gmail pour une autre personne
Emma33000 -
Emma33000 -

2 réponses
Nouveau tag ajouté - Utilité
Eerfers -
madmyke -

1 réponse