martes, 29 de mayo de 2018

Mostrar ocultar un div con javascript

Hoy vamos a ver como se puede insertar contenido dentro de una etiqueta div y que ese contenido pueda estar oculto o visible.
Veamos como hacerlo...


Mostrar/ocultar un div con javascript


Lo primero que vamos a hacer es crear una función, en este caso la llamaré mostrarocultar, dentro de la función le decimos que el div 'contenido_oculto' no se muestre, y el span 'texto' muestre la palabra Mostrar


  1. function mostrarocultar(){

  2. document.getElementById('contenido_oculto').style.display = 
  3. (document.getElementById('contenido_oculto').style.display == 
  4. 'none') ? 'block' : 'none'; 
  5. document.getElementById('texto').innerHTML = 
  6. (document.getElementById('texto').innerHTML==
  7. 'Mostrar')?'Ocultar':'Mostrar';
  8. };



Para que inicie la función con la cara de la página, agregamos el siguiente código.

  1. window.onload = function(){
  2. mostrarocultar();
  3. }



Y por último, creamos el enlace, donde daremos clic para mostrar/ocultar el contenido, y también el div donde pondremos el contenido.



  1. <p><a style='cursor: pointer;' onclick="mostrarocultar()"><span id="texto"></span></a></p>

  2. <div id="contenido_oculto">
  3. <p>Este contenido estaba oculto<br />Pulsa ocultar y desaparecerá</p>
  4. </div>


Y como siempre os comento, esto puede mejorar su aspecto con estilos css.



Os dejo esta muestra para que veáis como funciona.



Este contenido estaba oculto
Pulsa ocultar y desaparecerá







Espero que haya sido útil.


Un saludo.

miércoles, 23 de mayo de 2018

5€ gratis por registrarte en fintonic para gastar en amazon

Hoy os traigo lo que se podría considerar como "La Promoción del Año". Resulta que ahora con Fintonic te llevas un cheque regalo de 5€ en Amazon por la cara, sin sorteos. 
Tan solo tienes que añadir un código amigo al registrarte y te regalarán directamente un cheque por valor de cinco euros para gastar en Amazon. 

Pasos para ganar 5€ en Amazon con Fintonic:

  1. Descarga la aplicación de Fintonic en tu móvil ya sea a través de la App Store o Google Play.
  2. Antes de regístrarte, haz clic sobre "¿Tienes un código amigo?"
  3. Pon un e-mail válido y una contraseña.
  4. Introduce (justo debajo de donde tienes que poner la contraseña) el código amigo joason.
  5. Y pincha en "crear cuenta".
Consigue 5€ al registrarte en fintonic


Una vez que has creado tu cuenta, tendrás que añadir una cuenta bancaria de la que seas titular. Tu información es anónima (no piden nombre ni apellidos) y está cifrada. Fintonic no puede operar con tus cuentas, solo podrás acceder a los datos pero nunca operar con ellas .
Como condición ineludible para recibir el cheque, tendrás que tener la aplicación instalada y mantente como usuario activo durante un mínimo de 7 días. Si la eliminas antes, perderás el cheque.


La entrega del cheque regalo se llevará a cabo de forma automática una vez que se cumpla el periodo establecido. Te enviarán un correo electrónico con el código para canjear en Amazon, por lo que debes poner un e-mail real en el proceso de registro.


Para más información consulta las bases legales.



Un saludo.

viernes, 18 de mayo de 2018

Encender teléfono móvil (Smartphone) sin batería

Hoy vamos a ver como encender un teléfono móvil (Smartphone) que tengamos por casa y ya no tenga batería, es una manera de poder utilizar los viejos móviles que tenemos por casa, de esta manera los podemos reutilizar como webcam, gps, reproductor de radio, etc...


encender el teléfono móvil sin batería



Si bien hay muchos tutoriales de como encender el teléfono móvil sin la batería, yo he de decir que lo he probado y no me funciona, el teléfono si que encendía, pero me salia el mensaje de conecte el cargador y al desbloquear la pantalla se apagaba. Tras investigar el porque no me iba, descubrí donde está el error a la hora de conectar los cables, conseguí encenderlo y ahora me dice que tengo un 99% de batería y es completamente funcional, cuento como lo  he hecho.


El conector de la batería tiene tres pin, en los exteriores es donde se conecta la corriente, uno al positivo y el oro al negativo, deberéis de comprobar cual es positivo y cual negativo, pues esto varia dependiendo del terminal, y el pin central es que se encarga de comprobar la carga del móvil, y al no tener ningún tipo de corriente, detecta como si la batería estuviese descargada del todo y se apaga. Como se soluciona esto, muy sencillo, solo tenemos que puentear el negativo y el central con una resistencia, que será de entre 40k y 70k, el valor dependerá también del terminal, y una vez hecho el puente veréis como enciende y detecta batería, solo nos quedará sujetar bien el cable para que no haya corto-circuito, una buena opción es sellar con silicona caliente, y por último le haremos una pequeña muesca a la tapa para poder pasar el cable.


Os dejo esta imagen para que veáis como queda, el cable no lo pongáis muy gordo, pues luego es un engorro para poder cerrar la tapa y usarlos.


encender Smartphone sin bateria


Como alimentación usaremos un cargador o similar que no de mas de 4 voltios, si es de mas voltaje deberéis de reducirlo a 3.5 ó 4 V.







Espero que haya sido de utilidad.



Un saludo.


jueves, 17 de mayo de 2018

Desactivar botón de enviar hasta completar formulario

Hoy vamos a ver como mantenemos el botón de enviar desactivado hasta que el usuario complete del todo el formulario. Veamos como lo hacemos.





botón desactivado  hasta completar formulario


