elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Snippets] javascript / CSS / HTML5
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Snippets] javascript / CSS / HTML5  (Leído 3,229 veces)
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
[Snippets] javascript / CSS / HTML5
« en: 18 Marzo 2013, 17:22 pm »

He pensado que estaría interesante crear un post parecido a "Pequeños Trucos en PHP" o "Librería de Snippets !! (Posteen aquí sus snippets)" pero orientado a javascript y CSS. Se trata de pegar funciones o "código" que facilite la tarea y que nadie tenga que reinventar la rueda xD.

Indicad por favor a que "lenguaje" pertenece: [javascript] - [CSS] - [HTML5] y en caso de usar alguna librería (como jQuery) debéis indicarla también. Ejemplo:
[javascript] [jQuery] - Hacer que tu pantalla te de una hostia.

Por supuesto el código debe ir entre sus respectivas etiquetas: [code=javascript][/code], [code=css][/code], [code=html4strict][/code].

Como es de costumbre en cualquier post de este tipo.. el autor de este empieza primero así que:

[javascript] - Validar usuario,contraseña y correo.

Esto es una función que valida (mediante regex) si el input cumple con el objetivo (type).

Para "usr" se requiere de un nombre sin espacios, de un mínimo de 4 caracteres y un máximo de 12. No permite ningún carácter que no sea A-Z o 0-9. Tampoco permite letras del tipo ñ ç o acentos (á,ó,é etc.).

Para "pwd" se requiere de una contraseña con un mínimo de 6 caracteres (no tiene máximo). Requiere al menos una letra minúscula, una mayúscula y un numero. Aunque acepte caracteres como la ñ o ç (acentos incluidos), no los toma en cuenta a la hora de validar las minúsculas y mayúsculas.

Para "mail" se requiere de un correo con las siguientes características: Puede contener letras(A-Z), numeros(0-9), punto(.), barra baja(_), porcentaje(%), mas(+) y menos(-).  Necesita 1 arroba(@). El nombre de dominio (aaa.com ) debe ser de al menos 2 letras y la extensión de al menos 2 y un máximo de 5.

Devuelve, TRUE en caso de que cumpla y FALSE en caso de que no. No diferencia entre mayusculas y minusculas excepto para "pwd".

