jueves, 20 de febrero de 2014

Cambiar el color y fondo del texto seleccionado.

Un día se me ocurrió cambiar el color y el fondo del texto seleccionado en la página. Buscando por internet encontré esto:

::selection {color:red;background:yellow;}
::-moz-selection {color:red;background:yellow;}

Este es el enlace original: enlace1 y enlace2

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:
<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:
.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".
3. Nos vamos a la página "http://www.scrolltotop.com/"
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!