Comment configurer twitter intégré de montage largeur en pourcentage (responsive/design fluide)

Je suis à la recherche de configurer twitter intégré au montage, c'est assez facile lorsque vous êtes confronté à un design fixe, mais ce n'est pas mon cas, et je suis réellement à la construction d'un fluide et responsive design pour un nouveau site web.

Ma question est, comment puis-je configurer twitter intégré au montage avec un fluide de largeur depuis sa un iframe et vous êtes censé définir la avec en px dans votre compte twitter ?

Merci 🙂

OriginalL'auteur Miles M. | 2012-09-09

13

Cela semble fonctionner pour moi:
```
  #twitter-widget-0 {
    width:100%;
  }
```
où #twitter-widget-0 est l'iframe il génère, placés dans une manière appropriée de style conteneur.
Il n'est pas parfait: le widget génère son contenu un peu différemment en fonction de la largeur, et les marges, etc. ne sera pas exactement la même chose après le redimensionnement; mais ce qui semble mineur.

Je suis curieux de savoir pourquoi la simple CSS ne fonctionne pas pour vous - désolé si je suis absent quelque chose.

Cela fonctionne encore comme de 29 mars 2013.
Cela fonctionne, mais vous pourriez avoir à changer le numéro sur la fin de l'id. Par exemple, mon identité a été #twitter-widget-3. Vous aurez également besoin !important car il est sur la ligne de style sur le widget de l'iframe.
Mise à JOUR le 25 JUIN, à 2015 Il semble que twitter a changé de nouveau le code. Cette fois, ils ont mis le max-largeur du widget à l'INTÉRIEUR de l'iframe (c'est à dire sur le code généré à partir de leur site web). De ce fait, il n'y a rien que je peux faire pour cible CSS générée à l'intérieur de l'iframe (à cause de la croix-restrictions de domaine)

OriginalL'auteur Lack
5

Merci à vous tous, j'ai trouvé mon chemin à travers:
C'était presque comme un manque a dit, mais nous avons dû nous concentrer sur l'iframe à la place:
```
.MyClassForTheDivThatContainTheiFrame iframe{
    width:100%;
}
```
de cours .MyClassForTheDivThatContainTheiFrame est aussi fluide avec un % de la largeur de

OriginalL'auteur Miles M.
5

Cette logique de travail pour changer au moins la largeur et la hauteur:
```
#twitter-widget-0, #twitter-widget-1 {
  float: none; 
  width: 100% !important;  
  height: 250px !important;
}
```
Le seul problème avec le raccourcissement de la hauteur, c'est qu'il masque la zone de texte pour les gens à envoyer des tweets, mais il permet de raccourcir la hauteur. Ma conjecture est que si vous souhaitez ajouter d'autres le style CSS, vous pouvez simplement mettre la !clause importante. J'ai aussi supposer que si vous avez trois widgets vous définiriez #twitter-widget-2, etc.

OriginalL'auteur Pamela Cook - LightBe Corp

Super hacky, mais vous pouvez également le faire :

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

OriginalL'auteur GambitSunob

C'est utile, thread, merci. Je travaille sur un site qui utilise un ancien profil Twitter Widget, que je trouve plus facile à personnaliser. Donc, une méthode alternative, utilise cette option pour afficher l'alimentation (personnalisés pour s'adapter):

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

Ensuite remplacer la largeur en ajoutant ceci à votre feuille de style:

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

}

Vous pouvez voir les différentes classes à modifier en utilisant IE9 en mode de compatibilité, puis en utilisant les Outils de développement F12 pour voir le code html/css.

Espère que ça aide quelqu'un!

OriginalL'auteur Paul Angel

0

Vous pouvez donner à votre iframe une classe, et d'essayer d'appliquer le style CSS. Au moins pour modifier la largeur d' %.

ouais j'ai essayé, mais rien ne se passe, même avec un css hack

OriginalL'auteur avexdesigns

Ce n'est pas possible. Vous pouvez définir une largeur exacte et la hauteur en utilisant le code html de largeur et de hauteur de l'ancrage de l'onglet. Autres que que vous êtes hors de la chance. Aucun réactif, fluide capacités.

Il dispose également d'un min-width de 220px et un max-width 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>

OriginalL'auteur ATLChris

0

Si vous devez absolument faire un fluide, vous pouvez code javascript que les modifications de l'iframe width après un événement de redimensionnement ou de l'utilisation de javascript minuteries.

Peut-on voir le code de la vôtre à faire certains code js pour cela?

OriginalL'auteur fedmich
0

Attribut sélecteur devrait fonctionner:
```
iframe[id*="twitter-widget"] {
  width: 100%;
}
```
Plus ici.

OriginalL'auteur Christopher Dunn

Vous devez vous connecter pour publier un commentaire.