jQuery Action after Page and Assets Load

Usually the $(document).ready(function(){}); is good enough when you need an action after a page has loaded in the browser. However, this approach doesn’t account for images and other assets that may still be loading after code has already completely loaded.

To wait for all assets to complete loading, we will use $(window).on(“load”, function() {});. This will wait until the browser window is actually done loading. This works great for a loading screen.

Advertisements

Corey’s Guac

  • 2 avocados
  • 1 large lime
  • onion – ¼ to 1/3 c diced
  • garlic – 4 cloves minced
  • tomato – ½ cup diced
  • jalapeno – 1 small minced
  • salsa – 3 spoonfulls
  • cottage cheese – 3 spoonfulls
  • garlic powder – to taste
  • seasoned salt – to taste
  • pepper – to taste

Directions

Mash the avocado and squeeze ½ the lime over it, stir. Pile all of the other ingredients into the bowl and stir it up. Squeeze the other ½ of the lime on top and give it a slight stir.

‘dist’ Folder not making it to Production

The Problem

You’re using Sage (8.5.x) and when you push to production the styles on the site are not displaying. It’s because all the stylesheets and CSS maps are not actually making it to Production.

The Solution

Sage has its own .gitignore file in its root directory. This threw me off for a bit because I had my own .gitignore in the WordPress root directory and it didn’t occur to me at first that Sage would have its own.

Open up Sage’s .gitignore and remove ‘dist’ and save. When you go to push your code, you should see ‘dist’ and its files ready to be committed.

 

The Incredible Expanding Empty Space

The Problem

Some pages didn’t have enough content and the footer would start floating up and the site designs didn’t call for a sticky footer.

My Solution


"
"


    var header_height = jQuery("header").height();
    var content_height = jQuery(".wrap").height();
    var footer_height = jQuery(".footer-container").height();
    var window_height = jQuery(window).height();
    var all_content_height = header_height + content_height + footer_height;
    var gap;
    
    if (all_content_height < window_height) {
        gap = window_height - all_content_height;
        jQuery('.void-balloon').css("height",gap)
    } else {
        console.log('no content gap detected');
    }

How to Restart PiHole after a Reboot

You’re enjoying PiHole and then boom, something happens. System crashes. Power goes out. Water balloon hits the circuit breaker. You boot your Pi back up, but your PiHole is no longer runnning. You long for PiHole’s ad blocking capabilities. Let’s get your PiHole back up and running.

Fire up that command line.

pihole -d

The -d flag is to look for issues automatically.

ACF Hide Field if Empty

How to ignore or hide a field if it has no value?

This comes in handy with fields that are not required by the CMS user to fill out and will sometimes remain blank.

<?php if (get_field('email')): ?> 
   <?php the_field('email'); ?> 
<?php endif; ?>

Or if it is a sub field inside of the repeater loop.

<?php if (get_sub_field('email')): ?> 
   <?php the_sub_field('email'); ?> 
<?php endif; ?>

CSS Classes for Hiding on Desktop and Mobile

Here are some CSS classes for hiding a component on desktop and/or mobile. This seems a little dirty since you may ideally want components that are responsive. However, with some designs, you don’t have choice.


// LG =>1200px
@media (min-width:1200px){
   .hide-on-desktop {
      display: none;
   }
}

// MD 992-1199px
@media (min-width:992px) and (max-width:1199px) {
   .hide-on-desktop {
      display: none;
   }
}

// SM 769-991px
@media (min-width:769px) and (max-width:991px) {
   .hide-on-mobile {
      display: none;
   }
}

// XS-Tablet 321-768px
@media (min-width:321px) and (max-width:768px) {
   .hide-on-mobile {
      display: none;
   }
}

// XS-Phone =<320px
@media (max-width:320px) {
   .hide-on-mobile {
      display: none;
   }
}

ACF Repeater Loop Ready for HTML

Why is this needed?

I use this loop all the time and I always have to close out each line of PHP in order to pepper it with my markup. So this is just a way to save a little time.

<?php if( have_rows('repeater_field_name') ): ?>
   <?php while ( have_rows('repeater_field_name') ) : the_row(); ?>
      <?php the_sub_field('sub_field_name'); ?>
   <?php endwhile; ?>
<?php else: ?>
   <!-- there are no rows -->
<?php endif; ?>