Artículos
jQuery

Cargar contenido con el scroll usando jQuery

Creado: 24/May/2010 Actualizado: 27/Ago/2021

Una cosa bastante atractiva que están implementando muchas webs es la carga de datos utilizando el scroll. El mecanismo consiste en cargar una serie de datos en pantalla. Para ir viendo los datos utilizaremos el scroll. Y cuando el scroll alcance el final de la página, cargaremos nuevos datos, permitiéndonos hacer más scroll. Así, una y otra vez cada vez que lleguemos al final de la página.

Esto lo podemos ver en webs como Facebook y Twitter.

Para realizar nuestro ejemplo nos vamos a basar en el artículo Repaginar con jQuery y AJAX. Lo único que vamos a hacer es sustituir los botones de repaginación por el funcionamiento del scroll.

Lo que hay que tener claro en este ejemplo es conocer como es la estructura del contenido que vamos a solicitar al servidor. Para ello tenemos una capa principal que será la lista de mensajes y dentro de esta N capas dónde estarán los mensajes concretros.

El código HTML sería algo así:

Mediante jQuery lo que hacemos es ir cargando mensajes dentro de las capas cada vez que detectemos que la barra de scroll ha llegado al final.

Lo primero con jQuery será cargar el fichero de jQuery que nos ayudará en la realización del código

Una vez instanciado jQuery vamos a realizar la primera carga de datos. Esto lo haremos nada más terminar la carga de la página. Es decir, controlando el método .ready() de jQuery.

$(document).ready(function() {
  cargardatos();	
});

La carga de datos es una petición AJAX con jQuery. Veamos el código:

function cargardatos(){
  $.get("/samples/php/datos.php?pagina="+pagina,
   function(data){
    if (data != "") {
     $(".mensaje:last").after(data); 
    }
   });				
}

La variable página nos sirve para realizar una petición de una u otra página al servicio AJAX expuesto

La petición AJAX con jQuery la realizamos mediante la función .get(). Lo más importante es que la respuesta de la petición la dejamos detrás del último mensaje de la capa de mensajes mediante la función .after(). El selector que utilizamos es .mensaje:last

$(".mensaje:last").after(data);

Una vez que hemos visto la carga y que la hemos ejecutado al cargar la página. Tenemos que ver como realizar la misma petición cada vez que el scroll llega al final de la página. Para poder acometer esto lo que vamos a capturar es el evento .scroll().

Para el cálculo hay que conocer 3 variables:

  • Alto del documento, es el tamaño del documento: document).height()
  • Alto de la ventana, es el tamaño de la ventana: $(window).height()
  • Posición del scroll, es la posición del documento en la que se encuentra el scroll: $(window).scrollTop()

De esta forma, cuando a la posición del scroll le sumemos el tamaño de la ventana y nos dé el tamaño del documento, será que habremos llegado al final del documento y por lo tanto hay que lanzar una nueva carga de datos.

$(window).scrollTop() == $(document).height() - $(window).height()

El código quedaría de la siguiente forma:

$(window).scroll(function(){
 if ($(window).scrollTop() == $(document).height() - $(window).height()){
  pagina++;
  cargardatos()
 }					
});

Vía: Anieto2K

Código Fuente

Descárgate el código fuente de Cargar contenido con el scroll usando jQuery
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Artículos
Java

El operador ternario en Java

Creado: 18/May/2010 Actualizado: 07/Dic/2023

El operador ternario en Java nos va a simplificar mucho a la hora de codificar sentencias de selección dentro del código. Por ejemplo, calcular el mayor de dos números con Java es una cosa realmente sencilla con Java. Si preguntas a cualquier programador te dirá que puedes utilizar un simple if-then-else. Quedando un programa de pocas líneas.

if (x>y)
   mayor = x;
else
   mayor = y;

Pero lo que, sorprendentemente, muchos programadores Java no saben, es que existe un operador condicional ternario ?: que nos ayuda a realizar estas operaciones con mucho menor código.

La estructura del operador ternario en Java, o de la forma abreviada el operador ?:, es la siguiente:

resultado = (condicion)?valor1:valor2;

Vemos que hay 3 partes dentro de la estructura, la primera parte será la condición que irá entre paréntesis. Las condiciones pueden ser cualquier tipo de sentencias que realicen una evaluación que devuelva un valor booleano, ya sea true o false. Luego seguirá un símbolo de cierre de interrogación (?) el cual nos servirá para asignar el valor true y después irá el símbolo de dos puntos (:) al que le acompañará el valor false de la condición.

