Pimenov's blog

Every path, even the longest, begins with one step

Metro 4 Table — data-body attribute

Hello my friends! In this article I want to talk about the yet undocumented feature of the table component - attribute data-body. With this attribute you can define data for table as ARRAY. Without writting <tr><td>...</td></tr> code. First - You must define array with table data. Important! Data for table must be defined before moment... » read more

Using Metro4-React with CRA

Hi, my friends! In this post, I’ll show you how to use Metro4-React in an application created using create-react-app without ejecting configs. Remarks Metro4-React published in the npm registry with raw JSX files. When creating an application using CRA and Metro4-React and trying to compile it, we get a syntax error, since Babel does not... » read more

Adblock — a new component for hunting on the ads blockers in Metro 4

Hello, my friends! In version 4.3.7 I'm added new component Adblocker. This component is intended for hunting/fishing for ad blockers. Setup The component works automatically. To configure it, you can create a settings object names metroAdblockSetup and put it before Metro 4 js file: <script> var metroAdblockSetup = { checkInterval: 5000, fireOnce: 3, onBite: function(){... » read more

Codelobster IDE — Free PHP, HTML, CSS, JavaScript editor

In this article, we suggest you to get acquainted with the free editor of web languages - Codelobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans. Codelobster IDE allows you to edit PHP, HTML, CSS and JavaScript files, it highlights the syntax and... » read more

Create scroll indicator with Metro 4 Progress component

Hello, my friends! In this post, I want to show how easy it is to create a scroll indicator in Metro 4 using the progress component. CSS .indicator { position: fixed; top: 0; left: 0; right: 0; z-index: 1; } HTML <div class="indicator" data-role="progress"></div> JavaScript function indicator(){ var container = document.documentElement; var scrolled = (container.scrollTop... » read more

Metro 4 — Changes for animate function in 4.3.7

In 4.3.7 will be changed arguments for the animate function. Version <= 4.3.6 animate format: $(selector).animate(draw, dur, easing, callback); Version >= 4.3.7. Function animate receive one argument as plain object or array of objects. $.animate({ el: object | HTMLElement, draw: {} | function, dur: 1000, ease: "linear", loop: 0, pause: 0, dir: "normal", defer: 0,... » read more

Animate audio volume with AnimationJS

Hello, my friends! In this example, I want to show how you can animate the volume of an audio element using the AnimationJS module. Example: https://pimenov.com.ua/demo/animationjs/sound.html HTML <div class="wrapper" id="field" data-title=""> <button data-role="fadeIn">Sound fade In</button> <button data-role="fadeOut">Sound fade Out</button> <audio autoplay loop> <source src="sound.mp3" type="audio/wav"> </audio> </div> JavaScript import {animate} from "@olton/animationjs"; const audio =... » read more

Play sound on button click in Metro 4

Hello, my friends! In 4.3.7 I'm added new component AudioButton and method Metro.playSound. With method Metro.playSound, you can play any sounds on your request. var btn = document.querySelector(...); car sound = 'https://website.com/sound.mp3'; btn.addEventListener('click', e => { Metro.playSound(sound, (src) => { console.log('sound '+src+' done') }) }) or, You can create button (or other element) with role... » read more