Share Button?

by bizamajig

HTML

<div class="post_footer">

                ...2 days ago • <a href="">#Test</a>

                <div class="right">
                    <div class="sharegroup">
                        <a href="javascript:void(0);" class="share" title="share">Teilen</a>
                        <div class="sharecontainer">
                            <div class="inside">
                                <input type="text" value="http://tumblr.com/xo02l922yp" class="shortlink" readonly="" />
                                <div class="likes">
                                    <iframe src="http://www.facebook.com/plugins/like.php?app_id=158280660910402&amp;href=example.com&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>
                                    <g:plusone size="medium" href="example.org"></g:plusone>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

CSS

.post_footer {
        color: #606060;
        font-size: 0.8em;
        padding: 10px 0 20px 5px;
    }
    
    .post_footer a {
        color: #606060;
    }
    
    .post_footer a.posttag:hover {
        background-color: #c8c8c8;
    }
    
    .post_footer .right {
        float: right;
    }
    
    .post_footer .right a {
        background: url("http://static.tumblr.com/bcuv8fw/y95lnuzsu/shared.png") no-repeat scroll 0 0 transparent;
        display: block;
        float: right;
        height: 22px;
        position: relative;
        text-indent: -9999em;
        width: 30px;
        z-index: 105;
    }
    
    .post_footer .right a:hover {
        background-position: 0 -22px;
    }
    
    .post_footer .right a.sel {
        background-position: 0 -44px;
    }
    
    .sharegroup {
        position: absolute;
        right: 0;    
    }
    
    .sharecontainer {
        background: none repeat scroll 0 0 rgba(18, 64, 92, 0.07);
        border-radius: 6px 6px 6px 6px;
        display: none;
        height: 74px;
        position: absolute;
        right: -12px;
        top: -12px;
        width: 250px;
        z-index: 60;
    }
    
    .sharecontainer .inside {
        background: none repeat scroll 0 0 #12405C;
        border-radius: 3px 3px 3px 3px;
        height: 62px;
        margin: 6px;
        width: 238px;
    }
    
    .sharecontainer .inside .shortlink {
        background-color: transparent;
        border-color: #1D72A4;
        border-style: none none dotted;
        border-width: medium medium 1px;
        color: #FFFFFF;
        font-size: 1.1em;
        height: 34px;
        text-align: center;
        width: 200px;
    }
    
    .sharecontainer .inside .likes {
        padding: 3px 5px 0;
    }

JavaScript

$('.share').live('click', function(event) {
            var button = $(this);
            var container = $(this).next('.sharecontainer');
            var mouse_is_inside = false;
            //alert("clicked!");
            container.toggle();
            button.toggleClass('sel');
            
            container.hover(function(){ 
                mouse_is_inside = true; 
            }, function(){
                mouse_is_inside = false; 
            });

            $('html').live("click", function() {
                if(!mouse_is_inside) {
                container.hide();
                button.removeClass('sel');
                }
            });
            return false;                
    });