Tweet and jScrollPane #310

Closed
bodrovis opened this Issue Nov 16, 2012 · 15 comments

Comments

Projects
None yet
3 participants

Hello.

I'm using this library in conjunction with Kelvin Luck's jScrollPane to make pretty scrollbar. It is working nice when not using tweet's autoUpdate feature. But when i enable autoUpdate the jScrollPane library works incorreclty. Basically the following things occur:

  1. The page with tweets loads
  2. jScrollPane makes a pretty scrollbar for the div with tweets
  3. AutoUpdate fires
  4. Scrollbar disappears (there is no default scrollbar as well).

I tried to put jScrollPane initializer in the tweet library itself, but it didn't help. I also tried to use 'loaded' event as follows:

var widget = $(".tweet").tweet(options).bind("loaded",function(){
$(this).find("a").attr("target","_blank");
var tweeter_banner = $('#tweeter-banner').jScrollPane();
var tweeter_banner_api = tweeter_banner.data('jsp');
tweeter_banner_api.reinitialise();
}).bind(
"empty", function() { $(this).append("No matching tweets found"); });

But this didin't help as well. What event fires when the tweet feed reloads? Is there any way to use some callback function after the feed has auto updated? If it is possible, then i would be able to use reinitialise() function there.

Any help will be much appreciated!

Collaborator

purcell commented Nov 16, 2012

The loaded event is fired ater the feed has updated: see https://github.com/seaofclouds/tweet/blob/master/tweet/jquery.tweet.js#L231

So what you're trying looks right. I'm not familiar with jScrollPane though.

I'm sorry that I don't have time to help more with this right now, but I'll come back to this if I get chance.

-Steve

Okay, understood. Thanks!

Collaborator

purcell commented Dec 29, 2012

Did you get this working?

Actually me and my collegue spent some time looking into it, but no luck. There is definitely a conflict between these two libraries, because we tried different ways of combining them, even complete destroying of jScollPane and redifining it. It seems, that binded events are being cleared or something like that, because we got only tweet updating or only working scrollpane - not both :(. For now i have to make ajax reload of the whole div with tweets (with setTimer() function set to 60000 ms).

I cannot get working jScrollPane with Tweet too. Problem seems to be that the class name 'jspScrollable' is removed from the parent (or grand-parent...) wrapper div of Tweet's container. Other class names are not removed.
Could it be possible that a regexp in tweet.js reacts to this particular class name and remove it (replace it by blank ?) from Tweet's container parents, or something like that ?
Thank you for your help
Stephane

Collaborator

purcell commented Jun 20, 2013

I'm not aware of anything in tweet.js which would affect classnames of parent elements. The tweet() function just replaces the contents of the element on which it is called.

Yes, my suggestion was stupid, sorry.
I've lookep further in jScrollPane this time and the issue is that the scrollbar is built (in this case, not built) before Tweets are loaded and displayed.
Is there a way to use a callback function in wich I could call jScrollPane init when all Tweets are displayed ?

Collaborator

purcell commented Jun 20, 2013

Yep, just bind a handler to the widget's "loaded" event:

$(".tweet").tweet(options).on("loaded", function() { ... });

Perfect! Works fine now.
Thank you for your quick and patient help

Collaborator

purcell commented Jun 20, 2013

Great, I'll go ahead and close this issue, but perhaps you could post a code snippet here to help any future readers with the same problem?

purcell closed this Jun 20, 2013

The problem for me was to get jScrollPane to work with Tweet's autoUpdate feature. I couldn't find any solution.

Collaborator

purcell commented Jun 20, 2013

@bodrovis Ah, right, I see.

Finally, here is my Tweet call, working with jScrollpane plugin :

jQuery("#tweets").tweet({
          ...
          username: "mytwitter",
          avatar_size: 48,
          count: 20,
          twitter_oauth_url: "/lib/index.php"
        }).on("loaded", function() { 
            //Custom scroll 
            jQuery('#twitter-container.scroll-pane').jScrollPane();
    });     

with following HTML :

<div id="twitter-container" class="scroll-pane"> //jScrollpane container
<div id="tweets"> </div> //Tweet container
</div>
Collaborator

purcell commented Jun 20, 2013

@smartin23 Thanks!

Yeah, without an autoUpdate I used the same code and everything worked fine. Though i am sure if i used two DIVs or one. Could you check if autoUpdate will work with this code (maybe having two DIV's will fix the issue)? I can't do that, because i am no longer working with that application.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment