Entradas

Mostrando las entradas etiquetadas como javascript

Crea un buscador de imágenes (json) con Fuse.js - para principiantes

Imagen
Este buscador está basado en Fuse.js  el cual es un poco complicado de entender si eres principiante, así que vamos a agregar el ejemplo completo para que funcione si o si a la primera. Así que solo deberás copiar este código en un archivo html, puedes llamarlo como desees. Ver demo <!doctype html> <html lang="es"> <head> <title>Buscar imágenes</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> </head> <body> <body class="bg-light"> <nav class="navbar navbar-dark bg-success"> <div class="container-fluid"> <a class="navbar

Copiar el valor de un INPUT con Javascript

Imagen
  En nuestras páginas o paneles muchas veces mostramos datos en algún INPUT y es necesario copiarlo con el clic de un botón. Este código funciona solo con JavaScript, debido a que ahora todos los navegadores trabajan con la última versión de JS que es bastante potente. Cómo funciona A el INPUT se le asigna un ID para poder identificarlo, luego el botón llama a la función copiar. Al final la función usa el ID del INPUT y selecciona su valor  para finalmente copiarlo. <input id="123" type="text" value="https://wwww.guiaplaza.com" /><button onclick="copiar(1)" type="button">Copiar</button> <script> function copiar() { let copyInput = document.querySelector('#123'); copyInput.select(); document.execCommand("copy"); } </script> Para hacerlo con varios INPUT mira el siguiente ejemplo: https://webmasters.guiaplaza.com/2022/05/copiar-el-valor-de-un-input-de-una.html

Copiar el valor de un input de una lista de varios input

Imagen
  En nuestras páginas o paneles muchas veces mostramos datos en los INPUT y es necesario copiarlos solo con el clic de un botón. Este código funciona solo con JavaScript, debido a que ahora todos los navegadores trabajan con la última versión de JS que es bastante potente. Cómo funciona A cada INPUT se le asigna un ID para poder identificarlo y luego cada botón llama a la función copiar enviando como parámetro el mismo ID del INPUT. Al final la función se ejecuta recogiendo el parámetro, pero muy importante haciendo un escape del ID, seleccionando el valor del INPUT y finalmente copiándolo. <input id="1" type="text" value="url1" /><button onclick="copiar(1)" type="button">Copiar</button> <input id="12" type="text" value="url2" /><button onclick="copiar(12)" type="button">Copiar</button> <input id="123" type="text" value="

JavaScript: Cambiar imagen, si cambia el valor del input

Imagen
Si tienes un panel (dashboard) con varios input y uno de ellos contiene la URL de una imagen, a lo mejor deseas mostrar la imagen en la parte superior y que al cambiar la URL dentro del input muestre la nueva imagen. Voilà! aquí lo que buscabas: document.getElementById("id_del_input").addEventListener('input', cambiaImagen); function cambiaImagen(){ var dato = document.getElementById("id_del_input").value; document.getElementById('id_del_img_src').src = dato; } Otra versión, hace lo mismo. var elemento = document.getElementById('id_del_input'); elemento.addEventListener('input', function (cambiaImagen) { var dato = document.getElementById("id_del_input").value document.getElementById('id_del_img_src').src = dato; }); En realidad hay muchas formas de hacerlo, pero hay que adaptar la que se adapte más a tus necesidades.

Input para crear y direccionar una URL con JavaScript

Imagen
Muchas veces tenemos un sitio web con una casilla de búsqueda (INPUT) y deseamos agregar esta palabra a la creación de una URL, lo usual es hacerlo enviando la palabra como un parámetro de URL y recoger la variable con $_GET de php, pero si ya sabemos cómo va la dirección en su estructura, es mejor crearla en el mismo buscador y redireccionar la página a la nueva dirección de destino. Pero, veamos qué objetivos buscamos: Ingresar un texto. Bajar el texto a minúsculas. Retirar los acentos o tildes. Crear una nueva URL. Redireccionar automáticamente. Usaremos Javascript: <form> <input id="text" type="search" placeholder="ingrese texto" /> <button onclick = "ir()" type="submit">Buscar</button> </form> <script> function ir() { var url= "https://www.deperu.com/productos/categoria-" + document.getElementById("text").value.toLowerCase().normalize("NFD&q

Cuidado con los JavaScript: type text/rocketscript

Cuando trates de copiar y adaptar un script de otros sitios web y en sus páginas el script que deseas clonar contenga el type="text/rocketscript" deberás cambiarlo por  type="text/javascript" . Además debes eliminar:     data-cfasync="true"  si la hubiere. ¿Por qué? Estás líneas son agregadas por un servidor llamado CloudFlare, el cual es un servicio de CDN y caché que usan muchos sitios web. Rocket Loader , es una función que acelera las páginas web el cual cambia las funcionalidades de los JS normales por un sistema que los ejecuta en su servidor reduciendo las conexiones. Esta función solo trabaja con archivos JS internos alojados en el propio sitio de sus clientes. Por lo que Jquery, CSS y otros archivos externos no los optimiza.

Cómo contar a los usuarios de Adblockers

Imagen
Las aplicaciones para móviles y ordenadores llamados Bloqueadores de Publicidad (Ad Blocker) desactivan muchos JavaScript de las páginas web por lo que medirlos es tedioso. Sin embargo existe una manera ingeniosa de hacerlo a través de un PNG. Lo primero que hacemos es crear una cuenta en un servicio llamado  trendcounter.com quién nos proveerá la imagen y contabilizará a los usuarios:

Efecto Cargando Página con jQuery

Imagen
imagen para esperar Algunas páginas son muy lentas y necesitan que le agreguemos el tradicional efecto de cargando en texto o el gif animado mostrado a la izquierda. Para los que conocemos html nos resulta conocido los DIV con el texto «cargando», así que vamos a ver como con unas cuantas líneas podemos llevar a cabo este efecto. Este ejemplo es útil para una página que tarda demasiado en cargar, y usaremos un link a un archivo externo jQuery, un JS y un DIV. Los siguientes pasos es entre las etiquetas HEAD: PASO 1: Agregar el archivo jQuery externo: <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js "></script> PASO 2: agregar debajo el script siguiente: <script> $(window).load(function () { $('#cargando').hide(); }); </script> PASO 3: agregar los estilos: <style type="text/css"> #cargando { width:350px; height:70px; clear:both; background-colo

Script para buscar palabras o textos en una página (html) con Jquery

Imagen
Aquí les muestro la solución que recientemente encontré para colocar un buscador dentro de una página web para que encuentre textos o palabras. El script funciona con Jquery y un pequeño Javascript que busca en el html y resalta (en amarillo) los textos que va encontrando según tu vayas ingresando las letras. El color de fondo puede variarse de acuerdo al tema y colores de tu página web. Es además un script moderno  (2012) que trabaja con todos los navegadores como el Chrome, IE9, Safari, etc.