Hello all you Knack users.
I am a brand new user and am absolutely delighted to find this wonderful software. I come from a programming background. I grew up on relational databases, COBOL (giving away my age) and a 4GL called Powerhouse. Developed quite a few applications in MS Access and have spent the last 15 of my career as a business analyst.
So the long and short of it is that I haven't actually developed any systems or written any code for a very long time. I have had a bit of a squiz around and this product looks great. I am just messing about with adding javascript to my application because I am pretty sure I am going to have to do that for a certain sections of the app I'm developing.
So the documentation of the widget I am trying to use follows: If somebody could give me some ideas on how to implement this code on a certain field I would be most grateful.
Kind regards
Joanne Cooper
# jQuery Chord Transpose Plugin
This jQuery plugin will add a toolbar to any plain text guitar chord music chart allowing the user to transpose the chords of the song with a single click.
Demo [https://jquery-chord-transposer.now.sh/](https://jquery-chord-transposer.now.sh/)
## Example Usage
Suppose you have HTML markup like the following.
<pre data-key="C">
C G Am F
When I find myself in times of trouble, Mother Mary comes to me
C G F C/E Dm C
Speaking words of wisdom, let it be
C G Am F
And in my hour of darkness, She is standing right in front of me
C G F C/E Dm C
Speaking words of wisdom, let it be
Am G F C
Let it be, let it be, let it be, let it be
G F C/E Dm C
Whisper words of wisdom, let it be
</pre>
You would simply use the plugin like this.
<script type="text/javascript" src="jquery.transposer.js"></script>
<script type="text/javascript">
$(function() {
$("pre").transpose();
});
</script>
By default, the script will try to determine the starting key of the song by looking for a data-key attribute on the containing element. However, you have the option of specifying the starting key with a settings object like the following example.
<script type="text/javascript">
$(function() {
$("pre").transpose({ key : 'C' });
});
</script>
## Plugin Requirements
The element you're targeting is either a `<pre>` tag or uses the `white-space: pre` CSS declaration.
The font is monospaced. It really won't be useful otherwise since the chords are position over the correct text using white space.
Lines with chords contain chords only. The script will examine each bit of text on the line to see if it matches a regular expression which is meant to find chords. If any chunk of text in that line does not match, it will be skipped. The only non-alphanumeric character that is allowed on chord lines (beside `#`) is / when it is used to show a chord with a bass note like `G/B`.