jueves, 22 de enero de 2015

No more slow test running with PhantomJS in Windows

Hi guys,

I've found a solution to our problem with test running on Windows. Thanks to dtabuenc to share his wisdom in this thread started by NateRedding.

The problem was that when Karma is running tests, PhantomJS like any browser "create a new page" to each test in browser and throw a DNS petition.
"Knock! Knock! Knock! 127.0.0.1", "Knock! Knock! Knock! 127.0.0.1" and nobody is answering.

The solution is just add 127.0.0.1 localhost (or uncomments the line with it) in windows/system32/etc/hosts don't forget to edit this file with administrator permissions.

Have a happy day.

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;
}