Posts Categorized: Code Snippets
Media Query Sass Mixin [code snippet]
Category: Code Snippets
The sass mixin below has default variable values for common breakpoints. But this mixin also allows you to write a custom value if needed.
How Do You Get the URL Parameters and Append to Href or Src of Another Element?
Category: Code Snippets
Do you want to grab the url parameters and pass them to a button href or iframe src? This is common when you are running a paid ad campaign to a landing page that links to a form on another page. You want to track the source of the form submission by duplicating the url… Read more »
Console Log JavaScript Objects to See Data Structure [code snippet]
Category: Code Snippets
When working with JavaScript objects and arrays it is often tricky to reference the correct index of the data you need. These console functions allow you to visually see the structure so that job is a bit easier. Writes your object as a data table and also dropdown menu console.table($yourObject); Writes your object as a… Read more »
Uncaught TypeError: Cannot read property ‘msie’ of undefined when upgrading to WordPress 5.5
Category: Code Snippets
Recently when upgrading an older site to WordPress 5.5 I noticed a javascript error in the console that read Uncaught TypeError: Cannot read property ‘msie’ of undefined. If you have a plugin or script that relied on an older version of jQuery it will no longer work because WordPress updated their jQuery version. In order… Read more »
Throttle or Delay JavaScript Functions When Window is Resized [code snippet]
Category: Code Snippets
Underscore.js has a popular method for throttling and debouncing functions to prevent them from firing multiple times when a window is resized. I found this delay function that works for times when you don’t need to load the entire underscore library to achieve a similar effect.
HubSpot onFormSubmit and Other JavaScript Events
Category: Code Snippets
When embedding a HubSpot form using the JavaScript script tag it is common to want to apply some of your own functions after the form has submitted. This can be used for adding conversion pixels for Google Ads and Facebook after the form is submitted. Another use case is modifying the form markup after the… Read more »
Web Accessibility Evaluation Tool Code Snippets
Category: Code Snippets
Below are some code snippets to help resolve accessibility errors found using the WAVE accessibility evaluation tool.
How to Change Favicon with JavaScript
Category: Code Snippets
This code comes in handy when you don’t have access to the head of the page and need to change the favicon. (function() { var link = document.querySelector(“link[rel*=’icon’]”) || document.createElement(‘link’); link.type = ‘image/x-icon’; link.rel = ‘shortcut icon’; link.href = ‘https://yourdomain.com/favicon.ico’; document.getElementsByTagName(‘head’)[0].appendChild(link); })();
How to Add Retina Images to HubSpot Email and Page Templates
Category: Code Snippets
HubSpot CMS handles responsive images by default by creating different image sizes for different screen widths (using srcset). But with retina display images, you want to load higher resolution images and scale them down to 100%. Thankfully you can add ?noresize to the end of your image source to disable this dynamic resizing. In the… Read more »
How to Fire a jQuery Function When the Page is Loaded and Resized
Category: Code Snippets
When building responsive websites you often want to run a script when the page loads. But when you resize the window the layout breaks. You can use the on method to run your code if the page loads or has been resized. // run on page load and when the window is resized $(window).on(“load resize”,function(e){… Read more »