चक नॉरिस ट्विटर विजेट आईई

Question

पर शैली खो रहा है आईई पर ट्विटर विजेट को असीमित रूप से लोड करते समय एक अजीब समस्या हो रही है। यह ठीक है, लेकिन किसी कारण से आईई (7,8,9) पर किसी भी शैली (रंग, पृष्ठभूमि खाली/डिफ़ॉल्ट) लागू नहीं होती है।

स्क्रिप्ट लोड करना मानक तरीका आईई में भी काम करता है।

कोड इस तरह दिखता है और सभी ब्राउज़रों पर काम करता है (आईई सहित, लेकिन शैली के बिना)

<div id="twitter_div"></div> 
<script> 
    jQuery(window).load(function() { 
     jQuery('<link rel="stylesheet" type="text/css" href="http://widgets.twimg.com/j/2/widget.css" >').appendTo("head"); 
     jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function() { 
      var twitter = new TWTR.Widget({ 
       id: 'twitter_div', 
       version: 2, 
       type: 'profile', 
       rpp: 4, 
       interval: 6000, 
       width: 'auto', 
       height: 300, 
       theme: { 
       shell: { 
        background: '#add459', 
        color: '#382638' 
       }, 
       tweets: { 
        background: '#ffffff', 
        color: '#141114', 
        links: '#4aed05' 
       } 
       }, 
       features: { 
       scrollbar: false, 
       loop: false, 
       live: false, 
       hashtags: true, 
       timestamp: true, 
       avatars: false, 
       behavior: 'all' 
       } 
      }).render().setUser('chucknorris').start(); 
     }) 
    }) 
</script> 

आप इस this link पर रहते हैं देख सकते हैं।

यह चकनोरीस पर सेट होने पर भी आईई पर शैली खो देता है।

Answer 1

आपको क्या लगता है टी ओ सीएसएस डाल में आप खुद सीएसएस समस्याओं

<style type="text/css"> 
#twitter_div .twtr-doc, #twitter_div .twtr-hd a, #twitter_div h3, #twitter_div h4 { 
background-color: #ADD459 !important; 
color: #382638 !important; 
} 
#twitter_div .twtr-bd, #twitter_div .twtr-timeline i a, #twitter_div .twtr-bd p { 
color: #141114 !important; 
} 
#twitter_div .twtr-avatar { 
display: none; 
} 
#twitter_div .twtr-new-results, #twitter_div .twtr-results-inner, #twitter_div .twtr-timeline { 
background: white !important; 
} 
#twitter_div .twtr-tweet a { 
color: #4AED05 !important; 
} 
</style> 

भी अच्छा यह है अगर यह आपके main.css फ़ाइल में डाल अपने स्थिर सामान का एक बेहतर कैशिंग experince पाने के लिए और एक ही स्थान पर

में है से बचने के लिए

<script> 
    jQuery(window).load(function() { 
     $("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />"); 
     jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function() { 
      var twitter = new TWTR.Widget({ 
       id: 'twitter_div', 
       version: 2, 
       type: 'profile', 
       rpp: 4, 
       interval: 6000, 
       width: 'auto', 
       height: 300, 
       theme: { 
       shell: { 
        background: '#add459', 
        color: '#382638' 
       }, 
       tweets: { 
        background: '#ffffff', 
        color: '#141114', 
        links: '#4aed05' 
       } 
       }, 
       features: { 
       scrollbar: false, 
       loop: false, 
       live: false, 
       hashtags: true, 
       timestamp: true, 
       avatars: false, 
       behavior: 'all' 
       } 
      }).render().setUser('chucknorris').start(); 
     }) 
    }) 
</script> 

Answer 2

यहां पाया के रूप में: How to asynchronously load CSS using jQuery?

$("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />"); 

कोड पूरा करने के लिए:

<div id="twitter_div"></div> 
<script> 
    jQuery(window).load(function() { 
     $("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />"); 
     jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function() { 
      var twitter = new TWTR.Widget({ 
       id: 'twitter_div', 
       version: 2, 
       type: 'profile', 
       rpp: 4, 
       interval: 6000, 
       width: 'auto', 
       height: 300, 
       theme: { 
       shell: { 
        background: '#add459', 
        color: '#382638' 
       }, 
       tweets: { 
        background: '#ffffff', 
        color: '#141114', 
        links: '#4aed05' 
       } 
       }, 
       features: { 
       scrollbar: false, 
       loop: false, 
       live: false, 
       hashtags: true, 
       timestamp: true, 
       avatars: false, 
       behavior: 'all' 
       } 
      }).render().setUser('chucknorris').start(); 
     }) 
    }) 
</script> 

संपादित किसी भी तरह इस एक ही चीज़ IE में काम करने के लिए लगता है कि यह है:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>test</title> 
    <link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet"> 
    <link href="http://widgets.twimg.com/j/2/widget.css" type="text/css" rel="stylesheet"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> 
</head> 

<body> 

<div id="twitter_div"></div> 
<script type="text/javascript"> 
    $(document).ready(function() { 

      var twitter = new TWTR.Widget({ 
       id: 'twitter_div', 
       version: 2, 
       type: 'profile', 
       rpp: 4, 
       interval: 6000, 
       width: 'auto', 
       height: 300, 
       theme: { 
       shell: { 
        background: '#add459', 
        color: '#382638' 
       }, 
       tweets: { 
        background: '#ffffff', 
        color: '#141114', 
        links: '#4aed05' 
       } 
       }, 
       features: { 
       scrollbar: false, 
       loop: false, 
       live: false, 
       hashtags: true, 
       timestamp: true, 
       avatars: false, 
       behavior: 'all' 
       } 
      }).render().setUser('chucknorris').start(); 

    }) 
</script> 

</body> 
</html>