Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Luiz
 
Harleen
 
Marcelo22m2
 
Kyo Panda
 
paulim78
 
Lincoln
 
APOllO
 
Shek
 
>.< T-T =3
 
b@nzé
 

Quem está conectado
277 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 274 Visitantes :: 2 Motores de busca

Kyo Panda, Luiz, Roger_Crazzy

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Alinhamento do Botão Curtir

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Alinhamento do Botão Curtir

Mensagem por savenx em 02/12/15, 05:01 pm

Detalhes da questão


Endereço do fórum: http://www.wowdevbrasil.tk/
Versão do fórum: PunBB

Descrição


E ae galera, beleza? Estou com um problema e preciso de ajuda! Eu gostaria de fixar o meu botão de curtir de acordo com a imagem:



Link do script que estou usando: http://ajuda.forumeiros.com/t100407-tutorial-sistema-de-curtir-nas-mensagens
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por Fraise em 02/12/15, 07:02 pm

Boa noite.

Troque o código JavaScript por este:
Código:
/***
* Código: IPB Like System
* Data de criação: 18/07/2014
* Atualização: 31/03/2015
* Autor: Daemon
* Versão: 1.2
* Inspirado: IPB
* Acesse: http://bestskins.net & http://ajuda.forumeiros.com
* Não distribuir, ou remover os créditos do autor.
***/
function bestskins_ls() {
  // Imagem de reputação
  var reputation_UP = 'http://www.agrotube.com.br/images/seta_baixo.png';
  for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var 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;
                }
           
 
                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>';
  $('.pun .postfoot .user-contact', vote.parentNode.parentNode.parentNode.parentNode).before( 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();
      });
}

Até mais.
Fraise

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx em 02/12/15, 08:05 pm

Fraise, eu efetuei a troca do Código, porém o botão de curtir sumiu!
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx em 03/12/15, 10:24 pm

up?
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV em 06/12/15, 02:00 pm

Boa tarde @savenx!

Por gentileza, poderia deletar o script do @Fraise e manter o do tutorial?  Após isso, crie uma conta de testes  e me forneça, ok?

Até mais.
MateusAnjosV.
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx em 06/12/15, 06:05 pm

Ja retornei com o Script original.. como assim, conta de teste?
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por Slurk em 07/12/15, 03:30 pm

Olá amigo, tente esse JS em investimento nos topicos:

Código:
function bestskins_ls(){var bestskins={singular:'Curtiu isso!',plural:'Curtiram isso!'};for(var x=$('.vote'),i=0,vote;(vote=x[i++]);){var 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}var numrep=qtd+' '+(qtd==1?bestskins.singular:bestskins.plural);botao=botao?'<span onclick="bestskinsVoto(\''+botao.firstChild.href+'\',this);" class="BS_like">'+numrep+'</span>':'<span class="BS_like BS_done">'+numrep+'</span>';$('.postfoot',vote.parentNode.parentNode.parentNode.parentNode).before(botao)}x.remove()};function bestskinsVoto(b,a){var d=a.innerHTML;a.innerHTML='Carregando...';a.onclick='#';$.get(b,function(){a.className+=' BS_done';a.innerHTML=d;var c=a,b=parseInt(/\d+/.exec(c.innerHTML)[0])+1;c.innerHTML=c.innerHTML.replace(/\d+/,b)})};document.addEventListener('DOMContentLoaded',bestskins_ls,false);

avatar

Slurk
Nível 10

Masculino
Inscrito dia : 23/11/2015
Mensagens : 273
Pontos Ativos : 427

http://beststyle.forumeiros.com/

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx em 07/12/15, 04:28 pm

Ficou assim @Tiupkit

http://prntscr.com/9bg7bl
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV em 07/12/15, 04:36 pm

Olá!

Uma conta para testes é uma conta comum – sem nenhuma moderação – apenas para que eu logue e efetue os testes.

Feliz
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por Slurk em 07/12/15, 04:44 pm

seguinte altere o js pra este porém sem investimento:

Código:
function lglike(b,a){var d=a.innerHTML;a.innerHTML="Loading...";a.onclick="#";$.get(b,function(){a.className+=" LGnovote";a.innerHTML=d;var c=a.nextSibling,b=parseInt(/\d+/.exec(c.innerHTML)[0])+1;c.innerHTML=c.innerHTML.replace(/\d+/,b)})};

function init_lg_like_system() {
    var x = $('.vote');
    for (var i = 0, l = x.length; i < l; i++) {
        var vote = x[i],
            count = 0,
            plus = 0;
        var bar = $('.vote-bar', vote)[0];
        var button = $('.vote-button', vote)[0];
        if (bar) {
            var info = bar.title.match(/\d+/g);
            count = info[0];
            var percent = info[1];
            plus = Math.round(parseInt(percent) * parseInt(count)) / 100;
        }
        button = button ? '<span onclick="lglike(\'' + button.firstChild.href + '\',this);" class="LGlike">' + vote_singular + '</span>' : '<span class="LGlike LGnovote">' + vote_singular + '</span>';

        var votes_text = '<span class="LGlikecount">' + plus + ' ' + (plus == 1 ? vote_singular : vote_plural) + '</span>';

        if (like_version === 'phpbb3' || like_version === 'PHPBB3') {
            $('.corners-bottom', vote.parentNode.parentNode)
        .before('<div class="LGvote" style="margin:3px">' + button + votes_text + '</div>');
        } else if (like_version === 'invision' || like_version === 'Invision' || like_version === 'INVISION') {
            $(vote.parentNode.parentNode.parentNode.nextSibling.lastChild)
        .prepend('<li><div class="LGvote">' + button + votes_text + '</div></li>');
        } else if (like_version === 'punbb' || like_version === 'PUNBB') {
            $('.post-entry', vote.parentNode.parentNode.parentNode.parentNode)
        .before('<div class="LGvote" style="float:right;">' + button + votes_text + '</div>');
        }
          else if (like_version === 'PHPBB2' || like_version === 'phpbb2') {
            $('td.post tr:last')
        .append('</br></br><div class="LGvote" style="margin:3px">' + button + votes_text + '</div>');
        }
    }
    x.remove();
};

if (DOM_IS_READY == true) {
    init_lg_like_system();
} else {
    $(function () {
        init_lg_like_system();
    });
}

feito isto, crie outro js com investimento nos topicos

Código:
var like_version = 'punbb';
var DOM_IS_READY = false;
$(function(){DOM_IS_READY=true;});
var vote_singular = 'Curtir';
var vote_plural = 'Curtiram isso';
$.getScript('http://bestskins.forumeiros.com/26249.js');

Depois de criar esse JS. Pegue o link dele e adicione no lugar do link da bestskins(http://www.bestskins.net/26249.js).
avatar

Slurk
Nível 10

Masculino
Inscrito dia : 23/11/2015
Mensagens : 273
Pontos Ativos : 427

http://beststyle.forumeiros.com/

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx em 07/12/15, 05:17 pm

Fiz como disse e nao resultou..

Matheus enviei a conta via MP!
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV em 07/12/15, 05:24 pm

Olá novamente!

Adicione em sua folha de estilos CSS:
Código:
#rep_post {
position: relative !important;
left: -82% !important;
top: 40px !important;
}

Feliz
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx em 07/12/15, 05:42 pm

Veja como ficou Mateus.. Entre no forum e clique em qualquer tópico..

mas tirei print: http://prntscr.com/9bh5hf
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV em 07/12/15, 06:39 pm

Na verdade, resultou, veja:
Seta http://prntscr.com/9bhrw6
Porém, ele não se encaixou a todos os posts...
Substitua por esse:
Código:
#rep_post {
float: left !important;
}
Seta Caso não funcione, o que não é esperado, tire uma print e remova o js e o css!

Feliz
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx em 07/12/15, 07:48 pm

Veja, ele fica na esquerda mas não fica em baixo!

http://prntscr.com/9bir6z
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por Slurk em 07/12/15, 09:32 pm

Infelizmente amigo, o tamanho do post faz muita diferença também, o código que o nosso amigo Mateus lhe passou faz com que os botoes vão pra -82px pra esquerda e desça 40px pra baixo.

Isso foi feito teste em um topico que não tinha tanta linha com certeza o que você passou é enorme... entende? nem em todos ficara certo,
avatar

Slurk
Nível 10

Masculino
Inscrito dia : 23/11/2015
Mensagens : 273
Pontos Ativos : 427

http://beststyle.forumeiros.com/

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx em 07/12/15, 10:04 pm

nao tem como por fixo entao do lado dos botoes citar, editar, etc?
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV em 07/12/15, 10:09 pm

Na verdade @Tiupkit, é possível, porém o elemento está com .before o que tem influência do .post, basta trocar por .prepend e ajustar com CSS!


Savenx, troque por esse– o js –:
Código:
/***
* Código: IPB Like System
* Data de criação: 18/07/2014
* Atualização: 31/03/2015
* Autor: Daemon
* Versão: 1.2
* Inspirado: IPB
* Acesse: http://bestskins.net & http://ajuda.forumeiros.com
* Não distribuir, ou remover os créditos do autor.
***/
function bestskins_ls() {
  // Imagem de reputação
  var reputation_UP = 'http://www.agrotube.com.br/images/seta_baixo.png';
  for(var x = $('.vote'), i = 0, vote; (vote = x[i++]); ) {
                var 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;
                }
           
 
                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>';
  $('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).prepend( 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();
      });
}
Seta Provavelmente vai "bugar", mas não se preocupe, serei rápido, ok?

Piscada
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx em 07/12/15, 11:07 pm

Funcionou, ficou do lado do botão de editar, veja la se é o resultado que vc imaginou sem "bugar"
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV em 07/12/15, 11:21 pm

Deu mais trabalho do que o estimado... desculpe a demora, acrescente esse CSS:
Código:
#rep_post {position: absolute;display: block;left: 270px;}
.postfoot {padding-bottom: 15px !important;line-height: 30px;}
.user-contact {position: relative;top:5px;}
.post-options {position: relative;top:10px;}
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/
  • 0

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por savenx em 08/12/15, 12:40 am

Resultou, MUITO OBRIGADO a todos que me ajudaram..

E também, tenham um excelente natal e próspero ano novo =)
avatar

savenx
Nível 5

Masculino
Inscrito dia : 22/04/2012
Mensagens : 38
Pontos Ativos : 53

http://www.wowdevbrasil.tk

Resolvido Re: Alinhamento do Botão Curtir

Mensagem por MateusAnjosV em 09/12/15, 12:34 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum