Onglet clignotant selon l'utilisateur

[Space Sapien]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://testingdelis.forumactif.org

Description du problème

Bonjour à tous,

je reviens vers vous car j'ai eut une idée assez complexe et je ne sais même pas si c'est techniquement faisable...

Je vous explique :
Sur mon forum de test je suis entrain de travailler sur un bloc avec onglet dans lequel je pourrai placer toutes sortes de choses. J'ai créé un onglet News, afin de le mettre en valeur je l'ai fais de couleur rouge.

Spoiler:

Maintenant, je me demandais s'il n'était pas possible ( via du php ou du javascript ) de le faire clignoter ( ou de le faire simplement apparaître d'une couleur différente ) lorsque des nouveautés ont été écrites et que l'utilisateur ne les a pas lu. Ça me semble assez complexe et je n'ai absolument aucune idée sur comment procédé. Si c'est un travail trop contraignant je comprendrai très bien et me contenterai de ce que j'ai actuellement.

Merci pour votre attention.

[EDIT : Je crois que j'ai fais une erreur lorsque j'ai voulu poster mon message... je voulais le poster dans "Gérer l'apparence de son forum", désolé =/
EDIT 2 : Merci d'avoir déplacé le sujet  ]

[Neptunia]

Bonjour ^^

Pour un membre donné, les seules statistiques de lecture disponibles sont relatives uniquement aux messages du forum. Et ne concerne que ce qui n'a pas été lu depuis notre dernière visite.

Comme on n'a rien concernant la (non)lecture du message de la page d'accueil, la seule option qui me vienne à l'esprit (je me contente d'indiquer un raisonnement et non de donner un code le réalisant) serait :
- Insérer un code dans l'onglet par défaut. Ce code serait par exemple une valeur numérique.
- Ensuite on irait lire la valeur d'un cookie sur l'ordinateur du visiteur.
-> Si cette valeur est égale à celle contenue dans l'onglet par défaut, rien de nouveau.
-> Si la valeur est inférieure, on provoquerait le clignotement ou autre mise en forme.

Et en cas de clic sur l'onglet News on irait synchroniser la valeur du cookie avec celle de la page d'accueil.

---

Les cookies ne présentent pas une méthode infaillible, beaucoup d'utilisateurs les effacent régulièrement, mais c'est la seule option qui me semble réalisable.

Au vu de la technicité de la demande, je pense que ça dépasse les problèmes d'apparence et mériterait d'être déplacé dans la section Scripts et codes.

[Space Sapien]

Merci pour votre réflexion, c'est très intéressant
et en effet je n'avais pas pensé à la section scripts et codes, désolé.

[oxymore]

Bonjour

Comme le dit Neptune une solution en passant par les cookies.
En mettant un javascript que vous activez à chaque changement de news...
Si ça peut vous convenir?

[Space Sapien]

Oui si ça peut fonctionner ce serait fantastique, mais je n'ai pas les bases nécessaires pour savoir où commencer. J'essaie quand même de me renseigner en parallèle sur le langage javascript et php.

[oxymore]

Bonjour

Voici un exemple vous pouvez essayez de l'adapter pour votre effet.
A chaque changement de news il faudra renommer le cookies visite par visite1 par exemple...


A rajouter en début de votre page d'accueil.

Code:

 <script type="text/javascript">


jQuery(document).ready(function () {
    var visite = jQuery.cookie('visite') // on crée le cookie
    if (visite == null) {                    // on vérifie si il existe
        jQuery('.div1').show();  // il n'existe pas on montre la div 1
        jQuery('.div2').hide();
    } else {
        jQuery('.div1').hide();//sinon on montre la div2
        jQuery('.div2').show();
    }
    jQuery.cookie('visite', 'yes_visited', {
        expires: 30, // il expire dans 30 jours
        path: '/'
    });
});

</script>
<div class="div1">
     div1 
</div>
<div class="div2">
     div2 
</div>

puis vous pouvez personnalisez via le css pour la couleur ou autres....

Code:

.div1 {
    color: #FC4837;
}

.div2 {
    color: #388DC9;
}

Edit..

Désolé j'avais compris afficher une div différente...
pour faire clignoter essayez

Code:

 <script type="text/javascript">
 jQuery(document).ready(function () {
    var visit = jQuery.cookie('visit')
    if (visit == null) {
var blink = function() {
    jQuery('.div1').animate({
        opacity: '0'
    }, function(){
        jQuery(this).animate({
            opacity: '1'
        }, blink);
    });
}
blink();
       
          } else
          {
       
      jQuery('.div1').css( "color", "red" ); 
                }
    jQuery.cookie('visit', 'yes_visited', {
        expires: 30,
        path: '/'
    });
});

 

</script>
<div class="div1">
    div1
</div>


En remplaçant .div1 par votre id: #ongletnews

[Space Sapien]

Alors je viens d'essayer, ça n'a pas l'air de fonctionner =/
J'ai installé le code au début de mon message d'accueil.
Ai-je fais une erreur :

Code:

<script type="text/javascript">
 jQuery(document).ready(function () {
    var visit = jQuery.cookie('visit1')
    if (visit == null) {
var blink = function() {
    jQuery('#ongletnews').animate({
        opacity: '0'
    }, function(){
        jQuery(this).animate({
            opacity: '1'
        }, blink);
    });
}
blink();
     
          } else
          {
     
      jQuery('#ongletnews').css( "color", "red" );
                }
    jQuery.cookie('visit1', 'yes_visited', {
        expires: 30,
        path: '/'
    });
});
 
 
 
</script>

S'il faut vérifier qu'il n'y ait pas de conflit, je peux aussi poster les codes javascript utilisés pour les onglets.

[oxymore]

Bonsoir

Si vous avez la totalité de votre code?
Html javascript et css...

[Space Sapien]

Bien sur je vous donne ça, je dois poster en plusieurs fois, mes codes sont trop longs...


Premier code java installé dans les modules java

Code:

var currentTab = 0;
function openTab(clickedTab) {
  var thisTab = $(".conteneur-menu_pa ul a").index(clickedTab);
  $(".conteneur-menu_pa ul li a").removeClass("active");
  $(".conteneur-menu_pa ul li a:eq("+thisTab+")").addClass("active");
  $(".conteneur-menu_pa .conteneur-ouvrir_pa").hide();
  $(".conteneur-menu_pa .conteneur-ouvrir_pa:eq("+thisTab+")").show();
  currentTab = thisTab;
}
$(document).ready(function() { 
  $(".conteneur-menu_pa ul li a").mouseover(function() {
    openTab($(this)); return result;
  }); 
  $(".conteneur-menu_pa ul li a:eq("+currentTab+")").click()
});

2ème code Java installé dans les modules Java

Code:

var currentTab = 0;
function openTab(clickedTab) {
  var thisTab = $(".conteneur-menu_pa ul a").index(clickedTab);
  $(".conteneur-menu_pa ul li a").removeClass("active");
  $(".conteneur-menu_pa ul li a:eq("+thisTab+")").addClass("active");
  $(".conteneur-menu_pa .conteneur-ouvrir_pa").hide();
  $(".conteneur-menu_pa .conteneur-ouvrir_pa:eq("+thisTab+")").show();
  currentTab = thisTab;
}
$(document).ready(function() { 
  $(".conteneur-menu_pa ul li a").click(function() {
    openTab($(this)); return false;
  }); 
  $(".conteneur-menu_pa ul li a:eq("+currentTab+")").click()
});

[Space Sapien]

CSS ( pas très propre xD )

Code:



.copyrightankama{

  font-family: 'Open Sans';
  position:absolute;
  right:0px;
  bottom:0px;
}

.roundedImage{
    overflow:hidden;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    width:90px;
    height:90px;

  box-shadow: 2px 2px 4px #555;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTZS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype');
}
/* BLOC PRINCIPAL */
#menu_onglet_pa {
position: relative;
width: 700px;
margin:  auto;
padding: 0;
font-family: 'Open Sans';
}