Código
  1. var dm_validate = function(input,type){
  2.   switch(type){
  3.      case "usr":
  4.         regex = /^[a-z0-9]{4,12}$/i;
  5.         break;
  6.      case "pwd":
  7.         regex = /(?=.*)(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{6}/;
  8.         break;
  9.      case "mail":
  10.         regex = /^[A-Z0-9._%+-]+@[A-Z0-9\.\-]{2,}\.[A-Z]{2,5}$/i;
  11.         break;
  12.   }
  13.   if(input.match(regex)){return true;}else{return false;}
  14. };

Uso
Código
  1. dm_validate("drvy","usr");


[javascript] - Generador de contraseña.

Esta función la uso con la anterior pero la pongo separada por si acaso. Se trata de una función que genera una contraseña del tamaño que hayas indicado y a partir de los caracteres indicados en la variable "possible". Acepta plenght que es el tamaño (numero de caracteres) de la contraseña... si no se indica asume el numero 10. Hace un while hasta que la contraseña cumpla con el regex indicado (el mismo que el de dm_validate). Devuelve la contraseña generada.


Código
  1. var dm_pwdgenerator = function(plenght){
  2.   if(plenght===undefined){plenght = 10;}
  3.   var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789:!,.;$/()=-_';
  4.   var text='';
  5.   while (text.match(/(?=.*)(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{6}/)===null){
  6.      text = '';
  7.      for(i=0;i<plenght;i++){
  8.         text += possible.charAt(Math.floor(Math.random() * possible.length));
  9.      }
  10.   }
  11.   return text;
  12. };

En mi caso, en vez de hacer text.match(...)===null, simplemente llamo a dm_validate:
Código
  1. while (dm_validate(text,'pwd')!==true){

Uso
Código
  1. console.log(dm_pwdgenerator(6)); // Escribe en la consola, una contraseña de 6 caracteres


[javascript] [jQuery] - Tooltips.

Esta función me costo un buen tiempo y una buena quemada de cabeza xD. Genera un tooltip (el típico cuadradito que te dice cosas xD). A diferencia de los millones de plugins para jquery que he visto, esta función elimina su rastro y NO deja ***** en el DOM. Acepta 3 parámetros:
   target_items = Los objetos donde aparecerá.. (deben llevar el atributo title).
   css = La clase css del tooltip
   garbage_collect = Elimina cualquier rastro tanto del tooltip generado como de anteriores. Usar si se llama a la función mas de 1 vez.

Código
  1. var dmToolTip2 = function(target_items,css,garbagecollect){
  2. initialized=undefined;
  3. oldtitle=undefined;
  4. $(target_items).on('mouseover', function(event){
  5. if(initialized===undefined && $(this).attr('dmtooltip2')===undefined){
  6. newid = 'dmToolTip2';
  7. element = $(this);
  8. if(element.attr('title')===undefined){return false;}
  9. element.attr('dmtooltiptitle',element.attr('title'));
  10. element.attr('dmtooltip2','set');
  11. } else {return false;}
  12. $('body').append('<div class="'+css+'" id="'+newid+'"><p>'+element.attr('dmtooltiptitle')+'</p></div>');
  13. my_tooltip = $('#'+newid);
  14. my_tooltip.css({display:"none"}).fadeIn(400);
  15. element.removeAttr('title');
  16. })
  17. .on("mouseout", function(event){
  18. initialized = undefined;
  19. element.removeAttr('dmtooltip2');
  20. element.attr('title',element.attr('dmtooltiptitle'));
  21. element.removeAttr('dmtooltiptitle');
  22. if(garbagecollect===true){$("[id*=dmToolTip2]").remove();} else {$("#"+newid).remove();}
  23. })
  24. .on("mousemove",function(kmouse){
  25. var border_top = $(window).scrollTop();
  26. var border_right = $(window).width();
  27. var left_pos; var top_pos; var offset = 20;
  28. if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){left_pos = kmouse.pageX+offset;}
  29. else {left_pos = border_right-my_tooltip.width()-offset;}
  30. if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){top_pos = border_top +offset;}
  31. else {top_pos = kmouse.pageY-my_tooltip.height()-offset;}
  32. my_tooltip.css({left:left_pos,top:top_pos});
  33. });
  34. };

Css del tooltip. Lo mas importante es que la clase lleve POSITION:ABSOLUTE; para que se pueda mover sobre el elemento. Lo demás es cosa de gustos =)
Código
  1. .maintip {max-width:300px; min-width:100px; padding:3px; margin:0px 0px 0px -20px; font-size:16px; color:#FFF; border-radius:7px 7px 7px 0px; position:absolute; background:#CACACA; z-index:999; left:-9999px; font-family:"Segoe UI",Arial, Helvetica, sans-serif;}
  2. .maintip p {background:#222; color:#FFF; text-shadow:#000 0px 0px 5px; border-radius:3px; padding:3px; letter-spacing:1px; position:relative; margin:0px;}

Ejemplo de uso:
Código
  1. dmToolTip2("#midiv a","maintip");
Código
  1.   <div id="midiv">
  2.      <a href="www.google.com" title="¿Porque te quieres ir?">Ir a Google</a>
  3.   </div>
  4. </body>
  5.  

Recuerden usarlo cuando el DOM esta cargado por completo.


Espero/amos vuestros snippets =)

Saludos


« Última modificación: 18 Marzo 2013, 17:25 pm por drvy | BSM » En línea

Ketchuz

Desconectado Desconectado

Mensajes: 31



Ver Perfil
Re: [Snippets] javascript / CSS / HTML5
« Respuesta #1 en: 18 Marzo 2013, 21:31 pm »

Mostrar correctamente los nuevos elementos HTML 5 en Internet Explorer 6, 7 y 8:

Insertar estas etiquetas en la sección <head>.
Código
  1. <!--[if lt IE 9]>
  2. <script src="http://html5shim.googlecode.com/svn/trunk/html5 .js"></script>
  3. <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  4. <![endif]-->


« Última modificación: 21 Marzo 2013, 00:52 am por Ketchuz » En línea

No robes, el gobierno odia la competencia
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: [Snippets] javascript / CSS / HTML5
« Respuesta #2 en: 19 Marzo 2013, 21:48 pm »

Buena =). A ver si se anima mas gente :silbar:

Dejo una replica de la función desde_hasta() en PHP de WHK:

[javascript] Funcion desde_hasta()
Código
  1. var desde_hasta = function(desde,hasta,contenido){
  2.   if(desde.length < 1 || hasta.length < 1){return false;}
  3.   pos = contenido.toLowerCase().search(desde.toLowerCase());
  4.   pos2 = contenido.toLowerCase().search(hasta.toLowerCase());
  5.   if(pos >= 0 || pos2 >= 0){
  6.      var retorno = contenido.split(desde);
  7.      retorno = retorno[1];
  8.      retorno = retorno.split(hasta);
  9.      retorno = retorno[0];
  10.      return retorno;
  11.   } else {return false;}
  12. };

Uso:
Código
  1. var text = 'tienes <a href="http://foro.elhacker.net/pm.html">111 mensajes</a>';
  2. var cantidad = desde_hasta('tienes <a href="http://foro.elhacker.net/pm.html">','mensajes</a>',text);
  3. alert("Tienes: " + cantidad + ' mensajes');
  4. // Devuelve un alert -> Tienes: 111 mensajes

Saludos
« Última modificación: 19 Marzo 2013, 22:04 pm por drvy | BSM » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Aplicación HTML5 y javascript en Windows 8
Desarrollo Web
kodos 1 2,077 Último mensaje 29 Abril 2012, 21:04 pm
por inlain
Reproductor con HTML5 y javascript
Desarrollo Web
IlyaBakhlin 0 2,132 Último mensaje 15 Abril 2012, 01:06 am
por IlyaBakhlin
Librería de Snippets para VB.NET !! (Compartan aquí sus snippets) « 1 2 ... 57 58 »
.NET (C#, VB.NET, ASP)
Eleкtro 579 480,146 Último mensaje 28 Febrero 2024, 17:13 pm
por Eleкtro
Browsergame HTML5 de Robots para practicar javascript
Scripting
Prozac20mg 1 2,252 Último mensaje 14 Noviembre 2013, 22:12 pm
por ivancea96
HTML5 O javascript para formularios
Desarrollo Web
OssoH 7 2,867 Último mensaje 28 Febrero 2014, 19:09 pm
por joz_z
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines