Le JS du lien "mon compte"

où le trouver ?

Sujet résolu

19 février 2010 à 12:42:52

Bonjour à vous chers zéros.

toujours pour continuer mon site web, j'aurais bien voulu avoir le script du lien "mon compte", celui en-dessous de votre avatar.
J'ai pourtant regardé le code source, mais je n'ai rien trouvé.

Ce n'est pas pour copier le menu, mais pour un système de pagination. C'est en effet plus plus "style" qu'un <select> basique.

J'aimerais savoir où le trouver.

Merci à vous.

xavierm02

19 février 2010 à 13:11:54

C'est du JQuery (c'est faisable en JS mais si t'as pas été foutu de le trouver dans le code source, c'est que t'es loin de pouvoir le faire...).

$("#popup_menu_compte").mouseenter(function(e){clearTimeout(b);$(this).find("ul").slideDown("normal")}).mouseleave(function(e){b=setTimeout(function(){$("#popup_menu_compte").find("ul").slideUp("normal")},600)});

Forcément, c'est illisible mais bon...

Thaledric

19 février 2010 à 13:27:17

oui enfait je n'y connais absolument rien en JS, et là tu me parles du JQuery, c'est pire encore, j'en ai jamais entendu parler >< .

J'ai quand même une question...

Je le met où ce code ?

xavierm02

19 février 2010 à 13:38:13

JQuery c'est une lib JS.
En gros, il ont assemblé plein de fonctions.
Et il faut que t'apprennes un minimum....
Donc lis en travers le tuto JS et après va lire celui JQuery?

Thaledric

19 février 2010 à 16:07:55

Bon, j'ai édité comme j'ai pu avec ce que j'ai lu (j'ai aussi repris le code du sdz pour le div et l'ul)

j'ai ça et ça ne fonctionne pas...

<head>
       <title>Tiny Text -- logiciels libres et gratuits</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="../css/design.css" />
	   <script type="text/javascript" src="jquery.js"></script>
           <script language="JavaScript" type="text/JavaScript"><!--
	   $("#ulpage").mouseenter(function(e){clearTimeout(b);$(this).find("ul").slideDown("normal")}).mouseleave(function(e){b=setTimeout(function(){$("#ulpage").find("ul").slideUp("normal")},600)});
	   --></script>
	   
   </head>

et plus bas dans la page:

<?php
echo '<div id="ulpage">
			<a href="#">Page :</a>
			<ul>';
			for($i=2; $i < $num_dernierepage; $i++) /*la boucle pour les li*/
			{
				echo '<li><a href="allnews.php?page='.$i.'&amp;desc='. $worddesc .'">'.$i.'</a></li>';
			}
			echo '</ul></div>';
?>

y'a juste le lien "Page :" qui s'affiche, mais rien niveau ul (quand je passe la souris dessus)...

xavierm02

19 février 2010 à 18:20:26

T'as regardé le HTML qui va avec ?

<div id="popup_menu_compte" class="popup_menu dblock"> 
									<a href="membres.html" id="compte_titre">Mon compte <img src="Templates/images/designs/2/fleche_bas.png" class="icon_more" alt="" /></a> 
									<ul> 
                                        <li><a href="membres-319.html?c=1">Profil</a></li> 
                                        <li><a href="membres-319.html?c=2">Identifiants</a></li> 
                                        <li><a href="membres-319.html?c=3">Études</a></li> 
                                        <li><a href="tutoriel-55.html">Tutoriels</a></li> 
                                        <li><a href="membres-319.html?c=4">Réglages</a></li> 
                                        <li><a href="membres-319.html?c=5">Contacts</a></li> 
                                        <li><a href="boutique-420.html">Commandes</a></li> 
									</ul> 
								</div> 
							</div>

Et le CSS (là tu sauras trouve... enfin j'espère...

Thaledric

19 février 2010 à 18:30:34

Oui je l'ai regardé, et en regardant le mien je me suis apercu qu'il n'y avait pas assez de pages pour que la liste soit affichée.

Mais bon maintenant il y a 2 liens dans la liste, et pas d'animation...

y'a le lien au dessus et la bête liste comme s'il n'y avait pas de JS...

(euh il est activé donc ça devrait marcher...)

xavierm02

19 février 2010 à 19:11:27

Il te manque le CSS.
Donc du vas le chercher o_O

Thaledric

21 février 2010 à 13:23:12

#popup_menu_compte ul { width: 85px; }
#popup_menu_compte { width: 105px; }

c'est tout ? c'est ça le css ? et ça va changer quelque chose au JS ça ?

enfin, bon j'essaie quand même...

Edit ... ça a rien changé. Image utilisateur

xavierm02

21 février 2010 à 13:44:34

Il y a au moins un display:none quelquepart.
T'as pas tout.

Thaledric

22 février 2010 à 13:18:03

ouais ...

ben avec le display:none, le <ul> est vraiment display none ...
c'est bizarre ...

j'ai rajouté tout le css du site du zero que j'avais pas trouvé au début, mais ce n'est que des propriétés de style ...

#ulpage ul
{
	position: absolute;
	z-index: 100;
	list-style-type: none;
	display: none;
	padding: 0;
	margin-top: 0;
	background-color: #488AD4;
	border: #2568B1 1px solid;
	opacity: .90;
	filter: alpha(opacity=90);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

Golmote

23 février 2010 à 11:40:48

Plop.

<div id="popup_menu_compte" class="popup_menu dblock"> 
	<a href="membres.html" id="compte_titre">Mon compte <img src="Templates/images/designs/2/fleche_bas.png" class="icon_more" alt="" /></a> 
	<ul style="display:none;"> 
		<li><a href="membres-319.html?c=1">Profil</a></li> 
		<li><a href="membres-319.html?c=2">Identifiants</a></li> 
		<li><a href="membres-319.html?c=3">Études</a></li> 
		<li><a href="tutoriel-55.html">Tutoriels</a></li> 
		<li><a href="membres-319.html?c=4">Réglages</a></li> 
		<li><a href="membres-319.html?c=5">Contacts</a></li> 
		<li><a href="boutique-420.html">Commandes</a></li> 
	</ul> 
</div>


<script src="jquery-1.4.2.min.js"></script>
<script>
$(function() {
	var b = false;
	$("#popup_menu_compte").mouseenter(function(e){
		clearTimeout(b);
		$(this).find("ul").slideDown("normal");
	}).mouseleave(function(e){
		b=setTimeout(function(){
			$("#popup_menu_compte").find("ul").slideUp("normal");
		},600);
	});
});
</script>

Pense à mettre ton sujet en résolu à l'aide du lien en bas de page

Thaledric

23 février 2010 à 12:09:43

ah oui merci, enfait javais le script jquery dans le <head> alors qu'il fallait le mettre après le <ul>, non ?

Golmote

23 février 2010 à 12:44:59

Et surtout attendre le chargement du DOM :

$(function() { // On attend que le DOM soit chargé
  // Maintent c'est ok ! 
});