Header

Partagez | 

Mettre en avant un sujet dans sa barre de nav'

Message Sujet: Mettre en avant un sujet dans sa barre de nav'   Jeu 20 Mar - 11:53

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Sur SoP, le stock de tutoriel est en parti alimenté par les réponses à vos demandes d'aide. C'est le cas pour cette astuce Smile

Mettre en avant un sujet dans sa barre de nav'



Dans ce tutoriel, nous allons donc voir comment ajouter un bouton dans la barre de navigation et lier celui-ci à un sujet du forum en particulier. L'idée étant : s'il n'y a pas de nouveau message dans le sujet, le bouton reste celui par défaut, s'il y a un nouveau message, le bouton change pour attirer l'attention du membre.

Like a Star @ heaven Pré-requis :
  • Avoir accès aux templates,
  • Avoir 2 boutons différents pour la barre de nav'


C'est parti !

La préparation HTML


1] Tout d'abord, nous allons avoir besoin de créer une div cachée qui va récupérer les informations du forum contenant notre sujet (en gros, on mettra dans cette div le tableau contenant les liens vers les sujets).
Code:
<div id="recup_info" style="display:none"></div>

Arrow Vous êtes sur ForumActif :
Dans le template "overall_header", nous allons mettre ce code juste après :
Code:
<a name="top"></a>

Arrow Vous êtes sur Xooit :
Dans le template "overall_header", nous allons mettre ce code juste après :
Code:
<a name="top"></a>

2] On va ajouter dans la barre de nav' une image cliquable qui changera. Pour le moment, on met l'image "normale", c'est à dire quand il n'y a pas de nouveau message.

Arrow Vous êtes sur ForumActif :
Vous allez aller dans : Panneau d'administration >> Affichage >> Page d'accueil >> En-tête et navigation :: créer un nouveau menu. Je vous laisse remplir vous même les informations.
Idea le lien renvoit vers le sujet que l'on veut mettre en avant
Spoiler:
 

Arrow Vous êtes sur Xooit :
Dans le template "overall_header", vous repérez le code de votre barre de nav et vous y ajoutez le code de votre image cliquable :
Code:
<a href="lien-sujet"><img id="info_msg" src="lien-image" alt="info_msg" /></a>
Idea lien-image = l'url de votre image par défaut
Idea lien-sujet = l'url du sujet que l'on veut mettre en avant

Notre base est prête, on peut passer au JS Smile

Le Javascript



1] Avant tout, il faut vérifier que la bibliothéque jQuery soit bien présente sur votre forum. Pour ceux sous ForumActif, elle est appelée par défaut. En revanche, pour les membres sous Xooit, il va falloir le faire manuellement.

Arrow Vous êtes sur Xooit :
Tout va se passer dans le template "overall_header". On va commencer par vérifier que la bibliothéque jquery est bien appelée sur le forum. Pour cela, je vous laisse vérifier dans le template si vous avez ceci ou quelque chose qui y ressemble :
Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
S'il n'y ait pas, je vous invite à ajouter cette ligne juste après
Code:
<title>{SITENAME} :: {PAGE_TITLE}</title>

2] On y va dans l'explication du JS. Voici ce qu'il va devoir faire :
* il va aller jeter un oeil dans la catégorie/forum contenant le sujet que l'on veut mettre en avant
* si ce sujet est marqué comme "non lu", alors, ça signifiera qu'il y a un message "non lu" par le membre (logique)
* dans ce cas, on change le bouton de la barre de nav

On y va !

Une fois que la page est chargée
Code:
jQuery(document).ready(function(){

});

On va récupérer le tableau contenant les titres des sujets du forum qui nous intéresse et mettre les infos dans notre div cachée. De mon coté, ce sont les sujets de ce forum

Arrow Vous êtes sur ForumActif :
http://miettes.exprimetoi.net/f7-sous-forum
Code:

jQuery(document).ready(function(){
   jQuery('#recup_info').load('/f7-sous-forum .bodyline .forumline');
});

Arrow Vous êtes sur Xooit :
http://miettes.xooit.fr/f5-Sous-forum.htm
Code:

jQuery(document).ready(function(){
   jQuery('#recup_info').load('/f5-Sous-forum.htm .bodyline .forumline');
});

Idea pour la suite, je vais remplacer les liens par "/lien-sous-forum" pour que ce soit plus simple Embarassed

Et on va appliquer une fonction sur ces infos.
Code:
jQuery(document).ready(function(){
   jQuery('#recup_info').load('/lien-sous-forum .bodyline .forumline', function(){
   
   });
});
* Tout d'abord, on va tranformer les infos récupérées en html
Code:

jQuery(document).ready(function(){
   jQuery('#recup_info').load('/lien-sous-forum .bodyline .forumline', function(){
      var info = jQuery(this).html();
   });
});
* Quand on a un nouveau message, le lien vers celui-ci contient "newest". On va donc rechercher si le lien vers notre sujet est nouveau ou pas.
Arrow Vous êtes sur ForumActif :
Si j'ai un nouveau message, mon lien ressemblera à ça :
http://miettes.exprimetoi.net/t15-test-affichage?view=newest
Code:

jQuery(document).ready(function(){
   jQuery('#recup_info').load('/f5-Sous-forum.htm .bodyline .forumline', function(){
      var info = jQuery(this).html().indexOf('t15-test-affichage?view=newest');
   });
});
Arrow Vous êtes sur Xooit :
Si j'ai un nouveau message, mon lien ressemblera à ça :
http://miettes.xooit.fr/t4.htm?view=newest
Code:

jQuery(document).ready(function(){
   jQuery('#recup_info').load('/f5-Sous-forum.htm .bodyline .forumline', function(){
      var info = jQuery(this).html().indexOf('t4.htm?view=newest');
   });
});

Idea ici, je vous laisse remplacer 't15-test-affichage?view=newest' ou 't4.htm?view=newest' par les infos concernant votre lien.

Idea Pour la suite, je remplacerai ce lien par "lien-new-msg"

* On va ensuite faire un test. Si jamais il ne trouve pas ce lien, la valeur de la variable info = -1 et cela signifie qu'il n'y a pas de nouveau message. Du coup, si la valeur est supérieur à 0, cela signifie qu'il y a un nouveau message. C'est ce qu'il nous intéresse. On va donc tester si "info" est supérieur à 0
Code:

jQuery(document).ready(function(){
   jQuery('#recup_info').load('/lien-sous-forum .bodyline .forumline', function(){
      var info = jQuery(this).html().indexOf('lien-new-msg');
      if(info > 0){
      
      }
   });
});
* S'il est supérieur à 0, on va changer le lien de notre image
Arrow Vous êtes sur ForumActif :
Code:
jQuery(document).ready(function(){
   jQuery('#recup_info').load('/lien-sous-forum .bodyline .forumline', function(){
      var info = jQuery(this).html().indexOf('lien-new-msg');
      if(info > 0){
         jQuery('a.mainmenu img').each(function(){
            if(jQuery(this).attr('alt') == "info_msg"){
               jQuery(this).attr('src', 'new-image');
            }
         });
      }
   });
});

Idea le alt = ce que vous avez indiqué dans la case "texte" lorsque vous avez ajouté votre image de menu.

Arrow Vous êtes sur Xooit :
Code:
jQuery(document).ready(function(){
   jQuery('#recup_info').load('/lien-sous-forum .bodyline .forumline', function(){
      var info = jQuery(this).html().indexOf('lien-new-msg');
      if(info > 0){
         jQuery('img#info_msg').attr('src', 'new-image');
      }
   });
});


Idea Je vous laisse remplacer "new-image" par votre image

S'il est égal à -1, on ne fait rien Smile

3] Maintenant qu'on a tout ce qu'il faut, il ne reste plus qu'à l'installer Smile

Arrow Vous êtes sur ForumActif :
Il vous suffit d'aller dans Panneau d'administration >> Modules >> HTML & Javascript >> Gestion des codes javascript. Vous créez un nouveau javascript que vous appelez sur toutes les pages et vous y collez votre code :
Code:
jQuery(document).ready(function(){
   jQuery('#recup_info').load('/lien-sous-forum .bodyline .forumline', function(){
      var info = jQuery(this).html().indexOf('lien-new-msg');
      if(info > 0){
         jQuery('a.mainmenu img').each(function(){
            if(jQuery(this).attr('alt') == "info_msg"){
               jQuery(this).attr('src', 'new-image');
            }
         });
      }
   });
});

Arrow Vous êtes sur Xooit :
Il vous suffit d'ouvrir le template "Overall_header". Juste après :
Code:
<style type="text/css">
il vous suffit de placer notre js :
Code:
<script language="JavaScript" type="text/javascript">
<!--
jQuery(document).ready(function(){
   jQuery('#recup_info').load('/lien-sous-forum .bodyline .forumline', function(){
      var info = jQuery(this).html().indexOf('lien-new-msg');
      if(info > 0){
         jQuery('img#info_msg').attr('src', 'new-image');
      }
   });
});
//-->
</script>

Exclamation Attention de pas oublier de remplacer les infos par les vôtres Wink




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "Mettre en avant un sujet dans sa barre de nav'" tel que je l'ai rédigé.
Revenir en haut Aller en bas
Mettre en avant un sujet dans sa barre de nav'
Page 1 sur 1
 Sujets similaires
-
» [Sujet] Mettre le titre du sujet dans la notification de réponse à un sujet
» Comment mettre des images à la place des textes dans la barre de navigation ?
» Mettre le nombres de sujet et de messages dans une meme case
» Bouton pop-up dans la barre de navigation
» Comment mettre le lien du forum dans les moteurs de recherche
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens