El Blog de Ayuda: Html

Mostrando las entradas con la etiqueta Html. Mostrar todas las entradas

martes, 20 de octubre de 2015

Tooltips con Estilo

Los tooltips son estás pequeñas etiquetas emergentes que se muestran cuando el cursor del ratón queda parado durante unos instantes encima de un componente visual de una ventana. Son muy prácticos para suministrar una información adicional relacionada a este componente o inclusive mostrar la dirección a la que manda en el caso que sea un Link. En HTML es fácil crear un tooltip con el atributotitle. El atributo title es válido para todos los elementos de HTML, por lo cual se puede poner un tooltip a absolutamente todo, inclusive a un simple texto

<button title="este es un ejemplo de tooltip" >BOTON</button>

El ejemplo es bastante útil pero si deseamos podemos hacer un tooltip con el estilo que deseamos y mejoraría la presentación de nuestra Web. Ahora les mostraré como darles un estilo propio y de lo más simple de aplicar usando Css. Ejemplo:

<html>
<head>
<style type="text/css">
.tooltip {
text-decoration: none;
display: inline;
position: relative;
transition: all 0.5s;
}
.tooltip:hover:after {
bottom: 35px;
content: attr(title);
left: -35%;
position: absolute;
background:red;
border-radius: 5px;
color: white;
font-size:12px;
text-align: center;
width: 150px;
}
.tooltip:hover:before {
bottom: 18px;
left: 35%;
position: absolute;
content:"";
border-top: 9px solid red;
border-bottom: 9px solid transparent;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<button title="este es un ejemplo de tooltip sencillo" class="tooltip">un ejemplo </button>
</center>
</body>
</html>

sábado, 17 de octubre de 2015

Poner Estilos Css a un Input "file"

Al momento de trabajar con un input tipo "file" notamos que no podemos aplicar estilos ni modificar el texto del boton eso hace que se pierda la estética en nuestro proyecto si tenemos botones personalizados

Pero lo bueno es que tenemos una alternativa que nos puede salvar el día, podemos hacer que un boton "button" que si puede ser modificado con estilos simule el click del input tipo "file", esto es de mucha utilidad y fácil de implementar usando Javascript, aparte ocultaremos en input "file" para que solo quede el "button" Ejemplo:

<html>
<head>
<style>
.modificar{
width:130px;
height:40px;
background-color: blue;
color:white;
border:0;
}
</style>
<head>
<body>
<input id="botonArchivo"
type="file"
style="display:none;">
<button onclick="document.getElementById('botonArchivo').click()" class="modificar">ABRIR</button>
</body>
</html>

viernes, 16 de octubre de 2015

Validar inputs y el problema de la ñ y los acentos

Tal vez muchas veces hayas necesitado validar tus formularios y encontraste varias soluciones en Internet, pero venían con ese pequeño problema de que la letra 'ñ' lo tomen como un carácter inválido, cuando quieres q en un campo de texto solo se puedan escribir letras.

Aquí te muestro la solución a ese problema:

Para que tu página reconozca la letra 'ñ' como carácter debes hacer que tu página tenga el formato "utf-8" que permite que se represente cualquier carácter Unicode, implementando esto cualquier validador que tengas funcionará con la letra 'ñ'

Simplemente en la cabecera de tu página debes Agregar :

Bueno si no tienes ningún validador a la mano aquí te paso uno que lo haré usando la librería Jquery

<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.error{
background-color: red;
padding: 6px 12px;
border-radius: 1px;
position: absolute;
color:white;
height: 30px;
width: 115px;
}
.error:before{
content:'';
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid red;
border-left: 8px solid transparent;
left: -16px;
position: absolute;
top: 7px;
}
</style>
</head>
<body>
<input type="text" placeholder="Nombre" class="letras"/><br><br>
</body>
<script>
$('.letras').keyup(function(){
var cadena=$(this).val();
var tam=cadena.length;
if(tam>0){
var valor=cadena.substr(tam-1,tam);
var letras=" abcdefghijklmnñopqrstuvwxyz";
if(!(letras.indexOf(valor)>-1)){
$(this).val(cadena.substr(0,tam-1));
$(this).after("<span class='error'>Solo Letras</span>");
setTimeout(function(){
$('.error').fadeOut();
},1000);
}
}
});
</script>
</html>

Ejemplo

Espero que sea de ayuda