Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por Roger Hoy a las 1:56 am

[ayuda] mostrar y ocultar div
por RinC Vie Dic 15, 2017 5:17 pm

[html]Colección de Cards informátivo
por Julinho Vie Dic 15, 2017 3:19 pm

[html]Menú de enlaces simple
por Andreii Vie Dic 15, 2017 2:36 pm

[html]Escaparate de imágenes sencillo
por Andreii Vie Dic 15, 2017 2:30 pm

Página 2 de 3. Precedente  1, 2, 3  Siguiente

[Javascript] Mencionar con autosugerencia de usuarios
Tema iniciado por y Añadir a favoritos

Mensaje  Chalo


Última edición por Chalo el Mar Jun 02, 2015 9:01 am, editado 2 veces
Recuerdo del primer mensaje :

[codebox]Al colocar la arroba, y la primer letra del nombre sobre el editor rapido te despliega la lista de usuarios que inician con la primer letra escrita[/codebox]
[hidecode]
Código:
$(function(){$(function(){
  if (!$.sceditor) return;
 
  var faux = document.createElement('DIV'), l = document.createElement('DIV'), t = document.getElementById('text_editor_textarea'), sce = $(t).sceditor('instance'), txt = $('.sceditor-container textarea')[0];
 
  // faux textarea
  faux.id = 'faux-textarea';
  // apply a few styles to the faux textarea so the text properties are identical
  for (var style = ['margin:5px','z-index:-1','position:absolute','font-weight:normal','font-family:Verdana,Arial,Helvetica,sans-serif','font-size:13px','text-align:left','word-wrap:break-word','line-height:1.4em','visibility:hidden','overflow:auto','overflow-x:hidden'], i=0, j=style.length,p; i<j; i++) { p = style[i].split(':'); faux.style[p[0]] = p[1]; }
  txt.style.wordBreak = 'break-all'; // makes line wrapping similar to the faux textarea
  txt.parentNode.insertBefore(faux,txt);
 
  // suggestion list
  l.className = 'sceditor-dropdown sceditor-fontsize-picker';
  l.style.height = '100px';
  l.style.width = '150px';
  l.style.overflow = 'auto';
  l.style.overflowX = 'hidden';
  l.style.display = 'none';
 
  document.body.appendChild(l);
 
  sce.keyUp(function(){ mentionSuggest() });
  txt.onclick = mentionSuggest;
 
  // use a named function so we can execute it on different events, such as when we click inside a mention
  function mentionSuggest() {
    var c = 0, v = sce.val(), s, m, pseudo, mention;
    if (document.selection) {
      s = document.selection.createRange();
      s.moveStart('character', -txt.value.length);
      c = s.text.length;
    } else if (txt.selectionStart || txt.selectionStart == 0) c = txt.selectionStart;
    v = v.slice(0,c) + '{FAUX_CARET}' + v.slice(c, v.length); // slice the message and insert the faux caret
   
    // prevent HTML from formatting and replace breaks / spaces with their HTML equivalent
    // also formats both the mentions and faux caret ( the mention regex needs improvements )
    faux.innerHTML = v.replace(/</g,'<').replace(/>/g,'>').replace(/(@".*?"|@.*?\s|@.*?(\n|\r)|@.*?$)/g,'<a href="#">$1</a>').replace(/\n|\r/g,'<br>').replace(/\s/g,'&nbsp;').replace(/<a&nbsp;href="#">/g,'<a href="#">').replace(/{FAUX_CARET}/,'<span id="faux_caret" style="position:absolute;margin-left:-3px;">|</span>');
    faux.style.width = txt.style.width;
    faux.style.height = txt.style.height;
    faux.scrollTop = txt.scrollTop;
   
    // find the faux caret's parent and check if it's an anchor
    // since HTML isn't formatted it's the perfect way to identify mentions
    m = document.getElementById('faux_caret').parentNode;
    if (m.tagName == 'A') {
      // clean the mention string so that we can use it for both replacement and queries
      mention = m.innerHTML.replace(/<span.*?>\|<\/span>/,'').replace(/&nbsp;/g,' ').replace(/<br>/g,''), pseudo = mention.slice(1).replace(/(^"|"$)/g,'').trim();
     
      // sets the suggestion list position below where the mention is
      l.style.left = $(m).offset().left + 'px';
      l.style.top = ($(m).offset().top + 20) + 'px';
     
      // submit a query to the memberlist page with the pseudo
      pseudo.length && $.get('/memberlist?username='+encodeURIComponent(pseudo),function(d) {
        var u = $('.avatar-mini a, a.gen',d);
        if (!u.length) return;
        l.innerHTML = '';
       
        // loop through the results and form a list of username suggestions
        for (var i=0,j=u.length,a; i<j; i++) {
          a = document.createElement('A');
          a.href = '#';
          a.className = 'sceditor-fontsize-option';
          a.innerHTML = $(u[i]).text().trim();
          a.onclick = function() {
            sce.focus();
            // this is a little clunky at the moment, it globally replaces the mention variable with a's innerHTML
            // ex : all @a will be replaced with @"Ange Tuteur"
            sce.val(sce.val().replace(RegExp(mention,'g'),'@"'+$(this).text()+'"'));
            l.style.display = 'none';
            return false;
          };
          l.appendChild(a);
        }
        l.style.display = 'block';
      });
    } else l.style.display = 'none';
  }
})});
[/hidecode]
staff
Chalo
avatar

