www/content/webring.md
+++ title = "htmx webring" +++
<style> h1 { display: none; } footer { display: none; } #webring-div { font-family: Times New Roman; } @media only screen and (max-width: 720px) { .built-with-tds { display:none; } } </style> <div id="webring-div"> <table id="nav-table" style="border: black 4px double; text-align: center"> <tr> <td class="built-with-tds" style="border: 1px black solid"> </td> <td width="70%" style="text-align: center; font-size: 20px; border: 1px black solid"> This Great <a href="https://htmx.org">htmx</a> Webring site is owned by <a href="https://bigsky.software">Your Name Here</a>. </td> <td class="built-with-tds" style="; border: 1px black solid""> </td> </tr> <tr> <td colspan="3" style="text-align: center; ; border: 1px black solid; position: relative"> [<a class="nav-link" href="#" _="on click set links to <a/> in the #ring-table decrement :index if :index is -1 get the length of the links set :index to the result - 1 end log :index get links[:index] set the #webring's src to the result's @href ">Prev</a>][<a href="#" class="nav-link" _="on click set links to <a/> in the #ring-table get the :index repeat until the result is not :index get Math.floor(Math.random() * length of the links) end set the :index to the result get links[:index] set the #webring's src to the result's @href ">Random</a>][<a href="#" class="nav-link" _="on click set links to <a/> in the #ring-table increment :index if :index is length of the links set :index to 0 end get links[:index] set the #webring's src to the result's @href ">Next</a>][<a href="#" id="show-sites"
_="on click
transition the #webring's opacity to 0
hide the #webring
transition #site-table's height to 100% over 300ms then
hide me then
show #return-to-webring">List Sites</a><a href="#" id="return-to-webring"
style="display: none"
_="on click
transition #site-table's height to 0px over 800ms then
show the #webring
transition the #webring's opacity to 100%
hide me then
show #show-sites">Return To Webring</a>]