Changes

Just gave BigWilliam.com a facelift. Still more changes to come. Enjoy…

Real-time Internet Data

Check out this interesting chart from pennystocks.la that shows just how much data is getting transferred every second over some major internet-based companies:


Click the animation to open the full version (via PennyStocksLab).

jQuery fire event AFTER window resize is completed

I found this useful snippet here on Stack Overflow, super useful for when you need to fire an event only after the user is done resizing the window, or other events. Works great.

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();


// Usage
$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});

Auto distribute footer widgets in WordPress, with Bootstrap (roots theme)

Here’s a code snippet to help auto distribute widgets in your footer. It will automatically add the correct Bootstrap class to each widget, so if you have 2, the classes will be “col-sm-6″ but if you have 3 widgets then the classes will be “col-sm-4″, etc.

This is pretty specific for the environment I work in, which is WordPress, using the Roots theme starter and Bootstrap. First, here is the Javascript. Place this in _main.js (if using roots).

// Distribute footer widgets evenly
var footer_widgets = $('footer .row > .widget'),
    widget_count   = footer_widgets.length,
    col_num        = Math.floor(12 / widget_count);

footer_widgets.each(function(index, val) {
    $(this).addClass('col-sm-' + col_num);
});

Here is what the HTML/PHP looks like. This code is found in templates/footer.php (roots theme). Notice that I wrap it in the “row” bootstrap class…

<div class="row">
    <?php dynamic_sidebar('sidebar-footer'); ?>
</div>

 

Turn off responsive behavior for Bootstrap 3

Bootstrap 3 comes as a responsive layout out of the box – which is great. But sometimes you need to make a site which is not responsive. Basic instructions are found here, but they don’t say how to disable the navbar responsive behaviors.

So, that’s why I’m writing this. It’s fairly simple, so here’s how you do it…

  1. Remove the meta from the header
  2. Set a static container width
  3. Set the media query breakpoints (to prevent navbar from collapsing)

Step 1: Remove the meta from the header

Go to the header of  your site (usually head.php or header.php in WordPress) and comment out this line:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Step 2: Set a static container width

Add this in your css file. Just create a selector like this:

.container { width: @container-desktop !important; }
note: @container-desktop is defined in variables.less
You could also just use any number you like, i.e. 940px

Step 3: Set the media query breakpoints (to prevent navbar from collapsing)

Find the variables.less file inside bootstrap, and starting around line 214 you will see the variables that control when the @media queries fire in your CSS. Change the mobile screen variables to 0. You can leave the desktop values, or any value which matches the container you just set.

/**
 * File: bootstrap/variables.less
 * The following starts around line ~214, but has been
 * reduced here just to show what was changed.
*/
// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  0; //480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  0; //768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

Optionally: You could accomplish step 3 by just changing the container sizes in variables.less (line 629) to just be a single size you specify (i.e. 960px;)

Notes

When doing a non-responsive site, I generally like to still keep the large and medium media queries functioning in Bootstrap, just so that the site expands a little for people with larger screens. The difference in sizes is usually not significant enough to create extra work, but it also makes the site a little nicer for different screens.

Only Coin, I just got one

So I just pre-ordered an Only Coin as a Christmas Present for someone. It’s a really cool idea that I think will really be fantastic. Check out the video and then if you want one, the link below will take you to their website (it’s an affiliate link, so that if you buy one, I’ll get $5 off my order). It’s a new company so they are trying to get the word out.

Click Here to check it out (onlycoin.com)

WordPress Query Posts

In wordpress there’s a few different ways of Querying the posts. Sometimes it can be confusing on which one does what. This diagram, by Rarst is a pretty cool way to see what’s going on:
query_functions

Auto center elements with JavaScript

Here’s a little function I wrote that will auto-center any element with a class of “js-center”. It’s useful for centering anchor tags, or span tags (elements that are inline with the content) when their content is dynamic. So if you change the length of text inside a button, it will still be centered inside the box element.

$('.js-center').each( function() {
    var containerWidth = $(this).parent().width(); // not including padding
    var elementWidth   = $(this).outerWidth(); // including padding
    var marginLeftValue = containerWidth/2 - elementWidth/2;
    
    $(this).css('margin-left', marginLeftValue);
});

So, for example, the HTML to demonstrate this might look like this:

<div style=”width:500px; height:250px;”>
<a href=”#” class=”js-center”>This button will auto-center</a>
</div>

Override WooCommerce Styles Semantically

    // This tip solves the issue of WooCommerce stylesheets being loaded after your custom ones.
    
    // Which means that if you need to override any WooCommerce styling you have to add '!important'
    // after each CSS declaration.
    
    // But changing the order of how the sytlesheets are loaded means your custom stylesheet cascades properly 
    // and overrides WooCommerce styles.
    
    function my_custom_scripts() {
        
        // place wooCommerce styles before our main stlesheet
    	if ( class_exists('woocommerce') ) {
    		wp_dequeue_style( 'woocommerce_frontend_styles' );
    		wp_enqueue_style('woocommerce_frontend_styles', plugins_url() .'/woocommerce/assets/css/woocommerce.css');
    	}
        
        // register and enqueue your custom styles here
    }
    add_action('wp_enqueue_scripts', 'my_custom_scripts');