JavaScript library for zooming and panning HTML content. Live demo: https://d2phap.github.io/happla
Run the command
npm i @d2phap/happla
- NPM package: https://www.npmjs.com/package/@d2phap/happla
- Github source: https://github.com/d2phap/happla
Please see Docs project for full example.
<body>
<div id="board" tabindex="0">
<div id="wrapper">
<div id="boardContent">
<!-- Your content here -->
<img src="https://imageglass.org/img/iglogo.svg" alt="ImageGlass logo" />
</div>
</div>
</div>
</body>#board { width: 500px; height: 500px; }
#wrapper { width: 100%; height: 100%; }
#boardContent { display: inline-flex; }
#boardContent * {
-webkit-user-drag: none;
user-select: none;
}// import library
import { Board } from '@d2phap/happla';
// get HTML elements
const elBoard = document.getElementById('board');
const elBoardContent = document.getElementById('boardContent');
// declare the board
const board = new Board(elBoard, elBoardContent, {
// your configs here
});
// enable functions of the board
board.enable();// To be updated// To be updated
# Ethereum
0xc19be8972809b6b989f3e4ba16595712ba8e0de4
# Bitcoin
1PcCezBmM3ahTzfBBi5KVWnnd3bCHbas8ZThanks for your gratitude and finance help!
See https://github.com/d2phap/happla/blob/main/LICENSE
ImageGlass- A lightweight, versatile image viewer: https://imageglass.orgFluent Reveal Effect Js(Fluent Design System): https://github.com/d2phap/fluent-reveal-effectVue File selector(Fluent Design System): https://github.com/d2phap/vue-file-selectorFileWatcherEx- A wrapper of C# FileSystemWatcher for Windows: https://github.com/d2phap/FileWatcherEx
