Mudar posição do botão Curtir
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Mudar posição do botão Curtir
Detalhes da questão
Endereço do fórum: http://bl-rpg.forumeiros.com
Versão do fórum: ModernBB
Descrição
Boa noite,
https://i.imgur.com/PVpHT22.png
Como mostra na imagem, a mão do like esta mal posicionada... se puder colocar ali proximo aos botoes de editar etc
Codigo java
- Código:
/**
*! Botão curtir para fóruns ModernBB
*
* @author Luiz
* @version {beta} 1.0
* @licence MIT
*
* Copyright (c) Luiz Felipe | All rights reserved.
*/
(function ($, styles) {
'use strict';
/**
* @name Recriar o painel de voto.
* @desc Usado para recriar o painel dos votos no topo do post.
* @param {string} href - Corresponde à URL que será usada na ação AJAX caso o botão de curtir seja usado.
* @param {string} number - Corresponde ao número de votos daquela postagem.
* @param {object} vote - Corresponde ao seletor do wrapper de todo o conteúdo dos votos.
* @param {boolean} cond - Caso for "true", a ação AJAX será feita, caso contrário, somente irá aparecer.
*/
var $createVote = function (href, number, vote, cond) {
$('<div>', {
'data-href': href,
'html' : [
'<span class="fa-vote-counter">' + number + '</span>',
$('<a>', { 'class': 'ion-thumbsup fa-new-vote-action-trigger' }).prop('outerHTML')
].join('\n'),
'class' : cond ? 'fa-new-vote-wrapper' : 'fa-new-vote-wrapper voted'
})
.insertAfter(vote)
.find('.fa-new-vote-action-trigger')
.on('click', function () {
var $this = $(this);
if (!cond || $(this).is('.voted')) {
alert('Você já votou!');
return;
}
var $button = $(this).prev('span');
var $parent = $(this).parent('div');
$this.addClass('voted');
$parent.addClass('voted');
$button.text(parseInt($button.text()) + 1);
$.get(href)
.done(function () {
console.info('O voto foi registrado.');
})
.fail(function () {
alert('Houve um erro, tente novamente!');
location.reload();
})
;
})
;
};
$(function () {
$('.post').each(function () {
var $this = $(this);
var $vote = $this.find('.vote');
var $like = $this.find('.vote .ion-thumbsup');
var $bar = $this.find('.vote-bar');
var $barNum = $this.find('.vote-bar .vote-bar-desc');
$vote.hide();
/**
* Parte 01:
* Executar o código caso já existam votos, mas o usuário ainda não tiver votado.
*/
if ($like.length && $bar.length) {
var number1 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
var href1 = $like.attr('href');
$createVote(href1, number1, $vote, true);
return;
}
/**
* Parte 02:
* Executar o código caso já existam votos, contando com o do usuário.
*/
if ($bar.length) {
var number2 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
var href2 = $like.attr('href');
$createVote(href2, number2, $vote, false);
return;
}
/**
* Parte 03:
* Executar o código caso o usuário não tiver votado, e não existam votos.
*/
if ($like.length) {
var href3 = $like.attr('href');
$createVote(href3, 0, $vote, true);
return;
}
});
$(['<style>', styles, '</style>'].join('\n')).appendTo('head');
});
}(jQuery, [
'.fa-new-vote-wrapper {',
' float: left;',
' display: inline-block;',
' position: relative;',
' margin: -10px 30px auto;',
'}',
'',
'.fa-new-vote-wrapper .fa-vote-counter {',
' position: absolute;',
' left: -4px;',
' top: 1px;',
' padding: 3px 10px 1px 10px;',
' border-radius: 0px 5px 5px 0px;',
' color: #fff;',
' z-index: 1;',
'}',
'',
'.fa-new-vote-wrapper .fa-new-vote-action-trigger {',
' color: #fff;',
' display: inline-block;',
' padding: 6px 7.5px;',
' font-size: 18px;',
' cursor: pointer;',
' text-decoration: none;',
' position: absolute;',
' left: -25px;',
' top: -5px;',
' z-index: 13;',
' -webkit-transition: all 200ms linear;',
' -moz-transition: all 200ms linear;',
' -ms-transition: all 200ms linear;',
' -o-transition: all 200ms linear;',
' transition: all 200ms linear;',
'}',
'',
'.fa-new-vote-wrapper .fa-new-vote-action-trigger:hover {',
' border-color: rgba(0,0,0,0.12);',
' border-radius: 3px;',
' border-style: solid;',
' border-width: 1px;',
' top: 0px;',
' margin-left: 2px;',
' box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
' padding: 0px 3px 2px 4px;',
' background: #11a017;',
'}',
'',
'.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger,',
'.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {',
' border-color: rgba(0,0,0,0.12);',
' border-radius: 3px;',
' border-style: solid;',
' border-width: 1px;',
' top: 0px;',
' margin-left: 1px;',
' box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
' padding: 0px 3px 2px 4px;',
'}'
].join('\n')));
Re: Mudar posição do botão Curtir
Olá @PESS_dodo,
Mude o seu código para o seguinte:
Cordialmente,
pedxz.
Mude o seu código para o seguinte:
- Código:
/**
*! Botão curtir para fóruns ModernBB
*
* @author Luiz
* @version {beta} 1.0
* @licence MIT
*
* Copyright (c) Luiz Felipe | All rights reserved.
*/
(function ($, styles) {
'use strict';
/**
* @name Recriar o painel de voto.
* @desc Usado para recriar o painel dos votos no topo do post.
* @param {string} href - Corresponde à URL que será usada na ação AJAX caso o botão de curtir seja usado.
* @param {string} number - Corresponde ao número de votos daquela postagem.
* @param {object} vote - Corresponde ao seletor do wrapper de todo o conteúdo dos votos.
* @param {boolean} cond - Caso for "true", a ação AJAX será feita, caso contrário, somente irá aparecer.
*/
var $createVote = function (href, number, vote, cond) {
$('<div>', {
'data-href': href,
'html' : [
'<span class="fa-vote-counter">' + number + '</span>',
$('<a>', { 'class': 'ion-thumbsup fa-new-vote-action-trigger' }).prop('outerHTML')
].join('\n'),
'class' : cond ? 'fa-new-vote-wrapper' : 'fa-new-vote-wrapper voted'
})
.insertAfter(vote)
.find('.fa-new-vote-action-trigger')
.on('click', function () {
var $this = $(this);
if (!cond || $(this).is('.voted')) {
alert('Você já votou!');
return;
}
var $button = $(this).prev('span');
var $parent = $(this).parent('div');
$this.addClass('voted');
$parent.addClass('voted');
$button.text(parseInt($button.text()) + 1);
$.get(href)
.done(function () {
console.info('O voto foi registrado.');
})
.fail(function () {
alert('Houve um erro, tente novamente!');
location.reload();
})
;
})
;
};
$(function () {
$('.post').each(function () {
var $this = $(this);
var $vote = $this.find('.vote');
var $like = $this.find('.vote .ion-thumbsup');
var $bar = $this.find('.vote-bar');
var $barNum = $this.find('.vote-bar .vote-bar-desc');
$vote.hide();
/**
* Parte 01:
* Executar o código caso já existam votos, mas o usuário ainda não tiver votado.
*/
if ($like.length && $bar.length) {
var number1 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
var href1 = $like.attr('href');
$createVote(href1, number1, $vote, true);
return;
}
/**
* Parte 02:
* Executar o código caso já existam votos, contando com o do usuário.
*/
if ($bar.length) {
var number2 = $barNum.text().replace(/^.+:.\d+%.\((\d+).+\)$/gi, '$1');
var href2 = $like.attr('href');
$createVote(href2, number2, $vote, false);
return;
}
/**
* Parte 03:
* Executar o código caso o usuário não tiver votado, e não existam votos.
*/
if ($like.length) {
var href3 = $like.attr('href');
$createVote(href3, 0, $vote, true);
return;
}
});
$(['<style>', styles, '</style>'].join('\n')).appendTo('head');
});
}(jQuery, [
'.fa-new-vote-wrapper {',
' float: right;',
' display: inline-block;',
' position: relative;',
' margin: -10px 30px auto;',
'}',
'',
'.fa-new-vote-wrapper .fa-vote-counter {',
' position: absolute;',
' right: -4px;',
' top: 1px;',
' padding: 3px 10px 1px 10px;',
' border-radius: 0px 5px 5px 0px;',
' color: #fff;',
' z-index: 1;',
'}',
'',
'.fa-new-vote-wrapper .fa-new-vote-action-trigger {',
' color: #fff;',
' display: inline-block;',
' padding: 6px 7.5px;',
' font-size: 18px;',
' cursor: pointer;',
' text-decoration: none;',
' position: absolute;',
' right: -25px;',
' top: -5px;',
' z-index: 13;',
' -webkit-transition: all 200ms linear;',
' -moz-transition: all 200ms linear;',
' -ms-transition: all 200ms linear;',
' -o-transition: all 200ms linear;',
' transition: all 200ms linear;',
'}',
'',
'.fa-new-vote-wrapper .fa-new-vote-action-trigger:hover {',
' border-color: rgba(0,0,0,0.12);',
' border-radius: 3px;',
' border-style: solid;',
' border-width: 1px;',
' top: 0px;',
' margin-left: 2px;',
' box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
' padding: 0px 3px 2px 4px;',
' background: #11a017;',
'}',
'',
'.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger,',
'.fa-new-vote-wrapper.voted .fa-new-vote-action-trigger:hover {',
' border-color: rgba(0,0,0,0.12);',
' border-radius: 3px;',
' border-style: solid;',
' border-width: 1px;',
' top: 0px;',
' margin-left: 1px;',
' box-shadow: 0 1px 1px rgba(0,0,0,0.1);',
' padding: 0px 3px 2px 4px;',
'}'
].join('\n')));
Cordialmente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Mudar posição do botão Curtir
Tópico resolvidoMovido para "Questões resolvidas". |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos