Martin Carlin

I was using the excellent slick Carousel and needed to implement next and previous buttons to move the carousel in the desired direction, but also had to show and hide these buttons depending on the current slide as I didn't want to use the infinite functionality in this scenario.

First off, initialise the plugin using your desired options, I'd say that these are the minimum requirement but in this case I also had arrows set to false, dots set to true and was also using the lazyLoad option:

    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1

Then use the slick api to move the carousel when buttons are clicked:

$('.next').click(function() {

$('.previous').click(function() {

and, finally:

$('.steps').on('beforeChange', function(event, slick, currentSlide, nextSlide) {

    if (nextSlide == slick.slideCount - 1) {
    } else if (nextSlide != slick.slideCount - 1 && nextSlide != 0) {
    } else if (currentSlide == 0 || nextSlide == 0) {


I used beforeChange because using the afterChange meant the showing and hiding didn't happen until what felt like to be too late, since the new slide has to be in place before that code is executed.

As you may know, I am using the Bulma flexbox css framework for my personal Ghost theme.

As part of the framework, there are notifications and the framework also provides the ability to include a delete button for the notification, but it is completely static and doesn't do anything - yet.

I also had to add some CSS to fix the button for the notification:

.notification > button.delete {
  border: none;

which is strange as it seems fine on the Bulma site.

In addition to this, I added a new modifier class in the naming convention of the existing classes:

.is-hidden {
  display: none;

This class is then applied to the notification when the delete button is clicked.

To achieve that in jQuery, you can simply use this:

$(document).on('click', '.notification > button.delete', function() {
    return false;

You could optionally remove the element from the DOM completely by chaining the .remove() method, e.g.


See the Pen Bulma CSS Framework - Add Functionality to Dismiss Notifications by Martin Carlin (@martincarlin87) on CodePen.

You Can’t JavaScript Under Pressure is a coding game created by us vs th3m which was popular a couple of weeks ago but I thought I’d post my answers incase anyone was stuck and wanted to find the solution.

function doubleInteger(i) {

    // i will be an integer. Double it and return it.

    // answer
    return i * 2;

function isNumberEven(i) {

    // i will be an integer. Return true if it's even, and false if it isn't.

    // answer
    return  (i % 2) == 0


function getFileExtension(i) {

    // i will be a string, but it may not have a file extension.
    // return the file extension (with no period)
    // if it has one, otherwise false

    // answer (assuming filenames don't have dots in them)
    if (i.indexOf('.') != -1) {
        var extension = i.split('.').pop();
        return extension;
    } else {
        return false;

function longestString(i) {

    // i will be an array.
    // return the longest string in the array

    // answer
    var length = 0;
    var longest;

    for (var count = 0; count < i.length; count++) {
        if (i[count].length > length && typeof i[count] == 'string') {
            length = i[count].length;
            longest = i[count];
    return longest;

function arraySum(i) {

    // i will be an array, containing integers, strings
    // and/or arrays like itself.
    // Sum all the integers you find, anywhere in the nest of arrays.

    var total = 0;

    // answer
    for (var count = 0; count < i.length; count++) {
        if (typeof i[count] === 'number') {
            total += i[count];
        } else if (Array.isArray(i[count])) {
            total += arraySum(i[count]);

    return total;

You might think it’d just be a case of:

$('form input[type="submit"]').attr('disabled','disabled');

but that will prevent the form from submitting because the submit button is now disabled.

A better approach is to add a data attribute to the button and use that to determine if the form has already been submitted:

$('form').submit(function() {
    // when form is submitted for the first time
    // change button text
    // and prevent further form submissions
    if ($('form input[type="submit"]').data('submitted') == '1') {
        return false;
    } else {
        // I've also added a class and 
        // changed the value to make it obvious to the 
        // user that the form is submitting
        // but this is entirely optional
        // and you can customise this as you wish
        $('form input[type="submit"]')
          .attr('data-submitted', '1')


See the Pen jQuery – Prevent Multiple Form Submissions by Martin Carlin (@martincarlin87) on CodePen.