HTML/ट्विटर विजेट के लिए सीएसएस चौड़ाई

Question

कोड ट्विटर html में पेस्ट करने के लिए आप देता है इस तरह दिखता है:

<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="248169276782018560">Tweets by @username</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> 

वे आपको एक ऊंचाई, जब मेरी साइट पर रख दिया गया जो मैं 600 के लिए सेट निर्धारित करने की अनुमति मुझे यह मिलता है (स्रोत देखते समय):

<iframe id="twitter-widget-6" classname="twitter-timeline twitter-timeline-rendered" scrolling="no" frameborder="0" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " width="220" height="600"></iframe> 

220 चौड़ाई मुझे मार रही है। मैं चाहता हूं कि चौड़ाई कंटेनर की पूरी चौड़ाई हो, जो 100% (मोबाइल साइट के लिए) है। वर्तमान में 220 चौड़ाई पृष्ठ भर में आधे रास्ते से थोड़ी अधिक जाती है और एक बदसूरत स्क्रॉलबार प्रदर्शित करती है।

तो, यह चौड़ाई 220 क्यों सेट कर रहा है, और मैं इसे अपनी मूल चौड़ाई में विस्तारित करने के लिए कैसे प्राप्त कर सकता हूं?

Answer 1

width="220" को width="100%" में बदलने का प्रयास करें।

Answer 2

यह मेरे लिए काम किया ...

#twitter-widget-6{ 
     width:600px; 
    } 

Answer 3

मैं एक संवेदनशील विषय का उपयोग करें और यह सीएसएस कोड ठीक काम करता है। धन्यवाद समायोजक।

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

Answer 4

आप "ट्विटर-समय" वर्ग परिभाषा अपने मूल्य निर्धारित करके विजेट की चौड़ाई को बदल सकते हैं, यहाँ उल्लेख किया:

https://dev.twitter.com/docs/embedded-timelines

उदाहरण के लिए चौड़ाई के साथ चहचहाना समय विजेट

<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</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> 

: 280 और ऊंचाई 300 की तर्ज पर कुछ है 10

Answer 5

#twitter-widget-6 { 
    width:600px; 
} 

उपरोक्त कार्यों, मुझे लगता है कि संख्याएं आपके द्वारा बनाए गए कितने विजेट के अनुरूप हैं। क्या चौड़ाई केवल एक चीज है जिसे हम बदल सकते हैं, फोंट के बारे में क्या, मैं इसे बदल नहीं सकता? ट्विटर विजेट इतना बदसूरत है कि इसे किसी भी लेआउट में अच्छी तरह से बैठना मुश्किल है।

Answer 6

ट्विटर आप HTML चौड़ाई माध्यम से चौड़ाई और समय विजेट की ऊंचाई को समायोजित करने के लिए अनुमति देता है और ऊंचाई का श्रेय लेकिन न्यूनतम चौड़ाई वे स्वीकार करते हैं 220 pixels उदाहरण है: width="220", height="350"

Twitters developers page से: एक समय की न्यूनतम चौड़ाई 220px है और अधिकतम 520px है। न्यूनतम ऊंचाई 350px है।

Answer 7

मुझे आईडी # ट्विटर-विजेट-0 के बजाय क्लास ट्विटर-टाइमलाइन-रेंडर करने की आवश्यकता है। इस तरह, विजेट को प्रतिपादन के बाद आकार बदल दिया गया है।

.twitter-timeline-rendered { 
     width: 100% !important; 
    } 

Answer 8

यदि हम सीएसएस के नीचे रहते हैं, तो हम आवश्यकता के अनुसार विजेट की चौड़ाई निर्धारित कर सकते हैं।

<style type="text/css"> iframe[id^='twitter-widget-']{ width:100%;} </style> 

Answer 9

अगर आप सिर्फ का उपयोग

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

