www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript Twitter feed onmouseover function

  1. #1
    Join Date
    Nov 2010
    Posts
    1

    Question Javascript Twitter feed onmouseover function

    I'm trying to make a contact page where you can mouseover (or click) a link that then holds my twitter feed on the right of the page, it will then do the same with a facebook feed and buzzz feed for different links. A cool idea, but right now I can only get it to open on another page...
    Here's what I have,
    <html>
    <head>
    <title>I'm Josiah.</title>
    <style type="text/css">
    body {
    font-family: Helvetica, Bitstream Vera Sans, sans-serif;
    color: #000000;
    }
    .content {
    text-align: left;
    margin-left: 20%;
    margin-top: 8%;
    color: #00BFFF;
    }
    .heading {
    font-size: 3em;
    font-weight: bold;
    }
    .item {
    margin-left: 3%;
    color: #00BFFF
    }
    .mainlink {
    font-size: 2em;
    }
    .comment {
    color: gray;
    font-size: 1em;
    margin-left: 5%;
    }
    .contact {
    position:absolute;top:1000px;left:500px;
    }
    A:link {
    text-decoration: none;
    color: #00BFFF;
    }
    A:visited {
    text-decoration: none;
    color: #00BFFF; }
    A:active {
    text-decoration: none;
    color: #00BFFF;
    }
    A:hover {
    text-decoration: none;
    color: #38ACEC;
    }
    .twitter {
    position:absolute;top:200px;left:950px;
    }
    </style>
    </head>
    <body bgcolor=#828282>
    <span>&nbsp;</span>
    <div class="content">
    <div class="heading">Hi. I'm Josiah</div>
    <div class="item">
    <div class="mainlink">&bull; <a href="www.twitter.com/mrjosiaht" onmouseover="tweet()">@mrJosiaht</a></div>
    <div class="comment">For the tweeters</div>
    </div>
    <div class="item">
    <div class="mainlink">&bull; <a href="http://jonty.co.uk/made">josiah.com/made</a></div>
    <div class="comment">For people who like code</div>
    </div>
    <div class="item">
    <div class="mainlink">&bull; <a href="http://jonty.co.uk/is/also/on">josiah.com/is/also/on</a></div>
    <div class="comment">For stalkers</div>
    </div>
    <div class="item">
    <div class="mainlink">&bull; <a href="http://contact.josiah.com">contact.josiah.com</a></div>
    <div class="comment">For saying hello</div>
    </div>
    <div class="twitter">
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    function tweet() {
    new TWTR.Widget({
    version: 2,
    type: 'profile',
    rpp: 3,
    interval: 6000,
    width: 400,
    height: 150,
    theme: {
    shell: {
    background: '#696969',
    color: '#060e02'
    },
    tweets: {
    background: '#696969',
    color: '#00BFFF',
    links: '#00BFFF'
    }
    },
    features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: false,
    timestamp: true,
    avatars: false,
    behavior: 'all'
    }
    }).render().setUser('MrJosiahT').start();
    }
    </script>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Aug 2010
    Posts
    10
    For future reference, please use the code tags to display your code (see the # button in the message toolbox).

    I'm guessing that your problem lies in the widget.js file. I didn't take a look at that file, but here's an alternative way of doing what you want. I created a twitter feed that displays on a image click. This is using mootools, but could be adapted for jquery or even normal Javascript I'm sure. I basically create a iframe that has the effect of 'popping up' on the page, with a button that can close it and dispose of the iframe. It is the same concept as 'lightbox' or 'bumpbox', without the lengthy javascript file that comes with those.

    in my javascript file:

    Code:
    $('TweetBtn').addEvent('click', function(e){
    e.stop();
    
    $('TweetDiv').setStyle('z-index', '999999');
    var Tpar = document.getElementById('TweetDiv');
      Tpar.innerHTML = '<iframe src="twitter.html" style="position: absolute; top: 300px; left: 700px; width: 0px; height: 0px; z-index: 999999;" id="TwEEt"></iframe>';
    var ef=document.getElementById("TwEEt");
    var efL = parseFloat(ef.style.left);
    var efT = parseFloat(ef.style.top);
    efL = efL - 150;
    efT = efT - 150;
    $("TwEEt").morph({width: 300, height: 300, left: efL, top: efT});
    (function(){$("TweetCloseBtn").setOpacity(1)}).delay(500);
    });
    $('TweetClose').addEvent('click', function(e){
      e.stop();
      var ef=document.getElementById("TwEEt");
    var efL = parseFloat(ef.style.left);
    var efT = parseFloat(ef.style.top);
    efL = efL + 150;
    efT = efT + 150;
    $("TwEEt").morph({width: 0, height: 0, left: efL, top: efT});
    $("TweetCloseBtn").setOpacity(0);
    
    (function(){
      var Tpar = document.getElementById('TweetDiv');
      Tpar.innerHTML = '<iframe src="" style="position: absolute; top: 300px; left: 700px; width: 0px; height: 0px; z-index: 0;" id="TwEEt"></iframe>';
      $('TweetDiv').setStyle('z-index', '0');
    }).delay(750);
    
    });
    In my index.html:

    Code:
    <div id="Twitter" style="position:absolute; left: -300px; top: 475px; z-index: 10;">
    <a id="TweetBtn" style="outline:none" rel="300-250" href="twitter.html" onmouseover="javascript:largeButton('twitterIMG', 'Twitter')" onmouseout="javascript:smallButton('twitterIMG', 'Twitter')" ><img name="twitterIMG" src="images/twitter.jpg" alt="" style="width: 50px; border: none;"></a>
    
    </div>
    <div style="z-index: 999999" id="TweetDiv">
    
    </div>
    <div style="z-index: 99999999">
     <a id="TweetClose" href="" style="z-index: 99999999"><img id="TweetCloseBtn" src="images/closed.png" alt="" style="border: none; position: absolute; top: 145px; left: 840px; width: 0px; height: 0px; z-index: 99999999;"></a>
    </div>
    In my twitter.html:
    Code:
    <head>
    <style type="text/css">
    body
    {
    background-color: #fff;
    overflow: auto;
    }
    </style>
    
    <link rel="stylesheet" type="text/css" href="css/twitter.css" />
    
    </head>
    
    
    <body>
    <div>
        <img src="images/twitter_logo.jpg" style="width: 200px">
    </div>
    
    <div id="twitter_div">
    <h2 style="display: none;" >Twitter Updates</h2>
    <ul id="twitter_update_list"></ul>
    <a href="http://twitter.com/TrinityUMC1" target="_blank" id="twitter-link" style="display:block;text-align:right;">follow us on Twitter</a>
    </div>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TrinityUMC1.json?callback=twitterCallback2&amp;count=5"></script>
    
    
    
    </body>
    As you can see, this uses the 'blogger.js' script from Twitter.
    Last edited by cruddell001; 11-22-2010 at 05:13 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles