The Ramblings of a Front-End Developer

I was messing with different ways of implementing forms of load masking and came across the site imagesLoaded So decided to have a little play about. First I programmatically add the JS’ needed to get this to work. function theme_preprocess_page(&$vars) { // Implement Simple image load masking drupal_add_js("https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js", array('scope' => 'header', 'type' => 'external', 'weight' => -1)); drupal_add_js(drupal_get_path('module', 'theme') . '/js/image-lazy-load.js', array('scope' => 'footer', 'weight' => 1, 'preprocess' => FALSE)); } I added a few additional options when adding the JS via drupal_add_js. »

I had to write a little bit of PHP to convert mm into feet and inches. $mm_value = 2590.00; $convert_to_metres = floor($mm_value) / 1000; $convert_to_inches = $convert_to_metres * 39.3701; $feet_value = floor( $convert_to_inches / 12 ); $inches_value = ( $convert_to_inches % 12 ); print $feet_value . '\' ' . $inches_value . '"'; Should give you 8’ 5” ;) »

I had recently been asked to implement a custom Google Map for a client in which there would be multiple markers for different locations, but also a select list of all the locations that the user can click on and the map in turn would focus on. Now in my workplace, we use the Drupal GetLocation module to deal with any Google Maps on the sites. I did some some digging around, messing with views and (a lot) of searching on online and I couldn’t figure out a way, via GetLocations, to achieve this. »

If you just want the function and don’t want to read the rubbish of why I used it then see below my good chum… Use Case I have recently been working on a template built on Drupal, which allows the user to select their own colours using the color module. One feature within the design is to have certain elements that would have a background/border colour that contrasts the background colour select by the user. »

You can programmatically add extra classes to the body tag via the themes template.php. function themename_preprocess_html(&$variables) { // Add a extra class to the body element $variables['classes_array'][] = 'body__bg-color'; } »

I’ve found recently that Google Maps doesn’t play well within tabbed content. Google’s T&C demands that the map be visible at all times, if their software detects that the map request is hidden then it aborts the load which looks like what is happening with this. To fix this we will need to trigger the resize event when you click on the tab. Easy enough but when using Drupal and the module Getlocations we need make sure the JS including the resize is being called after the Getlocation JS, which is initialising the Google Map. »

I’ve been tinkering with VueJS lately and one function that I’ve been using a lot recently is this toTitleCase function. Bring in dynamic content from an API results sometimes in text that I want to be a heading coming through as lowercase. So this little function with change it to title case for me. function toTitleCase(str) { return str.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }); } toTitleCase("web design"); Result: Web Design Theres also a little fiddle for this here. »

A small command but this has come into it’s own quite recently for me. Saves time having to import databases via MySQL each time. $ drush sql-cli < ~/my-sql-dump-file-name.sql »

I needed to match the height of multiple div’s that contained an image and text, but the amount of text was never a set amount. I’ve created a fiddle for this. See it here // Fire the function on window resize $(window).on('resize',matchHeight); // Set up function function matchHeight() { // If the window width is tablet or desktop if ($(window).width() > 767 ) { // Reset the height for resize $('. »

I had a recent project where the page title has a background image and said image was to fade as the user started scrolling down the page. The JQuery code below is who I archive it but you can go my JSfiddle to see it in action: Fiddle me this // Fade out the page title image as user scrolls var fadeStart = 0; // 0 scroll or less will equiv to 1 opacity var fadeUntil = 300; // 300px scroll or more will equiv to 0 opacity var fading = $('. »