martes, 8 de junio de 2010

Modificar dimensiones de la página

Para aumentar TODAS las dimensiones de una pagina de todos debe estar en em nada en px, después debemos modificar mediante javascript el valor de la fuente del body, en resto de dimensiones heredaran de estan


<a href="#" class="aumFuente" title="Aumentar">+</a>


Creamos una funcion con jQuery que multiplique el valor por 1,1 hasta un máximo de 18


$(".aumFuente").click(function(){
var tamActual = $("body").css("font-size");
var tamActualNum = parseFloat(tamActual, 10);
//18 es el tamaño máximo
if (tamActualNum>18) nuevaFuente=tamActualNum;
else nuevaFuente = tamActualNum*1.1;

$("body").css("font-size", nuevaFuente);
//Se guarda en tamaño en un cookie
SetCookie ("letra", parseFloat(nuevaFuente))
return false;
});



Para mantener el valor para la próxima visita lo guardamos en una cookie

function SetCookie (name, value) {
// nmero de parmetros variable.
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
// asociacin de parmetros a los campos cookie.
var expires = (argc > 2) ? argv[2] : null
var path = (argc > 3) ? argv[3] : null
var domain = (argc > 4) ? argv[4] : null
var secure = (argc > 5) ? argv[5] : false
// asignacin de la propiedad tras la codificacin URL

document.cookie = name + "=" + escape(value)

}

martes, 1 de junio de 2010

Transpariencias con CSS


.transpariencia{
filter:alpha(opacity=70); /* IE */
-moz-opacity:0.7; /* Firefox, Opera, ... */
opacity: 0.7; /* CSS 3*/
}


Transpariencia al 70% con los distintos navegadores.

martes, 25 de mayo de 2010

Detectar ancla en la url con javascript

La propiedad document.location.hash. obtiene la parte de la url después de #. Con esto podemos obtener el nombre de un elemento el cual podemos modificar con javascript

< script languaje = "javascript" >
// verificar si viene un ancla
if (document.location.hash != "")
{
var elemento = document.location.hash.replace("#","");
document.getElementById(elemento). style.color= '#fff';
}


En este caso el elemento que pasemos por la URL le cambiamos el color

martes, 18 de mayo de 2010

Activar todos los checkbox de una página


<a href="#" onclick="activar(1); return false;" >Marcar todos</a> /
<a href="#" onclick="activar(0);return false;" >Desmarcar todos</a>



Javascript
function activar(activado){

var todos=document.getElementsByTagName("input");
var a=new Array();

for(x=0;x<todos.length;x++){
if(document.getElementsByTagName("input")[i].type == "checkbox") {
if(todos[x].type == "checkbox"){
todos[x].checked=activado
}
}
}>

lunes, 17 de mayo de 2010

Función para crear thumbnail en php

Función para crear thumbnail con las dimensiones deseadas en PHP

function subirImagenRecortada($imagen,$rutaImg,$nombre,$alturaMaxima,$anchuraMaxima){
$varrand = $nombre; //nombre aleatorio
$varallw = array("image/jpeg","image/pjpeg"); //tipo de imagnes
if (is_uploaded_file($imagen["tmp_name"])) {
$varname = $imagen['name'];
$vartemp = $imagen['tmp_name'];
$vartype = $imagen['type'];
$ext = strrchr($imagen['name'],'.');
//Comprueba que el archivos subir es JPG
if (in_array($vartype, $varallw) && $varname != "") {
$varname = "p_".$varrand.$ext;
$varpath=$rutaImg;
if (copy($vartemp, $rutaImg.$varname)) {
$filename = $varpath.$varname;
list($width, $height) = getimagesize($filename);


/* Recortar con lado de 90 px */
$ancho=$anchuraMaxima;
$alto=$alturaMaxima;
list($width, $height) = getimagesize($filename);
$diferencia_ancho = $width/$ancho;
$diferencia_alto = $height/$alto;

if($diferencia_ancho < $diferencia_alto) {
$nuevo_ancho = $ancho;
$prop = $nuevo_ancho/$width;
$nuevo_alto = round($height*$prop);
$dist_x = 0;
$dist_y = ($alto-$nuevo_alto)/2;
}else {
$nuevo_alto = $alto;
$prop = $nuevo_alto/$height;
$nuevo_ancho = round($width*$prop);
$dist_x = ($ancho-$nuevo_ancho)/2;
$dist_y = 0;
}
$thumb = imagecreatetruecolor($ancho, $alto);
imagealphablending($thumb, false);
$source = imagecreatefromjpeg($filename);
imagecopyresampled($thumb, $source, $dist_x, $dist_y, 0, 0, $nuevo_ancho, $nuevo_alto, $width, $height);
imagejpeg($thumb, $varpath.$varname);
imagedestroy($thumb);

return $varname;
} else {
echo "Error al subir el archivo";
}
}else {
echo "No se puede subir ese archivo";
}
}
return $nameold;
}


jueves, 13 de mayo de 2010

Cambiar hoja de estilos sin refrescar

Para poder cambiar la hoja de estilo lo primero es indica varias hojas de estilos alternitivas, para se una hoja de estilo alternativa debe tener un title y el atributo rel="stylesheet"


<link href="css/estilos.css" rel="stylesheet" type="text/css"/>
<link href="css/blanco.css" rel="stylesheet" type="text/css" title="hojaBlanco"/>
<link href="css/negro.css" rel="stylesheet" type="text/css" title="hojaNegro"/>

Después tenemos que llamar a la función activarCSS

<a href="#" onClick="activarCSS('hojaBlanco');return false" id="btnBlanco">

En el javascript se debe incluir la función activarCSS

function activarCSS(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
return false;
}

miércoles, 5 de mayo de 2010

Chuleta MySQL

Una chuleta MySQL con los tipos de datos de MySQL y las funciones más comunes en PHP