Menu déroulant

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Menu déroulant

Message par benoitde8 Dim 12 Jan 2014 - 21:23

Salut à tous!

J'ai suivi ce tuto en l'adaptant légèrement pour pouvoir remplacer le menu de navigation de base par un menu déroulant. (j'ai mis le code dans les templates.)

Si l'html et le css semblent fonctionner, le javascript semble ne rien faire du tout! C'est à dire que lorsque je passe ma souris sur le menu rien ne se déroule!

Voir ici

Mon html (encore à compléter, mais j'attend d'abord que ça fonctionne avant de continuer)
Code:
<div style="margin-top: -5px;">         
<div id="menu">
<dl>
<dt><a href="http://testfrenchpanthers.forumactif.org/">Forum</a></dt>
  <dd  style="display:none;">
  <li><a href="url-de-renvoi">Sous-Menu 1.1</a></li>
  <li><a href="url-de-renvoi">Sous-Menu 1.2</a></li>
  <li><a href="url-de-renvoi">Sous-Menu 1.3</a></li>
  </dd>
</dl>
 
<dl>
  <dt><a href="http://french-panthers.forumgratuit.org/">Portail</a></dt>
  <dd  style="display:none;">
  <li><a href="url-de-renvoi">Sous-Menu 1.1</a></li>
<ul>
</ul>
</dd>  
</dl>
 
<dl>
<dt>Menu 2</dt>
<dd  style="display:none;">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 2.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.2</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.3</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.4</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.5</a></li>
<li><a href="url-de-renvoi">Sous-Menu 2.6</a></li>
</ul>
</dd>
</dl>
 
<dl>
<dt>Menu 3</dt>
<dd  style="display:none;">
<ul>
<li><a href="url-de-renvoi">Sous-Menu 3.1</a></li>
<li><a href="url-de-renvoi">Sous-Menu 3.2</a></li>
</ul>
</dd>  
</dl>
</div>
  </div>

Le Javascript
Code:
$(function(){ $("#menu dl").hover(function(){$("#menu dl dd").slideUp("500");$(this).find("dd").stop(true,true).slideDown("500");},function(){$(this).find("dd").slideUp("500");}); });

J'ai bien coché le javascript pour l'avoir sur toutes les pages. Et j'ai d'autres scripts qui fonctionnent très bien sur le forum! Smile

Merci de votre future aide,! Smile

Benoit


edit pour les modos: je part à l'internat demain matin, je n'aurais donc pas l'occasion d'up le sujet avant vendredi soir, pouvez vous le laisser ici entre temps si il n'y a pas de réponses? merci


Dernière édition par benoitde8 le Dim 12 Jan 2014 - 23:07, édité 1 fois
avatar

benoitde8
Nouveau membre

Messages : 7
Inscrit(e) le : 24/12/2013

http://french-panthers.forumgratuit.org/forum
benoitde8 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par [Nihil] Dim 12 Jan 2014 - 22:51

Bonsoir,

J'ai testé ton code JS et il fonctionne bien, le problème vient donc d'autre part.

As tu dans l'un de tes codes JS pour changer de thème ou quelque chose comme ci ? Dans l'inspecteur d'élément, je vois une erreur avec ce code, qui semble bloquer la suite du déroulement.
Si tu en as bien un, peux tu désactiver ou le supprimer (penses à faire une copie), pour voir si le problème vient bien de là.

Sinon, peux tu me faire une copie de tous les JS que tu as d'activé sur la page d'accueil (donc y compris ceux qui sont sur toutes les pages), pour trouver celui qui ne marche pas ?
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par benoitde8 Dim 12 Jan 2014 - 23:03

Bonsoir,

Merci pour votre réponse, j'ai essayer en supprimant les autres scripts et le code fonctionne! Merci de m'avoir montrer d'où viens le problème! Smile

Voici mes différents scripts:

Balises bbcodes supplémentaires:
Code:
$(function(){
 
 $('body').append("<div id='M14_bloc_deroulant'>
<ul>
<li>
<a href='#'><img src='http://img4.hostingpics.net/pics/47477281.png'/></a>
<ul class='fallback'>
  <li class='M14_soustitre1'></li>
                  <li class='M14_soustitre2'></li>
                  <li class='M14_soustitre3'></li>
                  <li class='M14_soustitre4'></li>
                  <li class='M14_soustitre5'></li>
                  <li class='M14_soustitre6'></li>
                  <li class='M14_soustitre7'></li>
</ul>
</li>
</ul>
</div>");
});
 
 
 
 
$(function(){  
$(function(){
$('#M14_bloc_deroulant').insertAfter('.sceditor-button-source');
 
      
       })});
 
$(function () {
$('#M14_bloc_deroulant li ul').hide().removeClass('fallback');
$('#M14_bloc_deroulant li').hover(function () {
$('ul', this).stop().slideToggle(400);
 });
 });
 
 
 
 
$(function(){
$(function(){
$('<a class="balisesSupp" unselectable="on" title="Titre">
<div unselectable="on" style="background-image:none !important"></div>
<span>Titre</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre1 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert(" [titre] "," [/titre] ");
});
})
});
$(function(){
$(function(){
$('<a class="balisesSupp" unselectable="on" title="Sous titre">
<div unselectable="on" style="background-image:none !important"></div>
<span>Sous titre</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre2 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert(" [sous titre] "," [/sous titre] ");
});
})
});
$(function(){
$(function(){
$('<a class="balisesSupp" unselectable="on" title="Attention">
<div unselectable="on" style="background-image:none !important"></div>
<span>Attention</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre3 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert(" [attention] "," [/attention] ");
});
})
});
$(function(){
$(function(){
$('<a class="balisesSupp" unselectable="on" title="note">
<div unselectable="on" style="background-image:none !important"></div>
<span>Note</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre4 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert(" [note] "," [/note] ");
});
})
});
 
