All geek questions in one place

Twitter widget chuck norris loses style in IE

Getting a strange problem while loading a twitter widget asynchronously in IE. It loads just fine, but for some reason, not a single style is applied (color, background is empty / default) only in IE (7,8,9).

The loading script is a standard way and works in IE.

The code looks and works in all browsers (including IE, but without style)

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

You can see it live on this link .

It loses style in IE, even if it is installed on chucknorris.

+6
source share
2 answers

What do you think to put css in your own CSS to avoid problems.

 <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 ia, #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>

It is also good if you put it in your main.css file to get the best caching experience of your static material and all in one place.

 <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>
+1
source

as shown here: How to asynchronously load CSS using jQuery?

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

to complete the code:

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

change somehow this is the only thing that works in 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>
+1
source

Source: https://habr.com/ru/post/911980/

More articles:


All Articles