Manejo de iframes dinámicos

En este ejemplo se muestra como trabajar dinámicamente, con iframes como agregar o quitar iframes internos solo con el uso de JS específicamente con la librería Zeptojs, y con la ayuda de flexbox, para hacer que automáticamente si llegamos al limite horizontal de nuestra pantalla los iframes se continúen agregando  en una linea inferior.


Los códigos clave de de este ejemplo son:

HTML:



CSS:


JS:


Ejemplo:
DESCARGAR

Entradas más populares de este blog

Geochart - Republica Mexicana

Imagen
Sencillo ejemplo de como utilizar el Geochart de los "Graficos de Google". Como se puede apreciar en la siguiente imagen el mapa muestra todos los estados de la republica mexicana, teñidos en distintos colores de los cuales indican la cantidad de población del país, ademas si se acerca el cursor ha alguno de ellos aparace un pequeño tooltip con el nombre del estado y la población del estado en el año 2013.   ¿Como funciona geochart en este ejemplo? Lo primero que tenemos que hacer es referciar el api ajax de  google  charts con la siguiente linea script: < script type = 'text/javascript' src = 'https://www.google.com/jsapi' ></ script > Ahora si ya que tenemos refenciado la api, lo que continua es configurar el api para indicar que tipo de gráfico es que queremos presentar en nuestra pagina web, para eso utilizamos la siguientes lineas de codigo: //Cargar el API de visualización y el paquete GeoChart. google.load ( 'v...
Leer más

JS convertir una cadena de texto en mayúsculas, minúsculas o solo la primer letra de cada texto

Imagen
Ejemplo en JS con Jquery de como podemos transformar las letras de un texto ingresado en un texto capitalizad o en cada una de sus palabras o solo la primer letra de todo el texto, convertir en mayúsculas todo el texto o todo en minúsculas . <html>     <head></head>     <body>         <input type= "text"  class= "capitalizeText"  placeholder= "Texto Capitalizado" /><br><br>         <input type= "text"   class= "firstLetterText"  placeholder= "Primer letra mayúsculas" /><br><br>         <input type= "text"  class= "toUpperText"  placeholder= "TODO MAYÚSCULAS" /><br><br>         <input type= "text"  class= "toLowerText"  placeholder= "todo minúsculas" /><br><br>                  <script...
Leer más

Como Crear Las Esferas de Dragon Ball en CSS3

Imagen
En este ejemplo aprenderás como crear las poderosas esferas de DragonBall utilizando solo CSS3. El documento HTML, contiene la siguiente estructura y es bastante sencilla por lo cual omitiré su explicación: Código HTML Bien lo primero que haremos será establecer el fondo del documento: body {             padding : 2em 5em;             background-image : url(grass.png);             background-attachment : fixed;             background-size : 100% 100%;         } Después mediante el uso de div con id " container " establecemos que todo lo que vaya dentro del el se deberá de ubicar en la parte inferior del documento: #container {             position : fixed;             bottom : 27px;             text-align : center;     ...
Leer más