¿Cómo animar el scroll del navegador al dar clic en una liga o menú? #jquery #javascript

Ver ejemplo.

Para realizar un movimiento del scroll en el navegador de forma animada, vamos a hacer uso de la función anímate de jquery(puedes visitar mi entrada donde hablo a fondo de esta función) y también haremos uso de la función offset para obtener el valor de nuestro elemento destino.

El siguiente código hace posible la animación del scroll de una manera rápida y fácil:

Html


<!-- menu para dar clic -->
    <div style="height:50%; width:120px; position:fixed; top:100px; font-size:20px; background:#000; color:#fff; opacity:.5; padding:10px;">
    	<a href="#opcion1"  class="scroll">Ir a opcion 1</a><br />
        <a href="#opcion2"  class="scroll">Ir a opcion 2</a><br />
        <a href="#opcion3"  class="scroll">Ir a opcion 3</a><br />
        <a href="#opcion4"  class="scroll">Ir a opcion 4</a><br />
        <a href="#opcion5"  class="scroll">Ir a opcion 5</a><br />
        <a href="#opcion6"  class="scroll">Ir a opcion 6</a><br />
    </div>

    <!-- los elementos destino -->
    <div style="height:500px; background:#fff;">
    	<p id="opcion1">Un pato</p>
    </div>
     <div style="height:500px; background:#eee;">
    	<p id="opcion2">Dos pato</p>
    </div>
     <div style="height:500px; background:#ddd;">
    	<p id="opcion3">Tres pato</p>
    </div>
     <div style="height:500px; background:#ccc;">
    	<p id="opcion4">Cuatro pato</p>
    </div>
     <div style="height:500px; background:#bbb;">
    	<p id="opcion5">Cinco pato</p>
    </div>
     <div style="height:500px; background:#aaa;">
    	<p id="opcion6">Seis pato</p>
    </div>

Javascript


$(document).ready(function(){	
  $(".scroll").click(function(event){					 
 //bloqueamos la función del anchor original					 
 event.preventDefault();					 
 //dirigimos de manera animada al id del anchor					 
 $('html,body').animate({											 
 //le indicamos al scroll vertical que se dirija al objeto con el id											 
 //guardado en el anchor a su posición top.											 
 scrollTop:$(this.hash).offset().top											 
 },1000);	
});
});

Ver ejemplo.

Nota: la función offset nos sirve para obtener la posición de un elemento, en este caso el top de elemento respecto a la página.

¿Cómo obtener un hijo por su posición con jquery? #nth-child

Para obtener un hijo por su posición con jquery haremos uso de la pseudo-clase de css nth-child, esta pseudo-clase sirve para seleccionar un elemento hijo por su posición la cual tiene la siguiente sintaxis: grupoElementos:nth-child(posición).

A continuación un ejemplo de cómo se utiliza:

Html

  <div id="muchosDivs">
    	<div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
  </div>

Jquery

$(function(){

        //seleccionamos del conjunto de divs hijos de #muchosDivs el tercer div
	$divTres=$("#muchosDivs div:nth-child(3)");

        //mostramos el div seleccionado
	alert($divTres.html())

})

La función alert() nos mostrara el número 3.

Realizar una búsqueda en una columna en específico de una tabla con #jquery.

Para realizar una búsqueda en una columna en específico de una tabla podemos hacer uso del filtro eq que nos sirve para seleccionar el número de la columna de elementos, de esta manera podemos realizar la búsqueda solo por una columna en particular.

En el siguiente ejemplo muestro como se puede buscar un valor en la primera columna, y después obtener la fila entera (por medio de la función parent() de jquery) para mostrar su resultado (o lo que deseen hacer ustedes con esos datos).

En seguida muestro el ejemplo en el cual pueden ver el resultado, y debajo el código que hace posible esta funcionalidad:

Ejemplo:

Html