/* FOND DU MENU */
#fond_menu{
position:absolute;
width:712;
height:34px;
background-color:#FAF4C4;
}

/* BLOC CONTENANT LE MENU  */
.conteneur-menu_pa {
width: 712px;
background-color:white;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-moz-box-shadow: 1px 1px 6px #555;
-webkit-box-shadow: 1px 1px 6px #555;
box-shadow: 1px 1px 6px #555;
margin: 0;
padding: 0;

}
/* LISTE */
ul.onglets_pa {
  background-color:#FAF4C4;
width: 700px;
margin: auto;
margin-left:57px;
padding: auto;
}       
/* ÉLÉMENTS DE LA LISTE */
ul.onglets_pa li {background-color:#FAF4C4;
list-style: none;
float:left;
margin: 0;
padding: 0;

}           

     
/* BOUTON A L ÉTAT NORMAL */
ul.onglets_pa li a {
background-color:#FAF4C4;
font-family: 'Open Sans';
text-align: center;
text-decoration: none;
color: black;
  font-size:14px;

display: block;
width: 100px;

-moz- text-shadow: 1px 1px 1px #fff;
-webkit- text-shadow: 1px 1px 1px #fff;
text-shadow: 1px 1px 1px #fff;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
 
margin: 0;
padding: 7px 0;
} 

#ongletnews {color:#fc4837 !important;}
#ongletnews2 { }
.active {
background-color:white !important;
color:#fc4837 !important;
border-top:1px solid #fc4837;
  border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}
