Helping you build a better website
(and other interesting web stuff)

Here is how you can preload images which are needed later (e.g. when a hover is performed). You may notice that when replacing an image on the hover state, you get this horrible flicker, that is because the image is loaded as you hover the element. The below code will load the image on page […]

Have you ever tried using jQuery in WordPress and couldn’t find out why it wasn’t working? The reason behind this is simple and is probably not working because your code looks something like this example below:- $(document).ready(function(){ $(“p”).click(function(){ $(this).hide(); }); }); So why does this not work? The reason is that in the console area […]

Today we will show you how to get the selected file name from an input type file using jQuery. On a recent job, we were using a form where a user could add up to 3 images to upload to a contact form on CF7. We styled this to look as follows:- So how do […]

In this tutorial, we will show you how to detect whether you scroll up or down using jQuery which will allow you to perform an action based on the direction of scrolling. Here is how you can achieve this with few very lines of jQuery:- $(function(){ var lastScrollTop = 0, delta = 5; $(window).scroll(function(){ var […]

If you want to know when two elements overlap or collide with each other, then this may be of use to you. This option doesn’t require any plugins which I feel is the better option. Below is a very simple way to detect collision between DOM elements. This can be coupled with a window resize […]

If you are looking to create an animated SVG Hamburger Menu icon then you are in the right place. Today we bring you six different animations which would look great on any production website. It’s all about the added animations to make a website more appealing and look top dollar! Here is a JSFiddle for […]

In today’s tutorial, we’re going to show you how to add a toggle icon next to your password to show/hide the value. The way in which we will be adding this is using jQuery, Bootstrap 4 with Font Awesome. This can be done without Bootstrap and Font Awesome, but these days, these are often used […]

In today’s tutorial, we are going to show you how you can add multiple markers to a single Google Map. Not just that though, we are also going to show you how to add custom map styles and custom markers to make your map look even better. I’m just going to go ahead and show […]

In this simple tutorial, we’re going to show you how you can set all elements with a particular class to the highest element height. To do this, we need to loop through all elements with a particular class, get the highest value, then match all other elements to the same height. We can do this […]