Today we’re going to show you how to show a preview image of a file that you upload using the HTML input type file. Okay, let’s dig right into it, firstly, let’s image you have the following HTML markup:- <input type=”file” onchange=”readURL(this);” /> <img id=”blah” alt=”Your Image Preview” /> We’re going to add a bit […]

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 […]

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 this article I am going to show you how you can get the total Twitter and Instagram followers count using jQuery. Twitter Followers Count We can simply get the number of Twitter followers by using CDN widgets, so we are going to use the below CDN with the screen name ‘silvawebdesigns’. https://cdn.syndication.twimg.com/widgets/followbutton/info.json?screen_names=company_name In the […]

In this tutorial we will show you how to detect whether you scroll up or down using jQuery which will allow you to perform 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 nowScrollTop […]

The Back to top link allows users to smoothly scroll back to the top of the page. It’s a little detail which enhances navigation experience on website with long pages. How to add a custom back (scroll) top top icon? Firstly, within your footer, add the following HTML:- <a href=”#” class=”back-to-top”></a> Then add the following […]

In this example we are going to show how to configure the Bootstrap 3 carousel to show many panels at once but only slide one at a time. See the JSFIDDLE to see how this works. On desktop it rotates one item at a time and has 3 elements in view. If you shrink the […]

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 […]

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 […]