HTML5 Logo

Disable Arrows on Number Inputs

HTML5 introduced some interesting form element changes. Inputs can now have an input type of “number”.

Web Browsers set character input restrictions and validation parameters for this input type. It will restrict to characters 0-9. This is great because it reduces the code overhead required to ensure a user enters the correct data. It will also show a numeric keypad on devices with dynamic keyboards. You should always have server side form validation. By using a number input you’re not relying entirely on JavaScript for client side validation.

Unfortunately there are now a couple of caveats to using the number input, depending on your use case. Firefox and Webkit browsers will show an Up and Down arrow for the user to increment the number. These can get in the way of styling or cause user error. The other issue is that this increment can be adjusted with the Mouse Wheel and the Up and Down keys.

The below code will allow you to remove the increment arrows and maintain the other benefits of a number input.

/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}
jQuery(document).ready( function($) {

    // Disable scroll when focused on a number input.
    $('form').on('focus', 'input[type=number]', function(e) {
        $(this).on('wheel', function(e) {
            e.preventDefault();
        });
    });

    // Restore scroll on number inputs.
    $('form').on('blur', 'input[type=number]', function(e) {
        $(this).off('wheel');
    });

    // Disable up and down keys.
    $('form').on('keydown', 'input[type=number]', function(e) {
        if ( e.which == 38 || e.which == 40 )
            e.preventDefault();
    });  
      
});
CSS3 Logo

Ticker Using CSS Transitions & jQuery

The other day I was looking for a lightweight ticker to show some special offers. I couldn’t do this entirely with CSS (CSS3 Transitions). Some JavaScript is required to toggle an active state. I also wanted the ticker to pause when you mouse over the element. I forgot that I could use the Carousel built into Bootstrap, which the site does use, so I wrote my own jQuery plugin. Rather than delete the plugin, I thought I would share it.

The HTML is simple. You’ll need a wrapping element with some children. Give the wrapping element a class for its role ‘ticker’. For each of the children you want it to toggle the active state, add class ‘item’. The first item you want to show should be given the class ‘active’.

<div class="offers ticker">
    <ul>
        <li class="item active">10% off your first purchase when you <a href="#">sign up</a>!</li>
        <li class="item">Free Shipping on orders over $100!</li>
    </ul>
</div>

Next we need some CSS. There is many transitions you can create. I want a crossfade and a vertical movement. I have provided just what is required to make the animation work.

.offers {
    position: relative;
}

.offers .item {
    position: absolute;
    top: 0;
    -webkit-transition: -webkit-transform .3s ease-in, opacity .3s linear;
    -moz-transition: -moz-transform .3s ease-in, opacity .3s linear;
    -ms-transition: -ms-transform .3s ease-in, opacity .3s linear;
    -o-transition: -o-transform .3s ease-in, opacity .3s linear;
    transition: transform .3s ease-in, opacity .3s linear;
}

.offers .item:not(.active) {
    -webkit-transform: translateY(-100%);
    -moz-transition: translateY(-100%);
    -ms-transition: translateY(-100%);
    -o-transition: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
}

And then finally, the JavaScript. I wrote this using jQuery, which means you will need to add this before my plugin if its not already there.

/*!
 * TSG Ticker Plugin v1.0.0
 * http://www.thatstevensguy.com/
 *
 * Released under the MIT license.
 * Copyright 2015, That Stevens Guy
 */

(function( $ ) {

    $.fn.ticker = function( options ) {
        
        var settings = $.extend( {
            timeout     : 5000,
            targetClass : '.item',
            activeClass : '.active'
        }, options );
        
        this.each( function() {
                        
            var ticker = $( this );
            var interval;
            
            $( ticker ).on( 'mouseover', function() {
                pause( ticker );
            });
            
            $( ticker ).on( 'mouseout', function() {
                start( ticker );
            });
            
            function start()
            {
                interval = setInterval( next, settings.timeout );
            }
            
            function pause()
            {
                clearInterval( interval );
            }
            
            function next()
            {
                var target;
                target = $( ticker ).find( settings.targetClass + settings.activeClass ).next();
                target = target.length ? target : $( ticker ).find( settings.targetClass ).first();
                $( ticker ).find( settings.targetClass + settings.activeClass ).removeClass( settings.activeClass.replace('.', '') );
                $( target ).addClass( settings.activeClass.replace('.', '') );
            }
            
            start( this );
            
        });       
        
    };

}( jQuery ));

Then use this to execute the plugin.

jQuery(document).ready( function($) {
    $('.ticker').ticker();
});

If you are using Bootstrap. You can forget about the jQuery plugin I created. But you can use the CSS, just change class ‘ticker’ to class ‘carousel’ and add the other attributes below.

<div class="offers carousel" data-ride="carousel" data-interval="5000">
    <ul>
        <li class="item active">10% off your first purchase when you <a href="#">sign up</a>!</li>
        <li class="item">Free Shipping on orders over $100!</li>
    </ul>
</div>

All you need to do now is add your own finishing touches!

Cloudflare Logo

Use CloudFlare to Secure WordPress by Country Codes

Firstly, check that you have the IP Geolocation option enabled on CloudFlare.

The most efficient way to do this with PHP would be to place the code below in the top of your wp-login.php, but WordPress will overwrite this file when it updates. The next best position is at the top of wp-config.php. If you follow the way WordPress loads, wp-login.php will require wp-load.php first, then after 4 minor lines of code, it will then get wp-config.php.

/**
 * CloudFlare - Connecting IP - for wp-config.php.
 */
if ( !empty( $_SERVER['REMOTE_ADDR'] ) && !empty( $_SERVER['HTTP_CF_CONNECTING_IP'] ) )
    $_SERVER['REMOTE_ADDR'] = $_SERVER['HTTP_CF_CONNECTING_IP'];

/**
 * CloudFlare - Limit WordPress Login to Australia with Whitelist - for wp-config.php.
 * It is best to bypass for IPv6 unfortunately, unreliable country code from CloudFlare at the moment.
 */
$ip_whitelist = array( '::1', '127.0.0.1' );

if ( in_array( $_SERVER['PHP_SELF'], array( '/wp-login.php' ) ) && !in_array( $_SERVER['HTTP_CF_IPCOUNTRY'], array( 'AU' ) ) )
{
    if ( !in_array( $_SERVER['REMOTE_ADDR'], $ip_whitelist ) && !preg_match( '/^([0-9a-f\.\/:]+)$/', $_SERVER['REMOTE_ADDR'] ) )
    {
        header( 'Location: /' );
        exit;
    }
}

This is just a different interpretation of my friends script. My version does not allow WordPress to waste CPU before booting the IP from the login page. It also allows for an IP whitelist to bypass this for trusted IP addresses.

It is best to pair this with a plugin like Simple Login Lockdown. There are also some useful .htaccess rules you can use, but I won’t go into that here.