Responsive Iframed Tweets Carousel
| <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