/* BOUTON AU SURVOL */
ul.onglets_pa li a:hover, .ul.onglets_pa li a:focus, .ul.onglets_pa li a:active  { background-color:white;
color:#fc4837;
border-top:1px solid #fc4837;
  border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}
                             
 
/* POUR CEUX NAVIGANT AU CLAVIER */
ul.onglets_pa li a:focus {
outline: none;
}                                 
/*  BOUTON A L ÉTAT ACTIF (cliqué) */
ul.onglets_pa li a.active {


}                                           
/* BLOC CONTENEUR */
.conteneur-ouvrir_pa {
margin: 0;
padding: 25px 6px 6px  6px;
display: none;
} 
/* BLOC CONTENEUR */
.conteneur-ouvrir_pa:hover {
margin: 0;
padding: 25px 6px 6px  6px;
display: none;
}
/*  BLOC DU CONTENU */
.ton_contenu_pa {           
margin: 15px 0px 0px 0px;
}
.ton_contenu_pa_news{           
margin: 15px 0px 0px 0px;
overflow:auto;
  width:500px;
  height:400px;
  text-align:justify;
font-size: 12px;}


.ton_contenu_pa_links{           
margin: 15px 0px 0px 0px;
overflow:auto;

  height:400px;
  text-align:justify;
font-size: 12px;}

/* PARAGRAPHE */
.ton_contenu_pa p {
font-size: 12px;
}

.boutonlinks{
 
  font-size:14px;
  font-family:verdana;
width:144px;
height:17px;
  border:3px solid #FC4837;
background-color:#FC4837;
border-radius: 5px 5px 5px 5px;
margin: 25px;
padding:7px;
color:white;
box-shadow:2px 2px 2px #ABA39C;
}

.boutonlinks a{-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color:white;
 
}
.boutonlinks a:hover{
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color:#FC4837;
}
.boutonlinks:hover, .boutonlinks:focus, .boutonlinks:active{
 
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;

color:#FC4837 !important;
  background-color:white;
 
  width:144px;
height:17px;
  border:3px solid #FC4837; 
}


     
/* Scroller Box */
#scroller_container {
width: 350px;
height: 35px;
overflow: hidden;
margin: auto;
}

/* CSS Hack Safari */
#dummy {
;
#
}
#scroller_container {
overflow: auto;
}

[Space Sapien]

Html posté dans "message sur la page d'accueil"

Code:

<div id="menu_onglet_pa">
                                                                                                                                                                                                                                                      
   <div class="conteneur-menu_pa">
                                                                                                                                                                                                                                                     
      <div id="fond_menu">
                                                                                                                                                                                                                                                                
         <ul class="onglets_pa">
                                                                                                                                                                                                                                                                                             
            <li>
                                                                                                                                                 <a href="#">Vidéos</a>                                                                                                                             
            </li>
                                                                                                                                                                                                                                                                                               
            <li>
                                                                                                                                                 <a id="ongletnews" href="#">News</a>                                                                                                         
            </li>
                                                                                                                                                                                                                                                                                             
            <li>
                                                                                                                                                 <a href="#">Liens Utiles</a>                                                                                                                             
            </li>
                                                                                                                                                                                                                                                                                               
            <li>
                                                                                                                                                 <a href="#">Nous Suivre</a>                                                                                                                             
            </li>
                                                                                                                                                                                                                                                                                               
            <li>
                                                                                                                                                 <a href="#">Bienvenue</a>                                                                                                                             
            </li>
                                                                                                                                                                                                                                                               
         </ul>
                                                                                                                                                                                                                                        
      </div>
                                                                                                                                                                                                                                                                                                 
      <div class="conteneur-ouvrir_pa">
                                                                                                                                                                                                                                                                                          
         <div class="ton_contenu_pa">
                                                                                                                                                                                                                                                                                               
            <p>
blablabla                                                                                                                     
            </p>
                                                                                                                                                                                                                                                                                               
         </div>
                                                                                                                                                                                                                                                                                
      </div>
                                                                                                                                                                                                                                                                         
      <div class="conteneur-ouvrir_pa">
                                                                                                                                                                                                                                                                                                                            
         <div class="ton_contenu_pa_news">
                                                                                                                                                                                                                                                                                                                                 
            blablabla
                                                                                                                                                                                                                                  
            </div>
                                                                                                                                                                                                                                                                                                                       
         </div>
                                                                                                                                                                                                                                                                                                                
      </div>
                                                                                                                                                                                                                                                                           
      <div class="conteneur-ouvrir_pa">
                                                                                                                                                                                                                                                                                            
         <div class="ton_contenu_pa_links">
                                                                                                                                                                                                                           
            <center>
                                                                                                                                                                                                                                                                                                                    
               blablabla
                                                                                                          
            </center>
                                                                                                                                                                                                                                                                                                 
         </div>
                                                                                                                                                                                                                                                                                    
      </div>
                                                                                                                                                                                                                                                                           
      <div class="conteneur-ouvrir_pa">
                                                                                                                                                                                                                                                                                            
         <div class="ton_contenu_pa_links">
                                                                                                                                               
            <center>
                                                                                                                          
            blablabla
                                                                                                                          
            </center>
                                                                                                                                                   
         </div>
                                                                                                                                                                                                                                                                                        
      </div>
                                                                                                                                                                                                                                                                                                                                                                                                         
      <div class="conteneur-ouvrir_pa">
                                                                                                                                                                                                                                                                                          
         <div class="ton_contenu_pa_links">
                                                                                                                                                                                                                                                                                       
            
                                                 
            <div class="copyrightankama">
                                   (Les images tirées de Wakfu sont la propriétés d'Ankama. All right reserved © <a href="http://www.ankama.com/fr">Ankama</a>)                   
            </div>
                                                                                                                                                                                                                               
            <p>
                                                    
            </p>
                                                                                                                                                                                                                                                                                                     
         </div>
                                                                                                                                                                                                                                                                            
      </div>
                                                                                                                                                                               
   </div>
</div>

[oxymore]

Bonsoir

les 2 codes javes sont les mêmes?

[Space Sapien]

Non la ligne 11 est différente.

[oxymore]

bonsoir

Pour les 2 script il faut mettre soit en mouse over soit au click...

En mettant ce code dans la page d'accueil avant votre html cela devrait fonctionner .
N"oubliez pas d"enlever ceux dans gestion des codes javas.

Code:

<script type="text/javascript">
var currentTab = 0;
function openTab(clickedTab) {
  var thisTab = jQuery(".conteneur-menu_pa ul a").index(clickedTab);
  jQuery(".conteneur-menu_pa ul li a").removeClass("active");
  jQuery(".conteneur-menu_pa ul li a:eq("+thisTab+")").addClass("active");
  jQuery(".conteneur-menu_pa .conteneur-ouvrir_pa").hide();
  jQuery(".conteneur-menu_pa .conteneur-ouvrir_pa:eq("+thisTab+")").show();
  currentTab = thisTab;
}
jQuery(document).ready(function() {
  jQuery(".conteneur-menu_pa ul li a").click(function() {
    openTab(jQuery(this)); return false;
  });
  jQuery(".conteneur-menu_pa ul li a:eq("+currentTab+")").click()
 
    var visit = jQuery.cookie('visitor')
    if (visit == null) {
setInterval(function () {
    jQuery("#ongletnews").css("background-color", function () {
        this.switch = !this.switch
        return this.switch ? "red" : ""
    });
}, 100)
       
          } else
          {
       
      jQuery('#ongletnews').css( "color", "red" ); 
                }
    jQuery.cookie('visitor', 'yes_visited', {
        expires: 30,
        path: '/'
    });
});

 
 
</script>     

[Space Sapien]

Ah merci, ça fonctionne bien comme ça et pas besoin d'utiliser les 2 javas xD
Par contre le clignotement ne fonctionne toujours pas =/ Est ce qu'il y'a moyen de vérifier si le cookie a bien été créé dans l'ordinateur ?

[oxymore]

Bonsoir

Pourtant il fonctionne de mon coté..
http://jsfiddle.net/oxymore/xt8e3bpn/1/
Essayez de renommer le cookies ou effacer les cookies de votre navigateur.
Désactivez également temporairement vos javascripts si vous en avez....

[Space Sapien]

Toujours rien =/
J'ai essayé toutes les manips proposées sans succès.
Ce qui est bizarre c'est que sur votre lien, soit l'onglet news clignote lorsqu'il n'y a pas le cookie, soit il est rouge quand il y est. Sur mon forum l'onglet reste noir dans les deux cas. Du coup, je me demande si la partie du code concernant le cookie est compatible avec forumactif. J'ai l'impression que toute cette partie est sans effet sur le forum.

[Edit : J'ai bien retrouvé le cookie de votre site, par contre aucune trace des cookies que mon forum aurait du créer. ]

[oxymore]

Bonjour

Vous avez juste ce code en page d'accueil?
A tout hasard essayez d'ajouter

Code:

<script src="http://illiweb.com/rs3/74/frm/jquery/cookie/jquery.cookie.js"></script>

au tout début

[Space Sapien]

Fantastique ! Ça fonctionne, merci de vous être acharné avec moi

J'ai une dernière question, si vous me permettez de vous embêter encore...
est ce qu'il y a un moyen de faire clignoter seulement le mot "news" plutôt que l'onglet entier ?

[oxymore]

Bonjour

Oui changez dans cette ligne

Code:

 jQuery("#ongletnews").css("background-color", function ()

background-color par color

Mais cela risque d'être moins visible...

[Space Sapien]

Ah oui en effet =/ Dommage. Je vais garder le background color alors. Merci en tout cas