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".
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
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.
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:
while (dm_validate(text,'pwd')!==true){
Uso
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.
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 =)
.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:
dmToolTip2("#midiv a","maintip");
<a href="www.google.com" title="¿Porque te quieres ir?">Ir a Google
</a>
Recuerden usarlo cuando el DOM esta cargado por completo.
Espero/amos vuestros snippets =)Saludos
Mostrar Mensajes
