Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added Vimeo fixed twitter

  • Loading branch information...
commit 3d0d71b00aff94bb609733b7175d7f57dcd82ea1 1 parent b0661b6
@robertcedwards authored
Showing with 301 additions and 40 deletions.
  1. +17 −28 index.html
  2. +76 −12 slidemenu.css
  3. +118 −0 twitterbadgev2.js
  4. +90 −0 vimeo.html
View
45 index.html
@@ -4,52 +4,41 @@
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Horizontal Sliding Social widget</title>
<link rel="stylesheet" type="text/css" href="slidemenu.css" />
-<link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-<script type="text/javascript" src="jquery.tweet.js"></script>
<script type="text/javascript" src="slidemenu.js"></script>
+
+
+</head>
+<body onload="slideMenu.build('sm',355,10,10,1)">
-</head>
-<body onload="slideMenu.build('sm',300,10,10,3)">
<div id="wrap" class="border-radius">
<ul id="sm" class="sm">
- <li><div style="position:relative;"><div style=" position:relative;width:90px;background:#E8E8E8;z-index:3;"><img style="float:left;"src="images/facebook.png"/><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="facebook.com/coactlab" send="true" layout="button_count" width="50" show_faces="true" font="lucida grande"></fb:like></div><div style="position:absolute; right:0px;top:0px;"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:facepile href="facebook.com/coactlab" width="200" max_rows="2"></fb:facepile></div></div></li>
- <li>
+ <li class="slide"><div style="position:relative;"><div style=" position:relative;width:90px;background:#E8E8E8;z-index:3;clear:right;"><img style="float:left;"src="images/facebook.png"/><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="facebook.com/coactlab" send="true" layout="button_count" width="50" show_faces="true" font="lucida grande"></fb:like></div><div style="position:absolute;right:215px;top:5px;"><img src="http://graph.facebook.com/coactlab/picture/"/></div><div style="position:absolute; right:0px;top:0px;"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:facepile href="facebook.com/coactlab" width="210" max_rows="1"></fb:facepile></div></div></li>
+ <li class="slide">
<div style="position:relative;">
<div style="position:relative;z-index:2; width:90px;">
<img src="images/twitter.png" style="float:left;"/>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="coactlab">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
+ <div style="position:absolute; right:215px;top:5px;"><img src="http://img.tweetimag.es/i/coactlab"/></div>
<div style=" width:200px;position:absolute;right:0px;top:0px;"class="tweet">
+ <div id="twitterbadge">
+ <h2 style="display:none;"><a href="http://twitter.com/robertcedwards">My twitter updates</a></h2>
+
+ </div >
</div>
</div>
</li>
- <li>
+ <li class="slide">
<div style="position:relative;">
<div style="position:relative;z-index:2; width:90px;"><img src="images/vimeo.png" style="float:left;"/><img src="images/vimeoshare.png"/> </div>
<div class="vimeoBadge">
-<div class="clip"> <a href="http://vimeo.com/8372950"><img src="http://b.vimeocdn.com/ts/388/617/38861729_100.jpg" height="60" width="80" border="0" /></a> </div> <div class="clip"> <a href="http://vimeo.com/6748157"><img src="http://b.vimeocdn.com/ts/266/724/26672404_100.jpg" height="60" width="80" border="0" /></a> </div><div class="clear"></div> <div id="vimeo_badge_logo"><a href="http://vimeo.com/coactlab" id="vimeo_badge_link"><img src="http://a.vimeocdn.com/images/logo_vimeo_badge.png" alt="vimeo.com" /></a></div> </div>
+ <iframe src="vimeo.html" width="300" height="100" scrolling="no" frameBorder="0"></iframe>
</div>
- </li>
- </ul>
-</div>
-<script type='text/javascript'>
- $(document).ready(function(){
- $(".tweet").tweet({
- username: "robertcedwards",
- join_text: "auto",
- avatar_size: 0,
- count: 1,
- auto_join_text_default: "we said,",
- auto_join_text_ed: "we",
- auto_join_text_ing: "we were",
- auto_join_text_reply: "we replied to",
- auto_join_text_url: "we were checking out",
- loading_text: "loading tweets..."
- });
- });
-</script>
+
+
+ <script src="twitterbadgev2.js" type="text/javascript"></script>
+
</body>
</html>
View
88 slidemenu.css
@@ -1,17 +1,81 @@
* {margin:0; padding:0}
#wrap{position:relative;margin: 0 auto 0 auto;width: 60%;background-color: #E8E8E8;}
.sm {list-style:none; width:459px; height:100px; display:block; overflow:hidden}
-.sm li {float:left; display:inline; overflow:hidden}
-<!--
-/* You can modify these CSS styles */
+.sm li.slide {float:left; display:inline; overflow:hidden}
+
.vimeoBadge { position:absolute; right:0px; top:0px;margin: 0; padding: 0; font: normal 11px verdana,sans-serif; }
-.vimeoBadge img { border: 0; }
-.vimeoBadge a, .vimeoBadge a:link, .vimeoBadge a:visited, .vimeoBadge a:active { color: #3A75C4; text-decoration: none; cursor: pointer; }
-.vimeoBadge a:hover { color:#00CCFF; }
-.vimeoBadge #vimeo_badge_logo { margin-top:10px; width: 57px; height: 16px; }
-.vimeoBadge .credit { font: normal 11px verdana,sans-serif; }
-.vimeoBadge .clip { padding:0; float:left; margin:0 10px 10px 0; width:80px; line-height:0; }
-.vimeoBadge .caption { font: normal 11px verdana,sans-serif; overflow:hidden; width:80px; height: 30px; }
-.vimeoBadge .clear { display: block; clear: both; visibility: hidden; }
+#stats{
+float:left;
+width:80px;
+}
+
+#thumbs {
+
+}
+#thumbs ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+#thumbs li {
+ display: inline;
+ padding: 0;
+ margin: 10px 2px;
+}
+#thumbs img {
+ border:0;
+ width:94px;
+}
+img#portrait {
+ float: left;
+ margin-right: 5px;
+}
--->
+#videos {
+ background-color:#46b7ff;
+ color:#fff;
+ float:right;
+ padding:8px;
+ font-size:18px;
+ margin-bottom:4px;
+ margin-left:2px;
+}
+#likes {
+ background-color:#fd4122;
+ color:#fff;
+ float:left;
+ padding:8px;
+ font-size:18px;
+ margin-bottom:4px;
+}
+#bio {
+ padding-bottom:10px;
+}
+#contacts {
+ background-color:#999;
+ color:#fff;
+ float:left;
+ padding:8px;
+ font-size:18px;
+ margin-bottom:4px;
+}
+#vimloader img {
+ width:16px;
+ height:16px;
+}
+
+.clear{
+clear:both;}
+#twitterbadge {
+ font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
+ font-size: 11px;
+ color: #3B5998;
+ }
+#twitterbadge a {
+ color: #3B5998;
+ text-decoration: none;
+}
+#twitterbadge a:hover {
+ color: #3B5998;
+ text-decoration: underline;
+}
View
118 twitterbadgev2.js
@@ -0,0 +1,118 @@
+twitterbadge = function(){
+ var config = {
+ countDefault:1,
+ badgeID:'twitterbadge',
+ userID:'twitterbadgeuser',
+ tweetsID:'twitterbadgetweets',
+ userinfo:'userinfo',
+ stylesmatch:/skin-(\w+)/,
+ amountmatch:/amount-(\d+)/,
+ styles:{
+ 'grey':'twitterbadge.css',
+ 'blue':'twitterbadgeblue.css'
+ }
+ };
+ var badge;
+ function init(){
+ badge = document.getElementById(config.badgeID);
+ head = document.getElementsByTagName('head')[0];
+ if(badge){
+ link = badge.getElementsByTagName('a')[0];
+ if(link){
+ classdata = badge.className;
+ var amount = config.amountmatch.exec(classdata);
+ var amount = amount ? amount[1] : config.countDefault;
+ var skin = config.stylesmatch.exec(classdata);
+ var name = link.href.split('/');
+ var url = 'http://twitter.com/statuses/user_timeline/' +
+ name[name.length-1] + '.json?callback=' +
+ 'twitterbadge.show&count=' + amount;
+ if(skin && skin[1]){
+ addSkin(skin[1]);
+ }
+ addData(url);
+ }
+ }
+ }
+ function addSkin(skin){
+ var style = document.createElement('link');
+ style.setAttribute('rel','stylesheet');
+ style.setAttribute('type','text/css');
+ style.setAttribute('href',config.styles[skin]);
+ document.getElementsByTagName('head')[0].insertBefore(style,head.firstChild);
+ }
+ function addData(url){
+ var script = document.createElement('script');
+ script.src = url;
+ script.type = 'text/javascript';
+ document.getElementsByTagName('head')[0].appendChild(script);
+ }
+ function addUser(set){
+ var user = document.createElement('p');
+ user.id = config.userID;
+ var img = document.createElement('img');
+ img.src = set.user.profile_image_url;
+ img.alt = set.user.name;
+ user.appendChild(img);
+ var ul = document.createElement('ul');
+ var data = ['screen_name','name','location'];
+ for(var i=0;data[i];i++){
+ if(set.user[data[i]]){
+ var li = document.createElement('span');
+ li.appendChild(document.createTextNode(set.user[data[i]]));
+ ul.appendChild(span);
+ };
+ };
+ user.appendChild(ul);
+ badge.appendChild(user);
+ }
+ function show(result){
+ if(badge.className.indexOf(config.userinfo) != -1){
+ addUser(result[0]);
+ }
+ var tweets = document.createElement('ul');
+ tweets.id = config.tweetsID;
+ for(var i=0,j=result.length;i<j;i++){
+ var username = result[i].user.screen_name;
+ var li = document.createElement('span');
+ var span = document.createElement('span');
+ span.innerHTML = result[i].text+' ';
+ li.appendChild(span);
+ var link = document.createElement('a');
+ link.setAttribute('href','http://twitter.com/' + username +
+ '/statuses/'+result[i].id);
+ link.appendChild(document.createTextNode(relative_time(result[i].created_at)));
+ li.appendChild(link);
+ tweets.appendChild(li);
+ }
+ badge.appendChild(tweets);
+ };
+ function relative_time(time_value) {
+ var values = time_value.split(" ");
+ time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
+ var parsed_date = Date.parse(time_value);
+ var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
+ var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
+ delta = delta + (relative_to.getTimezoneOffset() * 60);
+ if (delta < 60) {
+ return 'less than a minute ago';
+ } else if(delta < 120) {
+ return 'about a minute ago';
+ } else if(delta < (60*60)) {
+ return (parseInt(delta / 60)).toString() + ' minutes ago';
+ } else if(delta < (120*60)) {
+ return 'about an hour ago';
+ } else if(delta < (24*60*60)) {
+ return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
+ } else if(delta < (48*60*60)) {
+ return '1 day ago';
+ } else {
+ return (parseInt(delta / 86400)).toString() + ' days ago';
+ }
+ }
+ return {
+ show:show,
+ init:init
+ };
+}();
+twitterbadge.init();
View
90 vimeo.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<title>Horizontal Sliding Social widget</title>
+<link rel="stylesheet" type="text/css" href="slidemenu.css" />
+</head>
+
+
+<body>
+<script type='text/javascript'>
+
+ // Change this to your username to load in your clips
+ var vimeoUserName = 'coactlab';
+
+ // Tell Vimeo what function to call
+ var userInfoCallback = 'userInfo';
+ var clipsCallback = 'showThumbs';
+
+ // Set up the URLs
+ var userInfoUrl = 'http://www.vimeo.com/api/' + vimeoUserName + '/user_info.json?callback=' + userInfoCallback;
+ var clipsUrl = 'http://www.vimeo.com/api/' + vimeoUserName + '/clips.json?callback=' + clipsCallback;
+
+ // This function adds user info to the page
+ function userInfo(info) {
+ var stats = document.getElementById('stats');
+
+ var img = document.createElement('img');
+ img.setAttribute('id', 'portrait');
+ img.setAttribute('src', info.thumbnail_small);
+ img.setAttribute('alt', info.display_name);
+ stats.appendChild(img);
+
+
+
+
+
+ }
+
+ // This function goes through the clips and puts them on the page
+ function showThumbs(clips) {
+ var thumbs = document.getElementById('thumbs');
+ thumbs.innerHTML = '';
+
+ var ul = document.createElement('ul');
+ thumbs.appendChild(ul);
+
+ for (var i = 0; i < clips.length; i++) {
+ var thumb = document.createElement('img');
+ thumb.setAttribute('src', clips[i].thumbnail_medium);
+ thumb.setAttribute('alt', clips[i].title);
+ thumb.setAttribute('title', clips[i].title);
+
+ var a = document.createElement('a');
+ a.setAttribute('href', clips[i].url);
+ a.setAttribute('target', clips[i], '_blank');
+ a.appendChild(thumb);
+
+ var li = document.createElement('li');
+ li.appendChild(a);
+ ul.appendChild(li);
+ }
+ }
+
+ // This function loads the data from Vimeo
+ function init() {
+ var head = document.getElementsByTagName('head').item(0);
+
+ var userJs = document.createElement('script');
+ userJs.setAttribute('type', 'text/javascript');
+ userJs.setAttribute('src', userInfoUrl);
+ head.appendChild(userJs);
+
+ var clipsJs = document.createElement('script');
+ clipsJs.setAttribute('type', 'text/javascript');
+ clipsJs.setAttribute('src', clipsUrl);
+ head.appendChild(clipsJs);
+ }
+
+ // Call our init function when the page loads
+ window.onload = init;
+
+ </script>
+<div id="stats"></div>
+ <div id="thumbs">Loading videos...</div>
+ </div>
+ </li>
+ </ul>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.