4.- La función CSS – Curso Básico de #Jquery #4

Una de las cosas que más deseamos en nuestros sitios web, es poder modificar los valores visuales de los elementos DOM (elementos HTML), para crear animación, o efectos que le dan más estética a nuestro sitio, y para ello necesitamos manipular las propiedades de nuestra hoja de estilo, para este tipo de cosas jquery nos ofrece la función (método) de nombre css().

Para poder utilizarla, debemos utilizar el selector sobre el o los elementos que deseamos modificar sus propiedades de estilo, seguido de esta función. Esta función se puede utilizar de distintas formas, y comenzaremos por la forma más simple, obtener un valor en específico de un atributo de estilo, y es de la siguiente manera:

Código HTML

<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" style='width:800px;height:120px'  />

Código Jquery

alert($('#imagen').css('width'));
//obtenemos en un alert el width de nuestra imagen

En este ejemplo podemos observar en una ventana alert, el ancho de nuestra imagen, ahora veamos como manipular la imagen con el siguiente código:

Código HTML

<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" style='width:800px;height:120px'  />

<input type="button" value="aumentar tamaño imagen" onclick="aumentaTamano();" />

Código Jquery

function aumentaTamano(){
//obtenemos el viejo tamaño de ancho y alto
tamanoWidth=$('#imagen').css('width')
tamanoHeight=$('#imagen').css('height')

//aumentamos el tamaño obtenido mas 10 pixeles
tamanoWidth=parseInt(tamanoWidth)+parseInt(10);
tamanoHeight=parseInt(tamanoHeight)+parseInt(10);

//asignamos el nuevo tamaño
$('#imagen').css('width',tamanoWidth)
$('#imagen').css('height',tamanoHeight)
}

En este código vemos como utilizar la función para asignar un nuevo valor a las propiedades, invocando la función aumentaTamano(), la cual ejecuta al presionar el botón (<input>), otorgamos un nuevo ancho y un nuevo alto y lo asignamos a través de la función css(), recibiendo esta como argumento el nombre de la propiedad de estilo y el nuevo valor, pero aun así hay una manera más fácil de hacerlo; la función css() nos permite mandar varios valores a varias propiedades de estilo, recibiendo los atributos por el formato json; para los que no sepan que es json, simplemente es un formato que se utiliza en los lenguajes de programación para enviarse mensaje entre ellos (como lo venía haciendo el formato xml), jquery aprovecha esta característica, y también puede recibir sus atributos en este formato, facilitando poder enviar todo lo que deseamos modificar en la misma línea, como podemos ver a continuación.

Nota: Por si no conocen la función parseInt() de javascript, esta función convierte el valor de la variable a entero, si yo no utilizo esta función lo que obtendríamos al utilizar el operador «+» seria una concatenación, no una suma.

Código HTML

<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" style='width:800px;height:120px'  />

<input type="button" value="disminuye tamaño imagen" onclick="disminuyeTamano();" />

Código Jquery

function disminuyeTamano(){
//obtenemos el viejo tamaño de ancho y alto
tamanoWidth=$('#imagen').css('width')
tamanoHeight=$('#imagen').css('height')

//aumentamos el tamaño obtenido mas 10 pixeles
tamanoWidth=parseInt(tamanoWidth)-parseInt(10);
tamanoHeight=parseInt(tamanoHeight)-parseInt(10);

//aplicamos los dos cambios en la misma linea, utilizando json
$('#imagen').css({'height':tamanoHeight,
'width':tamanoWidth})

}

En lugar de invocar dos veces la función css(), mando los dos atributos en la misma función utilizando json, y dentro de esta funcion se encuentra el formato json «{‘height’:tamanoHeight,’width’:tamanoWidth}», poniendo las llaves de abertura y cerradora «{}» y dentro de estas los atributos en comillas (o sin ellas, en el caso de los atributos no los valores), seguido de dos puntos «:» que equivalen al igual (=) y separando cada atributo por coma.