Creamos el formulario con sus correspondientes campos a rellenar, en este ejemplo le decimos que cuando el campo imput pierda el foco, valide para ver si nos activa el botón de enviar, es un método que funciona, pero no me gusta por el hecho de que para que se active el botón necesitaremos pinchar fuera del campo para que pierda el foco y valide, de todas formas, aquí os lo dejo por si lo queréis.




  1. <form name="" id="b" method="post" action="">  
  2. <p>
  3. <input type="text" name="a1" value="" onBlur="a('b')" id="a1" />
  4. <label for="a1">Primer campo.</label>
  5. </p>
  6. <p>
  7. <input type="text" name="a2" value="" onBlur="a('b')" id="a2" />
  8. <label for="a2">Segundo campo.</label>
  9. </p>
  10. <p>
  11. <input type="text" name="a3" value="" onBlur="a('b')" id="a3" />
  12. <label for="a3">Tercer campo.</label>
  13. </p>
  14. <p>
  15. <input type="reset" name="action" value="Borrar" class="button">
  16. <input type="submit" name="action" value="Aceptar" id="bt"  class="button"             disabled="disabled">
  17. </p>
  18. </form>


Como veis hemos puesto el botón de enviar desactivado, de lo contrario no funcionaria esto, siempre estaría activado.

Este segundo ejemplo ejemplo lo considero mejor, pues como veréis en el código, valida al soltar cada tecla, entonces en el momento que el usuario este rellenado el ultimo campo, automáticamente se activará el botón, sin que el usuario tenga que andar haciendo click fuera, y podrá enviarlo sin mayor problema.



  1. <form name="" id="b" method="post" action="">  
  2. <p>
  3. <input type="text" name="a1" value="" onKeyUp="a('b')" id="a1" />
  4. <label for="a1">Primer campo.</label>
  5. </p>
  6. <p>
  7. <input type="text" name="a2" value="" onKeyUp="a('b')" id="a2" />
  8. <label for="a2">Segundo campo.</label>
  9. </p>
  10. <p>
  11. <input type="text" name="a3" value="" onKeyUp="a('b')" id="a3" />
  12. <label for="a3">Tercer campo.</label>
  13. </p>
  14. <p>
  15. <input type="reset" name="action" value="Borrar" class="button">
  16. <input type="submit" name="action" value="Aceptar" id="bt"  class="button"             disabled="disabled">
  17. </p>
  18. </form>



Y por ultimo creamos una función en javascript, en la cual al soltar la tecla comprobamos si los campos están vacíos, si no lo están, activamos el botón, de lo contrario, no hacemos nada.


  1. function a(A) {
  2.     if (document.getElementById(A)) {
  3.         var formObj = document.getElementById(A);
  4.         if (formObj.a1.value !=""&&
  5.             formObj.a2.value !=""&&
  6.             formObj.a3.value !="" ) {
  7.             formObj.bt.disabled = false;
  8.         } else {
  9.            
  10.         }
  11.     }
  12. }





Os dejo este ejemplo para que veáis como funciona;











Espero que os haya sido útil.


Un saludo.

martes, 15 de mayo de 2018

Cuenta atrás para un evento en javascript

Hoy vamos a ver como poner una cuenta atrás para un evento en una fecha determinada. Es un contador de días , que va mostrando cuantos días faltan para la fecha seleccionada, y llegado al día nos muestra otro texto, como que ya es e día.




cuenta atras para cento con javascript




El código es un javascript listo para ponerlo en nuestra web, si no lo ponéis en fichero .js tener en cuenta que hay que meterlo entre etiquetas de javascript.



  1. var ab=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
  2. var x = ano ;
  3. function fecha(yr,m,d){
  4. var a=new Date();
  5. var b=a.getYear();
  6. if (b < 1000){b+=1900};
  7. var c=a.getMonth();
  8. var d=a.getDate();
  9. var e=ab[c]+" "+d+", "+b ;
  10. var f=ab[m-1]+" "+d+", "+yr ;
  11. var ac=(Math.round((Date.parse(f)-Date.parse(e))/(24*60*60*1000))*1);
  12. if (ac==0){
  13. document.write("Hoy es Nochevieja");
  14. }else if (ac>0){
  15. document.write("Faltan "+ac+" días para Nochevieja ");
  16. }
  17. };

  18. fecha(2018,12,31); 




Como veis, solo tenéis que modificar los textos a mostrar y la fecha del evento, esto se puede poner dentro de un div y darle estilos para su mejor presentación, eso os lo dejo a vuestra elección.

Os dejo para que veáis como funciona:




Espero que os haya sido útil.



Un saludo.

domingo, 13 de mayo de 2018

Refrescar página cada X segundos

Hoy vamos a ver como refrescar la página web automáticamente.
Este código nos puede ser útil que si tenemos una web que muestre datos que necesiten de ser actualizados cada cierto tiempo para que el visitante lo tenga actualizado sin tener que actualizar él el navegador. Vamos a ello..





El código es muy sencillo, solo tenemos que añadir a la etiqueta body lo siguiente:


  1. onLoad="setTimeout('self.location.reload()', 5000)"




En este caso le estamos diciendo que refresque la pagina cada 5 segundos, este parámetro lo modificaremos a nuestra necesidad, la etiqueta body quedaría de la siguiente manera:

  1. <body onLoad="setTimeout('self.location.reload()', 5000)">



Otra manera de refrescar la página cada cierto tiempo, es colocando la siguiente meta-etiqueta dentro de nuestro head, sería la siguiente:



  1. <meta http-equiv="Refresh" content="5" />


El número del "conten" es donde le decimos los segundos que pase para recargar la página.




Espero que os sea de utilidad.

Un saludo.