Position Twitter widget

VIDA-NYU · Nov 7, 2016 · 0ea915e · 0ea915e
1 parent de97d1c
commit 0ea915e
Showing 1 changed file with 39 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -103,6 +103,32 @@
     width: 100%;
     height: 100%;
 }
+
+#twitter-wrapper {
+    display: none;
+}
+#twitter-wrapper.affix {
+    position: fixed;
+    top: 20px;
+}
+@media(min-width:768px) {
+    #twitter-wrapper {
+        display: block;
+        width: 187.5px;
+    }
+}
+@media(min-width:992px) {
+    #twitter-wrapper {
+        display: block;
+        width: 242.5px;
+    }
+}
+@media(min-width:1200px) {
+    #twitter-wrapper {
+        display: block;
+        width: 292.5px;
+    }
+}
     </style>
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@@ -316,10 +342,11 @@ <h3>People</h3>
 
         </div><!--end center content-->
 
-        <div class="col-md-3">
-          <a class="twitter-timeline" href="https://twitter.com/search?q=ReproZip" data-widget-id="793266031187877888">Tweets about ReproZip</a>
-          <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-
+        <div class="col-md-3" style="position: relative; padding: 0;">
+          <div id="twitter-wrapper">
+            <a class="twitter-timeline" href="https://twitter.com/search?q=ReproZip" data-widget-id="793266031187877888" style="0.5vh;">Tweets about ReproZip</a>
+            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+          </div>
         </div><!--end twitter sidebar-->
 
       </div><!--end row-->
@@ -340,5 +367,13 @@ <h3>People</h3>
     <script src="js/bootstrap.min.js"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="js/ie10-viewport-bug-workaround.js"></script>
+
+    <script>
+$('#twitter-wrapper').affix({
+    offset: {
+        top: 90
+    }
+});
+    </script>
   </body>
 </html>