Read the full post here!

Post fullPage.js and Advanced Custom Fields integration je prvi puta viđen na bbird.me.

If you check the clipboard.js website, it says “No dependencies”. This means that we will not have to add jQuery or any other library for clipboard.js to work (although in WordPress case, this is no big deal because most websites load jQuery anyway, with or without the reason to do so ).

So let’s load the main library file:

add_action('wp_enqueue_scripts', 'load_clipboard_script');

function load_clipboard_script() {
    wp_enqueue_script('clipboard', get_stylesheet_directory_uri() . '/js/clipboard.min.js');

}

The next step is to initialize new object like this:

var clipboard = new Clipboard('.copy-letter-button');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });

I like to keep things in their own script files, so we need to enqueue this one as well:

function load_clipboard_initialize_script() {      
        wp_enqueue_script( 'clipboard-initialize', get_stylesheet_directory_uri() . '/js/clipboard.footer.js', array(), '1.0.0', true);
}
add_action( 'wp_enqueue_scripts', 'load_clipboard_initialize_script' );

For my own convenience, I set this script to load in footer, hence the “true” keyword.

And now we need some HTML:

<button class="copy-letter-button" data-clipboard-action="copy" data-clipboard-target="#copyme">South Tyrol</button>

<div id="copyme">
South Tyrol (occasionally South Tirol) is the term most commonly used in English for the province, and its usage reflects that it was created from a portion of the southern part of the historic County of Tyrol. German and Ladin speakers usually refer to the area as Südtirol; the Italian equivalent Sudtirolo (sometimes spelled Sud Tirolo) is becoming increasingly common
</div>

You can easily recognize .copy-letter-button class, which connects the button with clipboard object, while data-clipboard-target does the rest. As you can see in my example, it needs to match the <div> or any other element with corresponding ID which contains the text you want to have copied into clipboard. Also, data-clipboard-action can be set to either cut or copy, but cut will work only on some form elements <textarea> e.g).

Make sure you check my Codepen example to see this in action.

Post How to copy text from website to clipboard je prvi puta viđen na bbird.me.

Documentation on the website is quite extensive and explains everything there is about the library, but just in short, this is how it goes:

Load chart.js script, you can download it locally or use CDN link. After that, insert the global chart configuration – this is the code which starts with…

Chart.defaults.global = {
    // Boolean - Whether to animate the chart
    animation: true,

    // Number - Number of animation steps
    animationSteps: 60,

    // String - Animation easing effect
    // Possible effects are:
    // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
    //  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
    //  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
    //  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
    //  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
    //  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
    //  easeOutElastic, easeInCubic]
    animationEasing: "easeOutQuart",

    // Boolean - If we should show the scale at all
    showScale: true,

    // Boolean - If we want to override with a hard coded scale
    scaleOverride: false,

    // ** Required if scaleOverride is true **
    // Number - The number of steps in a hard coded scale
    scaleSteps: null,
...

And now you can choose the chart – all you need to do is add data structure for any of the charts:

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
...

The next step is to initiate the chart:

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Line(data);

And then use HTML canvas element where the script will draw the chart:

<canvas id="myChart" width="400" height="400"></canvas>

And that’s all. Have a look at my CodePen example with a working chart. I used example from the website documentation, with only difference that I activated the responsive mode (you can find it in global settings).

Post Creating responsive charts with JavaScript je prvi puta viđen na bbird.me.