Getting a strange problem when loading the twitter widget asynchronously on IE. It loads just fine, but for some reason doesn't apply any style (color, background are blank/default) only on IE (7,8,9).
Loading the script the standard way works also in IE.
The code looks like this and works on all browsers (including IE, but without the 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 this live on this link.
It loses the style on IE even when set to chucknorris.
What you think to put the css in you 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 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>
Also good is it if put it in your main.css file to get a better caching experince of your static stuff and is 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>
as found 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 make the code complete:
<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>
edit somehow this is the only thing that seems to work 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With