JavaScript Copy Button

Goal

To create a copy button for my Math.SE comment template in order to save the trouble of copying and pasting.

My first attempt

I put the boilerplate inside a Markdown codeblock to prevent them from getting interpreted by Hugo’s Markdown parser. Under each codeblock, I placed the copy button.

Comment boilerplate goes here ...

Another comment boilerplate goes here ...

My page’s original layout

$(document).ready(function() {
  $('.copyBtn').click(function() {
    copy($(this).prev().children())
j  });
});

function copy(selector) {
  var screenTop = $(document).scrollTop();
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null) })
       .focus();
  document.execCommand("copy");
  $temp.remove();
  $('html, body').scrollTop(screenTop);
}

static/js/copyBtn.js at Git tag copyBtn0

[Read More]

Fix Hugo Table of Contents

Removal of wrapping HTML tag in JavaScript

Background (TL;DR)

While setting up the new version of Staticman for my demo GitLab pages, I’ve read developers’ documentations, setup guide and some community blog posts so as to come up with my own guide. It’s originated and inspired from a variety of sources, and refined according to hours of testing. Consequently, despite the original intention to keep things simple, I’ve finally come up with a post with over a thousand words.

To pass my ideas in this post to visitors, it’s better that they have an overview of the contents before actually looking into the details. Therefore, a table of contents is nice-to-have feature for this blog.

[Read More]

Flying Grizzly's HTML Form Submission Error

Filling in hidden missing fields

Problem

I would like to submit Flying Grizzly’s form. I filled in every blanks and then I clicked the “submit” button below. I was greeted with a MISSING_REQUIRED_FIELDS error within a second.

{
    "success":false,
    "data":["replying_to"],
    "rawError":{
        "_smErrorCode":"MISSING_REQUIRED_FIELDS",
        "data":["replying_to"]
    },
    "errorCode":"MISSING_REQUIRED_FIELDS"
}

Discussion

The error code suggested that the form fields sent should be inspected.

[Read More]
HTML  form