Language Switcher

Language Divs

State saved in Cookie

<style>
a        {color: #00f; background: #fff; text-decoration: none; }
a:hover  { color: #fff; background: #00f; }
a:active { color: #00f; background: #00f;}
.active { color: #000; background: #ff0;}
.hidden { display: none; }
</style>

<script>
// Supported languages, first is default
const languages = ['en', 'ja', 'at']

// Read activeLang from Cookie OR init with 'en'
var activeLang = document.cookie.split("; ").find((row) => row.startsWith("lang="))?.split("=")[1] || languages[0];

// Set activeLang & Cookie
function setLang(l) {
  document.cookie = `lang=${l}`
  activeLang = l
  showLang(l)
}

// Show/hide all elements with activeLang class
const languageClasses = languages.map(e=>'.'+e)
const languageIDs = languages.map(e=>'#'+e)
function showLang(l) {
  document.querySelectorAll(languageIDs).forEach(e => e.classList.remove('active'))
  document.querySelectorAll('#'+l).forEach(e => e.classList.add('active'))
  document.querySelectorAll(languageClasses).forEach(e => e.classList.add('hidden'))
  document.querySelectorAll('.'+l).forEach(e => e.classList.remove('hidden'))
}

// Document Ready
document.addEventListener("DOMContentLoaded", (e) => {
  showLang(activeLang)
})
</script>

<div id="lang">
 <a href="" onClick="setLang('ja');return false" id="ja">JA</a>
 <a href="" onClick="setLang('en');return false" id="en">EN</a>
 <a href="" onClick="setLang('at');return false" id="at">AT</a>
</div>

An evolving list of JS Image Sliders and Lightboxes.

Image Sliders

Slick - "the last carousel you'll ever need"

• v1.8.0 from 2017 but under active development
• 28.4k Github stars
• Great demos & examples
• Depends on jQuery

Swiper - "The Most Modern Mobile Touch Slider"

• v11.1.12, September 1, 2024
• 39.5k Github stars

Lightbox

Slick + Lightbox

• Building upong Slick
• no longer in development

Gallery/Slider AND Lightbox

PhotoSwipe

• v5.4.4
• 23.9k Github stars

TODO:

• make examples and test

I've been trying to get data from an API, a async call is used to parse the data. I've be naively iterating over the responses with forEach, calling await in the forEach function, and wondering why it is not producing the result I expected, i.e. wait for the data to settle.

NG:

async function getData() {
  output = ""
  results.forEach(async (block) => {   
    var b = await abc.parse(block)
    output += b
  })
}

Solution

Use a standard for or for..of to loop over the list:

async function getData() {
  output = ""
  for (const block of results) {
    var b = await abc.parse(block)
    output += b
  }
}

Embedded Vimeo in HTML Page:

<iframe id="vi" src="https://player.vimeo.com/video/123"></iframe>

Pause:

var msg = JSON.stringify({method: "pause"}

Play:

var msg = JSON.stringify({method: "play"}

jQuery:

$("#vi")[0].contentWindow.postMessage(msg, "*")

Pure JS:

document.getElementById("vi").contentWindow.postMessage(msg, "*")