Posts Tagged: Web Development
Want to Receive Email Updates of New Articles About Web Development?
Join My Email NewsletterConsole 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.
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 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 »
How to Visually See What Your jQuery Selection is Selecting
Category: Code Snippets / Tutorials
I was recently working on form validation and wanted to mark a.form-group as successful if it contained a particular icon inside the label. The icon was set using PHP depending if the data existed in the database. I was writing .prev() and .parent() to try and select the wrapping .form-group but it wasn’t working and… Read more »
How to Prevent One Word Lines (widow orphan) In Website Paragraphs
Category: Code Snippets
I am often adding padding to the left and right of paragraphs to force copy down to prevent one word on a line. Or even worse, I add <br> to a word on the line above to prevent the word by itself. But this causes issues with responsive design because the <br> changes position breaking… Read more »
What are the Open Sans CSS Font Weights?
Category: Common Questions
I often want to use different font weights for Open Sans and so am adding them here for quick reference later. Open Sans light font-weight: 300; regular font-weight: 400; semi-bold font-weight: 600; bold font-weight: 700; extra-bold font-weight: 800;
How to Trigger HubSpot Popup Form on Button Click or Page Load
Category: Code Snippets
HubSpot provides the ability to display a pop up form with various triggers (exit intent, after 7 seconds, etc.) But what if you want to show it immediately or when a button is clicked? Below is some javascript to help achieve this functionality. How to use this script Create pop up form Set targeting to… Read more »
Open All Links to PDF files in a New Window
Category: Code Snippets
This finds all of the links pointing to PDF files and opens them in a new window. If you are using Chrome, you will need to enable popups for this to work. $(“a[href$=’.pdf’]”).each(function () { window.open($(this).attr(‘href’),”_blank”); });