This is a super-useful jQuery Script that gets the Image Title from the ALT Tag if no title is set with a fall-back to the image src. jQuery(document).ready(function($) { $(“img:not([title])”).each(function() { if($(this).attr(“alt”) != ”) $(this).parent().attr(“title”, $(this).attr(“alt”)); else $(this).parent().attr(“title”, $(this).attr(“src”)); }); }); view raw jQuery Set Image TITLE from ALT Tag hosted with ❤ by GitHub Benefits of getting the Image …
Enable Cross-Origin Resource Sharing with CORS Anywhere
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. There may be legitimate reasons for another website to block access to content via an iframe or jQuery load function and this is apparent when you get a response …
Scroll To with Fixed Header
This jQuery snippet is the holy grail of jQuery Scroll To with Fixed Header and the only script that we have found to work with Webflow Fixed Header with Scroll. Typically a website with a Fixed Header does not account for the height of the header in the jQuery ScrollTo, and this means that you get an offset equal to the …
CSS Colour Tint
Use the following CSS in this order to achieve a pure CSS colour Tint: – .tint { filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg); } view raw CSS Colour Tint hosted with ❤ by GitHub To achieve your CSS colour tint you only need to change the hue-rotate value. Works on parent elements and their children.
Element height always the same as Width
This is a very useful snippet for ensuring that your element height (div, img etc) is always the same as the width. An example case could be a circular div that you want to ensure maintains a set aspect ratio so that it is not squashed or elongated. There are a few examples of how to achieve this below, but …
Auto populate Webflow form from URL parameter uppercase remove %20
This code allows you to auto-populate a Webflow form on a different page with a URL parameter. It is an extension of an original code posted on the Webflow Forum that covers form email fields, text fields as well as select dropdowns and textarea. The URL parameters may be passed as lowercase variables such as ?name=glenn (becoming ‘Glenn’) and then subsequent …
jQuery Toggle Class on Click
The jQuery toggle() Method is part of the jQuery core and a useful method for toggling between jQuery hide() and show(). In a recent use case, we needed to provide a simple way for a client to see how their site would look with or without background images and so we wrote up a very simply jQuery snippet to Toggle …
301 Domain Redirect
The 301 domain redirect is the best way to ensure that you keep SEO when moving from one domain name to another like olddomain.com to newdomain.com. The correct way to achieve this is by editing the .htaccess file of the old site on your server. The .htaccess file sits in your site’s root folder (directly under yourdomainname.com) and can be …
Slick Carousel Fade In on Load
You don’t need any Javascript/jQuery to Fade in the Slick Carousel on Load as this can be acheived with just a few lines of CSS. /* .slick-slider */ .slick-slider-class { opacity: 0; } /* Slider initialised class */ .slick-initialized { opacity:1; transition:opacity .3s ease-in; } view raw Slick Carousel Fade In on Load hosted with ❤ by GitHub Initially you …
CSS Target all mobile devices
If you are looking to make a universal CSS rule for all mobile devices then use the following CSS media query:- @media (pointer:coarse) { /* custom css for “touch targets” */ } @media (hover: none) { /* custom css for devices where the primary input mechanism cannot hover at all or cannot conveniently hover } @media (hover:none), (hover:on-demand) { /* …