|
Ultima actualización: Octubre 25 2008 20:55:08
|
Últimos JavaScript agregados
- Posición de una imagen en la ventana del navegador
Este sin duda en un script que servirá como herramienta para cientos de ejemplos JavaScript que requieran saber la posición de un objeto en la ventana del navegador. El mismo nos permite saber la posición izquierda (left) y superior (top) del objeto (capa, layer, imagen, tabla, etc.) con respecto al margen izquierdo/superior de la ventana.
- Habilitar / Deshabilitar JavaScript en Internet Explorer
En el artículo anterior repasamos como habilitar la ejecución de código JavaScript en el navegador de Mozilla como así también la configuración de ciertos parámetros del mismo. Ahora hacemos lo mismo para Internet Explorer.
- Activar y configurar JavaScript en Firefox
Si bien JavaScript viene activado por defecto en el navegador firefox, no todos sus parámetros de configuración están habilitados. En este artículo repasaremos los pasos para activar la ejecución de código JavaScript en dicho navegador como también la activación de ciertos parámetros configurables.
- Eliminar la barra de herramienta que permite guardar imágenes
Cuando posamos el puntero del Mouse sobre una imagen JPG, el navegador Internet Explorer, muestra una barra de herramientas que permite, entre otras cosas, guardar la imagen en la PC. A continuación mostramos un método para eliminar (suprimir) esta barra.
- Galería de imágenes con título descriptivo más enlace
Esta completa galería de imágenes en JavaScript muestra cada imagen con un título descriptivo que se transforma en enlace hacia el mismo archivo gráfico o hacia una página web alojada dentro o fuera de nuestro dominio. El título que sirvirá de enlace estará dentro de una capa (SPAN) con fondo transparente.
- Conversión unidades - KB a MB y viceversa
Este JavaScript convierte un número expresado en KB a MB y viceversa. La información de la conversión la muestra en un cuadro de texto.
- Control Tabla - Oculta y muestra filas de una tabla
Esta librería JavaScript nos permite ocultar filas en una tabla. El método se produce bajo la selección de la fila mediante un cuadro de selección, el cual contiene todas las filas de la tabla. El Script también nos permite volver a mostrar la fila en su posición original.
- Código de colores en sistema hexadecimal
En categoría [ Varios] -
Compatible con: IE/Firefox -
Tamaño: 2 KB
Este ejemplo JavaScript genera una lista de 512 códigos de colores en sistema hexadecimal. El Script nos permite seleccionar y copiar automáticamente el código elegido.
- Calculadora Científica SCI en JavaScript
En categoría [ Varios] -
Compatible con: IE/Firefox -
Tamaño: 9 KB
La calculadora científica (SCI) en JavaScript resuelve las operaciones básicas de cálculo aritmético: suma, resta, producto, división, seno, coseno, tangente, potenciación, radicación.
- JavaScript para ocultar y/o mostrar una capa
En categoría [ Varios] -
Compatible con: IE/Firefox -
Tamaño: 2 KB
Sencillo JavaScript que nos permite mostrar u ocultar una capa (layer) mediante un enlace o botón de formulario. El ejemplo es muy sencillo pero útil, sobre todo si trabajamos con sitios web donde el espacio de trabajo quede reducido debido a la cantidad de información que se muestra y debamos ocultar los elementos que no necesitemos a la carga de la página. Otra utilidad muy común es la de querer ocultar ciertos elementos que no son utilizables para ciertos usuarios de la página. Bueno, las utilidades son cientos así que está en vos aprovechar este JavaScript para lo que necesites.
|
|
- Redireccionar página con la función setTimeout()
Este Script permite redireccionar una página al cabo de x segundos mediante la función setTimeout() de JavaScript. El ejemplo muestra los segundos definidos y la URL de la página que se cargará.
- Ocultar dirección de Email en formulario y página
En categoría [ Formularios] -
Compatible con: IE/Firefox -
Tamaño: 1 KB
El siguiente JavaScript permite ocultar una dirección de Email (correo electrónico) en nuestra página y/o formulario HTML para evitar el spam.
- Menú CSS con cambio de color en el fondo de los enlaces
En categoría [ Menús CSS] -
Compatible con: IE/Firefox -
Tamaño: 3 KB
Este JavaScript cambia el color de fondo del texto que utilizamos como enlace hacia otra página. El Script utiliza código CSS y JavaScript para realizar cambios en las propiedades de las celdas y enlaces de la página. Si sabemos algo de CSS podemos configurar el ejemplo a nuestro gusto, asignando los atributos y valores correspondientes a cada elemento.
- Menú desplegable vertical
Con esta librería JavaScript podemos crear un menú desplegable verticalmente para mantener oculto cierto contenido de nuestra página hasta tanto no se active dicho menú. La activación del menú produce un efecto de redimensionamiento gradual de la capa contenedora.
- Efecto flash en carga de imagen
Esta librería JavaScript permite mostrar gradualmente una imagen imitando un efecto flash sobre la misma, cargando línea por línea el dibujo del gráfico elegido.
- Banner / Capa flotante sensible al Scroll de la ventana
Para todos aquellos que necesiten llamar la atención del visitante mediante un banner de texto o imagen, este Script les será muy útil. El mismo muestra una capa, que ira cambiando su posición vertical a medida que la barra de Scroll se deslice verticalmente sobre la página. La Capa / Banner estará siempre visible en la página por lo que será muy difícil no verla.
- Eliminar espacios de una cadena de texto mientras se escribe
Por diferentes razones podemos necesitar algún método para eliminar los espacios escritos en un cuando de texto que, por lo general, será enviado junto con los demás elementos de formulario. Este ejemplo JavaScript elimina los espacios en tiempo real, es decir, a medida que se escribe en el cuadro de texto.
- Comprobar si están habilitadas las Cookies en el navegador
En categoría [ Cookies] -
Compatible con: IE/Firefox -
Tamaño: 2 KB
Si nuestro sitio utiliza Cookies para almacenar cierta información del usuario visitante, este ejemplo de código JavaScript nos servirá para comprobar si el navegador del cliente acepta la lectura y/o escritura (acceso) a las cookies del sistema. La verificación se realiza mediante la creación de una Cookie y posterior acceso a la misma, por lo que si es posible acceder a ésta, se mostrará un mensaje de éxito.
- Sombra con efecto pulso en el texto
Otro efecto muy llamativo para el texto de nuestra página. El mismo genera una sombra de varios colores (seis colores) que va creciendo y disminuyendo su radio de cobertura generando un efecto del tipo pulso. Podemos definir la velocidad del efecto, los colores y la amplitud de la sombra generada.
- Efecto sombra en el texto con movimiento
Crea un efecto muy llamativo en el texto que definamos. El mismo consiste en cambiar rápidamente la sombra del texto una y otra vez. Podemos definir varios colores de sombra y por supuesto personalizar los colores a utilizar mediante la elección de colores hexadecimales. El texto funciona como un enlace de hipertexto normal.
- Redireccionar página mediante cookie
En categoría [ Cookies] -
Compatible con: IE/Firefox -
Tamaño: 2 KB
El ejemplo JavaScript que vemos a continuación puede sernos muy útil para cuando queramos almacenar una opción elegida por el visitante y de acuerdo a éste valor redireccionar la página automáticamente.
- Intercambiar datos entre formularios de diferentes ventanas
En categoría [ Formularios] -
Compatible con: IE/Firefox -
Tamaño: 2 KB
Este JavaScript permite intercambiar datos entre los elementos de formularios que se encuentran en ventanas diferentes. El Script controla el cierre manual de la ventana popup abierta mediante botones en ambas ventanas.
- Drag and Drop: Arrastrar imágenes con el Mouse
El Drag and Drop se conoce como la posibilidad de arrastrar un elemento de un lugar al otro. Este ejemplo JavaScript permite arrastrar las imágenes mediante el puntero del Mouse para moverlas y posicionarlas en el lugar "que menos molesten". Podemos definir cuáles imágenes estarán disponibles para hacer "Drag and Drop" mediante la definición de una clase específica para las mismas.
- Galería de imágenes en JavaScript
Completa galería de imágenes para nuestro sitio. La misma nos permite agregar todas las imágenes que queramos para ser mostradas una por una a la selección del visitante o de manera automática cada x segundos (Slide Show). La galería muestra la información de la imagen cargada, por ejemplo, el ancho y alto definido y real de la imagen, ubicación (URL) de la imagen, tamaño en KB y nombre del archivo. También se muestra una vista previa de la siguiente imagen y por cada muestreo se producirá un efecto de opacamiento.
- Transición de imágenes con efecto FadeIn y FadeOut
Con este ejemplo JavaScript podemos crear un banner con transición de imágenes y aplicar un efecto de opacamiento simulando un FadeIn y FadeOut sobre las mismas. Cada imagen tendrá un enlace hacia una página diferente. Podemos personalizar el tiempo que estará visible cada imagen antes que se produzca el desvanecimiento.
- Efecto de opacamiento gradual en una imagen
En este ejemplo podemos ver como es posible aplicar un efecto de opacamiento gradual a una imagen cambiando el valor de la propiedad filter (para IE) y MozOpacity (para Firefox). Podemos definir el grado de opacamiento que tendrá la imagen y la velocidad con la que se produce el efecto.
- Efecto: Opacar una imagen con JavaScript
Con este ejemplo JavaScript podemos crear un efecto de opacamiento a las imágenes de nuestra página. El Script funciona con una simple función que cambia la clase de la imagen definiendo el valor de la propiedad FILTER. El efecto se produce cuando se pasa el puntero del Mouse sobre la imagen.
- Cargar una imagen de fondo diferente según la hora del sistema
Utilizar una imagen de fondo en una página web es algo muy común en estos días, pero la posibilidad de usar varios motivos es algo que no todos implementan y, a través de JavaScript, podemos hacerlo posible. Este ejemplo carga una imagen de fondo diferente según la hora del sistema que ejecuta el Script. El mismo está configurado para mostrar 4 motivos de imagen aunque podemos agregar / quitar los que deseemos.
- Transición de imágenes con efecto Blur
El siguiente JavaScript crea una transición sobre las imágenes definidas en el código JavaScript y aplica un efecto tipo Blur sobre las mismas. Cada una de estas imágenes servirá de enlace hacia una página diferente por lo que podremos utilizar el Script como sistema de banner rotativo.
- Efecto Scroll en Barra de Estado y Título
Ejemplo JavaScript para mostrar un mensaje de texto con efecto de Scroll en la Barra de Estado y Título del navegador.
- Enviar URL de la página por Email a un amigo
En categoría [ Navegación] -
Compatible con: IE/Firefox -
Tamaño: 2 KB
Este JavaScript envía la URL de la página cargada en el navegador, al Email especificado. Antes de realizar el envío verifica el dato escrito en el campo "Email de tu amigo" validándolo mediante expresión regular.
- Mostrar la hora del sistema en un botón de formulario
En categoría [ Hora y Fecha] -
Compatible con: IE/Firefox -
Tamaño: 2 KB
Este ejemplo JavaScript muestra la hora actual del sistema en un elemento tipo botón (button). La hora se muestra en formato 12 horas, es decir que para las 5 de la mañana se mostrará 05 AM y para las 5 de la tarde (17 HS) se mostrará 05 PM.
- Redireccionar según la edad del visitante
Sencillo ejemplo JavaScript que redirecciona hacia una u otra página web dependiendo del dato (edad) que halla ingresado el usuario en un cuadro de diálogo tipo prompt().
- Información del Navegador utilizado
Este JavaScript muestra la información del navegador utilizado por el visitante de la página. Podemos ver el nombre, versión, código del nombre, UserAgent (Agente de usuario), Plataforma y Lenguaje del navegador.
- Agregar opciones de Cuadros de texto en el formulario
En categoría [ Formularios] -
Compatible con: IE/Firefox -
Tamaño: 2 KB
Muchas veces podemos necesitar que el usuario agregue más opciones de las que le ofrecemos nosotros. En este caso utilizamos los cuadros de texto de formulario para que el visitante escriba las opciones a un determinado tema o pedido. El ejemplo JavaScript que vemos a continuación nos permite ir agregando tantas opciones como necesitemos comunicar. Las mismas podrán agregarse de a una o en conjunto (2, 4, 6, 10, etc). Para facilitar la operación de borrado o eliminación de los cuadros de texto que fueron agregados de más, creamos un botón que elimina todos los controles de una solo vez.
- Hora y Fecha: Calcular días, horas, minutos y segundos faltantes y pasados
En categoría [ Hora y Fecha] -
Compatible con: IE/Firefox -
Tamaño: 3 KB
Este JavaScript calcula los días, horas, minutos y segundos faltantes para que termine el año corriente. Lo mismo realiza para el tiempo que ha pasado desde que empezó el año. El calculo se realiza en base a la hora del sistema y se actualiza en forma continua.
- Efecto de texto con movimiento temblor
Este JavaScript produce un efecto de temblor en el texto creando un moviento de zig zag muy llamativo.
- Pasar variables de una página HTML a otra
En categoría [ Navegación] -
Compatible con: IE/Firefox -
Tamaño: 1 KB
El siguiente JavaScript permite pasar variables de una página HTML a otra. Tanto los nombres de las variables como sus valores serán enviados a través de la URL cargada en la barra de direcciones del navegador.
- Abrir ventana Popup en posición definida
Este JavaScript utiliza el método open() del objeto window para abrir una ventana tipo Popup y define la posición de la misma mediante los parámetros left y top.
- Imagen con efecto recorte
Este ejemplo JavaScript es ideal para cuando queramos aplicar un efecto a imágenes chicas que formen parte de un menú de navegación, aunque podemos utilizarlo en cualquier caso. Las imágenes de la página que definamos para el efecto aparecerán en el mismo orden que fueron escritas en el código HTML y se posisionarán en la página de acuerdo a la posición de la imagen anterior.
- Pre carga de imágenes con JavaScript
Este ejemplo JavaScript nos permite hacer una pre carga de las imágenes en nuestra página. Las mismas no se mostrarán en la página pero de ser necesario esto, ya estarán cargadas en la PC del visitante listas para ser mostradas, sin el inconveniente que pueda suponer pedir al servidor la descarga rápida de la misma.
- Generar clases automáticamente a listas HTML
Debido a que muchas veces a las clases de las listas, o de cualquier elemento de la página, no podemos generarlas automáticamente, los conjuntos de elementos de, por ejemplo una lista, tendrán siempre los mismos nombres de clases (atributo class). Mediante este Script podemos asignar diferentes nombres de clases a cada uno de los elementos <LI> del elemento lista <UL>.
- Ultima actualización del documento HTML
En categoría [ Hora y Fecha] -
Compatible con: IE/Firefox -
Tamaño: 1 KB
Muchas sitios utilizan un sistema automático para mostrar la fecha de la última actualización del documento HTML cargado en el navegador. El ejemplo JavaScript que ofrecemos a continuación permite mostrar la última vez que el documento fue modificado en el servidor.
- Generador de Meta Tag
JavaScript para generar de una manera fácil y rápida todas las etiquetas Meta Tag que necesita una página web. Genera etiqueta de Título, Autor del documento, Asunto, Descripción, Palabras Claves (Keywords), Generador de contenido, Lenguaje del documento, Copyright, Frecuencia de visita, Tipo de Distribución y por supuesto las etiquetas que permiten la indexaci⊗n de la página en los buscadores.
- Mover Ventana sobre la pantalla con efecto ping pong
Para todos aquellos que les guste llamar la atención al cargar la página del sitio, no podrán dejar de ver este sencillo ejemplo JavaScript. El mismo mueve la ventana del navegador de izquierda a derecha y viceversa como si se jugara ping pong con la misma. Podemos definir cuantas veces se repetirá el efecto en la pantalla.
- Cargar una Hoja de Estilo según la resolución de pantalla utilizada
Este ejemplo JavaScript muestra de qué manera podemos cargar una hoja de estilo diferente según la resolución de pantalla utilizada. Debemos crear tantas hojas de estilos como resoluciones hayamos definido. En este caso debemos crear las hojas de estilo: 1024.css , 800.css y 640.css
- Menú de navegación horizontal desplegable en CSS
En categoría [ Menús CSS] -
Compatible con: IE/Firefox -
Tamaño: 4 KB
Con este ejemplo podemos crear un menú índice para nuestra página web. Podemos agregar todos los ítem y subítem que queramos. El ejemplo utiliza código JavaScript para modificar las propiedades CSS de los elementos que componen el menú.
- Mensaje de texto animado en la barra de estado y título
Este JavaScript muestra un mensaje en la barra de estado y título del navegador y aplica un efecto animado al texto. Podemos crear una secuencia con la cantidad de mensajes que queramos y modificar el tiempo de visualización para cada uno.
- Cambio de color de fondo en el texto
Este JavaScript cambia el color de fondo del texto que utilizamos como enlace hacia otra página o archivo. El Script utiliza código CSS y JavaScript para realizar cambios en las propiedades de las celdas y enlaces de la página. Si sabemos algo de CSS podemos configurar el ejemplo a nuestro gusto, asignando los atributos y valores correspondientes a cada elemento.
- Tooltip con efecto de scrolling en el texto
Muchas veces podemos necesitar presentar un mensaje al visitante cada vez que éste se pare sobre un enlace. Estos mensajes son comúnmente llamados ToolTip y se utilizan para proporcionar ayuda sobre el enlace mismo. Este sencillo pero útil JavaScript muestra una ventanita con el mensaje que queramos y le aplica un efecto de scrolling al texto.
- Mensaje de Bienvenida al sitio con nombre del visitante
En categoría [ Varios] -
Compatible con: IE/Firefox -
Tamaño: 1 KB
Los mensajes personales a los usuarios de un sitio son muy elegidos por los webmaster. A través de este Script podemos crear un título de bienvenida al sitio, el cual tendrá el nombre que haya ingresado el visitante más el saludo que queramos.
- bbCode sobre el texto de un cuadro textarea
El siguiente ejemplo JavaScript realiza un bbCode sobre el texto escrito en un cuadro TEXTAREA. Podemos insertar todos los elementos textarea que queramos y cada uno tendrá su propia edición de texto bbCode.
- Extraer direcciones de Email en una cadena de texto
Puede ser muy útil extraer las direcciones de Email que se encuentran mezcladas en una cadena de texto de varias líneas. Para esto utilizamos el método match() y como parámetro utilizamos una expresión regular que valida o encuentra texto que cumpla los parámetros de escritura de una dirección de Email.
- Expresión regular para verificar una dirección URL
Mostramos otro ejemplo JavaScript sobre expresiones regulares que puede ser muy útil para cuando tengamos que verificar si una dirección URL se ajusta a los parámetros de escritura.
- Expresión regular para comprobar dirección de Email
Mediante las expresiones regulares de JavaScript podemos analizar y comprobar, a través de ciertos patrones, si una cadena de texto, compuesta por caracteres, dígitos y símbolos, concuerda con la sintaxis de una dirección de Email. A continuación presentamos el ejemplo explicando en detalle cada parámetro de análisis.
- Comprobar Expresión Regular en JavaScript
Este ejemplo JavaScript comprueba si una cadena de texto cumple con el patrón creado en la expresión regular creada . El ejemplo muestra un área de texto, en la cual podemos escribir el texto que vamos a comprobar mediante la expresión regular escrita en otro cuadro.
- Texto que sigue al cursor del Mouse
Este JavaScript muestra un mensaje de texto y lo mueve a medida que cambia la posición del cursor del Mouse, siguiéndolo para todos lados dentro de la página.
- Cambio de color en el texto con efecto de barrido
Este JavaScript nos permite escribir un texto en la página para aplicarle un cambio de color con un efecto de barrido de un color sobre otro. Es posible definir el intervalo de tiempo en el que se debe ejecutar el cambio de color sobre cada caracter del texto.
- Saber la posición del cursor en un cuadro de texto
En categoría [ Formularios] -
Compatible con: IE -
Tamaño: 1 KB
Este ejemplo JavaScript muestra la posición del cursor dentro de un cuadro de texto. No se si servirá de algo tener este dato pero me pareció interesante saber en que parte del texto estamos parados cuando recorremos el value de un cuadro de texto. Debido a que document.selection.createRange() no es soportado por Firefox se ha programado el Script solo para IE.
- Verificar correcta escritura de dato en cuadro de texto
En categoría [ Formularios] -
Compatible con: IE/Firefox -
Tamaño: 2 KB
El siguiente JavaScript nos permite hacer lo que seguramente haz visto en muchas solicitudes de registro de sitios web. Cuando se nos pide ingresar un dato (por ejemplo una dirección de email) y se necesita verificar que la misma ha sido escrita correctamente, se utiliza otro cuadro de texto de comparación para validar el dato ingresado. El Script no solo nos avisa cuando el dato ha sido mal o bien escrito, sino que también nos da cierto control en la manera en que el usuario visitante de nuestro sitio introduce el dato requerido en el campo de formulario.
- Impedir la selección de texto de la página
Cualquier navegador actual permite la selección de los objetos (texto, imágenes, etc.) de la página mediante diversos métodos. El Script que presentamos a continuación impide que el texto (y otros objetos de la página) sean seleccionados. La no selección de un objeto supone la imposibilidad de poder copiar éste elemento al portapapeles. Esto no es del todo así ya que el usuario podría acceder al código fuente de la página para copiar el texto.
- Cambiar tamaño en ventana con efecto plegado
Este JavaScript cambia el tamaño (desde la esquina inferior derecha) de la ventana del navegador hasta que llega a los pixeles definidos y luego vuelve a redimensionar la ventana a su tamaño máximo (ventana maximizada) produciendo así un efecto de plegado sobre la misma.
- Abrir ventana maximizada
Este Script maximiza la ventana del navegador a la carga de la página adaptándola a las dimensiones de la resolución de pantalla utilizada.
- Barra de progreso para la carga de la página
En categoría [ Varios] -
Compatible con: IE/Firefox -
Tamaño: 2 KB
Inserta una barra de progreso hasta que se completa totalmente la carga de la página. Podemos configurar muy fácilmente las dimensiones de la barra como sus colores y velocidad con la que se produce el efecto de progreso de carga.
- Deshabilitar botones del Mouse con JavaScript
En categoría [ Varios] -
Compatible con: IE/Firefox -
Tamaño: 1 KB
Ejemplo JavaScript para deshabilitar los botones (izquierdo, derecho y central) del Mouse. El Script puede configurarse para mostrar un mensaje de alerta cada vez que es presionado algún botón del Mouse. Mediante esta operación quedan totalmente inutilizables ambos botones, por lo que el visitante no podrá seleccionar texto, presionar botones y ejecutar el menú contextual del navegador.
- Tabular un formulario (cambiar el foco) con la tecla Enter
En categoría [ Formularios] -
Compatible con: IE/Firefox -
Tamaño: 1 KB
El siguiente JavaScript permite configurar la manera en que se comporta una tecla del teclado al ser presionada en un elemento de formulario. En este caso, al presionar la tecla Enter se producirá el mismo efecto que con la tecla de tabulación, es decir, se dará el foco al siguiente elemento del formulario. Una vez que se llegue al último campo el Script muestra un mensaje avisando que se ha completado el mismo.
- Buscar con Google solo en nuestro dominio
En este ejemplo JavaScript vamos a ver como es posible agregar el mismo motor de búsqueda para que los visitantes de nuestro sitio busquen y encuentren páginas solo de nuestro dominio. Para que el Script sea totalmente funcional se ha programado el mismo para configurarlo de tal manera que no solo busque en nuestro sitio sino también en toda la web.
|