<label>Captura un código</label>
	<input type="text" id="busqueda"/>
    <input onclick="jsBuscar();" type="button" value="Buscar" /><br /><br />

    <table id="miTabla">
    	<tr>
        	<th>Codigo</th>
            <th>Nombre</th>
            <th>Edad</th>
        </tr>
        <tr>
        	<td>1</td>
            <td>Pedro</td>
            <td>34 años</td>
        </tr>
    	<tr>
        	<td>2</td>
            <td>Luis</td>
            <td>34 años</td>
        </tr>
        	<tr>
        	<td>3</td>
            <td>Juan</td>
            <td>15 años</td>
        </tr>
        	<tr>
        	<td>4</td>
            <td>Jesus</td>
            <td>20 años</td>
        </tr>
        	<tr>
        	<td>5</td>
            <td>Pablo</td>
            <td>23 años</td>
        </tr>
    </table>

    <div id="mostrarResultado">

    </div>

Jquery


//función que realiza la busqueda
function jsBuscar(){

		//obtenemos el valor insertado a buscar
		buscar=$("#busqueda").prop("value")

		//utilizamos esta variable solo de ayuda y mostrar que se encontro
		encontradoResultado=false;

		//realizamos el recorrido solo por las celdas que contienen el código, que es la primera
		$("#miTabla tr").find('td:eq(0)').each(function () {

			 //obtenemos el codigo de la celda
			  codigo = $(this).html();

			   //comparamos para ver si el código es igual a la busqueda
			   if(codigo==buscar){

					//aqui ya que tenemos el td que contiene el codigo utilizaremos parent para obtener el tr.
					trDelResultado=$(this).parent();

					//ya que tenemos el tr seleccionado ahora podemos navegar a las otras celdas con find
					nombre=trDelResultado.find("td:eq(1)").html();
					edad=trDelResultado.find("td:eq(2)").html();

					//mostramos el resultado en el div
					$("#mostrarResultado").html("El nombre es: "+nombre+", la edad es: "+edad)

					encontradoResultado=true;

			   }

		})

		//si no se encontro resultado mostramos que no existe.
		if(!encontradoResultado)
		$("#mostrarResultado").html("No existe el código: "+buscar)
}

Nota: eq sirve para seleccionar un indice de los elementos seleccionados, como en un arreglo los corchetes []

Clonar una imagen a un conjunto de divs utilizando #jquery, #javascript y #canvas.

Esta entrada veremos cómo podemos clonar una imagen (jpg, png) a código html, es decir, pintar por medio de divs una imagen deseada.

Recalco que no es muy útil hacer esto, la utilidad de esta entrada es que vean como por medio de canvas, se puede recorrer una imagen y a su vez obtener pixel a pixel de esta.

A continuación pongo el ejemplo corriendo, solo den clic en el botón “dibuja en HTML” y esperen ya que tarda algunos segundos en realizar la acción.

Y podemos ver en esta imagen que son divs sin duda:

div clonados con canvas

Ahora lo interesante, el código que nos ayuda a crear la magia, y como siempre con sus respectivos comentarios:

CSS

 
.pixel{			
float:left;			
width:1px;			
height:1px;		  
}

HTML

 <img id="imagen" width="200" height="200"  src="../img/images/galaxia.jpg" />
    <br />

<input type="button" value="dibuja en HTML" onclick="dibuja()" />
<div id="mensaje" style="font-weight:bold"></div>

<div id="imagenHTML"></div>

Javascript

//función que ejecuta el botón
function dibuja(){
	$("#mensaje").html("Espere un momentos, se esta dibujando la imagen!");

	//comienza a dibujar despues de 1 segundo, para mostrar el mensaje anterior.
	setTimeout(dibujar,1000)

}

//Esta es la función que realiza la acción principal
//funcion que realiza la clonacion de la imagen a divs
function dibujar(){
	//guardamos la imagen en una variable
	var img = $('#imagen')[0];

	//creamos un canvas y le definimos el mismo tamaño a la imagen
	var canvas = $('<canvas/>')[0];
	canvas.width = img.width;
	canvas.height = img.height;
	//Le asignamos la imagen al canvas, ya que nos ayudara el canvas para poder obtener los pixeles de la imagen real
	canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

	//definimos el tamaño del div para que sea el mismo ancho de la imagen
	//de esta manera al pintar los divs hijos que representaran los pixeles
	//formen la imagen y den el salto automatico cuando corresponda
	$("#imagenHTML").html("")
	$("#imagenHTML").css({"width":canvas.width+"px"})

	//realizamos el recorrido de los pixeles del canvas tomando el ALTO como maximo valor a recorrer
	for(y=0;y<canvas.height;y++){

		//realizamos el recorrido de los pixeles del canvas tomando el ANCHO como maximo valor a recorrer
		for(x=0;x<canvas.width;x++){
			//obtenemos el color en rgb del pixel actual
			var rgb = canvas.getContext('2d').getImageData(x,y,x+1,y+1).data;
			//obtenemos el rojo verde y azul del rgb anterior
			 var red = quitaCero(rgb[0].toString(16), 2);
             var green = quitaCero(rgb[1].toString(16), 2);
             var blue = quitaCero(rgb[2].toString(16), 2);

			 //obtenemos el hexadecimal con lso colores anteriores
             var hex = red + green + blue;

			 //y por ultimo creamos un div con la clase pixel que tiene el color hexadecimal
			$("#imagenHTML").append("<div class='pixel' style='background:#"+hex+"'></div>");
		}

	}

	//se termino de pintar y borramos el mensaje de texto que se puso al inicio
	$("#mensaje").html("");
}

//Función que nos ayuda a agregar al arreglo un 0 a una cadena cuando la longitud recibida no se cumple
var quitaCero = function(num, longitud) {
    return Array(longitud + 1 - (num + '').length).join('0') + num;
}

Quizá no sirva de mucho hacer esto ya que es lento, pero les servirá para algo el saber que pueden recorrer una imagen por sus pixeles por medio de javascript y el grandioso elemento agregado en html5 de nombre canvas.
Igual les anexo la liga directa al script para que puedan ver el código directamente: clic aquí.

Algoritmo de ordenamiento Quicksort en Javascript animado con jquery

En esta entrada utilizare el algoritmo de quicksort en javascript que publique anteriormente y lo acomode de una manera especial para poder mostrar poco a poco como se va ordenando un conjunto de números por medio de este método de ordenamiento.

Para el que no conozca la función que estoy utilizando setTimeout, esta simplemente se encarga de ejecutar una función o un código después de pasar cierto tiempo, en este caso puse 500 que es medio segundo. Hago uso de esta función par que se pueda notar el ordenamiento y no sea instantáneo.

A continuación anexo el ejemplo animado, solo denle clic en el botón comenzar:

Y ahora el código que hace posible esta demostración:

CSS

.bloque{
float:left;
margin-left:5px;
margin-bottom:2px;
width:20px;
height:20px;
text-align::center;
padding:5px;
background:#fff;
}

HTML


<div id="contenido" style=" background:#efefef; height:90px; padding:10px;"></div>
<input id="botonsito" type="button" value="Comenzar" onclick="comenzar()" />

Javascript


//arreglo a ordenar
arreglo=[10,9,19,8,1,12,14,0,5,6,9,17,10,4,5,3,2,3,4,5,6,7,88,77,66,55,44,33,21,2,33,44,73,78,9,2,3,0,1,8,1,13];

imprimirArreglo();

function comenzar(){

//llamamos la función mandando 0 en el primer parametro
//y mandando la longitud del arreglo -1
quicksort(0,(arreglo.length-1));

//desabilitamos boton
$("#botonsito").prop("disabled",true)

}

//funcion que plasma el arreglo para poder ser visualizado
function imprimirArreglo(){

//borramos el contenido del div del contenido
$("#contenido").html("");

//imprimimos los elementos en forma de div
for(i_=0;i_<arreglo.length;i_++){

//anexamos un div con clase bloque
$("#contenido").append("<div class='bloque'>"+arreglo[i_]+"</div>");
}

}

//función quicksort
function quicksort(primero,ultimo){
//definimos variables indices
i = primero
j = ultimo

//sacamos el pivote de la mitad del arreglo
pivote = arreglo[parseInt((i+j)/2)];

iteracionQS(i,j,pivote,primero,ultimo)

}

//funcion que suplanta el while y se llama recursivamente
function iteracionQS(i,j,pivote,primero,ultimo){

//mientras arreglo[i] sea menor a pivote
while(arreglo[i]<pivote)
i++;
//mientras j sea mayor a pivote
while(arreglo[j]>pivote)
j--;

//si el indice i es menor o igual a j entonces intercambiamos
if(i<=j){

//variable temporal auxiliar para guardar valor de arreglo[j]
aux=arreglo[j];

//intercambiamos los valores de arreglo[j] y arreglo[i]
arreglo[j] = arreglo[i]
arreglo[i] = aux

// incrementamos y decrementamos i y j
i++;
j--;

imprimirArreglo(arreglo);
}

//repetimos
if(i<j){
//hacemos una pausa de medio segundo
setTimeout(function(){
iteracionQS(i,j,pivote,primero,ultimo)
},500);
}else{
//si primero es menor a j llamamos la funcion nuevamente
if(primero<j){

//pausa de medio segundo
setTimeout(function(){
quicksort(primero,j);
},500);
}
//si ultimo es mayor que i llamamos la funcion nuevamente
if(ultimo>i){

//pausa de medio segundo
setTimeout(function(){
quicksort(i,ultimo)
}
,500);
}
}
}

De cualquier forma les dejo la liga directa al ejemplo mostrado, por si surge alguna duda.

Algoritmo de ordenamiento burbuja animado con jquery

En esta entrada hago uso del algoritmo burbuja en javascript que publique anteriormente, pero lo modifique para poder hacer una demostración utilizando jquery, de cómo va intercambiando los elementos en cada iteración, anexo el algoritmo funcionando, denle al botón comenzar para ver la animación hecha con jquery.

Y ahora el código completo y comentado:

CSS

.bloque{
	float:left;
	margin-left:5px;
	width:20px;
	height:20px;
	text-align::center;
	padding:5px;
	background:#fff;
 }

Código HTML


<div id="contenido" style=" background:#efefef; height:30px; padding:10px;"></div>

<input id="botonsito" type="button" value="Comenzar" onclick="comenzar()" />

Código Javascript/Jquery


//variables globales

arreglo=[11,15,12,8,1,5,4,2,99,2,3];
var i=0,j=0;
var iteracion; //sirve para guardar el evento de tiempo y poder pararlo

$(document).ready(function(){

	imprimirArreglo(arreglo)

});

function comenzar(){

	//comienza la iteracion con velocidad de 3 decimas de segundo cada iteración
	iteracion=setInterval(burbuja,300);

	//desabilitamos boton
	$("#botonsito").prop("disabled",true)

}

//funcion que plasma el arreglo para poder ser visualizado
function imprimirArreglo(){

	//borramos el contenido del div del contenido
	$("#contenido").html("");

	//imprimimos los elementos en forma de div
	for(i_=0;i_<arreglo.length;i_++){

		//anexamos un div con clase bloque
		$("#contenido").append("<div class='bloque'>"+arreglo[i_]+"</div>");
	}

}

function burbuja(){
	//recorreremos todos los elementos hasta n-1
	if(i<arreglo.length){

		//recorreremos todos los elementos hasta n-i, tomar en cuenta los ultimos no tiene caso ya que ya estan acomodados.
	    if(j<(arreglo.length-i)){

			//comparamos
			if(arreglo[j]>arreglo[j+1]){
				 //guardamos el numero mayor en el auxiliar
				 aux=arreglo[j];
				 //guardamos el numero menor en el lugar correspondiente
				 arreglo[j]=arreglo[j+1];
				 //asignamos el auxiliar en el lugar correspondiente
				 arreglo[j+1]=aux;

			}

			j++;
		}else{
			j=0;
			i++;
		}

	}else{
	    //aqui se termina el algoritmo por lo cual paramos el setInterval
		clearInterval(iteracion);

	}

	//imprimimos el arreglo en cada iteración
	imprimirArreglo()

}

De cualquier forma les dejo la liga directa al ejemplo mostrado, por si surge alguna duda.

Las funciones setInterval y clearInterval son funciones de javascript, la primera sirve para ejecutar un código cada cierto tiempo, la segunda detiene las iteraciones de la primera.

¿Cómo seleccionar el valor del radio button seleccionado con jquery?

Para seleccionar el valor del radio button seleccionado se hace de la siguiente manera:

HTML

<input type="radio" name="radiosfelices" value="1" >
<input type="radio" name="radiosfelices" value="2" checked="checked">
<input type="radio" name="radiosfelices" value="3">

Javascript

$(function(){

   var valor= $("input[name=radiosfelices]:checked").prop("value");

   alert(valor)
   // &gt;&gt; 2

})

Seleccionamos por el atributo name de nuestro grupo de radios y asignamos el parámetro checked, de esta forma nos regresara el valor del elemento que esta seleccionado.

¿Cómo crear una notificación con jquery, sin utilizar plugins?

En esta entrada vamos a ver cómo crear notificaciones con jquery en nuestro sitio web, de tal manera aparezca en un lugar donde el usuario la vea, puedes ver un ejemplo dando click aqui.

Existen muchos plugins pero en este artículo yo les enseñare como hacer sus propias notificaciones para que sean libres de modificarlas a su antojo.

Si nunca has utilizado jquery te recomiendo te des una vuelta por mi curso gratuito, que no te tomara más de 1 hora y te aseguro que al final sabrás utilizar bien esta librería.

Ahora vamos a lo divertido, primero anexo un código css el cual contiene nuestra clase de nombre Error, en este caso haremos una notificación de error, por lo cual pondré colores rojos:


.Error{
     position:absolute;
    z-index:32000;
    top:10px;
    left:50%;
    padding:5px;
    width:500px;
    margin-left:-255px;
    text-align:center;
     border: #d8d8d8 1px solid;
    background:#F8F8F8;
    color:#f00;
    font-weight:bold;
    opacity:0;
     font-size:1.2em;
}

El código anterior nos sirve para posicionar nuestra notificación, la cual aún no existe, la clase esta con opacity igual a 0 para que nuestro control tenga una animación de aparición inicial y le dé más estética, también le he asignado la posición top para que aparezca arriba y centrado, ustedes pueden diseñar su notificación a su antojo después de ver esta entrada.
En el siguiente código de javascript explico línea por línea que es lo que va haciendo:

function MensajeError(mensaje, time) {

	//si no se envia la variable time, esta se define por defecto en 6 segundos
    if (time === undefined) time = 6000;

	//agregamos el div a nuestra pagina con la clase css Error anteriormente hecha
    $("body").append("&lt;div class='Error'&gt;&lt;/div&gt;");

     //asignamos el texto del error al div que creamos
    $(".Error").html(mensaje);

    //aqui procedemos a crear la animación para que el div se muestre y se oculte despues de cierto tiempo
    $(".Error")
  .animate({ //seleccionamos el div
      opacity: 1 //aparece
  }, 500  //la animación se realiza medio segundo
          , function () { //ejecutamos un callback con función anonima para desaparecer la notificación despues de 6 segundos
              $(".Error").animate({ //seleccionamos nuevamente el div
                  opacity: 0 //ocultamos

              }, time   //tiempo de 6 segundos por defecto
              , function () {
				  				//al final en el callback del ultimo evento eliminamos el div de la pagina.
				  				 $(this).remove();
			  				}
              )
          })
}

Si nunca han utilizado la función anímate() de jquery te recomiendo te des una vuelta por mi artículo donde explico con detalle su funcionalidad.
Y bueno así de sencillo se hace una notificación con jquery sin utilizar plugins extras ni nada, ya solo queda invocarla asi: MensajeError(‘¡un error fatal!’).

Como detectar cuando se redimensiona la ventana de nuestro navegador con #jquery

Para detectar cuando se redimensiona la ventana de nuestro navegador existe el evento resize. Basta con utilizar el selector en el objeto global window y aplicar la función que deseamos realizar cada que se redimensiona:

$(window).resize(function(){
//aqui el codigo que se ejecutara cuando se redimencione la ventana
var alto=$(window).height();
var ancho=$(window).width();
alert("alto: "+alto+" ancho:"+ancho);
})