jueves, 20 de febrero de 2014
miércoles, 6 de noviembre de 2013
Alert de JavaScript en PHP
Un día necesitaba ver los datos que me sacaba una query en PHP y he encontrado la manera fácil de hacerlo con JavaScript.
?>
<script type="text/javascript">
alert("Su nombre es:<?php echo $_POST['nombre']; ?> is already registered."); //o alert("Su nombre es:<?php echo $_POST['nombre']; ?> por ejemplo");
</script>
<?php
jueves, 24 de octubre de 2013
Simple Lightbox with "img" not "a"
Soy bastante lerdote en JQuery y ayer me pasé la tarde buscando un Lightbox que cogiera el enlace de la imágen desde el "src" de la propia imágen en vez del tag "a" dentro del cual se encontraba nuestra thumbimage. Porque no siempre necesitamos tirar de "a" y su "href" ya que con el css podemos redimensionar la imágen para tener un thumb y al hacer click sobre ella simplemente mostrarla en su tamaño real. No es que sea la mejor solución hacer eso pero cuando tienes una carousel (Bootstrap) y le fijas un tamaño, estaría bien mostrar algunas imágenes en su tamaño real.
Era algo muy sencillo que finalmente esta mañana lo he conseguido. Apoyándome en lo que he encontrado en webtuts+ (enlace), he conseguido con pequeñas modificaciones.
* No olvidéis de cargar JQuery (<script src="http://code.jquery.com/jquery-1.6.2.min.js"-/script>).
Aquí tenéis el enlace al .html (descargar).
El código CSS:
Era algo muy sencillo que finalmente esta mañana lo he conseguido. Apoyándome en lo que he encontrado en webtuts+ (enlace), he conseguido con pequeñas modificaciones.
* No olvidéis de cargar JQuery (<script src="http://code.jquery.com/jquery-1.6.2.min.js"-/script>).
Aquí tenéis el enlace al .html (descargar).
El código CSS:
<head>
<style>
#lightbox::before{
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background:#000;
opacity: 0.9;
martes, 22 de octubre de 2013
Bootstrap full width tooltip
I was trying to make full width of tooltip because when you have a small button and long tooltip it looks like a column and is a bit ugly :).
So, go to bootstrap.css and find ".tooltip" then just add "white-space: nowrap;". With this line we are saying that the text will never wrap to the next line.
This is a original .tooltip code:
This is a final .tooltip code:
So, go to bootstrap.css and find ".tooltip" then just add "white-space: nowrap;". With this line we are saying that the text will never wrap to the next line.
This is a original .tooltip code:
.tooltip {
position: absolute;
z-index: 1030;
display: block;
visibility: visible;
font-size: 11px;
line-height: 1.4;
opacity: 0;
filter: alpha(opacity=0);
}
This is a final .tooltip code:
.tooltip {
position: absolute;
z-index: 1030;
display: block;
visibility: visible;
font-size: 11px;
line-height: 1.4;
opacity: 0;
filter: alpha(opacity=0);
white-space: nowrap;
}
viernes, 11 de octubre de 2013
Añadir "scroll to top" en el blog.
Una guía fácil para añadir el botón con la flecha ("scroll to top").
1. Nos vamos a "Diseño".
2. Añadimos un gadget nuevo "html/javascript".
2. Añadimos un gadget nuevo "html/javascript".
3. Nos vamos a la página "http://www.scrolltotop.com/"
4. Copiamos el botón que queramos.
4. Copiamos el botón que queramos.
5. Pegamos el código copiado dentro del nuevo gadget y guardamos. (No hace falta poner nombre ni nada).
* En mi caso cuando lo hice, se me quedaban los bordes del gadget porque estaba añadido pero estaba vacío, entonces lo que hice fue pegar el código de la flecha en otro gadget "html/javascript". No descoloca nada, ni sale nada molesto.
Suerte!
* En mi caso cuando lo hice, se me quedaban los bordes del gadget porque estaba añadido pero estaba vacío, entonces lo que hice fue pegar el código de la flecha en otro gadget "html/javascript". No descoloca nada, ni sale nada molesto.
Suerte!