(Javascript) Super simple slider/carousel/slideshow

Here’s how you can make a super simple slideshow that changes slides on a timer interval. You could easily edit it so any other event, like a mouse click, will trigger the slide() function.

You can see it in action HERE

HTML

<div class="slider">

    <div class="slide red">
        <p>THIS IS SLIDE 1</p>
    </div>

    <div class="slide blue">
        <p>THIS IS SLIDE 2</p>
    </div>

    <div class="slide green">
        <p>THIS IS SLIDE 3</p>
    </div>

</div>

CSS

.slider {
    width: 500px;
    height: 300px;
    margin: 0 auto;

    /* DON'T CHANGE THESE */
    position: relative;
    overflow: hidden;
}

.slide {
    /* DON'T CHANGE THESE */
    position: absolute;
    width: 100%;
    height: 100%;
}

/** ONLY FOR STYLING THE EXAMPLE SLIDES */
.slide p {
    color: #FFF;
    text-align: center;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

.green {
    background: green;
}

jQuery

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
    // Configurable values
    slider = $('.slider'); // Slider element
    slideDuration = 3000; // Duration of each slide in milliseconds
    slideSpeed = 1000; // Speed of slide animation in milliseconds (must be equal of less than slideDuration)


    width = slider.width();
    slider.children().hide().css({left: width});
    slider.children(':first').show().css({left: 0});

    // Slide in from the left
    $.fn.slideIn = function () {
        $(this).show().animate({
            left: "-=" + width
        }, slideSpeed / 2);
    }

    // Slide out to the left
    $.fn.slideOut = function () {
        $(this).animate({
            left: "-=" + width
        }, slideSpeed / 2, function () {
            $(this).hide().css({left: width});
        });
    }

    // Main slide function
    function slide() {
        currentSlide = slider.find('div:visible:first');
        nextSlide = (!slider.children(":last").is(":visible")) ? currentSlide.next() : slider.children(':first');

        currentSlide.slideOut();
        nextSlide.slideIn();
    }

    // Timer function
    window.setInterval(function () {
        slide();
    }, slideDuration);
</script>

And of course you could make this dynamic by spitting out the slides from a database… for example like this:

<div class="slider">

<?php foreach ($slides as $slide) { ?>

    <div class="slide">
        <p><?php $slide['content'] ?></p>
    </div>

<?php } ?>

</div>

(PHP) Get a list of run database queries in Laravel

This is great if you want to see what queries are actually run when using Eloquent.

        // Get all querys run
        $queries = DB::getQueryLog(); 

        // If you want to sort them by time this works
        usort($queries, function ($a, $b) {
            return $a['time'] &amp;lt; $b['time'];
        });

        // Print them on screen in a readable way
        echo '&amp;lt;pre&amp;gt;';
        print_r($queries);
        echo '&amp;lt;/pre&amp;gt;';

(PHP) Log Laravel execution time to console

Put this in app/start/global.php to get Laravels execution time to the browser console log.

L4

$start = microtime(true);

App::finish(function() use ($start) {
    echo &quot;&lt;script&gt;console.log('App finish: &quot;.round((microtime(true) - $start) * 1000, 3).&quot; ms')&lt;/script&gt;&quot;;
});

This works with L5:

This page took {{ (microtime(true) - LARAVEL_START) }} seconds to render

(HTML) Form element arrays

Sometimes you might want to group form elements in arrays.
Here’s a way to do that:

<form>
    <input type="text" name="textboxes[]">
    <input type="text" name="textboxes[]">
    <input type="text" name="textboxes[]">
</form>

The structure of the $_POST array will then be:

Array
(
    [textboxes] => Array
        (
            [0] => value 1
            [1] => value 2
            [2] => value 3
        )

)

(CSS) How to center a div without width

I needed to center a div with dynamic content, so I couldn’t set a fixed width.
Since margin: 0 auto; really won’t do anything if the element doesn’t have a fixed width you can solve it like this:

HTML

<div id="container">
   <div class="centered">My dynamic content, that will be centerd</div>
</div>

CSS

.centered {
   margin: 0 auto;
   display: table;
}

(PHP) Allow any delimiter in CSV file

In a Laravel app I made the users would upload CSV files. The problem was that fgetcsv only allows a single delimiter character, and it needs to be defined.

The problem with that is that when a user exports a CSV from MS Excel – it could end up using a wide array of delimiters depending on the locality settings in windows.  It kind of sucks that MS won’t let the user choose this on export, but that’s how it is.

So I solved it the quick and easy way, by making a function that simply replaces any delimiter character to  my desired delimiter. (Note that the tab character is in double quotes, since it won’t be interpreted as tab otherwise):

    /**
     * Will replace a number of CSV delimiters to one specific character
     * @param $file     CSV file
     */
    private function replaceDelimiters($file)
    {
        // Delimiters to be replaced: pipe, comma, semicolon, caret, tabs
        $delimiters = array('|', ';', '^', "\t");
        $delimiter = ',';

        $str = file_get_contents($file);
        $str = str_replace($delimiters, $delimiter, $str);
        file_put_contents($file, $str);
    }