$(function(){
$(function(){
$('<a class="balisesSupp" unselectable="on" title="a venir">
<div unselectable="on" style="background-image:none !important"></div>
<span>Astuce</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre5 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert(" [astuce] "," [/astuce] ");
});
})
});
 
$(function(){
$(function(){
$('<a class="balisesSupp" unselectable="on" title="a venir">
<div unselectable="on" style="background-image:none !important"></div>
<span>à venir</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre6 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("","");
});
})
});
 
$(function(){
$(function(){
$('<a class="balisesSupp" unselectable="on" title="a venir">
<div unselectable="on" style="background-image:none !important"></div>
<span>à venir</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre7 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("","");
});
})
});

Personnifications des phrases dans le "qui est en ligne":
Code:
/* Fonction de remplacement */
function remplaceText(elt, match, newtext) {
  if($(elt).length) {
      return $(elt).html($(elt).html().replace(match, newtext));
  }
}

/* Tous les remplacements */
$(function() {
    /* Nombre d'utilisateurs connectés (membres, invisibles, invités) */
   remplaceText('#totalUsersOnline', "Il y a en tout","");
   remplaceText('#totalUsersOnline', "::",":");
   remplaceText('#totalUsersOnline', "utilisateur en ligne :","<strong>connecté :</strong>");
   remplaceText('#totalUsersOnline', "utilisateurs en ligne :","<strong>connectés :</strong>");
   remplaceText('#totalUsersOnline', "Invisible","invisible");
   remplaceText('#totalUsersOnline', "Invisibles","invisibles");
   remplaceText('#totalUsersOnline', "Enregistré","membre");
   remplaceText('#totalUsersOnline', "Enregistrés","membres");
   remplaceText('#totalUsersOnline', "Invité","visiteur");
   remplaceText('#totalUsersOnline', "Invités","visiteurs");
  
   /* Liste des utilisateurs connectés */
   remplaceText('#loggedInUsers', "Utilisateurs enregistrés :","");
  
   /* Liste des utilisateurs connectés sur la chatbox */
   remplaceText('#totalChattersOnline', "Il y a actuellement ","On compte ");
   remplaceText('#totalChattersOnline', "utilisateur","bavard");
});

