jq Nearby Tweet Plugin

After I did the Nearby Tweet makeover, I kinda ran out of idea. But the past few days, I looked into making it more alive and more dynamic. The result is my very own Nearby Tweet Stream. I am sure if stream is the right word, but it does looks like it. This time my prototype is using jQuery (1.4.2) and created a plugin. Wohoo!!

The idea is kinda simple and first plugin. I used 2 set of timer, (1) to retrieve the nearby tweet and store it into queue and (2) to retrieve from queue and display. Did a sketch below

The plugin is still in its infant state and only accept geolocation as parameter. I thought of registering it into jq plugin repository later, for now testing and more testing. The minified version is available here and you can see it live at jqNearByTweetStream. (For better experience, try it in HTML5-ready browser as it requires geolocation).

Here is an example of how to use the plugin.

 <!DOCTYPE html>
 <html>
 <head>

 <!-- JQuery JS -->
  <script language=JavaScript src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script language=JavaScript src="js/jquery.nearbytweet.stream.0.1-min.js" type="text/javascript"></script>
  <script language=JavaScript src="js/modernizr-1.5.min.js" type="text/javascript"></script>
 <style type="text/css">
 #TwitterStream { height: 400px;  margin: auto; width: 500px }

 </style>

</head>
<body>

<div id="TwitterStream"></div>

</body>
</html>

<script type="text/javascript">

$(document).ready(function(){
  if (Modernizr.geolocation){
   navigator.geolocation.getCurrentPosition(function(position) {
     var options = {
      latitude: position.coords.latitude,
      longtitude: position.coords.longitude
     };
   $('#TwitterStream').jqNearbyTweetStream(options);
   });
 } else {
  window.console && console.log('the browser does not support HTML5');
  $('#TwitterStream').jqNearbyTweetStream();
 }
  
});
// end document ready

</script>

As you can see above, It is very simple to use the plugin. Must find time to update the plugin, wait for new release ho…ho…ho. Do leave comment if you like the plugin 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s