Come impostare la larghezza della timeline incorporata di Twitter in percentuale (reattivo/design fluido)

Question

Sto cercando di impostare twitter's embedded timeline, è abbastanza facile quando hai un design fisso, ma non è il mio caso e in realtà costruire un design fluido e reattivo per un nuovo sito web.

La mia domanda è, come posso impostare twitter's embedded timeline con una larghezza fluida dal suo un iframe e si dovrebbe impostare il con in px nel proprio account Twitter?

Grazie :)

Answer 1

Grazie a tutti voi ho trovato la mia strada attraverso: Era quasi come ha detto la mancanza, ma abbiamo dovuto mettere a fuoco l'iframe, invece:

.MyClassForTheDivThatContainTheiFrame iframe{ 
    width:100%; 
} 

naturalmente .MyClassForTheDivThatContainTheiFrame è anche fluido con una% larghezza

Answer 2

potete dare il vostro iframe una classe, e cercare di applicare CSS ad esso. Almeno per cambiare la larghezza in%.

Answer 3

Questo non è possibile. Puoi impostare una larghezza e un'altezza esatte utilizzando la larghezza e l'altezza in html nella scheda di ancoraggio. A parte questo, sei sfortunato. Nessuna capacità reattiva o fluida.

Ha anche una larghezza minima di 220 px e una larghezza massima di 520 px.

<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> 

Answer 4

Se è assolutamente necessario fare un fluido, è possibile codificare un javascript che cambia la larghezza di quel iframe dopo un evento di ridimensionamento o utilizzando alcuni timer javascript.

Possiamo vedere qualche codice del tuo per creare un codice js per questo?

Answer 5

Super hacky, ma si può anche fare questo:

<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> 

Answer 6

Questo sembra funzionare per me:

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

dove # twitter-widget di-0 è l'iframe che genera, posto in un contenitore in stile appropriatamente. Non è perfetto: il widget genera il suo contenuto in modo leggermente diverso a seconda della larghezza, e i margini, ecc. Non saranno esattamente gli stessi dopo il ridimensionamento; ma questo sembra minore.

Sono curioso di sapere perché il semplice CSS non ha funzionato per voi, scusate se mi manca qualcosa.

Answer 7

Questa è stata una discussione utile, grazie. Sto lavorando a un sito che utilizza un widget di profilo Twitter precedente, che trovo più facile da personalizzare. Quindi, un metodo alternativo, utilizza per visualizzare il feed (personalizzato per soddisfare):

<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> 

sovrascrivere la larghezza con l'aggiunta di questo al vostro foglio di stile:

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

}

Si può vedere le varie classi da modificare utilizzando IE9 in modalità di compatibilità, quindi utilizzando gli Strumenti di sviluppo F12 per visualizzare html/css.

La speranza che aiuta qualcuno!

Answer 8

Questa logica funziona cambiare almeno la larghezza e l'altezza:

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

L'unico problema con accorciando l'altezza è che nasconde la casella di testo per le persone a inviare tweet, ma lo fa ridurre l'altezza. La mia ipotesi è che se si desidera aggiungere altri stili CSS, è sufficiente inserire la clausola! Important. Suppongo anche che se si dispone di tre widget definirebbe # twitter-widget di-2, ecc

Answer 9

selettore di attributo dovrebbe funzionare:

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

Più here.