Variables des templates dans le QEEL (toujours pour le "qui est en ligne")
Code:
(function(){if(window.ActiveXObject)var b=new ActiveXObject("Microsoft.XMLHTTP");else window.XMLHttpRequest&&(b=new XMLHttpRequest);null!=b&&(b.onreadystatechange=function(){if(4==b.readyState&&"undefined"===typeof var_fa_is_done){var_fa_is_done=1;var d,g="FORUMURL FORUMURLINK FORUMNAME FORUMNAMELINK FORUMDESC FORUMBIRTHDAY FORUMAGE FORUMCOUNTFORUM FORUMCOUNTOPIC FORUMCOUNTPOST FORUMCOUNTUSER FORUMONLINEUSER FORUMONLINEDATE FORUMLASTUSER FORUMLASTUSERLINK USERNAME USERLINK USERBIRTHDAY USERAGE USERREGDATE USERLASTVISIT USERCOUNTPOST NOW NOWWITHTIME".split(" ");
for(d=0;d<g.length;d++){var h=g[d],e=b.responseText.replace(RegExp('^.+<li style="margin-bottom:5px;direction:ltr;text-align:left;"><strong>{'+h+"}</strong> : (.*?) <span style='direction:ltr'>(.*?)</span><br /></li>.+$"),"$1");if(b.responseText!=e){for(var j=document.getElementsByTagName("*")||document.all,c=[],a=-1;++a<j.length;)for(var k=j[a],l=k.className.split(" "),f=0;f<l.length;f++)if(l[f]==h){c.push(k);break}for(a=-1;++a!=c.length;)"INPUT"==c[a].tagName||"TEXTAREA"==
c[a].tagName?c[a].value+=e:c[a].innerHTML+=e}}}},b.open("GET","/popup_help.forum?l=miscvars",!0),b.send(null))})();

Sauvegarde automatique des messages:
Code:
$(document).ready(function(){
  $.getScript('http://js01.fra.co/14000.js [window.localStorage&&localStorage.getItem("br-target")]');
  $.getScript('http://js01.fra.co/12000.js [window.localStorage&&$("#text_editor_textarea").length]');
});

J'ai supprimer ces différents code sur le forum test, mais ils sont toujours actifs sur le "vrai forum

Je ne risque pas de pouvoir répondre avant vendredi soir, (sauf peut être demain matin), mais je reviendrais voir le post dès que possible!

Merci pour votre aide! Smile

edit: en rajoutant les différents scripts un à un, je n'ai plus de problèmes. Je ne sais pas d'où venais le problème mais il est résolu en tout cas! Smile
avatar

benoitde8
Nouveau membre

Messages : 7
Inscrit(e) le : 24/12/2013

http://french-panthers.forumgratuit.org/forum
benoitde8 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par [Nihil] Dim 12 Jan 2014 - 23:13

Petite question pour avoir une précision :
Tu as supprimé juste un code JS (celui du changement de thème) et cela marchait ensuite ?

Si oui, juste ce code là (c'est ce que j'ai compris de ton message, mais je demande pour confirmation) :
Spoiler:

Si tu as supprimé tous les code JS pour que cela marche :
Spoiler:
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par benoitde8 Dim 12 Jan 2014 - 23:20

J'ai supprimé tous les code js
Par contre je les ai ensuite remis un à un et là aucun ne posais problèmes...
Je ne sais donc pas d'où vient le problème mais il est maintenant résolu!

Merci beaucoup Smile
avatar

benoitde8
Nouveau membre

Messages : 7
Inscrit(e) le : 24/12/2013

http://french-panthers.forumgratuit.org/forum
benoitde8 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum