El Blog de Ayuda

lunes, 2 de noviembre de 2015

Menú con Submenus

Un menú que tenga submenus es muy útil para poder organizar por tipos los enlaces de nuestra página, hoy voy a mostrarles un ejemplo muy sencillo usando pocos estilos Css y la librería Jquery Ejemplo :

<html>
 <head>
 <title>menu</title>
  <script src="js/jquery.min.js" type="text/javascript"></script>
 <style type="text/css">
  li{list-style:none;}
  
  .menu>li{
   text-align: center; 
   font-size: 21px;
   width: 200px; 
   background-color: #066abe;
   border-bottom: 1px solid white;
  }
 
  .menu li a{
  text-decoration:none;
  color:white;
   display:block; 
   padding: 8px; 
  }
  .menu li ul{
   padding-left: 0px; 
   display: none;}
   .menu li ul li{
   background-color: #555;
   }
 

 </style>
 </head>
 <body>
   <ul class="menu navegador" id="menu">
      <li><a class="desplegable" href="#">Inicio</a>
          <ul class="submenu">
              <li><a href="#">Sub menu 1</a></li>
          </ul> 
      </li>
      <li><a href="#" class="desplegable">Configuraciones</a>
          <ul class="submenu">
              <li><a href="#"> Submenu 2</a></li>
              <li><a href="#">Submenu 3</a></li>
          </ul> 
      </li>
      <li><a href="#" class="desplegable">Servicios</a>
          <ul class="submenu">
              <li><a href="#">Submenu 4</a></li>
              <li><a href="#">submenu 5</a></li>
              <li><a href="#">submenu 6</a> </li>
          </ul> 
      </li>
      </ul>
    
 </body>
 <script type="text/javascript">
 $('a.desplegable').click(function(){
      $(this).parent().find('ul.submenu').toggle(300);
  });
 </script>
</html>

jueves, 29 de octubre de 2015

Mostrar la contraseña en un Input tipo "password"

Llega un momento en el que queremos agregarle mejor a nuestro proyecto y uno de esos pequeños detalles que hacen más atractivo el login es tener la opción de mostrar el Password cuando la escribimos, en esta ocasión lo haré de manera fácil de implementar, usando la librería Jquery y su útil método "attr()" que nos ayuda a modificar atributos de las etiquetas, también usaremos un Input de tipo "checkbox" que será el que ejecute la acción de mostrar u ocultar la contraseña :

Mostrar Contraseña

<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<input type="password" class="pass" value="Password">
<br>
<input type="checkbox" class="check"> Mostrar Contraseña </body>
<script type="text/javascript">
$('.check').on("change",function(){
if($(this).prop('checked')) {
$('.pass').attr("type","text");
}
else{
$('.pass').attr("type","password");
}
});
</script>
</html>

martes, 20 de octubre de 2015

Obtener el valor de un Input "range"

input "range" es un elemento de entrada de datos que nos ofrece HTML5, los valores pueden ser especificados mediante una barra de desplazamiento o un slider. Tenemos 3 atributos importantes "max" es el máximo del rango de valor numérico, "min" es el mínimo, "value" es el valor por defecto del rango.

El problema es que no podemos ver el valor que seleccionamos, tendríamos que obtener el valor y mostrarlo mediante una etiqueta, en este caso voy a obtener y mostrar el valor usando la librería Jquery. Ejemplo:

5

<html>
<head>
<title>Rango</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<input type="range" max="10" min="1" value="5" class="rango">
<span class="recibe">40</span>
</body>
<script type="text/javascript">
$('.rango').on('change',function(){
var valor=$('.rango').val();
$('.recibe').text(valor);
} ) </script>
</html>

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

Ventanas Modales

Las ventanas Modales son Ventanas Emergentes al estilo del "alert" de Javascript pero con la diferencia de que puedes editarlas a tu gusto,esto hace que tengan una mejor presentacion, exiten muchas maneras de hacerlas y usar distintas formas de animaciones al momento de llamarlas, ahora les mostrare como hacer una ventana modal usando usando la libreria Jquery y el metodo .toggle() que es muy util sirve como un swicht de 2 estados, un elemento que le apliquemos este metodo se ocultara si es visible o se mostrara si esta oculto, esto nos es muy util por q las ventanas modales son elementos ocultos que debemos visualizar mediante un evento mas frecuentemente al hacer click en un boton.
Ejemplo:

<html>
<head>
<title>modales</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<button class='boton'>Mostrar Modal</button>
<div class="mascara"></div>
<div class="modal" style="display:none">
<h2 style="text-align:center">Titulo de la Ventana</h2>
<p>Este es un <strong>párrafo</strong></p>
<input type="text"> <input type="radio"> <input type="checkbox">
<p>todo el codigo html que quieras poner</p>
<button class="boton">Cerrar</button>
</div>
</body>
<script type="text/javascript">
$('.boton').click(function () {
$('.modal, .mascara').toggle(200);
});
</script>
<style type="text/css">
.modal{
position: absolute;
height: 200px;
width: 300px;
background-color: #1f81aa;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -100px;
padding: 20px 20px;
color :white;
}
.mascara{
position: fixed;
display: none;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
}
</style>
</html>

Espero que la información sea de ayuda

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