https://github.com/bigskysoftware/chrome-movebefore-demo

https://github.com/bigskysoftware/chrome-movebefore-demo

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/bigskysoftware/chrome-movebefore-demo
• Owner: bigskysoftware
• Created: 2024-05-14T20:53:34.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-15T16:43:57.000Z (9 months ago)
• Last Synced: 2024-05-16T20:20:25.265Z (8 months ago)
• Language: JavaScript
• Size: 32.2 KB
• Stars: 7
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-ccamel - bigskysoftware/chrome-movebefore-demo - (JavaScript)

README

        
# htmx "moveBefore" demo app

This is a simple website to demonstrate the new proposed `moveBefore()` functionality

available in canary chrome.

You can start the server with

```bash

$ ./server.sh

```

and then navigate to https://localhost:8000.  You will be presented with two buttons.

If you click one button it will load an iframe embed marked as [`hx-preserve`](https://htmx.org/attributes/hx-preserve/).

The site uses a customized version of htmx that uses the `moveBefore()` method for preserving elements, which

perserves things like play state.

You should be able to click back and forth between the buttons and have the video continue playing.

## Browser set up

You will need to download chrome canary:

https://www.google.com/chrome/canary/

and go to  and enable "Atomic DOM move" for the demo to work properly