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.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Gif na foto do perfil
Hoje à(s) 03:47 pm por Ketholy123

» Slides bugado
Hoje à(s) 01:53 pm por Luiz

» Dúvida Smiles
Hoje à(s) 01:32 pm por Luiz

» [Ajuda] HTML & CSS
Hoje à(s) 01:20 pm por Luiz

» Status do servidor
Hoje à(s) 01:04 pm por Ketholy123

» Concurso do Dia das Bruxas: Vossas participações
Hoje à(s) 02:16 am por GutaUKP

» STAFF ONLINE Widgets
Ontem à(s) 11:04 pm por Luiz

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Ketholy123
 
Kyo Panda
 
Shek
 
GutaUKP
 
dudha
 
xDominiC_.
 
iScroll
 

Quem está conectado
220 usuários online :: 9 usuários cadastrados, Nenhum Invisível e 211 Visitantes :: 2 Motores de busca

Connor R., DustyRhodes, Guzonaro, Ketholy123, Kyo Panda, Luiz, MARCUS198O, Pedxz, Railison Ramon

[ 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

Ver perfil do usuário 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
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário 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

Ver perfil do usuário 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

Ver perfil do usuário 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 : 1435
Pontos Ativos : 2004

Ver perfil do usuário 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

Ver perfil do usuário 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

Ver perfil do usuário 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

Ver perfil do usuário 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 : 1435
Pontos Ativos : 2004

Ver perfil do usuário 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

Ver perfil do usuário 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

Ver perfil do usuário 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 : 1435
Pontos Ativos : 2004

Ver perfil do usuário 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

Ver perfil do usuário 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 : 1435
Pontos Ativos : 2004

Ver perfil do usuário 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

Ver perfil do usuário 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

Ver perfil do usuário 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

Ver perfil do usuário 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 : 1435
Pontos Ativos : 2004

Ver perfil do usuário 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

Ver perfil do usuário 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 : 1435
Pontos Ativos : 2004

Ver perfil do usuário 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

Ver perfil do usuário 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 : 1435
Pontos Ativos : 2004

Ver perfil do usuário 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