Flexible, fast and friendly unit selectors in Beaver Builder

Watch the video

Get the code

jQuery(document).ready(function($){
   
    // cm inches units-selector
    if(jQuery('body.fl-builder-edit').length) // if BB is active
        return; // dont do anything, let em build
    
    // check for unit preference we called it wbsUnit
    if(localStorage.wbsUnit)
        if(localStorage.wbsUnit == 'cm')
        {
            jQuery('.dims-in').hide();
        }
        else
        {
            jQuery('.dims-cm').hide();
        }
    else
        jQuery('.dims-in').hide(); // if nothing saved, show cm, it's Canada dammit
    
    // handle click
    jQuery('#units-selector .fl-button').on('click',function(e){
        e.preventDefault(); // top click scroll or anything
        if(jQuery(this).find('.fl-button-text').text() == 'cm') // if the text in the button is 'cm'
        {
            jQuery('.dims-cm').show(); // hide cm
            jQuery('.dims-in').hide(); // hide inches
            localStorage.wbsUnit = 'cm'; // save it to localStorage for future page visits
        }
        else
        { // the opposite for inches
            jQuery('.dims-cm').hide();
            jQuery('.dims-in').show();
            localStorage.wbsUnit = 'in';
        }
    });
    //booyah 
});

Leave a Comment





Level up your Beaver Builder skills

Join 3,264 Beaver Builders and get our monthly-ish dish

We've got a million ideas that we've implemented on over 300+ BB enabled websites. Pop in your email below, and we'll let you know when a new post or plugin is available :)

Newsletter

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

Spam sucks.