[Snippets] javascript / CSS / HTML5

[#!drvy]

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 (javascript) [Seleccionar] Expandir

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

Uso

Código (javascript) [Seleccionar] Expandir

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 (javascript) [Seleccionar] Expandir

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

En mi caso, en vez de hacer text.match(...)===null, simplemente llamo a dm_validate:

Código (javascript) [Seleccionar] Expandir

while (dm_validate(text,'pwd')!==true){

Uso

Código (javascript) [Seleccionar] Expandir

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 (javascript) [Seleccionar] Expandir

var dmToolTip2 = function(target_items,css,garbagecollect){
initialized=undefined;
oldtitle=undefined;
$(target_items).on('mouseover', function(event){
if(initialized===undefined && $(this).attr('dmtooltip2')===undefined){
newid = 'dmToolTip2';
element = $(this);
if(element.attr('title')===undefined){return false;}
element.attr('dmtooltiptitle',element.attr('title'));
element.attr('dmtooltip2','set');
} else {return false;}
$('body').append('<div class="'+css+'" id="'+newid+'"><p>'+element.attr('dmtooltiptitle')+'</p></div>');
my_tooltip = $('#'+newid);
my_tooltip.css({display:"none"}).fadeIn(400);
element.removeAttr('title');
})
.on("mouseout", function(event){
initialized = undefined;
element.removeAttr('dmtooltip2');
element.attr('title',element.attr('dmtooltiptitle'));
element.removeAttr('dmtooltiptitle');
if(garbagecollect===true){$("[id*=dmToolTip2]").remove();} else {$("#"+newid).remove();}
})
.on("mousemove",function(kmouse){
var border_top = $(window).scrollTop();
var border_right = $(window).width();
var left_pos; var top_pos; var offset = 20;
if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){left_pos = kmouse.pageX+offset;}
else {left_pos = border_right-my_tooltip.width()-offset;}
if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){top_pos = border_top +offset;}
else {top_pos = kmouse.pageY-my_tooltip.height()-offset;}
my_tooltip.css({left:left_pos,top:top_pos});
});
};

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 (css) [Seleccionar] Expandir

.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;}
.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 (javascript) [Seleccionar] Expandir

dmToolTip2("#midiv a","maintip");

Código (html4strict) [Seleccionar] Expandir

<body>
  <div id="midiv">
     <a href="www.google.com" title="¿Porque te quieres ir?">Ir a Google</a>
  </div>
</body>


Recuerden usarlo cuando el DOM esta cargado por completo.

Espero/amos vuestros snippets =)

Saludos

[Ketchuz]

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

Insertar estas etiquetas en la sección <head>.

Código (html4strict) [Seleccionar] Expandir


<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5 .js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

[#!drvy]

Buena =). A ver si se anima mas gente

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

[javascript] Funcion desde_hasta()

Código (javascript) [Seleccionar] Expandir

var desde_hasta = function(desde,hasta,contenido){
  if(desde.length < 1 || hasta.length < 1){return false;}
  pos = contenido.toLowerCase().search(desde.toLowerCase());
  pos2 = contenido.toLowerCase().search(hasta.toLowerCase());
  if(pos >= 0 || pos2 >= 0){
     var retorno = contenido.split(desde);
     retorno = retorno[1];
     retorno = retorno.split(hasta);
     retorno = retorno[0];
     return retorno;
  } else {return false;}
};

Uso:

Código (javascript) [Seleccionar] Expandir

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

Saludos