How to create a FourSquare.com Recent Activity Feed style using Jquery

Hello,
I am not all that a pro. I need help and advice on how to go about this. I want to create a feed module on my website that works exactly with the look and feel of foursquare.com Recent Activity feed. The source data will be via xml.
My question how do I get to achieve this. Is there any code sample that I can learn from, I suspect the foursquare was created using jquery. Please help me my dear expects.
kossanahAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
copy past from the link above and integration with your code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://cssglobe.com/lab/easyslider/js/jquery.js"></script> 
<script type="text/javascript" src="http://cssglobe.com/lab/easyslider1.7/js/easySlider1.7.js"></script> 
<script type="text/javascript"> 
	$(document).ready(function(){	
		$.ajax({
			type: "GET",
			url: "cd_catalog.xml",
			dataType: "xml",
			success: parseXml
		});
		var nbrItem
		function parseXml(xml) {
			$(xml).find("CD").each(function() {
				$("ul#site_list").append('<li>'  + 'Album Title ' + $(this).find("TITLE").text() + '<br />' +'By ' +$(this).find("ARTIST").text() + '</li>');
			});
			$("#slider").easySlider({orientation:'vertical',auto:true,pause:3000,continuous:true});
		}
	});
</script> 
<style> 
body {
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
h1{
	font-size:180%;
	font-weight:normal;
	}
h2{
	font-size:160%;
	font-weight:normal;
	}	
h3{
	font-size:140%;
	font-weight:normal;
	}	
img{border:none;}
pre{
	display:block;
	font:12px "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	width:500px;
	}		
 
/* Easy Slider */
 
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider, #slider li{ 
		/* 
			define width and height of container element and list item (slide)
			list items must be the same size as the slider area
		*/ 
		width:480px;
		height:64px;
		overflow:hidden; 
		}
	#slider li{ 
		background:#f1f1f1;
		}		
	#slider li h2{ 
		margin:0 20px;
		padding-top:20px;
		}	
	#slider li p{ 
		margin:20px;
		}				
	span#prevBtn{}
	span#nextBtn{}					
 
/* // Easy Slider */
 
</style> 
</head> 
<body> 
	<div id="slider"> 
		<ul id="site_list"></ul> 
	</div> 
</body> 
</html>

Open in new window

0
 
Steve KrileCommented:
Just as a friendly piece of advice, when asking for code samples for something as relatively complex as an ajax interval xml-feed updater, 50 points may not be enough to get you a quality answer.

In other words, the answer you are looking for will require you know something about:

jquery's .load() or .ajax() function.
jquery's DOM manipulation ability
Building an XML data source
javascript's setInterval() function.

That should get you started.
0
 
kossanahAuthor Commented:
Hello,
I have placed a sample demo file, Please my Dear Experts, how can I achieve the foursquare.com style look and feel.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parse XML with jQuery </title>
<style type="text/css">
/* Reset ------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
font-weight:normal;
font-style:normal;
text-align:left;
font-family:inherit;
}
ol,ul{list-style:none;}
body {color:#333;font-family:Helvetica, Arial, sans-serif;Font-size:16px;}
#wrap {width:700px;margin:10px auto;}
#loading {display:none;}
#loading img {vertical-align:middle;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function() {
$("#loading").show();
  $.ajax({
    type: "GET",
    url: "cd_catalog.xml",
    dataType: "xml",
    success: parseXml
});
function parseXml(xml) {
$(xml).find("CD").each(function() {
//find each instance of loc and changefreq in xml file and wrap it in a link
$("ul#site_list").append('<li>'  + 'Album Title ' + $(this).find("TITLE").text() + '<br />' +'By ' +$(this).find("ARTIST").text() + '</li>');
$("#loading").hide();
 });
}
});
</script>
</head>

<body>
<div id="wrap">
<h1>Parse XML with jQuery Demo </h1>
<ul id="site_list">
<li id="loading"><img src="images/ajax-loader.gif" alt="loading" /> Loading Data..</li>
</ul>
</div>

</body>
</html>

----------------------------------XML FILE-----------------------

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
	<CD>
		<TITLE>Empire Burlesque</TITLE>
		<ARTIST>Bob Dylan</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Columbia</COMPANY>
		<PRICE>10.90</PRICE>
		<YEAR>1985</YEAR>
	</CD>
	<CD>
		<TITLE>Hide your heart</TITLE>
		<ARTIST>Bonnie Tyler</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>CBS Records</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1988</YEAR>
	</CD>
	<CD>
		<TITLE>Greatest Hits</TITLE>
		<ARTIST>Dolly Parton</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>RCA</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1982</YEAR>
	</CD>
	<CD>
		<TITLE>Still got the blues</TITLE>
		<ARTIST>Gary Moore</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Virgin records</COMPANY>
		<PRICE>10.20</PRICE>
		<YEAR>1990</YEAR>
	</CD>
	<CD>
		<TITLE>Eros</TITLE>
		<ARTIST>Eros Ramazzotti</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>BMG</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1997</YEAR>
	</CD>
	<CD>
		<TITLE>One night only</TITLE>
		<ARTIST>Bee Gees</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Polydor</COMPANY>
		<PRICE>10.90</PRICE>
		<YEAR>1998</YEAR>
	</CD>
	<CD>
		<TITLE>Sylvias Mother</TITLE>
		<ARTIST>Dr.Hook</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>CBS</COMPANY>
		<PRICE>8.10</PRICE>
		<YEAR>1973</YEAR>
	</CD>
	<CD>
		<TITLE>Maggie May</TITLE>
		<ARTIST>Rod Stewart</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Pickwick</COMPANY>
		<PRICE>8.50</PRICE>
		<YEAR>1990</YEAR>
	</CD>
	<CD>
		<TITLE>Romanza</TITLE>
		<ARTIST>Andrea Bocelli</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>Polydor</COMPANY>
		<PRICE>10.80</PRICE>
		<YEAR>1996</YEAR>
	</CD>
	<CD>
		<TITLE>When a man loves a woman</TITLE>
		<ARTIST>Percy Sledge</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Atlantic</COMPANY>
		<PRICE>8.70</PRICE>
		<YEAR>1987</YEAR>
	</CD>
	<CD>
		<TITLE>Black angel</TITLE>
		<ARTIST>Savage Rose</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>Mega</COMPANY>
		<PRICE>10.90</PRICE>
		<YEAR>1995</YEAR>
	</CD>
	<CD>
		<TITLE>1999 Grammy Nominees</TITLE>
		<ARTIST>Many</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Grammy</COMPANY>
		<PRICE>10.20</PRICE>
		<YEAR>1999</YEAR>
	</CD>
	<CD>
		<TITLE>For the good times</TITLE>
		<ARTIST>Kenny Rogers</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Mucik Master</COMPANY>
		<PRICE>8.70</PRICE>
		<YEAR>1995</YEAR>
	</CD>
	<CD>
		<TITLE>Big Willie style</TITLE>
		<ARTIST>Will Smith</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Columbia</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1997</YEAR>
	</CD>
	<CD>
		<TITLE>Tupelo Honey</TITLE>
		<ARTIST>Van Morrison</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Polydor</COMPANY>
		<PRICE>8.20</PRICE>
		<YEAR>1971</YEAR>
	</CD>
	<CD>
		<TITLE>Soulsville</TITLE>
		<ARTIST>Jorn Hoel</ARTIST>
		<COUNTRY>Norway</COUNTRY>
		<COMPANY>WEA</COMPANY>
		<PRICE>7.90</PRICE>
		<YEAR>1996</YEAR>
	</CD>
	<CD>
		<TITLE>The very best of</TITLE>
		<ARTIST>Cat Stevens</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Island</COMPANY>
		<PRICE>8.90</PRICE>
		<YEAR>1990</YEAR>
	</CD>
	<CD>
		<TITLE>Stop</TITLE>
		<ARTIST>Sam Brown</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>A and M</COMPANY>
		<PRICE>8.90</PRICE>
		<YEAR>1988</YEAR>
	</CD>
	<CD>
		<TITLE>Bridge of Spies</TITLE>
		<ARTIST>T'Pau</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Siren</COMPANY>
		<PRICE>7.90</PRICE>
		<YEAR>1987</YEAR>
	</CD>
	<CD>
		<TITLE>Private Dancer</TITLE>
		<ARTIST>Tina Turner</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Capitol</COMPANY>
		<PRICE>8.90</PRICE>
		<YEAR>1983</YEAR>
	</CD>
	<CD>
		<TITLE>Midt om natten</TITLE>
		<ARTIST>Kim Larsen</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>Medley</COMPANY>
		<PRICE>7.80</PRICE>
		<YEAR>1983</YEAR>
	</CD>
	<CD>
		<TITLE>Pavarotti Gala Concert</TITLE>
		<ARTIST>Luciano Pavarotti</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>DECCA</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1991</YEAR>
	</CD>
	<CD>
		<TITLE>The dock of the bay</TITLE>
		<ARTIST>Otis Redding</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Atlantic</COMPANY>
		<PRICE>7.90</PRICE>
		<YEAR>1987</YEAR>
	</CD>
	<CD>
		<TITLE>Picture book</TITLE>
		<ARTIST>Simply Red</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>Elektra</COMPANY>
		<PRICE>7.20</PRICE>
		<YEAR>1985</YEAR>
	</CD>
	<CD>
		<TITLE>Red</TITLE>
		<ARTIST>The Communards</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>London</COMPANY>
		<PRICE>7.80</PRICE>
		<YEAR>1987</YEAR>
	</CD>
	<CD>
		<TITLE>Unchain my heart</TITLE>
		<ARTIST>Joe Cocker</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>EMI</COMPANY>
		<PRICE>8.20</PRICE>
		<YEAR>1987</YEAR>
	</CD>
</CATALOG>

Open in new window

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
kossanahAuthor Commented:
Thanks Leakim971, you been such a great help. I have check out all your posts above they are great.

Meanwhile I will post here my latest modification back later after looking at what you sent.

I wanted something very close to,
http://www.webdesignbooth.com/create-a-vertical-scrolling-news-ticker-with-jquery-and-jcarousel-lite/ or as in four square.

I have analyzed the foursquare system and these are my few findings;

When the page loads, a call is made by jquery and json to retrieves 30 feeds from the server. These 30 feed are retained in the user browser and then using jquery, they display just 10 out of the 30 and they are able to change the CSS at interval of 3000 mil sec which allows them to show the remaining 20 one at a time. I like the concept as it reduces the round-tripe call to the server.
But I will even love to go further on that by using   ajax setInterval() function. to refresh the script maybe around 20min (if the page is still open on browser)


On the other hand, I have just few more steps to go after the tasks above.

1. The web service source for the xml is resident in a different sever, and they do not support JSON yet.
I intend to create a php proxy to retrieve this xml data
-----------------------------------------------------------------------------------------------------------------------
PHP sample:
$url = $_GET['url'];
echo file_get_contents( $url );

Save the above as proxy.php and then
$.ajax({
                  type: "GET",
                  url: "http://mynewswebsite.com/proxy.php?url=http://webservice.com/news_catalogy/",
                  dataType: "xml",
                  success: parseXml
            });

-----------------------------------------------------------------------------------------------------------------------------
At the moment am trying to request the source provide to allow JSON protocols but that decision my not the forth coming immediately. So please what is your opinion of the solution above. Is there a more effective manner to handle this.


2. I am now facing yet another challenge ;
The content (news)  comes in categories of data,
I want to show a thumbnail image Gravatars (avatar) that symbolizes the Category.

This Gravatars will reside on my sever, and using a node from the xml we can identify the category, but I am thinking on how to implement the dynamics of displaying the appropriate image as the feed arrives,
One solution on my mind now is to do it by CSS.



Please I welcome your input , while couple all the resource you have sent me, I will resubmit what I got next. Thanks

 
0
 
leakim971PluritechnicianCommented:
1)
json content load faster than xml content
json content parsing are generaly faster than xml content
json content is lighter than xml content

with json scenario your server have more work (need to transform xml to json) but you preserve bandwidth and cpu on client side

2)
if you use json from xml you can set the right image from xml on the fly when you parse the xml and found the category
0
 
kossanahAuthor Commented:
Hello,
sorry I haven't made update on this question. I was having some challenges getting my content provider to agree with my requirements, however, we have come to a compromise some how, I provided access to allow them submit the data to my server which I stored into mysql db.
Now I have achieved the json using the PHP JSON extension.

My new question is this:

How can I use jquery to achieve exactly Foursquare.com div animation:
from the HTML source of foursquare.com I understand the following
The jquery will retrieve 30 record from the xml (json)
using dom manipulation, set the css visibility of 10 divs to visible and 20 div to hidden,
The animation runs by manipulating the visibility state of the div. and with move function

pls see below is what the javascript for the manipulation.

<script type="text/javascript">
var delay = 5000;
      var count = 30;
      var showing = 10;
      var i = 0;
      function move(i) {
        return function() {
          $('#recent'+i).remove().css('display', 'none').prependTo('#items');
        }
      }
      function shift() {
        var toShow = (i + showing) % count;
        $('#recent'+toShow).slideDown(1000, move(i));
        $('#recent'+i).slideUp(1000, move(i));
        i = (i + 1) % count;
        setTimeout('shift()', delay);
      }    
      $(document).ready(function() {
        setTimeout('shift()', delay);
      });
	 
		}
	});
    </script>

Open in new window

0
 
leakim971PluritechnicianCommented:
>My new question is this:

You should close this question after awarding points or not and create a new post
0
 
kossanahAuthor Commented:
The solution is similar but not totally what I desired
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.