Si desean ver este código en ejecución den clic aquí.

Ir al Capitulo Siguiente (5.- La función Each).

Ir al  Capitulo Anterior (3.- Atributos).

¿Como crear un #div que bloquee la pantalla del navegador mientras se realiza una acción? #javascript

Hoy escribo sobre un tema bastante común que se tiene cuando se planea un sistema el cual tendrá algunas operaciones que ocupan realizarse con peticiones ajax y estas duraran bastante tiempo, y en ese tiempo debemos evitar que el usuario de nuevamente clic al botón que comenzó la petición ajax, para ello les mostrare como hacer rápidamente una ventana que bloquea la pantalla web.

En el siguiente código podemos observar dos funciones una de nombre jsRemoveWindowLoad() que solo sirve para quitar el div bloqueador que vamos a crear y la función jsShowWindowLoad() que prácticamente es la que abrirá  el div el cual bloqueara nuestra pantalla.

function jsRemoveWindowLoad() {
	// eliminamos el div que bloquea pantalla
    $("#WindowLoad").remove();

}

function jsShowWindowLoad(mensaje) {
	//eliminamos si existe un div ya bloqueando
    jsRemoveWindowLoad();

    //si no enviamos mensaje se pondra este por defecto
    if (mensaje === undefined) mensaje = "Procesando la información&amp;lt;br&amp;gt;Espere por favor";

    //centrar imagen gif
    height = 20;//El div del titulo, para que se vea mas arriba (H)
    var ancho = 0;
    var alto = 0;

	//obtenemos el ancho y alto de la ventana de nuestro navegador, compatible con todos los navegadores
    if (window.innerWidth == undefined) ancho = window.screen.width;
    else ancho = window.innerWidth;
    if (window.innerHeight == undefined) alto = window.screen.height;
    else alto = window.innerHeight;

	//operación necesaria para centrar el div que muestra el mensaje
    var heightdivsito = alto/2 - parseInt(height)/2;//Se utiliza en el margen superior, para centrar

   //imagen que aparece mientras nuestro div es mostrado y da apariencia de cargando
    imgCentro = "<div style='text-align:center;height:" + alto + "px;'><div  style='color:#000;margin-top:" + heightdivsito + "px; font-size:20px;font-weight:bold'>" + mensaje + "</div><img  src='img/load.gif'></div>";

        //creamos el div que bloquea grande------------------------------------------
        div = document.createElement("div");
        div.id = "WindowLoad"
        div.style.width = ancho + "px";
        div.style.height = alto + "px";
        $("body").append(div);

        //creamos un input text para que el foco se plasme en este y el usuario no pueda escribir en nada de atras
        input = document.createElement("input");
        input.id = "focusInput";
        input.type = "text"

		//asignamos el div que bloquea
        $("#WindowLoad").append(input);

		//asignamos el foco y ocultamos el input text
        $("#focusInput").focus();
        $("#focusInput").hide();

		//centramos el div del texto
        $("#WindowLoad").html(imgCentro);

}

La funcionalidad de jsShowWindowLoad() sirve para mostrar un div encima de todos los controles en pantalla, este div aparece al momento de ejecutar dicha función, y este div puede desaparecer al invocar la otra función de nombre jsRemoveWindowLoad(). Para entender la funcionalidad de jsShowWindowLoad() anexe comentarios explicando parte por parte. Esto es lo que hace el javascript pero en cuanto a css ocuparemos el siguiente código para que nuestro div aparesca encima y con un estilo más estético:


#WindowLoad
{
    position:fixed;
    top:0px;
    left:0px;
    z-index:3200;
    filter:alpha(opacity=65);
   -moz-opacity:65;
    opacity:0.65;
    background:#999;
}

Este código lo que hace es poner el div encima de todos los controles, además de dar una opacidad para así aun se vea lo que está detrás.

Para ver un ejemplo funcionando dar clic aqui.

Espero les sea de ayuda.