Es decir, en la sentencia que hemos descrito en el código la variable resultado recibirá el valor1 en el caso de que la condición sea true o bien el valor2 en el caso de que la condición sea false.

Así, si queremos calcular el mayor de dos números tendremos el siguiente código mucho más simplificado que el anterior:

mayor=(x>y)?x:y;

Sin duda alguna, mucho menos código. :-) ¿Conocías el operador ternario en Java? ¿En qué casos lo utilizar? Comparte con toda la comunidad tus experiencias al respecto.

Código Fuente

Descárgate el código fuente de El operador ternario en Java
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
El operador ternario en Java

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
Microsoft.Net

Simple navegador web en C# Framework 2.0

Creado: 05/May/2010 Actualizado: 23/Dic/2024

Los pasos a seguir para crear un simple navegador web en C# y usando un framework 2.0 son los siguientes:

Lo que Primero hacemos es Crear un Proyecto Nuevo (Visual Studio 2005), lenguaje C#. y das un nombre a elección. Luego tenemos nuestro Form que se verá algo así:

captura

Luego lo que hacemos es añadir un Control de ToolBox llamado WebBrowser, por defecto al arrastrar el WebBrowser ocupa el form completo pero como necesitamos solo mostrar la página web en éste desbloqueamos el control WebBrowser para poder eleguir la posición a gusto de donde se mostrará la web:

image

Después de eleguir la posición del Web Browser vamos a las propiedades de éste para configurar la acción de cuando se maximiza la ventana automáticamente se maximise el WebBrowser:

image1

Ahora nos queda ingresar los botones comunes en un navegador como lo es el “Ir a” “Atrás” “Adelante” “Parar” “Actualizar” “Barra de Direcciones”. Para ésto poner los controles a gusto debería quedar algo así:

image2

Ahora ya tenemos los controles ingresados sobre nuestro Form ahora lo que hacemos añadimos los Eventos a cada uno.

Empezaremos con Botón Atrás “btAtras”

private void btAtras_Click(object sender, EventArgs e){
  webBrowser1.GoBack();
}

Ahora Botón Adelante “btAdelante”

private void btAdelante_Click(object sender, EventArgs e)  {
  webBrowser1.GoForward();
}

Ahora Botón Parar “btParar”

private void btParar_Click(object sender, EventArgs e) {
  webBrowser1.Stop();
}

Ahora Botón Actualizar “btActualizar”

private void btActualizar_Click(object sender, EventArgs e) {
  webBrowser1.Update();
}

Ahora Botón Inicio “btInicio”

private void btInicio_Click(object sender, EventArgs e){
  webBrowser1.GoHome();
}

Ahora Botón Ir A “btIrA”

private void btIrA_Click(object sender, EventArgs e){
  webBrowser1.Navigate(tbDireccionWeb.Text);
}

Ahora os dejo el código completo de deberían tener en Form1.Cs

using System;
using System.Collections.Generic; 

using System.ComponentModel;
using System.Data; 

using System.Drawing;
using System.Text; 

using System.Windows.Forms;   

namespace SethBrowser{ 

 public partial class Form1 : Form { 

  public Form1(){
    InitializeComponent();
  } 

  private void btAtras_Click(object sender, EventArgs e)  {
    webBrowser1.GoBack();
  } 

  private void btAdelante_Click(object sender, EventArgs e){
    webBrowser1.GoForward();
  } 

  private void btParar_Click(object sender, EventArgs e){
    webBrowser1.Stop();
  } 

  private void btActualizar_Click(object sender, EventArgs e) {
    webBrowser1.Update();
  } 

  private void btInicio_Click(object sender, EventArgs e){
    webBrowser1.GoHome();
  } 

  private void btIrA_Click(object sender, EventArgs e) {
    webBrowser1.Navigate(tbDireccionWeb.Text);
  }
 }
}

Ya tenemos todos nuestros contoles con sus respectivas acciones.

Veamos como queda Línea de Código en nuestro navegador

navegador

Les dejo un proyecto Visual Studio 2005 con el navegador (tiene algunas funcionalidades mas, cómo capturar tecla enter, buscador para google, etc):