Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como js

Algoritmo de ordenación de datos tipo bubble o burbuja

En la ciencia de la computación existen varios estándares de algoritmos para ordenar un conjunto de datos. En la práctica arrays. El primer método de ordenación que se utilizó es es el de tipo “bubble” o burbuja. Este método es el que más se asemeja a la forma de ordenar humana. Y funciona de la siguiente manera. Supongamos que tenemos la siguiente lista de números y los queremos ordenar de mayor a menor. Números= [1,2,4,8,9] Ahora este algoritmo compara el número en el que estamos con el siguiente. Si es mayor no hace nada, si es menor intercambia las posiciones de los números. El algoritmo empezaría por la posición cero que corresponde al número 1. Iteración 0 : [2,1,4,8,9] Iteración 1 : [2,4,1,8,9] Iteración 2 : [2,4,8,1,9] Iteración 3 : [2,4,8,9,1] Iteración 4 : [4,2,8,9,1] Iteración 5 : [4,8,2,9,1] Iteración 6 : [4,8,9,2,1] Iteración 7 : [8,4,9,2,1] Iteración 8 : [8,9,4,2,1] Iteración 9 : [9,8,4,2,1] El array ya está ordenado, el bucle hará ...

Cómo centrar un div dentro de otro div

¿Qué tal estamos capitán? Hoy vamos a aprender a centrar un div dentro de otro div. Y por extensión cualquier cosa dentro de su contenedor. Seguro que alguna vez os habéis puesto a trastear y a intentar centrar un elemento dentro de su contenedor. Depende de como lo hayáis programado centrar el elemento horizontalmente con la propiedad auto de margin-left y margin-right es sencillo. Pero ¿Cómo central de facilmente un elemento dentro de su contenedor en las dos dimensiones? A continuación dejo un ejemplo. Ver ejemplo Para lograr necesitaremos programas la siguiente funciónn de javascript. function centrarDivDentroDeOtroDiv(id){ //Obtenemos los elementos var divCentrar = document.getElementById(id); var divContenedor = divCentrar.parentNode; //Obtenemos las dimensiones var anchuraContenedor = parseInt(window.getComputedStyle(divContenedor, null).getPropertyValue("width")); var alturaContenedor = parseInt(window.getComputedStyle(di...

Cómo hacer scroll suave o smooth scroll en javascript y css

Seguro que alguna vez te has preguntado como conseguir el efecto de scroll suave o también conocido como smooth scroll. Esto significa que cuando haces un enlace dentro de la propia página. Al pinchar no salte de golpe, sino que vaya a la ubicación correspondiente de manera suave. Para este propósito tenemos dos opciones: Sencilla En mi página web dentro del curso básico de html ( ver curso de ifelse.es ) lo tengo programado de la siguiente manera y me funciona bastante bien. Para verlo en acción, accede a la página de mi curso de html básico y pincha en el menú de la izquierda en la opción de párrafos. html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } Más compleja Otra opción es utilizando la librería scroll-smooth para ello debes añadir los siguientes fragmentos antes de la última etique body de vuestro html. Esta librería tiene muchas opciones así que no estaría mal que le echases un ojo a la documentación.Te vuelvo a dejar el enlace ...

Cómo ocultar un input type file

Si has llegado hasta aquí es porque estás intentando hacer de un modo u otro un formulario para subir archivos a tu servidor y claro el estilo por defecto que te aparece es cutrísimo. Seguro que quieres que aparezca un flamante botón o imagen. Ya habrás llegado a la conclusión de que para poder desencadenar el selector de archivos tienes que relacionar el input con un label. Y he aquí la cuestión, te aparece tu flamante botón, y el botón por defecto que es más feo que picio. Solución Pues te lo puedes cargar de una forma tan fácil como añadiendo lo siguiente en tu css: input[type="file"]{ display: none; } Bueno, hasta otra.