Cómo configurar el ancho de línea de tiempo incrustado de twitter en porcentaje (diseño receptivo/fluido)

Estoy tratando de configurar twitter's embedded timeline, es bastante fácil cuando tienes un diseño fijo, pero ese no es mi caso y en realidad construyendo un diseño fluido y receptivo para un nuevo sitio web.Cómo configurar el ancho de línea de tiempo incrustado de twitter en porcentaje (diseño receptivo/fluido)

Mi pregunta es, ¿cómo puedo configurar twitter's embedded timeline con un ancho fluido ya que es un iframe y se supone que debes configurar el con en px en tu cuenta de twitter?

Gracias :)

Fuente

2012-09-09 Miles M.

Gracias a todos los que he encontrado mi camino a través de: Era casi como dijo que la falta, pero hemos tenido que centrarse en el iframe en su lugar:

.MyClassForTheDivThatContainTheiFrame iframe{ 
    width:100%; 
}

de .MyClassForTheDivThatContainTheiFrame supuesto también es fluido con un% ancho

Fuente

2013-01-15 11:39:52

Usted puede dar a su iframe una clase, y tratar de aplicar CSS a ella. Al menos para cambiar el ancho a%.

Fuente

2012-09-09 23:42:54 avexdesigns

Sí, lo intenté, pero no pasó nada, incluso con un hack css –

Esto no es posible. Puede establecer un ancho y alto exactos utilizando el ancho y alto html en la pestaña de anclaje. Aparte de eso, no tienes suerte. Sin capacidades receptivas o fluidas.

También tiene un ancho mínimo de 220px y un ancho máximo de 520px.

<a class="twitter-timeline" width="520" height="700" data-dnt=true href="https://twitter.com/vertmob" data-widget-id="WIDGET_ID_HERE">Tweets by @vertmob</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Fuente

2012-09-12 01:09:52 ATLChris

Si es absolutamente necesario hacer un fluido, puede codificar un javascript que cambia el ancho del marco flotante que después de un evento de cambio de tamaño o el uso de algunos temporizadores javascript.

¿Podemos ver algún código suyo para hacer un código js para esto?

Fuente

2012-09-25 14:25:24 fedmich

de Super hacky, pero también se puede hacer esto:

<script type="text/javascript"> 
     var checkTwitterResize = 0; 
     function resizeTwitterWidget() { 
      if ($('#twitter-widget-0').length > 0) { 
       checkTwitterResize++; 
       if ($('#twitter-widget-0').attr('width') != '100%') checkTwitterResize = 0; 
       $('#twitter-widget-0').attr('width', '100%'); 
       // Ensures it's checked at least 10 times (script runs after initial resize) 
       if (checkTwitterResize < 10) setTimeout('resizeTwitterWidget()', 50); 
      } else setTimeout('resizeTwitterWidget()', 50); 
     } 
     resizeTwitterWidget(); 
    </script>

Fuente

2012-09-25 22:42:02 GambitSunob

Esto parece funcionar para mí:

#twitter-widget-0 { 
    width:100%; 
    }

donde # twitter-Reproductor-0 es el iframe que genera, colocado en un contenedor de estilo apropiado. No es perfecto: el widget genera su contenido de forma un poco diferente en función del ancho, y los márgenes, etc. no serán exactamente los mismos después del cambio de tamaño; pero esto parece menor

Tengo curiosidad por saber por qué el CSS simple no funcionó para usted, lo siento si me falta algo.

Fuente

2012-11-18 21:13:21 Lack

Esto todavía funciona desde el 29 de marzo de 2013. – Ben

Esto funciona, pero es posible que tenga que cambiar el número al final de la identificación. Por ejemplo, mi id era '# twitter-widget-3'. También puede necesitar '! Important' ya que hay un estilo en línea en el iframe del widget. –

ACTUALIZACIÓN 25 de junio 2015 Parece que Twitter ha cambiado el código de nuevo. Esta vez han establecido el ancho máximo del widget INSIDE del iframe (es decir, en el código generado desde su sitio web). Debido a esto, no hay nada que pueda hacer para apuntar a CSS generado dentro del iframe (debido a las restricciones entre dominios) –

Esto fue un hilo útil, gracias. Estoy trabajando en un sitio que usa un Widget de perfil de Twitter anterior, que me resulta más fácil de personalizar. Por lo tanto un método alternativo, utiliza esto para mostrar la alimentación (personalizado para adaptarse a):

<script> 
    new TWTR.Widget({ 
     version: 2, 
     type: 'profile', 
     rpp: 5, 
     interval: 6000, 
     width: 300, 
     height: 400, 
     theme: { 
     shell: { 
      background: 'transparent', 
      color: '#151515' 
     }, 
     tweets: { 
      background: 'transparent', 
      color: '#151515', 
      links: '#007dba' 
     } 
     }, 
     features: { 
     shell: false, 
     scrollbar: true, 
     loop: false, 
     live: true, 
     hashtags: true, 
     timestamp: true, 
     avatars: true, 
     behavior: 'all' 
     } 
    }).render().setUser('BlueLevel').start(); 
</script>

se puede redefinir el ancho añadiendo esto a su hoja de estilo:

.twtr-doc { 
width:100% !important;

}

Se puede ver las diversas clases para modificar usando IE9 en modo de compatibilidad, luego usando F12 Developer Tools para ver el html/css.

Espero que ayude a alguien!

Fuente

2013-01-22 11:59:00

Esta lógica funciona para cambiar al menos la anchura y altura:

#twitter-widget-0, #twitter-widget-1 { 
    float: none; 
    width: 100% !important; 
    height: 250px !important; 
}

El único problema con el acortamiento de la altura es que oculta el cuadro de texto para las personas a enviar tweets pero sí acorta la altura. Mi suposición es que si quieres agregar otro estilo de CSS puedes simplemente poner la cláusula importante. También supongo que si tiene tres widgets que le defina # twitter-Reproductor-2, etc.

Fuente

2013-02-22 15:39:51

selector de atributos debería funcionar:

iframe[id*="twitter-widget"] { 
    width: 100%; 
}

Más here.

Fuente

2015-03-29 17:28:15

Cómo configurar el ancho de línea de tiempo incrustado de twitter en porcentaje (diseño receptivo/fluido)

Respuesta

Cuestiones relacionadas