Created
September 3, 2013 12:15
-
-
Save maly/6423133 to your computer and use it in GitHub Desktop.
"Tweetable" tag pro články
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> | |
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet"> | |
<link href="tweetable.css" rel="stylesheet"> | |
</head> | |
<body> | |
<p>Blabla bla <tweetable>tohle bude text tweetu</tweetable> bla bla</p> | |
<p>Blabla bla <tweetable title="tohle bude text tweetu">bla bla bla</tweetable></tweetable> bla bla</p> | |
</body> | |
<script src="tweetable.js"></script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.tweetable {position: relative;} | |
.tweetable a { text-decoration: none; border-bottom: 0px dotted #4099ff; color: #333; background: whitesmoke; } | |
.tweetable a:hover { text-decoration: none; border-bottom: 0px dotted #4099ff; color: #4099ff;} | |
.tweetable .icon-twitter {color:#4099ff;} | |
.sharebuttons {display: none; position: absolute; top: -30px; left: 0px; z-index: 101; width: 100px; background: #4099ff; color: whitesmoke; border-radius: 3px; height: 20px; padding: 5px; text-align: center; font-family: 'helvetica neue', helvetica, arial, sans-serif; font-size: 14px; font-weight: bold; } | |
.sharebuttons a { color: whitesmoke; background: #4099ff; border: 0; } | |
.sharebuttons a:hover { color: whitesmoke; background: #4099ff; border: 0; } | |
.sharebuttons span.brand a {font-size: 10px; color: whitesmoke; text-decoration:none; display: block; padding: 0 0 0 25px; margin: 0; border: none; height: 12px; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
$("tweetable").replaceWith(function() { | |
var content = $(this).html(); | |
var tweetContent = content; | |
var alt = $(this).attr("title"); | |
if (alt) {tweetContent = alt;} | |
var hash = $(this).attr("data-hash"); | |
if (hash) {tweetContent += " #"+hash;} | |
var out = "<span class=tweetable>"; | |
var permalink = document.location.href; | |
out += "<a href='https://twitter.com/intent/tweet?original_referer="+encodeURIComponent(permalink)+"&source=tweetbutton&text="+ | |
encodeURIComponent((tweetContent))+"&url="+encodeURIComponent(permalink)+"'>"+content+" <i class='icon-twitter'></i>"; | |
out += "</a>"; | |
out += "<span class='sharebuttons'>"; | |
out += "<a href='https://twitter.com/intent/tweet?original_referer="+encodeURIComponent(permalink)+"&source=tweetbutton&text="+ | |
encodeURIComponent((tweetContent))+"&url="+encodeURIComponent(permalink)+"'>TWEETNOUT"; | |
out += "</a>"; | |
out += "</span>"; | |
out += "</span>"; | |
return out; | |
}); | |
$(".tweetable").hover( | |
function(){ | |
if ($(this).data('vis') != true) { | |
$(this).data('vis', true); | |
$(this).find('.sharebuttons').fadeIn(200); | |
} | |
}, | |
function(){ | |
if ($(this).data('vis') === true) { | |
$(this).find('.sharebuttons').clearQueue().delay(0).fadeOut(200); | |
$(this).data('vis', false); | |
$(this).data('leftSet', false); | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment