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 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2010
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Singleline twitter feed JS problem.

    Hello, first time poster here.

    I have very little understanding of Javascript and have a problem with some I'm using. It's a singleline twitter feed and you can see it top right here: http://zest.explosiveapps.com/navigation.php

    Code:
    // Compatability with jQuery:
    jQuery.noConflict();
    
    window.$ = function (element) {
    	return document.getElementById(element);
    };
    
    /* Header and footer JavaScript */
    jQuery(document).ready(function() {
    	var $ = jQuery;
    
        function scroll_tweet(li){
            
            var post = li.children("div.post"),
            pWidth = post.width();
            if (pWidth > parseInt(balloon.css('width'))){
                var leftEnd = li.find('div.end');
                if(leftEnd.length === 0){
                    leftEnd = $('<div class="end left" />').appendTo(li);
                } 
                var offsX = parseInt(leftEnd.width());
                post.animate({left: offsX - pWidth - 55}, 23000, 'linear', function(){post.css('left', offsX);});
            }
        }
    
        function swap_tweets(current_tweet){
            var next_tweet = (current_tweet + 1) % 5; /* max five tweets */
            var li = $("li#tweet" + next_tweet);
    
            $("#tweet" + current_tweet).fadeOut(300);
            setTimeout(function(){
                li.fadeIn(400);
             }, 400);
    
            setTimeout(function(){scroll_tweet(li);}, 3800);                
    
            display_tweet = next_tweet;
            setTimeout(function(){swap_tweets(display_tweet);}, 11300);
        }
            
        var balloon = $("#twitterpost div.balloon");
        display_tweet = 0;
        if($("div.balloon ul li#tweet1").html() !== null){
            setTimeout(function(){swap_tweets(display_tweet);}, 12000);
            var firstli = $("li#tweet0");
            setTimeout(function(){scroll_tweet(firstli);}, 7500);
        }
    
    });
    As you can see from just watching, it has some problems. It doesn't fade out posts before displaying a new one. From what I understand it talks to the CSS to figure out the length. So maybe that's where the problem is.

    Code:
    /* twitter-bubble */
    
    #navigation #twitterpost {
        position: relative;
        top: -33px;
        right: 95px;
    }
    
    #navigation #twitterpost .balloon {
        position: relative;
        float: right;
        width: 345px;
        height: 21px;
        overflow: hidden;
        margin-top: 0px;
        padding: 0;
        background: url(/navigation/images/bubble.png) 0 0 no-repeat;
        font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    }
    
    #navigation #twitterpost .balloon div {
        font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
        color: #666666;
        padding: 0px 0px 12px 10px;
        font-size: 11px;
    }
    
    #navigation #twitterpost .end {
        position: absolute;
        top: 0;
        z-index: 1;
        height: 21px;
        background: url(/navigation/images/bubble.png) no-repeat;
    }
    
    #navigation #twitterpost .end.left {
        left: 0;
        width: 0px;
        background-position: 0 0;
    }
    
    #navigation #twitterpost .end.right {
        right: 0;
        width: 0px;
        background-position: 100% 0;
    }
    
    #navigation #twitterpost ul li .post {
        position: relative;
    }
    
    #navigation #twitterpost ul li .post {
        font-size: 11px;
        white-space: nowrap;
        position: absolute;
        top: 3px;
    }
    
    #navigation #twitterpost ul {
        padding-left: 0px;
        margin: 0px;
        list-style-type: none;
    }
    Or maybe it has something to do with using this script http://ajax.googleapis.com/ajax/libs.../jquery.min.js

    Thank you for take a look at my mess! Sorry for being such an amateur. And by the way, everything is wip on that site

    Cheers
    M.
    Last edited by perfectheat; 04-08-2010 at 05:32 PM.

  • #2
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was wondering if anyone could give me all the details to make this script work on my site? I like it and its the same script used at www.spotify.com.

    P.S. Some of your questions to register are kind of hard to answer, why is this?

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I'm having the exact same problem with tweets not fading out. Did you ever solve this?

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Scrolling Feed Help

    I am trying to use a very similar feed on my church website. Did you work out the kinks? What file or code are you using to pull the tweets? I was unable to find anywhere in the HTML CSS or JS that directs you to a twitter account

    Thanks for your help
    JT


  •  

    Posting Permissions

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