Bouton Like en haut du message

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

Résolu Bouton Like en haut du message

Message par LDL le Lun 7 Mar 2016 - 6:26

Détails techniques


Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Autre
Personnes concernées par le problème : Tous les utilisateurs
forum de test : http://14022010.fullsubject.com/

Description du problème

.


bonjour a tous,

J'ai utilise ce code qui fonctionne parfaitement sous invision (CSS + javascript) et qui vient du confrère forumactif portugais,
mais j'aurai besoin d'aide pour deux points précis :

1.
j'aimerai que tout soit en haut de chaque message (image, bouton, résultat...)
a margin-top: 17px du haut de chaque message. a quels endroits dois-je mettre cette donnée dans le code ?
2.
J'aimerai que contrairement a ce code, le résultat ne soit pas sous forme de lien (donc quand on survole, il n'y ait pas la main
comme sur une zone cliquable, que cela soit simplement une zone texte et image toute simple...). comment puis-je modifier le3 code ?

CSS
Spoiler:
Code:

/* systeme de comptage des mercis par message et positions des nouveaux boutons mercis */
    #rep_post .reput_vote {
          background-color: #EFF1F3;
          color: #666;
          -khtml-user-select: none;
          -moz-transition: all,0.15s;
          -moz-user-select: none;
          -ms-user-select: none;
          -o-transition: all,0.15s;
          -webkit-touch-callout: none;
          -webkit-transition: all,0.15s;
          -webkit-user-select: none;
          background: #EFF1F3 url(https://cdn1.iconfinder.com/data/icons/social-media-13/24/Like-16.png) no-repeat 6px center;
          background-size: 12px;
          clear: both;
          color: #666;
          cursor: pointer;
          display: table;
          font-size: 11px;
          font-weight: 400;
          line-height: 18px;
          margin: 5px;
          padding: 3px 5px 3px 25px;
          text-align: right;
          transition: all,0.15s;
        }
        .reput_vote.zero {
          background-color: #6a6a6a;
        }
         
         
          .BS_like:hover {
      background-color: #222129;
      border-radius: 5px;
      color: #999;
        }
        .BS_like {
          -khtml-user-select: none;
          -moz-transition: all,0.15s;
          -moz-user-select: none;
          -ms-user-select: none;
          -o-transition: all,0.15s;
          -webkit-touch-callout: none;
          -webkit-transition: all,0.15s;
          -webkit-user-select: none;
          background: #222129 url(http://i84.servimg.com/u/f84/14/18/18/04/bouton15.png) no-repeat 6px center;
          background-size: 12px;
          border-radius: 5px;
          clear: both;
          color: #999;
          cursor: pointer;
          display: table;
          font-size: 11px;
          font-weight: 400;
          line-height: 18px;
          margin: 5px;
          padding: 3px 5px 3px 25px;
          text-align: right;
          transition: all,0.15s;
          user-select: none;
        }
        .BS_like:before {
          content: "Remercier";
        }
         
          #rep_post .bs_inline {
          list-style: none;
        }
         
          .BS_like:hover {
      background-color: #222129;
      border-radius: 5px;
      color: #999;
        }
         
          #rep_post {white-space: nowrap;margin: 1px 1px;float: right;}
        #rep_post .bs_inline {list-style: none;}
        #rep_post .bs_inline > li {display: inline-block;margin: 0 3px;}
        #rep_post .bs_inline > li:first-child {margin-left: 0;}
        #rep_post .bs_inline img {display: none;}
        #rep_post span img {cursor: pointer;}
        .reput_vote.positive {background-color: #8db13e;}
        .reput_vote.zero {background-color: #6a6a6a;}
        #rep_post .reput_vote:before {
          content: "Mercis: ";
        }

JAVASCRIPT
Spoiler:
Code:

function bestskins_ls() {
      for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                    var count = 0,
                          qtd = 0,
                          barra = $('.vote-bar', vote)[0],
                          botao = $('.vote-button', vote)[0];                     
                    if (barra) {
                            var numbarra = barra.title.match(/\d+/g);
                            qtd = Math.round(parseInt( numbarra[1] ) * parseInt( numbarra[0] )) / 100;
                    }
                 
                    //Imagem de reputaçăo
                    var reputation_UP = 'http://illiweb.com/fa/empty.gif';
   
                    botao = botao ? '<li><span onclick="bestskinsVoto(\'' + botao.firstChild.href + '\',this);" class="BS_like"><img src="' + reputation_UP + '" alt="+" class="rep_up"></span></li>' : '<li style="display: none;"><img src="' + reputation_UP + '" alt="+" class="rep_up"></li>';
                    var numrep = '<li>' + (qtd == 0 ? '<span class="reput_vote zero">' + qtd + '</span>' : '<span class="reput_vote positive">' + qtd + '</span>') + '</li>';
                    var htmlFinal =
                    '<div class="rep_bar clearfix" id="rep_post">' +
                    '      <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';
    $('.postbody', vote.parentNode.parentNode.parentNode).append( htmlFinal );
      }
      x.remove();
    };
    function bestskinsVoto(b,a) {
      a.onclick = '#';
        $.get(b, function() {
        a.parentNode.style.display = 'none';
        var verify = a.parentNode.nextSibling.firstChild.innerHTML;
        if(verify == 0) {
        a.parentNode.nextSibling.firstChild.classList.remove('zero'),
        a.parentNode.nextSibling.firstChild.classList.add('positive');
        }
        var c = a.parentNode.nextSibling.firstChild, b = parseInt(/\d+/.exec(c.innerHTML)[0])+1;
        c.innerHTML = c.innerHTML.replace(/\d+/,b);
        });
    };
    if (document.readyState ===  'complete') {
            bestskins_ls();
    } else {
          document.addEventListener('DOMContentLoaded', function() {
            bestskins_ls();
          });
    }

IMAGE DU RESULTAT
Spoiler:


Merci encore pour vos aides precieuses...



.


Dernière édition par LDL le Jeu 17 Mar 2016 - 2:19, édité 1 fois

LDL
****

Masculin
Messages : 235
Inscrit(e) le : 31/07/2009

http://goon-forum.com/
LDL a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton Like en haut du message

Message par LDL le Mer 9 Mar 2016 - 14:38




Un up, de l'aide, non ?
encore merci pour le coup de pouce....
Smile

LDL
****

Masculin
Messages : 235
Inscrit(e) le : 31/07/2009

http://goon-forum.com/
LDL a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton Like en haut du message

Message par Miettes le Mer 9 Mar 2016 - 17:58

Hellow Smile

j'aimerai que tout soit en haut de chaque message (image, bouton, résultat...)
a margin-top: 17px du haut de chaque message. a quels endroits dois-je mettre cette donnée dans le code ?

On va essayer ceci :
1) On met le parent en position relative pour l'avoir comme référence :
Code:
.postbody{
    position: relative;
}

2) On place le bloc "like" en position absolute, à droite et à 17px du haut :
Code:

.postbody #rep_bar {
    white-space: nowrap;
    margin: 1px 1px;
    position: absolute;
    top: 17px;
    right: 0;
}

Par contre, attention : un id (= représenté par un #) ne doit être présent qu'une seule fois sur ta page. Autrement dit, il vaut mieux supprimer l'id du bloc "rep_bar" Wink

J'aimerai que contrairement a ce code, le résultat ne soit pas sous forme de lien (donc quand on survole, il n'y ait pas la main
comme sur une zone cliquable, que cela soit simplement une zone texte et image toute simple...). comment puis-je modifier le3 code ?

ici :
Code:
.BS_like {
          -khtml-user-select: none;
          -moz-transition: all,0.15s;
          -moz-user-select: none;
          -ms-user-select: none;
          -o-transition: all,0.15s;
          -webkit-touch-callout: none;
          -webkit-transition: all,0.15s;
          -webkit-user-select: none;
          background: #222129 url(http://i84.servimg.com/u/f84/14/18/18/04/bouton15.png) no-repeat 6px center;
          background-size: 12px;
          border-radius: 5px;
          clear: both;
          color: #999;
          cursor: pointer;
          display: table;
          font-size: 11px;
          font-weight: 400;
          line-height: 18px;
          margin: 5px;
          padding: 3px 5px 3px 25px;
          text-align: right;
          transition: all,0.15s;
          user-select: none;
        }
on va supprimer la ligne :
Code:
cursor: pointer;

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton Like en haut du message

Message par LDL le Mer 9 Mar 2016 - 21:42

@Miettes a écrit:Hellow Smile

