Check out this cool twitter feed: http://www.vidahost.com bottom right corner (little twitter bird).

 

When you hover, displays last four tweets. I've found an awesome one that shows pictures also http://twitpic.com/widgets/designer which is even better.

 

How is this activated on hover? Firstly I thought css a:hover, but now I see it's javascript I don't think it can be done from css, has to be done from the webpage.

Lots of tutorials on feeds but not on how to display on a hover?

Off the top of my head you could just create a div at the very bottom of the page, populate it with the necessary content and then make it visible on hover. This can be done in css and javascript - I would imagiene it uses javascript though.

 

Have you tried looking at it through firebug/chrome developer tools etc to see whats going on?

 

Have you tried looking at the jquery docs - have a look at slideUp, and animate - that should get you on the right track.

 

Good luck!

This is the code they've used to display the twitter div on hover:

 

//Control Twitter PopUp
var t = null;
vh(".twitter").mouseenter(function(){ if (t != null){ clearTimeout(t);}		   
    vh('.twitter > div').css('margin-top',-(vh('.twitter > div').outerHeight()));
    vh('.twitter > div').slideDown();
    vh('.twitter > a').css({backgroundColor:'#0064A1'});
}).mouseleave(function(){ 
        vh('.twitter > a').css({backgroundColor:'#FFFFFF'});
        t=setTimeout(function(){
        vh('.twitter > div').slideUp();
    },500); 
});

 

And to get the twitter feed itself, it looks like they've used a jQuery twitter plugin called jQuery Live Twitter Plugin.

 

Hope this helps,

Lyndsey

Thanks Lyndsey, I tried looking at it in Firebug and the Inspector in Firefox but could not see how it was working; so big thanks for that.

 

To other beginners this video shows the very basic idea of Firebug

.

This is the code they've used to display the twitter div on hover:

 

//Control Twitter PopUp
var t = null;
vh(".twitter").mouseenter(function(){ if (t != null){ clearTimeout(t);}		   
    vh('.twitter > div').css('margin-top',-(vh('.twitter > div').outerHeight()));
    vh('.twitter > div').slideDown();
    vh('.twitter > a').css({backgroundColor:'#0064A1'});
}).mouseleave(function(){ 
        vh('.twitter > a').css({backgroundColor:'#FFFFFF'});
        t=setTimeout(function(){
        vh('.twitter > div').slideUp();
    },500); 
});

 

And to get the twitter feed itself, it looks like they've used a jQuery twitter plugin called jQuery Live Twitter Plugin.

 

Hope this helps,

Lyndsey

 

Sorry to bother Lyndsey, how did you get to find out that code?

 

I'm looking at the site now, have Firebug on mac, and refresh the page whilst hovering over the twitter feed, but I can't see how you got to see that code?

Do you need to painfully read through the whole code, or can you click on it with the web 'element inspect' arrow?