Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como html

Como centrar una imagen usando Bootstrap

Si utilizamos Bootstrap es muy probable que terminemos usando la clase ".img-responsive" pero a la misma vez puede que lleguemos a necesitar que dicha imagen este centrada en algun DIV Por ello en esta ocasión te mostrare como se hace de manera simple y rapida, comencemos Se advierte que blogger puede cambiar el estilo de la salida final, por ende puedes ver el mismo resultado haciendo click aquí 1) Creamos el CSS necesario para lograr el efecto deseado .container-logo > .img-responsive{ margin: 0 auto; } 2) Ahora simplemente creamos el HTML al cual le aplicaremos el estilo que hemos creado Y listo, tenemos el efecto deseado para este caso, espero te haya gustado esta entrada

Algunas acciones que podemos hacer con un select

Hoy les mostrare algunas cosas que podemos llevar a cabo con un select y usando jQuery, a continuación les dejo la lista: Se advierte que para llevar a cabo estas pequeñas acciones es necesario tener jQuery precargado   Cambiar texto cuando se selecciona una opción Autoseleccionar valor desde que se cargue la pagina Obtener el texto que acompaña a la opción seleccionada Obtener el texto que acompaña a la opción seleccionada pero al hacer un cambio en el opción En todos los ejemplos se usara las siguientes etiquetas HTML Seleccione algo -- Seleccione un texto -- Texto corto Texto largo Asi inicia el texto y solo cambia cuando se seleciona una opción Autoseleccionar valor desde que se cargue la pagina. Basicamente se trata de colocar el value en la funcion val() . Como en mi caso el SELECT tiene values numericos, solo le indico que valor va a inicializarse, en todo caso si usas el mismo HTML que he colocado, deberia de aparecer p

Cambiar texto al seleccionar opción de select

Una de las cosas comunes que se hace en algunos sistemas es cambiar textos, cambiar parámetros , cambiar colores y cosas similares al seleccionar una opción de un SELECT, DROPDOWN y similares. Bueno ahora les mostrare como se hace esto desde jQuery de manera fácil y rápida Se advierte que para llevar a cabo este tutorial es necesario conocer lo básico de jQuery Puede que blogger cambie la apariencia del código, pero tranquilo puedes ver el mismo resultado desde este enlace 1) El Select, dropdown o como quieras llamarle debe de estar creado Seleccione algo -- Seleccione un texto -- Texto corto Texto largo Asi inicia el texto y solo cambia cuando se seleciona una opción 2) Llamamos la funcion de change y le indicamos que texto colocar a partir de un Array que tenemos, todo esto puede cambiarse claro, dependiendo de lo que se necesite Y si podemos cambiar un simple texto, también podemos hacer muchas cosas mas, como cambiar color, apl

Abrir modal cuando se cargue la pagina web

Se advierte que blogger puede cambiar el resultado, pero tranquilo, te dejo un enlace donde lo puedes ver sin mas ni mas haciendo click aquí Una de las cosas interesantes de  usar Bootstrap en tus proyectos es que ya trae muchas funcionalidades como los modales. Algo en particular que me han preguntado mas de una vez es lo siguiente: ¿Puedo abrir un modal al momento de cargar una pagina web? La respuesta es un simple SI y te muestro como hacerlo de manera rápida Ahora simplemente tenemos que mandar a llamar un fragmento de código en nuestro JQuery: $(function(){ $("#myModal").modal(); }); Es algo simple cuando ya conoces la solución claro y espero te sirva mucho

Cambiar valores de otros elementos desde inputs

Vale esto es similar a lo que vimos hace un rato en este blog solo que en esa ocasion era de 1 a 1. Ahora haremos eso mismo pero de N a N, este ejemplo puede ser fácilmente aplicado a diferentes elementos, no solo a selects y desde ya vas avisado de que no es un código pulido, solo es un ejemplo. La idea es la siguiente, tenemos N cantidad de input que podemos cambiar a la hora que se nos antoje y cuando uno de ellos cambie, hará lo mismo en un elemento adjunto y en este caso será un select tal como se aprecia en la siguiente imagen. Yo pondre el codigo HTML que se genero mediante PHP y un for, pero es basicamente lo mismo indiferente del lenguaje que este utilizando. Me he apoyado de las etiquetas data para poder hacer dichas acciones. Prácticamente las etiquetas datas guardaran el número de iteraciones para luego poder buscar cualquier cosa dentro de la página, ya que cada elemento contendrá un ID para identificarlos, sería algo como "nombre+numero_iteracion". Dentr

Campos automaticos con javascript y JQuery -Parte 1

El dinamismo que te ofrece una web hoy en día es increíble, me recuerdo que haya por 2003 haciendo mis primero pinines en HTML todo era hecho con tablas al igual que casi todo lo demás, headers, menus, contents, footers, etc. Ahora tenemos la dicha de hacer cosas inimaginables a esa época, animaciones increíbles, contenido totalmente dinámico, canvas y no se cuantas cosas mas ya que básicamente el front-end es inmenso. Pero en esta ocasión vengo a mostrarles como se crean los campos dinámicos. Hace no mucho tiempo atrás me toco que investigar sobre el caso de campos dinámicos, tanto para un trabajo que me solicitaron, como para un proyecto de la Universidad y me di cuenta que existen muchas maneras de hacerlos, unas mas complejas que otras (si tuviera los link a mano, los dejara acá para que ustedes los estudiaran detenidamente). Pero no solo simples campos dinámicos que básicamente se pueden hacer sin mas ni mas con un simple click en algún botón, sino que campos que te permitan h