Last active
January 14, 2021 17:49
-
-
Save mvark/ae1ddeed90887ba63ae16ef43dbe1c87 to your computer and use it in GitHub Desktop.
Responsive Iframed Tweets Carousel
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
| <html> | |
| <head> | |
| <title> | |
| Iframed Tweets | |
| </title> | |
| <style> | |
| .container { | |
| position: relative; | |
| overflow: hidden; | |
| width: 100%; | |
| padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ | |
| /* padding-top: 75%; 4:3 Aspect Ratio */ | |
| /* padding-top: 66.66%; 3:2 Aspect Ratio */ | |
| /* padding-top: 62.5%; 8:5 Aspect Ratio */ | |
| } | |
| /* Then style the iframe to fit in the container div with full height and width */ | |
| .responsive-iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button class="button" onclick="minusDivs()" accesskey="j"> ❮ </button> | |
| <button class="button" onclick="plusDivs()" accesskey="k"> ❯ </button> | |
| <hr> | |
| <div class="container"> | |
| <iframe class="responsive-iframe" id="show" border="0" frameborder="0" height="700" width="550" | |
| src="https://twitframe.com/show?url=https://twitter.com/mvark/status/1309720586311008259"></iframe> | |
| <ol id="nav" style="display:none"> | |
| <li><a href="https://twitter.com/mvark/status/1147467581361537024" rel="nofollow" target="_blank">A True Movie Buff</a></li> | |
| <li><a href="https://twitter.com/mvark/status/1205821940075642880" rel="nofollow" target="_blank">Obesity Warnings We Don't Want To See</a></li> | |
| <li><a href="https://twitter.com/mvark/status/1208031409442443265" rel="nofollow" target="_blank">Attention Seeker</a></li> | |
| <li><a href="https://twitter.com/mvark/status/1220404495764480000" rel="nofollow" target="_blank">Just Another Day In Bangalore</a></li> | |
| <li><a href="https://twitter.com/mvark/status/1221369421261758464" rel="nofollow" target="_blank">Omelette</a></li> | |
| <li><a href="https://twitter.com/mvark/status/1231461773779169280" rel="nofollow" target="_blank">Near Death Experience</a></li> | |
| <li><a href="https://twitter.com/mvark/status/1254984334789885952" rel="nofollow" target="_blank">Tripping down the History Rabbit Hole</a></li> | |
| <li><a href="https://twitter.com/mvark/status/1256110871404670976" rel="nofollow" target="_blank">The Joy Of Science</a></li> | |
| <li><a href="https://twitter.com/mvark/status/1293747327333621760" rel="nofollow" target="_blank">Self-destructive Earth</a></li> | |
| <li><a href="https://twitter.com/mvark/status/1309720586311008259" rel="nofollow" target="_blank">The Masochist and the Chaos Monkey Drone</a></li> | |
| </ol> | |
| </div> | |
| <script> | |
| // TODO: jump to, on click | |
| // Reference: https://stackoverflow.com/a/46144832/325251 | |
| // https://www.w3schools.com/howto/howto_css_responsive_iframes.asp | |
| const navbar = Array.from(document.querySelectorAll('#nav>li>a')); | |
| let slideIndex = 0; | |
| showDivs(slideIndex); | |
| function plusDivs() { | |
| slideIndex = slideIndex === navbar.length - 1 ? 0 : slideIndex + 1; | |
| showDivs(slideIndex); | |
| } | |
| function minusDivs() { | |
| slideIndex = slideIndex === 0 ? navbar.length - 1 : slideIndex - 1; | |
| showDivs(slideIndex); | |
| } | |
| function showDivs(slideIndex) { | |
| document.getElementById("show").src="https://twitframe.com/show?url=" + navbar[slideIndex].href; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment