प्रतिशत (उत्तरदायी/द्रव डिजाइन) में ट्विटर की एम्बेडेड टाइमलाइन चौड़ाई को कैसे सेट करें

Question

मैं twitter's embedded timeline सेट अप करने के लिए देख रहा हूं, जब आप एक निश्चित डिज़ाइन कर रहे हैं तो यह काफी आसान है, लेकिन यह मेरा मामला नहीं है और मैं वास्तव में हूं एक नई वेबसाइट के लिए एक तरल पदार्थ और उत्तरदायी डिजाइन का निर्माण।

मेरा सवाल यह है कि, मैं twitter's embedded timeline को एक आईफ्रेम के बाद तरल चौड़ाई के साथ कैसे स्थापित कर सकता हूं और आपको अपने ट्विटर खाते में पीएक्स में स्थापित करना होगा?

धन्यवाद :)

Answer 1

आप सभी को धन्यवाद मैं के माध्यम से अपने रास्ता मिल गया: यह लगभग था के रूप में कमी ने कहा, लेकिन हम बजाय आइफ्रेम पर ध्यान केंद्रित करने के लिए किया था:

.MyClassForTheDivThatContainTheiFrame iframe{ 
    width:100%; 
} 

पाठ्यक्रम .MyClassForTheDivThatContainTheiFrame की

भी एक% के साथ तरल पदार्थ है चौड़ाई

Answer 2

आप अपने आइफ्रेम एक वर्ग दे सकते हैं, और यह करने के लिए सीएसएस लागू करने के लिए प्रयास करें। कम से कम चौड़ाई को% में बदलने के लिए।

Answer 3

यह संभव नहीं है। आप एंकर टैब में एचटीएमएल चौड़ाई और ऊंचाई का उपयोग कर सटीक चौड़ाई और ऊंचाई निर्धारित कर सकते हैं। इसके अलावा आप भाग्य से बाहर हैं। कोई उत्तरदायी या तरल क्षमता नहीं है।

इसमें 220px की न्यूनतम चौड़ाई और 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> 

Answer 4

आप पूरी तरह एक तरल पदार्थ करना चाहिए, तो आप एक जावास्क्रिप्ट कि एक आकार बदलने घटना के बाद कि iframe की चौड़ाई में परिवर्तन कोड या कुछ जावास्क्रिप्ट टाइमर का उपयोग कर सकते हैं।

क्या हम इसके लिए कुछ जेएस कोड बनाने के लिए आपके कुछ कोड देख सकते हैं?

Answer 5

सुपर Hacky, लेकिन आप भी ऐसा कर सकते हैं:

<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

यह मेरे लिए काम करने के लिए लगता है:

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

जहां # चहचहाना-विजेट -0 आइफ्रेम यह उत्पन्न करता है, में रखा गया है एक उचित स्टाइल कंटेनर। यह सही नहीं है: विजेट चौड़ाई, और मार्जिन इत्यादि के आधार पर अपनी सामग्री को थोड़ा अलग बनाता है, आकार बदलने के बाद बिल्कुल वही नहीं होगा; लेकिन यह मामूली लगता है।

मुझे उत्सुकता है कि क्यों सरल सीएसएस आपके लिए काम नहीं करता - क्षमा करें अगर मुझे कुछ याद आ रहा है।

Answer 7

यह एक उपयोगी धागा था, धन्यवाद। मैं ऐसी साइट पर काम कर रहा हूं जो पुराने ट्विटर प्रोफाइल विजेट का उपयोग करता है, जिसे मुझे अनुकूलित करना आसान लगता है। तो एक वैकल्पिक पद्धति, इस का उपयोग करता है फ़ीड (सूट करने के लिए अनुकूलित) प्रदर्शित करने के लिए:

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

फिर अपने स्टाइलशीट को यह जोड़कर चौड़ाई ओवरराइड:

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

}

आप देख सकते हैं संगतता मोड में IE9 का उपयोग करके संशोधित करने के लिए विभिन्न वर्ग, फिर HTML/css देखने के लिए F12 डेवलपर टूल का उपयोग करके संशोधित करें।

आशा है कि किसी की मदद करें!

Answer 8

यह तर्क कम से कम चौड़ाई और ऊंचाई बदलने के लिए काम करेंगे:

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

ऊंचाई को छोटा करने के साथ ही समस्या यह है कि लोगों के लिए पाठ बॉक्स छुपाता ट्वीट्स भेजने के लिए है, लेकिन यह ऊंचाई को छोटा करता है। मेरा अनुमान है कि यदि आप अन्य सीएसएस स्टाइल जोड़ना चाहते हैं तो आप केवल महत्वपूर्ण खंड डाल सकते हैं। मैं भी मान लेते हैं कि अगर आप तीन विगेट्स है आप # चहचहाना-विजेट -2, आदि

Answer 9

गुण चयनकर्ता काम करना चाहिए निर्धारित करना होगा:

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

अधिक here।