How to make center align child div? Suppose you have 2 Div tag. And want the make inner tag center<div id="d1"> <div id="d2"> </div> </div> Then you will use below 1 line css code as below:style="margin: 0 auto;" <div id="d1"> <div...
Tuesday, December 03, 2024
Change section tag's background image at runtime
Change section tag's background image at runtime Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
content visibility example
Content Visibility Example
<!doctype html><html lang="en-au"><head> <meta charset="utf-8"> <title>Homepage</title> <meta name="viewport" content="width=device-width, initial-scale=1"><style>.story { content-visibility: auto; ...
Saturday, November 30, 2024
Lazy load iframe video using IntersectionObserver
Lazy load iframe video using IntersectionObserver Here is the below code that will load the iframe video when it iframe will be in the viewport.It is important that to fill the page i have used image tag with width and height.You can use your own data. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
Auto execute code in javascript
How to write auto execute javascript code ?We can achieve it by 2 method.1- Standard auto execute function.2- Arrow function.Standard auto execute function. <script>(function() { const iamvar1= 'Iam var 1'; console.log('Auto Execute 1 function');})();</script>Arrow function.<script>(()=> { const iamvar2= 'Iam...
Passing value in Shopify snippets and use it
Passing value in Shopify snippets and use itYou are working on Shopify project with a snippet. In that snippet you want pass value as per your need. So how can you achieve it ?Let assume that you will use a snippet "rimg-a.liquid" in other liquid file and want to use as below. You want to pass imgurl, class and fetch value.================================================content...
Change video tag source url using javascript
Change video tag source url using JavascriptYou want change <video> tag's <source></source> src when click on button in HTML and Javascript.Here is the code with example<video autoplay="autoplay" control="false" id="howto" loop="loop" muted="muted" playsinline="playsinline" poster="POSTER IMAGE URL" preload="metadata"> ...
Saturday, August 31, 2024
Unable to resolve Try checking the for validity Google Pagespeed Insights
Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights
img alt="Unable to resolve Try checking the for validity Google Pagespeed Insights" border="0" data-original-height="509" data-original-width="975" height="334" loading="lazy"...
Thursday, June 27, 2024
My Services
My Services
I am expert in Genuine Website Speed Optimization (Guaranteed REAL Pagespeed Performance 70-90+ Score ), On Page SEO, Off Page SEO, Improve Core Web Vitals, Technical SEO, Website development, Desktop app/software development, Secure website from Hacker, Removing...
Sunday, June 23, 2024
Find lost Android Mobile’s location
Find lost Android Mobile’s locationYou have Android mobile and suddenly you lost it then how to find it’s location and Play sound in it so you can find it. here is the some steps:1- Log on using laptop or any other device at https://www.google.com/android/find2- After...
Saturday, May 25, 2024
Simple Class in JavaScript
Simple Class in JavaScriptHere is the below code that demonstrate that how to create class and how to use it.<script>class WORKER { #step1(){console.log("RUN step1");} #step2(){console.log("RUN step2");} #step3(){console.log("RUN step3");} #step4(){console.log("RUN step4");} ...
Tuesday, May 21, 2024
Run multiple tasks one by one in javascript
Run multiple tasks one by one in javascript Here is the code in JavaScript code that demonstrate how to run multiple tasks one by one.<script>const one=()=>{console.log(“I am function One”);}const two=()=>{console.log(“I am function Two”);}const three=()=>{console.log(“I am function Three”);}const four=()=>{console.log(“I...
Monday, April 15, 2024
Add Dependent Scripts
here is the code that allow to add dependent script : <script> const addDependentScripts = async function( scriptsToAdd ) { const s=document.createElement('script') for ( var i = 0; i < scriptsToAdd.length;...
Sunday, March 10, 2024
Multiple attribute passing in querySelectorAll
Multiple attribute passing in querySelectorAll Here I am demonstrating code to how to pass multiple attributes in querySelectorAll.<!DOCTYPE html><html lang="en"><head><title>Multiple attribute passing in querySelectorAll</title><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"...
How to make load image fast
How to make load image fastImages are main parts of any website, Because It says lots of things than text. So it is important to load it fast as much as fast.To load image fast use below attributes<link rel="preload" as="image" href="https://site.com/imgs/image.jpg"><img fetchpriority="high" decoding="async" src="https://site.com/imgs/image.jpg"...
Enable or Disable files folder structure in website domain
Enable or Disable files folder structure in website domainSometime when you type the url or website domain then files and folder structure show. This is normally for the test servers with no security.Sometime it is useful for testing of different pages and folder etc, because all files and folder show and user can test any files etc. But if you...
Apply CSS via JavaScript
Here is the example where apply css via JavaScript<script>const mstyle = document.head.appendChild(document.createElement(‘style’));style.textContent = /*this is the css*/`.myclass {aspect-ratio: 16 / 9; background-color: #000;position: relative; display: block; contain: content;background-position: center center;background-size: cover;}#mydivid...
Thursday, January 25, 2024
Define own custom HTML element
Define own custom HTML elementHere I am demonstrating how to define your own custom HTML element or control and how to use it.Define is as <my-test-element-one> </my-test-element-one>and then use my JavaScript. The complete code it below:<!DOCTYPE html><html lang="en"> <head> <title>Hello!</title> ...
Sunday, January 07, 2024
Show array data without for loop in javascript
Show array data without for loop in javascript Use below code <script>const strs1 = ["one ", "two", "three"];const newst1 = strs.map(st => { console.log(st)});const mynum = [1, 2, 3];const newnum = mynum.map(num => { console.log(num)});</script&...
Posts
