Staff en línea

Página 1 de 2. 1, 2  Siguiente

[Resuelto] Sistema de likes ajax al lado del post
Tema iniciado por y Añadir a favoritos



Última edición por Andreii el Dom Ene 24, 2016 3:13 pm, editado 2 veces
URL:: FORO
Versión de mi foro:: phpBB3
Navegador:: Chrome
Descripcion del problema: Colocar sistema de likes ajax al lado del post
Capturas de pantalla del problema: de ESTO


a que esté en el lugar encerrado, este

Mensaje automático



[ok]Cierro tema, y muevo a Temas resueltos[/ok]
Andreii
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://static.tumblr.com/376a46baffe3444282f3b414a2fd0d46/jsyqb9t/qxbnm1bqy/tumblr_static_tumblr_static_4eo5pzujbwcg8gws0gcc8oc0s_focused_v3.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

140


Puntos :

161


Me gusta :

17


ingreso :

21/01/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Hola, prueba a ver con este codigo, En los temas

Código:

$(function() {
  // General Configuration of the plugin
  var config = {
    position_left : true, // true for left || false for right
    negative_vote : true, // true for negative votes || false for positive only
    vote_bar : true, // display a small bar under the vote buttons
   
    // button config
    icon_plus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>',
    icon_minus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',
   
    // language config
    title_plus : 'Me gusta el post de %{USERNAME}',
    title_minus : 'No me gusta el post de %{USERNAME}',
   
    title_like_singular : '%{VOTES} persona le gusta el post de %{USERNAME}',
    title_like_plural : '%{VOTES} personas les gusta el post de %{USERNAME}',
   
    title_dislike_singular : '%{VOTES} persona no le gusta el post de %{USERNAME}',
    title_dislike_plural : '%{VOTES} personas no les gusta el post de %{USERNAME}',
   
    title_vote_bar : '%{VOTES} les gusta el post de %{USERNAME} %{PERCENT}'
  },
     
     
  // function bound to the onclick handler of the vote buttons
  submit_vote = function() {
    var next = this.nextSibling, // the counter next to the vote button that was clicked
        box = this.parentNode,
        bar = box.getElementsByTagName('DIV'),
        vote = box.getElementsByTagName('A'),
        mode = /eval=plus/.test(this.href) ? 1 : 0,
        i = 0, j = vote.length, pos, neg, percent;
   
    // submit the vote asynchronously
    $.get(this.href, function() {
      next.innerHTML = +next.innerHTML + 1; // add to the vote count
      next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
     
      pos = +vote[0].nextSibling.innerHTML;
      neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
      percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
     
      if (bar[0]) {
        bar[0].style.display = '';
        bar[0].firstChild.style.width = percent;
        box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
      }
    });
   
    // revoke voting capabilities on the post once the vote is cast
    for (; i < j; i++) {
      vote[i].href = '#';
      vote[i].className = vote[i].className.replace(/fa_vote/, 'fa_voted');
      vote[i].onclick = function() { return false };
    }
   
    return false;
  },
     
  vote = $('.vote'), i = 0, j = vote.length,
  version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check
 
  // version data so we don't have to redefine these arrays during the loop
  vdata = {
    tag : ['SPAN', 'LI', 'SPAN', 'LI'][version],
    name : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton'][version],
    actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons'][version],
  },
 
  post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
 
  // prevent execution if the version cannot be determined
  if (version == 'badapple') {
    if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
    return;
  }
 
  for (; i < j; i++) {
    post = $(vote[i]).parentsUntil('.post').parent()[0];
    bar = $('.vote-bar', vote[i])[0]; // vote bar
    button = $('.vote-button', vote[i]); // plus and minus buttons
    pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
    ul = $(vdata.actions, post)[0]; // post actions
    li = document.createElement(vdata.tag); // vote system container
    li.className = 'fa_reputation';
   
    if (li.tagName == 'SPAN') li.style.display = 'inline-block';
   
    // calculate votes
    if (bar) {
      total = +bar.title.replace(/.*?\((\d+).*/, '$1');
      percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
     
      n_pos = Math.round(total * (percent / 100));
      n_neg = total - n_pos;
    } else {
      n_pos = 0;
      n_neg = 0;
    }
   
    // set up negative and positive titles with the correct grammar, votes, and usernames
    title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
    title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
   
    // define the vote counts
    li.innerHTML = '<span class="fa_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_count fa_negative" title="' + title_neg + '">' + n_neg + '</span>' : '');
    span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
   
    // create positive vote button
    plus = document.createElement('A');
    plus.href = button[0] ? button[0].firstChild.href : '#';
    plus.onclick = button[0] ? submit_vote : function() { return false };
    plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
    plus.innerHTML = config.icon_plus;
    plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
   
    span[0] && li.insertBefore(plus, span[0]);
   
    // create negative vote button
    if (config.negative_vote) {
      minus = document.createElement('A');
      minus.href = button[1] ? button[1].firstChild.href : '#';
      minus.onclick = button[1] ? submit_vote : function() { return false };
      minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
      minus.innerHTML = config.icon_minus;
      minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
     
      span[1] && li.insertBefore(minus, span[1]);
    }
   
    // create vote bar
    if (config.vote_bar) {
      vote_bar = document.createElement('DIV');
      vote_bar.className = 'fa_votebar';
      vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
      vote_bar.style.display = bar ? '' : 'none';
      li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
      li.appendChild(vote_bar);
    }
   
    // finally insert the vote system and remove the default one
    config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
    vote[i].parentNode.removeChild(vote[i]);
  }
});

