[ résolu ] panneau coulissant javascript et conditions pour "nouveau MP"

[soxy]

Bonjour à toutes et à tous,

j'ai mis en place, sur mon forum http://maofree.com (phpb3), un panneau coulissant Javascripts qui fait un rappel du mon menu d'en-tête.
Ce panneau est fixe et permet donc de ne pas avoir à remonter en haut de la fenêtre pour accéder au menu d'en-tête. C'est très pratique.
Il n'est visible que par les membres (merci Ea)

Cependant, j'aimerai que ce menu réagisse sur l'apparition de nouveau MP
(tout comme sur le menu d'en-tête)


1- si il y a un nouveau MP, l'image du menu d'en-tête est remplacée par

comment avoir la même chose dans le panneau coulissant ?



2- et le top du top, serait que l'image d'ouverture du panneau coulissant devienne si il y a un nouveau MP


Voici le Javascript actuel de ce panneau :

Code:

$(function(){
          if($("#logout").length==1)
          {
            jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; top: 80px; right: 0px;background-color: #00000;z-index:10000;"><tr><td><div id="panneau-menu" scrolling="no" style="border-style: solid; border-color: #333333; border-width: 1px; background-color: #080808; padding: 20px; width: auto; height: auto; display: none;" marginwidth="0" marginheight="0" frameborder="0">

<div align="right">
<a href="http://www.maofree.com/"><img src="http://i43.servimg.com/u/f43/17/13/29/10/unstea12.png"></a>
<br>
<br>
<a href="http://www.maofree.com/forum"><img src="http://i43.servimg.com/u/f43/17/13/29/10/unstea11.png"></a>
<br>
<br>
<a href="http://www.maofree.com/faq"><img src="http://i43.servimg.com/u/f43/17/13/29/10/unstea13.png"></a>
<br>
<br>
<a href="http://www.maofree.com/search?search_id=newposts"><img src="http://i43.servimg.com/u/f43/17/13/29/10/unstea62.png"></a>
<br>
<br>
<a href="http://www.maofree.com/memberlist"><img src="http://i43.servimg.com/u/f43/17/13/29/10/unstea14.png"></a>
<br>
<br>
<a href="http://www.maofree.com/chatbox"><img src="http://i43.servimg.com/u/f43/17/13/29/10/unstea63.png"></a>
<br>
<br>
<a href="http://www.maofree.com/privmsg?folder=inbox"><img src="http://i43.servimg.com/u/f43/17/13/29/10/unstea16.png"></a>
<br>
<br>
<a href="http://www.maofree.com/profile?mode=editprofile"><img src="http://i43.servimg.com/u/f43/17/13/29/10/unstea15.png"></a>
<br>
<br>
<a href="http://www.maofree.com/login?logout=1&tid=ba3d0f4096c627b0e649dba087ef1426&key=e73821"><img src="http://i43.servimg.com/u/f43/17/13/29/10/unstea18.png"></a>
<br>
<br>
</div>
</div></td><td style="vertical-align: top;"><img src="http://i43.servimg.com/u/f43/17/13/29/10/menude10.png" onClick="document.getElementById(\'panneau-menu\').style.display=(this.src==\'http://i43.servimg.com/u/f43/17/13/29/10/menude10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i43.servimg.com/u/f43/17/13/29/10/menude10.png\')?\'http://i43.servimg.com/u/f43/17/13/29/10/menure10.png\':\'http://i43.servimg.com/u/f43/17/13/29/10/menude10.png\';"/></td></tr></table>'); } );
          }
        });

Je pense bien qu'il faut jouer sur des "conditions", mais je ne maitrise absolument pas le CSS et le Java ... je ne comprends donc pas grand chose à ce tuto, Exécuter un code javascript sous certaines conditions, et sur quoi je peux jongler pour arriver à ce que je veux.



j'espère être assez précis dans ma question, je me tiens à votre entière disposition pour plus de détails


Merci de prêter attention à ma demande et de m'apporter un peu d'aide

soxy

[karinette75]

bonsoir

je sais pas comment réaliser ton souhait mais je peux te donner un code JS pour avoir une alerte audio lorsque tu reçois un MP je trouve ça assez sympa :

Code:

$(function(){$("#logout").length&&($("#i_icon_mini_new_message").length?+my_getcookie("mps")||(my_setcookie("mps",1,1,0),$("body").append('<iframe width="1" height="1" src="http://www.youtube.com/embed/_Nb_Q4tU2O0?rel=0&autoplay=1" style="visibility:none;position:absolute"></iframe>')):my_setcookie("mps",0,1,0))});

[soxy]

Merci de ta participation karinette75,

mais mon forum est accès sur la musique et autres arts numériques, il n'est donc pas question de mettre des alertes sonores.

Ma demande ne se porte pas sur comment je peux mettre en valeur l'arrivée de nouveau MP, mais sur comment faire réagir mon panneau coulissant "menu" (Javascript) comme le fait le menu d'en-tête.

[karinette75]

ah ok et bien alors je sais pas du tout j'arrive déjà pas à mettre le miens sur toutes les pages alors là aucune idée désolé

[soxy]

up svp


surtout que je me suis rendu compte que j'avais un problème similaire pour avoir le "Déconnexion" dans ce menu (car l'url de déconnexion change à chaque fois)

