How do I resize an app generated from Javascript

Themes
4

If I understand it right, keyboard width is hardcoded as a miltiplication of notes count and fixed white key width:

setPriv('_notes',{'C':261.63,'C#':277.18,'D':293.66,'D#':311.13,'E':329.63,'F':346.23,'F#':369.99,'G':392.00,'G#':415.30,'A':440.00,'A#':466.16,'B':493.88});

for(var n in notes) {
//...
    thisKey.style.width = '40px';
    thisKey.style.left = 40 * iWhite + 'px';
    iWhite++;
//...

visualKeyboard.style.width = iWhite * 40 + 'px';

So, if you insert this via iframe, I can’t see a way to make it really responsive. Adding a scrollable wrapper is the only “solution” probably.

But if this JS source is editable, you can rewrite it avoiding the fixed numbers. Eg. using not 40px but something relative to viewport width dived by the white keys count. Or, otherwise, calculting white keys count depending on viewport width and fixed key with, which is a bit more complex as you’ll probably need to update switching octaves etc.

5 Likes