CSS

Código:

.fa_vote, .fa_voted, .fa_count {
  font-size:12px;
  font-family:Verdana, Arial, Helvetica, Sans-serif;
  display:inline-block !important;
  width:auto !important;
  transition:300ms;
}

.fa_voted, .fa_vote:hover { opacity:0.4 }
.fa_voted { cursor:default }

.fa_count {
      font-weight: bold;
    margin: 0 3px;
    font-family: arial;
    cursor: default;
}
.fa_positive { color:#4A0 }
.fa_negative { color:#A44 }

.fa_votebar, .fa_votebar_inner {
  background:#C44;
  height:3px;
}

.fa_votebar_inner {
  background:#4A0;
  transition:300ms;
}

mrsrz
avatar

¿Que estoy pensando? :

... [table class=fecha_up][td]Se modifico:25/11/16 - 19:20 hrs.[/td][/table]


Banner en temas :

http://profilerehab.com/facebook_covers/musical/cool_guitar_cover_9.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

420


Puntos :

589


Me gusta :

61


ingreso :

23/12/2014


Sexo :

Masculino

Plataforma :

PunBB


Navegador :

Chrome


Ver perfil de usuario http://musicinstant.host-es.com/

Volver arriba Ir abajo

Bueno probé y me queda así

Andreii
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://static.tumblr.com/376a46baffe3444282f3b414a2fd0d46/jsyqb9t/qxbnm1bqy/tumblr_static_tumblr_static_4eo5pzujbwcg8gws0gcc8oc0s_focused_v3.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

140


Puntos :

161


Me gusta :

17


ingreso :

21/01/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff
bien, me puedes enviar una cuenta para probar en tu foro? por inbox
Chalo
avatar

¿Que estoy pensando? :

soy leyenda :p [table class=fecha_up][td]Se modifico:21/02/18 - 10:48 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6596


Puntos :

8642


Me gusta :

991


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

@Chalo escribió:[quotelink="/t958-en-curso-sistema-de-likes-ajax-al-lado-del-post#9190"]
bien, me puedes enviar una cuenta para probar en tu foro? por inbox
[tag]Chalo[/tag]
¿La cuenta que entre al PA verdad?

Te envío por privado
Andreii
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://static.tumblr.com/376a46baffe3444282f3b414a2fd0d46/jsyqb9t/qxbnm1bqy/tumblr_static_tumblr_static_4eo5pzujbwcg8gws0gcc8oc0s_focused_v3.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

140


Puntos :

161


Me gusta :

17


ingreso :

21/01/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff
@Andreii escribió:[quotelink="/t958-en-curso-sistema-de-likes-ajax-al-lado-del-post#9192"]
@Chalo escribió:[quotelink="/t958-en-curso-sistema-de-likes-ajax-al-lado-del-post#9190"]
bien, me puedes enviar una cuenta para probar en tu foro? por inbox
[tag]Chalo[/tag]
¿La cuenta que entre al PA verdad?

Te envío por privado
si gustas, puedes confiar, soy 100% profesional en lo que hago
Chalo
avatar

¿Que estoy pensando? :

soy leyenda :p [table class=fecha_up][td]Se modifico:21/02/18 - 10:48 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6596


Puntos :

8642


Me gusta :

991


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

Enviado.
Andreii
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://static.tumblr.com/376a46baffe3444282f3b414a2fd0d46/jsyqb9t/qxbnm1bqy/tumblr_static_tumblr_static_4eo5pzujbwcg8gws0gcc8oc0s_focused_v3.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

140


Puntos :

161


Me gusta :

17


ingreso :

21/01/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff
[tag]Andreii[/tag]

cual quieres que te instale el primero o el segundo code?
Chalo
avatar

¿Que estoy pensando? :

soy leyenda :p [table class=fecha_up][td]Se modifico:21/02/18 - 10:48 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6596


Puntos :

8642


Me gusta :

991


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

Primero o segundo? ya me hice bolas, jajaja lo siento no entendi
Andreii
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://static.tumblr.com/376a46baffe3444282f3b414a2fd0d46/jsyqb9t/qxbnm1bqy/tumblr_static_tumblr_static_4eo5pzujbwcg8gws0gcc8oc0s_focused_v3.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

140


Puntos :

161


Me gusta :

17


ingreso :

21/01/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff
hola modifique en el foro el code, para acomodarlo donde quieres juega con este CSS

Código:

.fa_reputation{ list-style-type: none!important;
position:absolute;margin-left:101%;
width:80px;
margin-top:7%}
Chalo
avatar

¿Que estoy pensando? :

soy leyenda :p [table class=fecha_up][td]Se modifico:21/02/18 - 10:48 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6596


Puntos :

8642


Me gusta :

991


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.