Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question [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:
    Code:
    <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);
    
    });
    
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,150
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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...
    Code:
    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".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by hopelesscoder; 09-19-2011 at 03:37 PM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,150
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quote Originally Posted by hopelesscoder View Post
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much!!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •