Implementing ‘Read More’ and ‘Read Less’ Functionality with JavaScript

Enhancing User Experience: Implementing ‘Read More’ and ‘Read Less’ Functionality with JavaScript

In the world of web content, sometimes less is more. Long paragraphs of text can be overwhelming for readers, and it’s essential to strike a balance between providing information and maintaining a clean, user-friendly design. One effective solution is the “Read More” feature, which allows users to expand and collapse text as needed. In this…

| |

WordPress: How to make parent menu item clickable when they have a submenu

Problem: Parent menu item not clickable when submenu enabled Some WordPress theme by default disables parent menu links when they have dropdown menu items. If you have a submenu enabled the parent menu item is no longer clickable to link through to the page, it just opens the submenu. We’ll make the parent menu items…

How to open all external links in New Window or New Tab without a WordPress plugin
| |

How to open all external links in New Window or New Tab without a WordPress plugin

Do you want to open external links from your blog posts in a new window? Opening external links in a new window allow your users to visit the link without leaving your website. I will also show different code snippets to do that, so you can choose the one that works for you. For this,…

How to download PDF files automatically instead of opening in new tab
|

How to download PDF files automatically instead of opening in new tab

By default, most downloadable PDF files usually open in a new window or tab. It’s true for the static site or WordPress sites also. This document contains steps on how to make the browser download PDF files automatically, rather than open in a new tab. We’ll use a simple jQuery solution for it.

Bootstrap 4 – changes fixed-top Navbar background color on scrolling
| |

Bootstrap 4 – changes fixed-top Navbar background color on scrolling

// navbar background color change on scroll $(window).scroll(function(){ var scroll = $(window).scrollTop(); if(scroll < 300){ $(‘.fixed-top’).css(‘background’, ‘transparent’); } else{ $(‘.fixed-top’).css(‘background’, ‘rgba(23, 162, 184, 0.9)’); } });