[need help]Displaying results in sets of 5 with a next button for friends.getAppUsers

I have been searching for a way to display facebook api friends.getAppUsers in set of 5.

I am able to do this if i hard code it but I cant seem to find and comprehend a method to do this dynamically.

What i want to achieve is, if i have 43 friends using the application, the code should allow users to view this result in set of 5.

-prevBtn- friend1 friend2 friend3 friend4 friend5 -nextBtn-

upon clicking on the nextBtn,

-prevBtn- friend6 friend7 friend8 friend9 friend10 -nextBtn-

etc

i am actually relatively new to Javascript and Facebook Codings.. so any help would really be great! Thanks!

here are my codes:

<div id="fb-root"></div>

<table width="750px" height="185px" background="Image/friends.jpg">
<tr>
<td align="right">
<a href="#"onClick="prev();return false"><img src="Image/prevFriend.jpg" width="36" height="154"></a>
</td>
<td width="89%">
<div id="profile_pics" align="left"></div>
</td>
<td>
<a href="#" onClick="next();return false">Image/nextFriend.jpg" width="36" height="154"></a>
</td>
</tr>
</table>
</div>



<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
var profilePicsDiv = document.getElementById('profile_pics');
var NameDiv = document.getElementById('name');
var containDiv = document.getElementById('container');
FB.init({ appId: 'xxxxxxxxxxxx', status: true, cookie: true, xfbml: true });

FB.Event.subscribe('auth.sessionChange', function (response) {
if (response.session) {
window.location.reload();
} else {
window.location.reload();

}
});
FB.getLoginStatus(function(response) {
if (!response.session) {
profilePicsDiv.innerHTML = '<em></em>';
containDiv.innerHTML = '<em>You are not connected </em> ';

return;

}
FB.api({ method: 'friends.getAppUsers' },
function(result)
{

var markup = '';
var numFriends = result ? Math.min(5,result.length) : 1;
if (numFriends > 0)
{
for (var i=0; i<numFriends; i++)
{
markup +=
(

'<fb:profile-pic size="square" ' +
'uid="' + result[i] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'
);

}

}


profilePicsDiv.innerHTML = markup;

FB.XFBML.parse(profilePicsDiv);

});

});

function next(){
FB.api({ method: 'friends.getAppUsers' },
function(result)
{


var markup = '';

var numFriends = result ? Math.min(10,result.length):1;

if (numFriends > 5)
{
for (var j=5; j<numFriends; j++)
{

markup +=
(
'<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'

);


}

}

else{
if (numFriends > 0)
{
for (var j=0; j<numFriends; j++)
{

markup +=
(
'<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic> '

);


}

}

};


profilePicsDiv.innerHTML = markup;

FB.XFBML.parse(profilePicsDiv);

});

}

function prev(){
FB.api({ method: 'friends.getAppUsers' },
function(result)
{



var markup = '';

var numFriends = result ? Math.min(5,result.length):1;

if (numFriends > 0)
{
for (var j=0; j<numFriends; j++)
{

markup +=
(
<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'

);


}

}


profilePicsDiv.innerHTML = markup;

FB.XFBML.parse(profilePicsDiv);

});

}

I would do it 100% in JavaScript.

Get the full list of friends into a JS array and then simply display 5 at a time out of the array.

I've never used the facebook api, so the following is just a *GUIDELINE* or concept, but...

FB.api(
{ method: 'friends.getAppUsers' },
function(result)
{
var markup = '';
var numFriends = result ? result : 1; /* ?? would result ever be null??? */
var divNum = 0;
for (var i=0; i < numFriends; i++)
{
if ( i % 5 == 0 )
{
var show = divNum == 0 ? "block" : "none";
markup += '<div id="FBGROUP' + divNum + '" style="display: ' + show + '">';
++divNum;
}
markup +=
'<fb:profile-pic size="square" ' +
'uid="' + result[i] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'
if ( i % 5 == 4 ) markup += '</div>';
);
if ( i % 5 != 0 ) markup += '</div>';
profilePicsDiv.innerHTML = markup;
...

You see it? You will put *ALL* the <fb:profile-pic ... > links (or whatever they are) in place.

But you put them into groups of 5, each group inside a <div>

The ID of the <div>s will be FBGROUP0, FBGROUP1, etc.

And all but the first group will initially be style="display: none;".

So now, in order to move from one group of 5 to the next, you simply change the display of the current group from "block" to "none" and change the display of the next one from "none" to "display".

First of all, thank you so much for your reply
but i was just wondering..

The ID of the <div>s will be FBGROUP0, FBGROUP1, etc.
And all but the first group will initially be style="display: none;".

So now, in order to move from one group of 5 to the next, you simply change the display of the current group from "block" to "none" and change the display of the next one from "none" to "display".

if i were to have a 100 friends, won't i need to code 20 different div ids?
Sorry if i misunderstood any part of the code but i think i get what you're driving at.

im really sorry but is it alright to explain this further too?
if ( i % 5 == 4 ) markup += '</div>';
);
if ( i % 5 != 0 ) markup += '</div>';

i understand that the if(i%5 ==4)markup +='</div>' is coded to close the group div because it is going to open another div content upon the next loop.

however i do not understand why there is a need to check if if(i%5 !=0) to close the div outside the for loop .


My knowledge for Javascript is really minimal >.< thank you so much for your patience.

if i were to have a 100 friends, won't i need to code 20 different div ids?

Yes, but the code will create them all for you.


however i do not understand why there is a need to check if if(i%5 !=0) to close the div outside the for loop .

In case there are *NOT* five in the last group.

If there are, say, only 3 then the (i % 5 == 4) will *NOT* produce the final </div>. So that extra check will tack it on (but won't tack it on if there were exactly 5 in the last <div>).

Not JS, just logic.

Thank you very much!! :)