¿Que estoy pensando? :

los dias de ocio son geniales [table class=fecha_up][td]Se modifico:13/12/17 - 11:40 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/XlCMsAOh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6469


Puntos :

8481


Me gusta :

967


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

Originalmente así es como debió funcionar el sistema de menciones.
Buen trabajo
YoshiGM
avatar

¿Que estoy pensando? :

Nunca Te Rindas.. Sólo Sigue Intentándolo ;3 [table class=fecha_up][td]Se modifico:3/06/17 - 18:33 hrs. [/td][/table]


Banner en temas :

http://i19.servimg.com/u/f19/13/45/80/80/banner10.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #555


Mensajes :

977


Puntos :

1299


Me gusta :

178


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario https://yoshifansclub.foroactivo.com

Volver arriba Ir abajo

Mensaje  mrsrz
Wow, que eficiente Chalo, buen sistema, en hora buena!
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 :

419


Puntos :

587


Me gusta :

60


ingreso :

23/12/2014


Sexo :

Masculino

Plataforma :

PunBB


Navegador :

Chrome


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

Volver arriba Ir abajo

Mensaje  rokitx
nose de qe setrata lo provare gracias
rokitx
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://www.profilebrand.com/images/facebook-cover/4342-loading-90-percent-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

62


Puntos :

66


Me gusta :

4


ingreso :

18/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  RinC
Este código choca con el otro que tenemos de mencionar con mp?
staff
RinC
avatar

¿Que estoy pensando? :

Ya echaba de menos mi open!


Banner en temas :

http://i.imgur.com/WpuuVJy.jpg


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

781


Puntos :

1122


Me gusta :

183


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  Chalo
Pauu~ escribió:[quotelink="/t418p10-javascript-mencionar-con-autosugerencia-de-usuarios#7832"]
Este código choca con el otro que tenemos de mencionar con mp?

si son incompatibles
staff
Chalo
avatar

¿Que estoy pensando? :

los dias de ocio son geniales [table class=fecha_up][td]Se modifico:13/12/17 - 11:40 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/XlCMsAOh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6469


Puntos :

8481


Me gusta :

967


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

Mensaje  Aria
Mil gracias! Muy útil
Aria
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/ee5c516eb48ee3e839f133da0917acf8/zcxvzo8/6Womvw4se/tumblr_static_keru_cover.jpg


Color de titulos :

#fff


Sombra titulo :

0 1px #000


Mensajes :

71


Puntos :

86


Me gusta :

7


ingreso :

10/03/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Soy curioso. Gracias por el aporte.
fascicularia
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://davesgarden.com/guides/pf/thumbnail.php?image=2006/10/11/Calif_Sue/aad8bf.jpg


Color de titulos :

green


Sombra titulo :

1px 1px 1px #fff


Mensajes :

157


Puntos :

187


Me gusta :

20


ingreso :

20/01/2016


Sexo :

Femenino

Plataforma :

PhpBB2


Navegador :

Opera


Ver perfil de usuario

Volver arriba Ir abajo

Gracias por este code
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 :

117


Puntos :

132


Me gusta :

11


ingreso :

21/01/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

a ver esto como va
Himnoshistoricos
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 :

https://c2.staticflickr.com/2/1445/25839638916_404acbe82c_b.jpg


Color de titulos :

#fff


Sombra titulo :

0 1px #000


Mensajes :

496


Puntos :

647


Me gusta :

89


ingreso :

04/02/2016


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

firefox


Ver perfil de usuario http://www.niunpasoatras.org/

Volver arriba Ir abajo

posteo para ver code
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 :

117


Puntos :

132


Me gusta :

11


ingreso :

21/01/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


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