1) On met le parent en position relative pour l'avoir comme référence :
......
Par contre, attention : un id (= représenté par un #) ne doit être présent qu'une seule fois sur ta page. Autrement dit, il vaut mieux supprimer l'id du bloc "rep_bar" Wink

merci pour ton aide.

dans ma feuille CSS je n'ai pas de rep_bar excepte dans le code que tu me donnes,
il doit donc se trouver je suppose dans le template, non ? sur la feuille posting_body genre ? ou ca exactement ?

sinon si je supprime simplement le # de ton script que je rajoute dans la feuille CSS, ca fonctionne pas malheureusement.

@Miettes a écrit:Hellow Smile
on va supprimer la ligne :
cursor: pointer;

super, ca fonctionne, par contre si je supprime la ligne uniquement pour le paragraphe "BS_like" comme tu l'indiques ca fonctionne pas,
par contre si je supprime aussi celui du paragraphe précédent "rep_post .reput_vote", les deux et sur le bouton pour voter et celui des résultats disparaissent.

je l'ai donc laissé enlevé pour "rep_post .reput_vote", et je l'ai par contre rajouté dans le paragraphe suivant "BS_like:before",
et la nickel. on a bien la zone cliquable sur le bouton "Remercier" pour voter, et une fois voté, on a plus du tout de zone cliquable sur l'affichage du résultat "Mercis". Un problème en moins hehe....
Wink

.

LDL
****

Masculin
Messages : 235
Inscrit(e) le : 31/07/2009

http://goon-forum.com/
LDL a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton Like en haut du message

Message par Miettes le Jeu 10 Mar 2016 - 10:15

Coucou Smile

il doit donc se trouver je suppose dans le template, non ?
Non Smile il est probablement dans la CSS de base du forum. Dans ce cas, ajoute uniquement dans ta CSS :
Code:
.postbody .rep_bar {
    position: absolute;
    top: 17px;
    right: 0;
}

sinon si je supprime simplement le # de ton script que je rajoute dans la feuille CSS, ca fonctionne pas malheureusement.
Il faut aussi faire la modif dans le js, ici :

Code:
var htmlFinal =
                    '<div class="rep_bar clearfix" id="rep_post">' +
                    '      <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';

En supprimant l'id, ce qui donne :
Code:
var htmlFinal =
                    '<div class="rep_bar clearfix">' +
                    '      <ul class="bs_inline">' + botao + numrep  + '</ul>' +
                    '</div>';

Et du coup, dans la CSS, il faut remplacer tous les :
Code:
#rep_post
par :
Code:
.rep_bar

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton Like en haut du message

Message par LDL le Sam 12 Mar 2016 - 12:27

merci pour vos aides, je reviens sur ce thread pour tester les dernieres suggestions, le temps de virer mes virus sur mon pc,
a plus tard et merci...
Wink

LDL
****

Masculin
Messages : 235
Inscrit(e) le : 31/07/2009

http://goon-forum.com/
LDL a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton Like en haut du message

Message par LDL le Mar 15 Mar 2016 - 19:16

bon ça y est, j'ai épuré les virus des mes supports, donc je reviens sur le thread...
(édition de ce message dans une petite heure...)
Wink



Dernière édition par LDL le Mer 16 Mar 2016 - 19:42, édité 2 fois

LDL
****

Masculin
Messages : 235
Inscrit(e) le : 31/07/2009

http://goon-forum.com/
LDL a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton Like en haut du message

Message par Miettes le Mer 16 Mar 2016 - 16:13

Eh bien ce fut bien long ^^

On attend ton retour du coup Smile

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton Like en haut du message

Message par LDL le Mer 16 Mar 2016 - 19:42

Il faut aussi faire la modif dans le js
..............................

super, ça fonctionne !

(j'ai du faire quelques petites modifs sur la hauteur des blocs et la couleur des fonds, rien de mechant).
Bravo et encore merci Miettes pour avoir trouvé la soluce a mon problème ainsi que l'aide de tous les autres intervenants, merci a tous.

Je passe en mode RÉSOLU pour le lock service.
Wink






.

LDL
****

Masculin
Messages : 235
Inscrit(e) le : 31/07/2009

http://goon-forum.com/
LDL a été remercié(e) par l'auteur de ce sujet.

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


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