This is my first post, I’m not a programmer, just someone that cobbles together code from all over the web every once in a while for projects I’m working on.
I’m trying to implement a scrolling Twitter marquee on a website I’m working on, but am running into a “Uncaught Reference Error: Jquery not defined” error.
I assumed this was because Jquery was not being included correctly or the include was failing. I’ve tried the following:
- Including the Jquery from different URLs, as well as hosting it locally
- Changing the sequence of include statements in my so that Jquery comes first
I found some similar threads on SO, but none of them help solve this.
Here’s my code:
<head>
<meta charset="UTF-8" />
<title>UnBox 2013 : Venues</title>
<link rel="stylesheet" type="text/css" media="all" href="/Volumes/Boot/Users/siddharthnair/Dropbox/UnBox 2013 Build/resonate/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lekton:400,400italic,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,400italic,700' rel='stylesheet' type='text/css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>
<script src='/Volumes/Boot/Users/siddharthnair/Dropbox/UnBox 2013 Build/resonate/jquery.marquee.js'/>
<script type='text/javascript'>
var Tweetstream = {
init: function () {
this.insertLatestTweets('unboxfestival');
},
insertLatestTweets: function (username) {
var limit = 5; // How many feeds do you want?
var url = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + username + '&count=' + limit + '&callback=?';
$.getJSON(url, function (data) {
var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
for (var i in data) {
html += '<a href="http://twitter.com/' + username + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
}
html += '</marquee>';
$('.tweetstream p').replaceWith(html);
Twitter.fancyMarquee();
});
},
fancyMarquee: function () {
$('.tweetstream marquee').marquee('pointer')
.mouseover(function () {
$(this).trigger('stop');
})
.mouseout(function () {
$(this).trigger('start');
})
.mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
})
.mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
})
.mouseup(function () {
$(this).data('drag', false);
});
},
daysAgo: function (date) {
// TODO: Fix date for IE...
if ($.browser.msie) {
return '1 day ago';
}
var d = new Date(date).getTime();
var n = new Date().getTime();
var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
var daysAgo = numDays + ' days ago';
if (numDays == 0) {
daysAgo = 'today';
}
else if (numDays == 1) {
daysAgo = numDays + ' day ago';
}
return daysAgo;
}
};
Tweetstream.init();
</script>
</head>
I hope this isn’t spam, if there’s a thread on here that you think answers the question, please feel free to just point me in the right direction.
Most of the code comes from here: http://andreaslagerkvist.com/archives/2011/06/24/how-to-create-a-scrolling-twitter-feed-using-jquery/
Add jquery script tag first and jquery code should be document.ready