यह काम करेगा लेकिन यह (एंड्रॉयड पर परीक्षण नहीं किया) iOS उपकरणों पर कट जाएगा। इसे ठीक करने के तुम इतनी तरह चहचहाना-समय टैग करने के लिए चौड़ाई और ऊंचाई जोड़ने की जरूरत:

<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</a> 

Answer 10

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

.twitter-timeline { 
    height: 180px !important; 
    width: 100% !important; 
} 

Answer 11

मैं सब से ऊपर के जवाब है, लेकिन कोई किस्मत की कोशिश की है,

तो अपने आप को नीचे दिए गए कोड लागू किया है और मेरे लिए काम किया

<script type="text/javascript"> 

$(window).on('load', function() { 

$('iframe[id^=twitter-widget-]').each(function() { 

var head = $(this).contents().find('head'); 

if (head.length) { 

head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>'); 

} 

$('#twitter-widget-0').append($('<div class=timeline>')); 

}) 

}); 

</script> 

Answer 12

यहाँ है कैसे मैंने इसे किया, Chandrakant की तुलना में लगभग उसी तर्क का उपयोग करते हुए आईफ्रेम में शैली डालने के लिए उपयोग किया गया था।

सबसे पहले: चहचहाना उचित तरीके

<script type="text/javascript"> 
// https://dev.twitter.com/web/javascript/loading 
window.twttr = (function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0], 
     t = window.twttr || {}; 
    if (d.getElementById(id)) return t; 
    js = d.createElement(s); 
    js.id = id; 
    js.src = "https://platform.twitter.com/widgets.js"; 
    js.async = true; 
    fjs.parentNode.insertBefore(js, fjs); 
    t._e = []; 
    t.ready = function(f) { 
     t._e.push(f); 
    }; 
    return t; 
}(document, "script", "twitter-wjs")); 
</script> 

अब आप एक अच्छा window.twttr._e सरणी जो कि एक बार चलेगा ट्विटर widget.js भरी हुई है सब कुछ शामिल हो सकता है हो विजेट जोड़ें।

ध्यान दें कि मैंने js.async = true जोड़ा है;

अब आप एक ही स्क्रिप्ट या बाद में में क्या हो सकता है:

<script type=text/javascript"> 
// https://dev.twitter.com/web/javascript/events 
window.twttr.events.bind('loaded', function (e) { 
    e.widgets.forEach(function (widget) { 
    // js to support twitter 100% if present 
    $(widget).contents().find('head').append('<style>.timeline { max-width: 100% !important; width: 100% !important; }</style>'); 
    }); 
}); 
</script> 

ध्यान दें कि मैं iframe सिर सामग्री के अंत में शैली संलग्न करने के लिए jQuery तरह से इस्तेमाल किया। आप इसे शास्त्रीय तरीके से कर सकते हैं लेकिन यह लंबा है।

<script type="text/javascript"> 
// ... 
widget.contentDocument.getElementsByTagName('head')[0]... 
// ... 
</script> 

Answer 13

हाल ही में अद्यतन के साथ

(या ऊपर पेंच) चहचहाना लोड अप पर स्वचालित रूप से चित्रों को दिखाने के लिए कोई बात नहीं क्या विकल्प ट्विटर सेटिंग में सेट कर रहे हैं के सभी चारा विगेट्स मजबूर कर दिया है।

अब मैं एक HTML आधारित साइट के भीतर अपनी विजेट फ़ीड का उपयोग कर रहा हूं और छवियों को लोड होने से अक्षम करना चाहता हूं। मुझे शुरू करने की कोई बात नहीं है और लेकिन क्या कोई मुझे सलाह दे सकता है कि मुझे एक अनुकूलन योग्य एचटीएमएल और जेएस आधारित ट्विटर फीड मिल सकती है जिसमें छवियां शामिल नहीं होंगी।

Answer 14

एंकर टैग में

data-width="100%"

शामिल करें। यह मेरे लिए काम करता है।