-1

So I had this app on facebook and from the FB documentation I found that in order to trigger a scrolling functionality on click I first need to load the FB SDK by adding this code: 

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'i put my app id here',
      xfbml      : true,
      version    : 'v2.3'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

and then I had this img with id #button1 that behaves like a button using jQuery click() method. I wanted to have the canvas scrolled to this element #button1 so I put this line of code into the click() method like this

$("#button1").click(function(){
   FB.Canvas.scrollTo(0, offset);
}

Nothing happened. So I searched around and found this topic How do you animate FB.Canvas.scrollTo?

so I added the function 

function scrollTo(y){
FB.Canvas.getPageInfo(function(pageInfo){
                        $({y: pageInfo.scrollTop}).animate(
                            {y: y},
                            {duration: 1000, step: function(offset){
                                FB.Canvas.scrollTo(0, offset);
                            }
                        });
                });
            }

and used it as 

$("#button1").click(function(){
       scrollTo("#button1");
    }

nothing happens still. What happened ?

Community
  • 1
  • 1
Pham Tien Hoang
  • 27
  • 3

1 Answers1

0

The second parameter of the scrollTo function is the y value to scoll to.

In the first code, you did not defined the "offset" variable. You should see an error about that i your browser console.

In the second code (the custom scrollTo function with animation), you try to use a string (#button1), but it should be an y value (a number).

Try this for testing, it should scroll 100 pixels:

$("#button1").click(function(){
   FB.Canvas.scrollTo(0, 100);
}
andyrandy
  • 72,880
  • 8
  • 113
  • 130
  • i just did as you said, tried the simplest scroll as `FB.Canvas.scrollTo(0, 1000);` but didnt work either. could it be there was something wrong with my initiation of the sdk ? i checked fb documentation and it says the scrollTo must be used "in conjunction" with FB.Canvas.setSize() and FB.Canvas.setAutoGrow(). But I think in my app I only used FB.Canvas.setSize() so could that be the blocker? [link](https://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo) – Pham Tien Hoang Jul 06 '15 at 07:47
  • I want add another thing is that the app is a JSP page with a flash game container, loading a **top.html** and a **bottom.html** files. the **img** button is an element of the **bottom.html** file. so I am not sure if an element within a child html file of the jsp could make the whole page scroll, whether this could be the problem – Pham Tien Hoang Jul 06 '15 at 08:01
  • and i highly suggest not using iframes in your page, that makes everything a lot more complicated. – andyrandy Jul 06 '15 at 08:36
  • i am inheriting the structure from 2 generations of developers so it is not up to me whether or not to use iframe. I also tried to use navigate around the page using hashtag link but even that doesnt work. :( – Pham Tien Hoang Jul 06 '15 at 11:11