Development – Page 16

Make Bootstrap Columns All the Same Height

HTML:

<div class="container">
<div class="row is-flex">
<div class="col-sm-4">
<div class="box">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a class="btn btn-primary" href="#">Link 1</a></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a class="btn btn-primary" href="#">Link 2</a></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Ttitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<a class="btn btn-primary" href="#">Link 3</a></div>
</div>
</div>
</div>

CSS:

.row.is-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

Solution 2 using table

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

More Different Tricks on How to Make Bootstrap Columns All the Same Height: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height

March 1, 2017January 29, 2022

Get page template ID – WordPress

Back End, Development, WordPress Functions and Hooks

Get the page ID with a page template assigned to it

$sql = "select post_id from $wpdb->postmeta where meta_key like '_wp_page_template' and meta_value = 'template-products.php'";
$result = $wpdb->get_results( $sql );
foreach ( $result as $value ) {
    $page_id = $value->post_id;
}
wp_reset_query();

February 15, 2017January 29, 2022

Go To an element – smooth scrolling

Development, Front End, jQuery / JavaScript

Go To Top smooth scroll

$('a[href^="#"]').click(function() {
    $('html, body').animate({
        scrollTop: $("body").offset().top
    }, 700);
});

Smooth scroll to an element ID on the page

$("#clickedElement").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementID").offset().top
    }, 700);
});

December 22, 2016January 29, 2022

Set the same boxes height on page

CSS, Development, Front End

Set the same boxes height on a page on load and on resize. Check the maximum bucket height and set all buckets the same max height.

var $window = jQuery(window);
function bucket_boxed_height() {
        var bucket_boxed = $('.bucket-box');
        var Max_bucket_height = 0;
        var windowsize = $window.width();
        if (windowsize > 991) {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
                if (Max_bucket_height < $( this ).innerHeight()) {
                    Max_bucket_height = $( this ).innerHeight();
                }
                console.log('innerHeight = ' + innerHeight);
            });
            bucket_boxed.each(function( index ) {
                $( this ).innerHeight(Max_bucket_height);
            });
        }
        else {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
            });
        }
}

bucket_boxed_height();

// Bind event listener
jQuery(window).bind('resize', bucket_boxed_height);

December 22, 2016January 29, 2022

Advanced Custom Field custom field to select one or many Gravity Forms

ACF, Back End, Development

This is a WP Advanced Custom Field plugin custom field to select one or many Gravity Forms. This provides a field that lets you select from a list of active Gravity Forms https://github.com/stormuk/Gravity-Forms-ACF-Field

Installation

This add-on can be treated as both a WP plugin and a theme include.

Plugin 1. Copy the ‘Gravity-Forms-ACF-field’ folder into your plugins folder 2. Activate the plugin via the Plugins admin page

Include 1. Copy the ‘Gravity-Forms-ACF-field’ folder into your theme folder (can use sub folders). You can place the folder anywhere inside the ‘wp-content’ directory 2. Edit your functions.php file and add the code below (Make sure the path is correct to include the acf-gravity_forms.php file)

include_once('acf-gravity_forms.php');

Using the field

The field lets you pick one or many fields.

The data returned is either a Form object, an array of Form objects or false if an error occurred.

If you have selected a single form and you want to display the form on the page, you can use:

<?php 
    $form_object = get_field('your_form_field');
    gravity_form_enqueue_scripts($form_object['id'], true);
    gravity_form($form_object['id'], true, true, false, '', true, 1); 
?>

<?php 
    $form_object = get_field('your_form_field');
    echo do_shortcode('[gravityform id="' . $form_object['id'] . '" title="true" description="true" ajax="true"]');
?>

You can find out more about the gravity_form method to embed a form on a page in their documentation

If you are using the field to select multiple forms, you will have to iterate over the array. You can then use the form object as you like:

<?php
    $form_objects = get_field('your_forms');

    foreach($form_objects as $form){
        echo $form['title'];  
    }
?>

November 29, 2016January 29, 2022

Custom Scrollbar (Always Showing)

CSS, Development, Front End

Note: can be applied to general page
Note 2: If applied to specific element/container a position absolute may be necessary
CSS

p.customClass {
  overflow-y: scroll;
}

p.customClass::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

p.customClass::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(98, 93, 78, 0.75);
  border: 2px solid #eee;
}

p.customClass::-webkit-scrollbar-corner {
  background-color: transparent;
}

Category: Development

Flexbox – the same columns height