Add share buttons

webpop · Mar 21, 2013 · 2a38a60 · 2a38a60
1 parent aa2b810
commit 2a38a60
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/css/style.css b/css/style.css
@@ -176,14 +176,30 @@ p.lead {
   background: rgb(204, 34, 34);
   box-shadow: none;
 }
+
+.social-nav {
+  margin: 0;
+  position: absolute;
+  top: 265px;
+  left: 10px;
+  overflow: hidden;
+}
+.social { list-style: none; padding: 0; }
+.social li { margin: 5px 0 5px; }
+.social span { display: none; }
+
 small { font-size: 13px; }
 
+@media all and (max-width: 1135px) {
+  .social-nav { display: none; }
+}
+
 @media all and (max-width: 48em) {
   .left-col, .right-col { float: none; width: auto; }
   .left-nav .nav { display: none; }
   header, .wrapper, footer {
     padding-left: 20px;
     padding-right: 20px;
   }
-  .pin { display: none; }
+  .pin { display: nonel }
 }
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
     <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet'>
     <link href='http://fonts.googleapis.com/css?family=Neuton:400,700,400italic' rel='stylesheet'>
     <link href='http://fonts.googleapis.com/css?family=Anonymous+Pro' rel='stylesheet'>
+    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
 
     <!-- This is an example of jQuery.pin in use. Check the very bottom for the javascript. -->
@@ -21,6 +22,13 @@ <h1 class="logo"><span>jQuery</span>.Pin</h1>
         <img src="images/pin.png" class="pin" width="400"/>
       </div>
     </header>
+    <div class="social-nav">
+      <ul class="social">
+        <li class="twitter"><a href="http://twitter.com/share?text=Pin%20Things%2C%20with%20jQuery.pin%20http%3A%2F%2Fwebpop.github.com%2Fjquery.pin%20%23webpop%2C%20%23jQuery"><i class="icon-twitter"></i><span>Share on Twitter</span></a></li>        
+        <li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=http://webpop.github.com/jquery.pin"><i class="icon-facebook"></i><span>Share on Facebook</span></a></li>
+        <li class="gplus"><a href="https://plus.google.com/share?url=http://webpop.github.com/jquery.pin"><i class="icon-google-plus"></i><span>Share on Google+</span></a></li>
+      </ul>
+    </div>
     <div class="wrapper">
       <h2 class="sub">Make your stuff stick!</h2>
       <section class="container clearfix">   
@@ -129,6 +137,7 @@ <h2>Want a sticky left menu?</h2>
 
     <!-- PIN ALL THE THINGS! -->
     <script>
+      $(".social").pin();
       $(".pinned").pin({containerSelector: ".container", minWidth: 940});
     </script>
     <!-- That's all - pretty easy, right? -->

diff --git a/jquery.pin.js b/jquery.pin.js
@@ -18,18 +18,19 @@
                     disabled = false;
                 }
 
-                var $full = options.containerSelector ? $this.closest(options.containerSelector) : $(document.body);
-                var offset = $full.offset();
+                var $container = options.containerSelector ? $this.closest(options.containerSelector) : $(document.body);
+                var offset = $this.offset();
+                var containerOffset = $container.offset();
                 var parentOffset = $this.offsetParent().offset();
 
                 if (!$this.parent().is(".pin-wrapper")) {
                     $this.wrap("<div class='pin-wrapper'>");
                 }
 
                 $this.data("pin", {
-                    from: offset.top,
-                    to: offset.top + $full.height() - $this.outerHeight(),
-                    end: offset.top + $full.height(),
+                    from: options.containerSelector ? containerOffset.top : offset.top,
+                    to: containerOffset.top + $container.height() - $this.outerHeight(),
+                    end: containerOffset.top + $container.height(),
                     parentTop: parentOffset.top
                 });
 
@@ -65,7 +66,7 @@
                         top: to - data.parentTop
                     }).css("position", "absolute");
                 } else {
-                    $this.css("position", "");
+                    $this.css({position: "", top: "", left: ""});
                 }
           }
         };