Jak ustawić szerokość osi czasu twittera w procentach (responsywna/płynna konstrukcja)

Question

Szukam ustawienia twitter's embedded timeline, to całkiem proste, gdy masz stały projekt, ale to nie jest mój przypadek, a ja faktycznie budowa płynnego i elastycznego projektu dla nowej strony internetowej.

Moje pytanie brzmi: jak skonfigurować twitter's embedded timeline o szerokości płynu od jego elementu iframe, a na koncie twittera ma zostać skonfigurowane ustawienie px?

Dzięki :)

Answer 1

Dzięki wam wszystkim znalazłem moją drogę przez: To było prawie jak brak powiedział, ale musieliśmy się skupić na iframe Zamiast:

.MyClassForTheDivThatContainTheiFrame iframe{ 
    width:100%; 
} 

oczywiście .MyClassForTheDivThatContainTheiFrame jest również płyn z% szerokość

Answer 2

można dać iframe klasę i spróbować zastosować CSS do niego. Przynajmniej, aby zmienić szerokość na%.

Answer 3

To nie jest możliwe. Możesz ustawić dokładną szerokość i wysokość używając szerokości i wysokości html w zakładce zakotwiczenia. Poza tym masz pecha. Brak zdolności reagowania lub płynów.

Ma również minimalną szerokość 220 pikseli i maksymalną szerokość 520 pikseli.

<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

Jeśli koniecznie musi zrobić płynu, można zakodować JavaScript, który zmienia szerokość iframe po zdarzeniu rozmiaru lub korzystania z niektórych javascript liczniki.

Czy możemy zobaczyć twój kod, żeby zrobić dla niego jakiś kod js?

Answer 5

Super hacky, ale można też to zrobić:

<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

To wydaje się działać dla mnie:

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

gdzie # twitter-widget-0 jest iframe to generuje, umieszczone w odpowiednio zaprojektowany pojemnik. Nie jest doskonały: widget generuje zawartość nieco inaczej w zależności od szerokości, a marginesy itp. Nie będą dokładnie takie same po zmianie rozmiaru; ale wydaje się to niewielkie.

Jestem ciekawy, dlaczego prosty CSS nie działa dla Ciebie - przepraszam, jeśli czegoś brakuje.

Answer 7

To był pomocny wątek, dzięki. Pracuję nad witryną, która korzysta ze starszego widżetu profilu na Twitterze, który jest łatwiejszy do dostosowania. Więc alternatywna metoda wykorzystuje do wyświetlania paszy (dostosowanego do własnych):

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

następnie zastąpić szerokość dodając to do arkusza stylów:

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

}

Można zobaczyć różne klasy do modyfikacji za pomocą IE9 w trybie zgodności, a następnie za pomocą narzędzi programistycznych F12, aby zobaczyć html/css.

Mam nadzieję, że komuś pomóż!

Answer 8

Ta logika będzie działać, aby zmienić co najmniej szerokość i wysokość:

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

Jedyny problem z skracając wysokość jest to, że ukrywa pole tekstowe dla ludzi wysyłać tweety ale robi skrócić wysokość. Domyślam się, że jeśli chcesz dodać inną stylizację CSS, możesz po prostu umieścić ważną klauzulę! Zakładam również, że jeśli masz trzy widgety byś zdefiniował # twitter-widget-2 itd

Answer 9

selektor atrybutu powinna działać:

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

Więcej here.