comment répéter fidèlement les fonctions du menu d'en-tête dans mon menu dépliant js ??

[Adam_sfp]

Bonsoir

Vous pourriez essayez de créer un nouveau javascript en partant de celui que vous avez actuellement.

il faudrait changer #logout qui correspond à l'id du bouton déconnexion par
#i_icon_mini_new_message qui correspond à l'id du bouton nouveau message.

et changer également les liens de l'image actuelle
https://i.servimg.com/u/f43/17/13/29/10/menude10.png
par
https://i.servimg.com/u/f43/17/13/29/10/menude10.gif

Cordialement.

[soxy]

Merci de votre réponse Adam_sfp

mais je ne comprends pas vraiment
... je précise que je ne connais rien au CSS et au js (désolé ... pour l'instant j'applique bêtement)

mon code est composé de :

Code:

$(function(){
 if($("#logout").length==1)
  {
    /* ici le code javascript de mon panneau coulissant*/
  }
});

pour que seul les membres connectés voient ce menu dépliant (c'est Ea qui m'a donné cette solution)

cependant, si il y a moyen de faire le menu d'en-tête à l'identique (avec l'aspect dynamique "nouveau messages" et "inscription/connexion/déconnexion") alors ce code ne sert plus à rien

Mais comment faire pour afficher ou non un lien selon si on est connecté ou pas ?
ou mieux, selon si on est admin, modo, membre ou visiteur ?
est-ce possible déjà pour commencer ?



sinon, je suis désolé, mais je ne comprends pas ce que veut dire concrètement

il faudrait changer #logout qui correspond à l'id du bouton déconnexion par
#i_icon_mini_new_message qui correspond à l'id du bouton nouveau message.

et changer également les liens de l'image actuelle
https://i.servimg.com/u/f43/17/13/29/10/menude10.png
par
https://i.servimg.com/u/f43/17/13/29/10/menude10.gif

merci de votre aide

[Adam_sfp]

Bonjour

Actuellement le script que vous avez en place permet d’accéder à un menu pour les membres connectés.

Du coup le membre connecté voit cette image pour ouvrir le menu


et si j'ai bien compris vous voudriez que quand un membre à un nouveau message ce bouton ce transforme en

donc le premier bouton apparait grâce à #logout dans le script car celui ci détecte le bouton déconnexion dans votre menu .



il faudrait peut être essayer de rajouter dans le script #i_icon_mini_new_message qui correspond au bouton nouveau mp dans votre menu .

Code:

$(function(){
                  if($("#logout").length==1)
                  {
                    /* votre code avec le bouton normal */
                  }

    if($("#i_icon_mini_new_message").length==1)

                  {                 
                    /* votre code avec le bouton orange */
                  }

                });

A tester ...un peu tirer par les cheveux...
si Ea passe par la il doit y avoir plus simple...

[soxy]

Merci beaucoup Adam_sfp, vous m'avez aiguiller vers la solution (et je commence un peu à comprendre comment ça fonctionne)

j'ai fais ceci, et ça fonctionne :

Code:

$(function(){
        if($("#logout").length==1)
          {
$(function(){
    if($("#i_icon_mini_message").length==1)
                  {
/* code pour menu "normal" */
                  }
    if($("#i_icon_mini_new_message").length==1)
                  {               
/* code pour menu "nouveau message" */
                  }
                });
          }
        });

problème résolu, du coup

... sauf que ces "conditions" me donne envie de faire quelque chose d'encore plus développé, c-a-d des menus dépliants qui s'affichent différemment selon qu'on soit invité, membre, modo ou admin ...
... comment puis-je connaitre les "termes" que je peux utiliser pour faire ce genre de conditions ?
là, j'ai essayé #i_icon_mini_message sans trop y croire et ça a marché ... mais comment connaitre les dénominations exactes ?

[Adam_sfp]

bonsoir

ah ben il n'y avait pas de raisons que cela ne fonctionne pas avec #i_icon_mini_message

Vous pouvez essayer la même méthode pour les invités
eux ont dans la barre de menu le bouton connexion
avec pour id #i_icon_mini_login

Après pour les modos et admins je ne vois pas...
peut être en utilisant l'id des membres...

Cordialement.

[soxy]

merci beaucoup

j'arrive à me débrouiller avec ces éléments

ma question n'était pas très claire ...
Comment puis-je trouver les différents id dont je peux disposer pour l'élaboration de mes javascripts ?

(la découverte de ces conditions me donne beaucoup d'idées nouvelles)

[Adam_sfp]

Bonsoir

En fait dans votre cas on utilise l'id CSS de certains éléments présent ou pas sur la page..
comme #i_icon_mini_message ,#i_icon_mini_login etc...

J'utilise firebug pour avoir le nom de l'id.

Cordialement

[soxy]

excellent !... super outil

Merci beaucoup Adam pour toute cette aide très précieuse ... :thanks: