CODEWITHSUNDEEP
javascriptjquerytwitteruiscrollviewwidget
Madi D.
Madi D.

Reputation: 1990

Scrolling Elements in Twitter widget

I am trying to adding an auto scroll effect to my Twitter widget.

I've taken the code provided by Twitter, added it to an HTML page, then added some Jquery plugin code (called Caroufredsel ) to handle this operation.

I've solved the issue where the code loads after the function call, by changing the function initiation from Document.ready to:

<script>    
$(window).bind("load", function() {    
$(".h-feed").carouFredSel({
        items: 2,
        direction: "up",
        scroll : {
        items: 1,
        easing: "elastic",
        duration: 1000,             
        pauseOnHover: true
        }               
    }); 
});       
</script>

As seen by the code above I am trying to find a list element with the class "h-feed", this is the automatically generated (ol) element by the Twitter widget. The problem i am facing is that when the GetElementByClass() function is called it returns null in the HTMLcontainer indicating that no element was found!

Can someone help me fix this issue? My full code is below for reference (Sorry about the bad formatting but the 1st part is the widget code provided by Twitter):

<a class="twitter-timeline" href="https://twitter.com/NomadMadi" data-widget-id="384617889120010240">Tweets by @NomadMadi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.carouFredSel.js"></script>

Upvotes: 4

Views: 5590

Answers (2)

Nicholas Evans
Nicholas Evans

Reputation: 2244

Your best option is to build your own version of twitter's widget. You'll get more control over it and you won't have the iframe issue others have mentioned, or have to wrestle with figuring out at what time the twitter code has arrived and run.

Another option might be to fetch the twitter feed on the server side, template it there and then your carousel code can be nice and neat: less work on the client side means better performance.

Either way, the API call you want is https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name= NomadMadi&count=10

for which the documentation is here https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline

On a side note, twitter's features are changing a lot, and I'm normally fairly negative when clients ask to present twitter feeds as embedded elements in their own sites. In my opinion, twitter is best experienced through it's native apps as they will keep pace with new features like cards, expanding conversations and so on. Twitter is a platform, not just a collection of 160 character strings. The moment you try to build your own representation of twitter, is the moment you start fighting it.

So setting aside the technological challenges, from a design perspective I'd advise you not to try your feed custom at all, and just link to the twitter page for the relevant timeline, then let people follow you using their own preferred twitter client. Of course, I don't have any real context to your design, so this advise could be far off the mark.

Upvotes: 1

Michał Rybak
Michał Rybak

Reputation: 8706

Even if you'll call your function after the feed finishes loading, you won't be able to select or manipulate .h-feed, as this element is inside <iframe> loaded from other domain. This is due to set of safety restrictions called same origin policy.

Because of this, it is not possible to auto-scroll elements inside widget, as they are absolutely inaccessible.

Twitter provides some customization options, that include e.g. hiding the scrollbar and manipulating widget dimensions, but I'm afraid that nothing more can be done.

Upvotes: 1

Related Questions