DEV Community: Zain Muhammad

🚀 Modern CSS That Replaces JavaScript (Part 2)

Zain Muhammad — Mon, 23 Feb 2026 05:56:30 +0000

You don’t need JavaScript to detect sticky headers anymore.

Sticky Header Style on Scroll — NO JS Needed

For years, changing a header style on scroll meant JavaScript.

Scroll listeners.
State management.
Performance tuning. 🌀

But modern CSS can now handle sticky header state changes natively.

🔥 What’s New?

With scroll-state container queries, CSS can detect when an element becomes sticky (stuck) and change styles automatically.

No scroll listeners.
No JS state.
No hacks.

🧠 Real Use Case: Sticky Header Style Change

A common UX pattern:
👉 Header changes background, radius, or shadow when it sticks to the top.

Traditionally:

JS checks scroll position
Adds/removes a class
Handles animations
With modern CSS:
CSS detects sticky state
Styles update automatically
Smooth transitions included

🧩 Minimal CSS Example

.header-wrapper {
  position: sticky;
  top: 0;
  container-type: scroll-state;
  container-name: header;
}

@container header scroll-state(stuck: top) {
  .header-inner {
    background: yellow;
    color: #232426;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0,0,0,0.04);
  }
}

That’s it. No JavaScript required. ✅

🏗 HTML Markup

<header class="header-wrapper">
  <div class="header-inner"></div>
</header>

Code pen Live Example

⚡ Why This Matters

Better performance — no scroll event listeners
Declarative UI logic in CSS
Cleaner & maintainable code
Built-in animations via transitions
Great for design systems

🎯 Where This Pattern Shines

Sticky headers
Navbar transformations
Floating toolbars
Context-aware UI components All handled purely in CSS.

🌐 Browser Support

Cutting-edge feature
Works in modern Chromium browsers
Best used with progressive enhancement

🔜 Next in the Series

This is Part 2 of Modern CSS That Replaces JavaScript.

Next topics:
• scroll-target-group logic without JS
• Component-level container queries
• CSS-driven UI interactions

🧠 Takeaway

CSS is no longer just styling.
It’s becoming a behavior layer.

Less JavaScript.
Cleaner architecture.
Better performance.

Happy styling, and thanks for reading! 🚀

CSS #Frontend #WebDevelopment #Performance #DevTips #UIEngineering

NEW CSS Scroll Features Will Replace JavaScript

Zain Muhammad — Tue, 20 Jan 2026 07:04:01 +0000

Modern CSS That Replaces JavaScript (Part 1) — Scroll-Based Visibility Without JS

This article is the first part of a series where I’ll cover modern CSS features with example that can replace common JavaScript patterns — improving performance, accessibility, and maintainability.

For years, showing or hiding UI elements based on scroll position meant one thing: JavaScript.
Scroll listeners, throttling, performance concerns — we’ve all been there.

But modern CSS is changing that narrative.

With the introduction of scroll-driven container queries, we can now manage scroll-based UI visibility purely with CSS — no JavaScript required.

In this article, we’ll build a “Back to Top” button that appears only when the page is scrollable, using new CSS scroll-state features.

Why This Matters

JavaScript scroll handlers can:

Hurt performance on low-end devices
Add unnecessary complexity
Require debouncing or throttling
Increase bundle size

Modern CSS gives us:

Better performance
Declarative UI behavior
Cleaner and more maintainable code

The Key Concept: scroll-state Container Queries

CSS now allows us to react to scroll conditions using container queries.

We define:

A scroll container
A named scroll state
Conditional styles based on scroll position

Step 1: Define the Scroll Container
CSS

html {
  container-type: scroll-state;
  container-name: page;
  scroll-behavior: smooth;
}

This turns the html element into a scroll-state container named page.

Step 2: Base Page Styling
CSS

html,
body {
  padding: 0;
  margin: 0;
}

.title-header {
  background-color: #4caf50;
  color: white;
  padding: 10px 0;
  text-align: center;
  font-size: 24px;
}

.content {
  max-width: 480px;
  margin: 0 auto;
}

Nothing special here — just layout and typography.

Step 3: Back to Top Button (Hidden by Default)
CSS

.backtotop {
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #000066;
  color: #fff;
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 24px;
  text-decoration: none;

  translate: 300px 0;
  transition: translate 0.3s ease-in-out;
}

We move the button off-screen using translate, not display: none, so animations stay smooth.

Step 4: Reveal Button Using Scroll-State Query
CSS

@container page scroll-state(scrollable: top) {
  .backtotop {
    translate: 0 0;
  }
}

What this means:

When the page becomes scrollable
And scrolling is possible from the top
The button slides into view automatically
No JavaScript. No scroll listeners.

HTML Markup

<div class="title-header">
  Manage Visibility on Scroll with NO JS
</div>

<div class="content">
  <h1>NEW CSS Scroll Features Will Replace JavaScript</h1>

  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry...
  </p>

  <!-- Long content continues -->
</div>

<a href="#top" class="backtotop">Move to top</a>

Code pen Live Example

Github Code Repo

Why This Is a Big Deal

✅ Zero JavaScript
✅ Better performance
✅ Declarative UI logic
✅ Cleaner codebase
✅ Perfect for modern design systems

This approach is especially powerful for:

Sticky headers
Scroll-to-top buttons
Progressive disclosure UI
Accessibility-friendly interactions

Browser Support Notes

These features are cutting-edge and currently supported in modern Chromium-based browsers.

Use progressive enhancement when shipping to production.

Final Thoughts

CSS is no longer just about styling — it’s becoming a behavior layer.

If you care about:

Performance
Maintainability
Accessibility
Modern frontend architecture
Then scroll-state container queries are absolutely worth learning.

Happy styling, and thanks for reading!🚀

CSS @scope is now Baseline — Supported in All Major Browsers!

Zain Muhammad — Wed, 14 Jan 2026 12:44:51 +0000

Big news for frontend developers 🎉
With Firefox 146 officially supporting the @scope at-rule, CSS @scope is now available across Chrome, Safari, and Firefox — earning the Baseline: Newly Available status.

Why this matters 👇
The @scope at-rule introduces a new way to scope CSS styles to a specific part of the DOM, helping reduce global CSS conflicts and making styles more predictable, modular, and maintainable.

What is @scope in CSS?
• @scope defines a local styling context
• :scope represents the scope root
• Styles apply only within that defined boundary
• No more over-specific selectors or CSS leakage

Key Benefits ✨
✅ Better CSS organization
✅ Reduced specificity wars
✅ Safer component-level styling
✅ Cleaner, more maintainable stylesheets
✅ Perfect fit for design systems & component-based UI

Where can you use @scope?

You can use @scope in linked CSS stylesheets and inline style blocks, including cases where inline usage introduces some interesting behaviors.

By default, CSS is globally scoped, even when rules appear to be nested inside elements like main.

@scope changes this by enabling true contextual styling without relying on heavy or deeply nested class naming conventions.

This represents a significant improvement in modern CSS architecture and is an important feature for frontend engineers who focus on scalability, performance, and long-term maintainability.

Practical Use Cases of CSS @scope and How to Implement Them.

Scoped Style Code

Scoped within section or Component Style Code

Exclude Scope within parent section Style Code

Exclude Scope for a specific section Style Code

Section or Component Based Style Code

Have you started using @scope yet?
Would you adopt it in production today, or would you prefer to wait a bit longer?

Why CSS Classes Don’t Work with dangerouslySetInnerHTML in Next.js (and How to Fix It)

Zain Muhammad — Tue, 16 Dec 2025 07:54:58 +0000

When working with SEO-driven or CMS-based content in React / Next.js, we often rely on

dangerouslySetInnerHTML to render HTML strings.

Everything looks fine… until you add CSS classes inside the HTML content and realize:

❌ Styles are not being applied at all.

Let’s break down why this happens and how to fix it properly.

🧩 The Problem

Example content:

const content = `
  You can consult <span class="highlight">certified nutritionists</span>
  from home.
`;

Rendered like this:

tsx

<p dangerouslySetInnerHTML={{ __html: content }} />

And styled using styled-jsx:

tsx

<style jsx>{`
  .highlight {
    color: #0a7cff;
    font-weight: 600;
  }
`}</style>

❌ Result

The .highlight styles do not apply.

🤔 Why This Happens

Next.js uses styled-jsx, which scopes CSS to JSX-rendered elements.

However:
HTML injected via dangerouslySetInnerHTML is outside the styled-jsx scope
So class selectors like:

css

.highlight { ... }

get transformed into:
css

.highlight.jsx-123456 { ... }

But your injected HTML doesn’t receive that hash, so styles never match.

✅ Solution (Recommended): Use :global() in styled-jsx

Wrap your class selectors with :global().

tsx

<style jsx>{`
  :global(.highlight) {
    color: #0a7cff;
    font-weight: 600;
  }

  :global(.link) {
    color: #0070f3;
    text-decoration: underline;
  }
`}</style>

✅ Now your injected HTML works correctly.

If a webpage's first fold contains both images and text, which one will be counted as the Largest Contentful Paint (LCP)?

Zain Muhammad — Wed, 05 Feb 2025 12:26:54 +0000

After diving into some research, I discovered something really interesting about Largest Contentful Paint (LCP)! 🚀

When a webpage loads, LCP determines the biggest visible element in the first fold—this could be an image or a text block.
But here’s the cool part: images usually take priority over text unless the text block is larger. So, if you ever wondered why your page speed metrics fluctuate, this might be the reason!

Want to boost LCP performance?

Make sure your hero image or the most important visual element loads first—this helps improve perceived load time and creates a smoother user experience. 💡

𝗪𝗵𝘆 𝗨𝘀𝗶𝗻𝗴 𝗡𝗼𝗻-𝗜𝗻𝘁𝗲𝗴𝗲𝗿 𝗣𝗶𝘅𝗲𝗹 𝗩𝗮𝗹𝘂𝗲𝘀 𝗟𝗶𝗸𝗲 "𝟰.𝟮 𝗽𝘅" 𝗶𝗻 UX/UI 𝗗𝗲𝘀𝗶𝗴𝗻 𝗶𝘀 𝗡𝗼𝘁 𝗮 𝗕𝗲𝘀𝘁 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲 🤔 ?

Zain Muhammad — Wed, 28 Aug 2024 05:10:58 +0000

When it comes to designing in tools like 𝗙𝗶𝗴𝗺𝗮, precision is key. However, precision doesn’t always mean using exact 𝗱𝗲𝗰𝗶𝗺𝗮𝗹 𝗽𝗼𝗶𝗻𝘁𝘀 like "4.2px" for 𝗽𝗮𝗱𝗱𝗶𝗻𝗴𝘀 and 𝗺𝗮𝗿𝗴𝗶𝗻𝘀. In fact, relying on non-integer pixel values is generally not recommended. Here’s why sticking to whole numbers is a best practice that can make a significant difference in the quality of your designs.

𝟭. 𝗣𝗶𝘅𝗲𝗹 𝗔𝗹𝗶𝗴𝗻𝗺𝗲𝗻𝘁 𝗠𝗮𝘁𝘁𝗲𝗿𝘀
Using non-integer values like "4.2px" can lead to pixel misalignment, causing elements in your design to appear blurry or jagged, especially on screens with lower resolutions. Whole numbers like "4px" or "8px" ensure that your design elements align perfectly on the pixel grid, resulting in sharper and cleaner visuals.

𝟮. 𝗦𝗶𝗺𝗽𝗹𝗲𝗿 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 𝗛𝗮𝗻𝗱𝗼𝗳𝗳
Designers often collaborate closely with developers to bring their creations to life. Non-integer values can complicate this process, as CSS and other coding frameworks typically work best with whole numbers. Keeping your values consistent and straightforward makes the handoff smoother and reduces the risk of errors.

𝟯. 𝗠𝗮𝗶𝗻𝘁𝗮𝗶𝗻 𝗖𝗼𝗻𝘀𝗶𝘀𝘁𝗲𝗻𝗰𝘆 𝗔𝗰𝗿𝗼𝘀𝘀 𝗬𝗼𝘂𝗿 𝗗𝗲𝘀𝗶𝗴𝗻
Consistency is key to creating a cohesive and professional-looking design. Sticking to whole numbers for your paddings and margins ensures that your elements are evenly spaced and visually balanced, making your design more aesthetically pleasing and easier to navigate.

𝟰. 𝗜𝗺𝗽𝗿𝗼𝘃𝗲𝗱 𝗥𝗲𝘀𝗽𝗼𝗻𝘀𝗶𝘃𝗲𝗻𝗲𝘀𝘀 𝗮𝗻𝗱 𝗦𝗰𝗮𝗹𝗮𝗯𝗶𝗹𝗶𝘁𝘆
When designing for multiple devices and screen sizes, non-integer values can behave unpredictably. Whole numbers are more reliable, ensuring that your design scales and adapts consistently across different platforms.

𝗧𝗵𝗲 𝗕𝗼𝘁𝘁𝗼𝗺 𝗟𝗶𝗻𝗲
For sharper, cleaner designs that are easier to implement and scale, it’s best to use whole numbers like "4px" or "8px" instead of decimals like "4.2px." By doing so, you’ll maintain visual harmony, simplify the development process, and create a more polished final product.

DesignTips #Figma #WebDesign #DesignBestPractices #UIUX #ProductDesign #websiteDesign

For Know More Insights
Personal Portfolio

What is INP Interaction to Next Paint (INP) Core Web Vitals and how we can optimize?

Zain Muhammad — Mon, 15 Jan 2024 19:37:10 +0000

INP (Interaction to Next Paint) is a critical Core Web Vitals metric, set to replace First Input Delay (FID) in March 2024. It assesses a page's responsiveness to user interactions, focusing on minimizing the time between interaction and the next frame paint for swift visual feedback. Calculated through the observation of user interactions, INP provides a comprehensive view of a page's interactive performance.

The calculation involves excluding outliers to ensure accuracy, with the 75th percentile filtering results for majority representation. A good INP score, measured at the 75th percentile across mobile and desktop devices, is below or at 200 milliseconds for optimal responsiveness, 200-500 milliseconds for improvement, and above 500 milliseconds for poor responsiveness.

Explore a comprehensive understanding of INP by clicking here for an in-depth exploration of this crucial metric and its impact on web performance.

CoreWebVitals #WebPerformance #PageExperience #LCP #FID #CLS #SEO #WebDev #UserExperience #GoogleUpdate #SiteSpeed #Optimization #WebDesign #FrontendPerformance #UXDesign #PageSpeed #WebsiteHealth

See my portfolio

How To make Product slider using HTML5 CSS3 and JS?

Zain Muhammad — Wed, 28 Dec 2022 06:30:05 +0000

Now a days as a frontend Developer I need to designed most of slider for WooComerce Websites .Some of Developer use the Extensive libraries of js and css to Develop the Slider which affect the Performance and page speeds.so I designed a custom slider with less and actual code of HTML5 CSS3 and JS.


<style>
.med-related-prod-wrap{
    margin: 40px 16px 0px 16px;
}
.med-related-prod-wrap .related-prod-heading{
    margin: 0px;
    font-size: 18px;
}
.med-related-prod-wrap .med-rel-prod-slider{
    display: flex;
    column-gap: 8px;
    margin-top: 20px;
    overflow: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    scroll-behavior: smooth;
}
.med-related-prod-wrap .med-rel-prod-slider::-webkit-scrollbar {
    display: none;
}
.med-slider-arrow-section{
    display: none;
    align-items: center;
    justify-content: end;
    margin-top: 40px;
    column-gap:10px;
}
.med-slider-arrow{
    --size: 30px;
    z-index: 9;
    background: #ffffff;
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
    -webkit-transition: opacity .5s,visibility .5s;
    transition: opacity .5s,visibility .5s;
    border: 1px solid #dfe1e5;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 4px 8px 0 rgb(0 0 0 / 20%);
    padding: 0;
    transform: translate(0,-50%);
    cursor: pointer;
    outline: 0!important;
    transition: 0.2s ease-in-out;
}
.med-slider-arrow:after {
    background-image:  url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 16px;
    content: '';
    width: var(--size);
    height: var(--size);
    display: block;
    background-repeat: no-repeat;
    background-position: 49% 50%;
    transform:rotate(180deg);
}
.med-slider-arrow.btn-left{
    display: none;
}
.med-slider-arrow.med-slider-next:after{
    transform:rotate(360deg);
}
.med-rel-prod-slider .med-product-card{
    display: inline-grid;
    grid-auto-rows: min-content auto;
    padding: 32px 12px;
    background: #FFFFFF;
    border: 1px solid #E5E5F0;
    border-radius: 15px;
    width: 224px;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
}
.med-rel-prod-slider .med-product-card:hover .related-prod-img{
    transform: scale(1.1);
}
.med-product-card .related-prod-wrapper{
    height: 140px;
    width: 100%;
    overflow: hidden;
}
.related-prod-wrapper .related-prod-img{
    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: 0.5s all ease-in-out;
}
.med-product-card .rel-med-name{
    font-size: 24px;
    padding-top: 32px;
    color: #232426;
}
.med-product-card .rel-no-of-tab{
    color: #878787;
    font-size: 18px;
}
.med-product-card .rel-company-name{
    color: #232426;
    font-size: 14px;
    text-decoration: underline;
    font-weight: 600;
}
.med-product-card .rel-prod-price{
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 0px;
}
.med-product-card .related-prod-detail{
    margin-top:auto;
}
@media (min-width: 992px){
.med-related-prod-wrap{
    margin: 0px 0px 50px 0px;
}
.med-related-prod-wrap .related-prod-heading{
    margin: 0px;
    font-size: 26px;
}
.med-related-prod-wrap .med-rel-prod-slider{
    margin-top: 40px;
}
.med-slider-arrow-section{
    display: flex;
}
}
</style>

<div class="med-related-prod-wrap" id="med-related-prod-wrapper">
    <h2 class="related-prod-heading">Related products</h2>
    <div class="med-rel-prod-slider-wrapper">
        <div class="med-rel-prod-slider carousel-content">

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

<div class="med-product-card">
    <div class="related-prod-wrapper">
        <img src="https://www.practostatic.com/practopedia-images/v3/res-750/confido-tablet-60-s_e54d0810-345d-44bf-9487-454840599ea1.JPG" alt="" class="related-prod-img">
    </div>
    <div class="related-prod-detail">
        <p class="rel-med-name">Subrex Z</p>
        <p class="rel-no-of-tab">30 tablets</p>
        <p class="rel-company-name">Abbott</p>
        <p class="rel-prod-price">Rs 250.00</p>
    </div>
</div>

        </div>
        <div class="med-slider-arrow-section">
            <button class="med-slider-prev med-slider-arrow btn-left" aria-label="left-arrow" onclick="" id="med-btn-left" type="button"></button>
            <button class="med-slider-next med-slider-arrow btn-right" aria-label="right-arrow" onclick="" id="med-btn-right" type="button"></button>
        </div>
    </div>
</div>

<script>
    const bindCarouselEvents = (containerId) => {
        const wrapper = document.getElementById(containerId);
        const btn_left = wrapper.getElementsByClassName('btn-left')[0]
        const btn_right = wrapper.getElementsByClassName('btn-right')[0]
        const content = wrapper.getElementsByClassName('carousel-content')[0]
        const content_scroll_width = content.scrollWidth;
        let content_scoll_left = content.scrollLeft;
        if (btn_right) {
            btn_right.addEventListener('click', () => {
                content_scoll_left += 224;
                if (content_scoll_left >= content_scroll_width) { 
                    content_scoll_left = content_scroll_width;
                }
                content.scrollLeft = content_scoll_left;
            });
        }
        if (btn_left) {
            btn_left.addEventListener('click', () => {
                content_scoll_left -= 224;
                content.scrollLeft = content_scoll_left;
            });
        }

        // scroll binding
        content.addEventListener('scroll', () => {
            let scrollLeft = Math.ceil(content.scrollLeft)
            let contentScrollWidth = content.scrollWidth
            let contentWidth = content.clientWidth
            let rightEdge = (contentScrollWidth - contentWidth)
            if (scrollLeft >= rightEdge) {
                btn_right.style.display = "none"
            } else if (scrollLeft < rightEdge) {
                btn_right.style.display = "block"
            }

            if (scrollLeft == 0) {
                btn_left.style.display = "none"
            } else if (scrollLeft > 0) {
                btn_left.style.display = "block"
            }

            content_scoll_left = scrollLeft
        });
    }

    // javascript for scroll on click
    window.addEventListener('DOMContentLoaded', function(){
        bindCarouselEvents('med-related-prod-wrapper')
    });
    </script>

What is CLS(Cumulative Layout Shift) the main part of Google Core Web Vitals?

Zain Muhammad — Fri, 15 Jul 2022 11:20:01 +0000

CLS is the main part of Google Core Web Vitals.
CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1-second in between each shift and a maximum of 5 seconds for the total window duration.

The largest burst is the session window with the maximum cumulative score of all layout shifts within that window.

What is a good CLS score?

**
To provide a good user experience, sites should strive to have a CLS score of 0.1 or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

How to remove class on scroll top and add on scroll down on html body using JavaScript.

Zain Muhammad — Thu, 17 Feb 2022 06:58:23 +0000

Here we are going to write simple JavaScript for remove class on html body on scroll top behavior and add class on scroll down behavior which is most used in mobile responsive web designs to show and hide site navbar. We can further hide and show the navbar with some CSS3 transitions (for make attractive) by using with the help of that class which is adding and removing with the help of JavaScript.

JavaScript snippet.

// javascript for remove class on scroll top and add on scroll down 
var lastScrollTop = 0;
var body = document.body;
window.addEventListener("scroll",function(){
var scrollTop = window.pageYOffset || document
.documentElement.scrollTop;
if(scrollTop > lastScrollTop){
    body.classList.remove("shownavbar");
}
else{
    body.classList.add("shownavbar");
}
lastScrollTop = scrollTop;
});

on Scroll Top Behavior of JavaScript Screenshot

on Scroll Down Behavior of JavaScript Screenshot

Attractive and responsive HTML5 & CSS3 Filters.

Zain Muhammad — Tue, 15 Feb 2022 07:51:18 +0000

Here we are going to design attractive and eye catchy filters using HTML5 ,CSS3 and using bit JavaScript.
Code Pen Filters Link

Code

<!DOCTYPE html>
<html>
<head>
<title>Attractive Filters</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* css for new filters */
.sect-filters_and_sort .new-sect-filters_and_sort{
    display:flex;
    /* align-items:center; */
    overflow:auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.sect-filters_and_sort .new-sect-filters_and_sort{
    padding:16px 0px;
}
.sect-filters_and_sort .od-new-filter{
    display: grid;
    grid-template-columns: 33% 67%;
    flex-shrink:0;
    background: #F7F8FB;
    border-left:0px;
    border-radius: 8px;
    width:183px;
    height:60px;
    margin-right:16px;
    cursor:pointer;
    margin-bottom:0px;
}
.od-new-filter .filter-text-section{
    margin: auto 0;
    font-size: 14px;
    font-weight: 600;
    color: #000066;
    padding:0px 5px 0px 12px;
    border-radius: 0px 8px 8px 0px;
}
.od-new-filter .icon-section{
    background: #D4D4FF;
    border-radius: 8px 0px 0px 8px;
    color:#000066;
}
.od-new-filter .filters-icon{
    display:block;
    height:100%;
    margin:auto;
    transition: all .5s ease-in-out;
}
.od-new-filter{
    transition: all .5s ease-in-out;
}
.new-sect-filters_and_sort .mobile-filters .od-filters-input{
    display: none;
    overflow: hidden;
}
.new-sect-filters_and_sort .mobile-filters input:checked+.od-new-filter{
    background: #D4D4FF;
    transition: all .5s ease-in-out;
    border: none;
}
.new-sect-filters_and_sort .mobile-filters input:checked+.od-new-filter .icon-section{
    background:transparent;
}
.od-new-filter .filters-icon.filter-icon-cross{
    display:none;
    transition: all .5s ease-in-out;
}
.new-sect-filters_and_sort .mobile-filters input:checked+.od-new-filter .filter-text-section{
    color: #000066;
}
.new-sect-filters_and_sort .mobile-filters input:checked+.od-new-filter .filters-icon{
    display:none;
}
.new-sect-filters_and_sort .mobile-filters input:checked+.od-new-filter .filters-icon.filter-icon-cross{
    display:block;
}
.filters-button{
    height: 40px;
    width:40px;
    background: #ffffff;
    border-radius: 50px;
    margin-top: -5.9%;
    cursor:pointer;
    outline:none;
    border:0px;
    filter: drop-shadow(0px 1px 30px rgba(0, 0, 0, 0.05)) drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.15));
}
.filters-button:focus{
    outline:none;
    border:0px;
}
.filters-button.right-filters-button{
    float: right;
    margin-right: -2.5%;
    transform: rotate(180deg);
}
.filters-button.left-filters-button{
    margin-left: -2.5%;
}
.new-sect-filters_and_sort .mobile-filters{
    display: flex;
    transition: all 2s ease-in-out;
}
.sect-filters_and_sort .new-sect-filters_and_sort::-webkit-scrollbar {
    display: none;
}
@media screen and (max-width: 767px){
    .filters-button{
        margin-top: -35%;
        margin-right: -4%;
    }
}
@media screen and (max-width: 768px){
    .best-speciality-no-line{
        font-size: 16px;
        line-height: 1.5;
        padding-top: 16px;
    }
    .fixed-header .sect-filters_and_sort.sect-filter-and-sort-variation-2.widget-active{
        top:59px;
    }
}
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (device-width : 414px)
    and (device-height : 736px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
    and (-webkit-device-pixel-ratio : 3) {
    .filters-button {
        margin-top: -32%;
        }
}
@media screen and (min-width: 411px) and (max-width: 424px) {
    .filters-button {
        margin-top: -31%;
        }
}
@media screen and (max-device-width: 320px) {.filters-button {margin-top: -43%;}}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .filters-button{display:none;} /* your css rules for ipad portrait */
}
@media screen and (max-width: 991px){
/* css for auto handling */
.new-sect-filters_and_sort .mobile-filters{
    display: grid;
    grid-template-rows: repeat(2,1fr);
    grid-auto-flow: column;
    transition: all 2s ease-in-out;
}
/* css for auto handling */
.new-sect-filters_and_sort .mobile-filters .od-new-filter {
    margin-bottom:16px;
}
}
/* css for new filters end here*/
</style>
</head>
<body>
<div class="sect-filters_and_sort bg-white sect-filter-and-sort-variation-2">
    <div class="container">
        <div class="new-sect-filters_and_sort" id="new-search-filters">
            <div class="mobile-filters">
            <div>
                <input type="checkbox" class="od-filters-input" id="show-near-me">
                <label class="od-new-filter" for="show-near-me">
                    <div class="icon-section">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                            <use xlink:href="#cross-icon"></use>
                        </svg>
                        <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                            <use xlink:href="#near-me"></use>
                        </svg>
                    </div>
                    <div class="filter-text-section">Doctors Near me</div>
                </label>
            </div>
            <div>
                <input type="checkbox" class="od-filters-input" id="lowest-fee-sort">
                <label class="od-new-filter" for="lowest-fee-sort">
                    <div class="icon-section">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                            <use xlink:href="#cross-icon"></use>
                        </svg>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                            <use xlink:href="#pocket-icon"></use>
                        </svg>
                    </div>
                    <div class="filter-text-section">Lowest Fee</div>
                </label>
            </div>
            <div>
                <input type="checkbox" class="od-filters-input" id="most-experienced">
                <label class="od-new-filter" for="most-experienced">
                    <div class="icon-section">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                            <use xlink:href="#cross-icon"></use>
                        </svg>
                        <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                            <use xlink:href="#most-experience"></use>
                        </svg>
                    </div>
                    <div class="filter-text-section">Most Experienced</div>
                </label>
            </div>
            <div>
                <input type="checkbox" class="od-filters-input" id="availability-today">
                <label class="od-new-filter" for="availability-today">
                    <div class="icon-section">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                            <use xlink:href="#cross-icon"></use>
                        </svg>
                        <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                            <use xlink:href="#available-today"></use>
                        </svg>
                    </div>
                    <div class="filter-text-section">Available Today</div>
                </label>
            </div>
            <div>
                <input type="checkbox" class="od-filters-input" id="female-only">
                <label class="od-new-filter" for="female-only">
                    <div class="icon-section">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                            <use xlink:href="#cross-icon"></use>
                        </svg>
                        <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                            <use xlink:href="#female-doc-icon"></use>
                        </svg>
                    </div>
                    <div class="filter-text-section">Female Doctors</div>
                </label>
            </div>
            <div>
                <input type="checkbox" class="od-filters-input" id="highest-rated">
                <label class="od-new-filter" for="highest-rated">
                    <div class="icon-section">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                            <use xlink:href="#cross-icon"></use>
                        </svg>
                        <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                            <use xlink:href="#high-rating"></use>
                        </svg>
                    </div>
                    <div class="filter-text-section">Highest Rated</div>
                </label>
            </div>
                <div>
                    <input type="checkbox" class="od-filters-input" id="online-now-filter">
                    <label class="od-new-filter" for="online-now-filter">
                        <div class="icon-section">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                                <use xlink:href="#cross-icon"></use>
                            </svg>
                            <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                                <use xlink:href="#online-now"></use>
                            </svg>
                        </div>
                        <div class="filter-text-section">Online Now</div>
                    </label>
                </div>
                <div>
                    <input type="checkbox" class="od-filters-input" id="video-consultation">
                    <label class="od-new-filter" for="video-consultation">
                        <div class="icon-section">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                                <use xlink:href="#cross-icon"></use>
                            </svg>
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                                <use xlink:href="#video-consulation"></use>
                            </svg>
                        </div>
                        <div class="filter-text-section">Video Consultation</div>
                    </label>
                </div>

                <div>
                    <input type="checkbox" class="od-filters-input" id="oladoc-care-500">
                    <label class="od-new-filter" for="oladoc-care-500">
                        <div class="icon-section">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                                <use xlink:href="#cross-icon"></use>
                            </svg>
                            <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                                <use xlink:href="#od-care"></use>
                            </svg>
                        </div>
                        <div class="filter-text-section">Doctors Below Rs. 500</div>
                    </label>
                </div>
            <div>
                <input type="checkbox" class="od-filters-input" id="male-only">
                <label class="od-new-filter" for="male-only">
                    <div class="icon-section">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                            <use xlink:href="#cross-icon"></use>
                        </svg>
                        <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                            <use xlink:href="#male-doc-icon"></use>
                        </svg>
                    </div>
                    <div class="filter-text-section">Male Doctors</div>
                </label>
            </div>
                <div>
                    <input type="checkbox" class="od-filters-input" id="discounted">
                    <label class="od-new-filter" for="discounted">
                        <div class="icon-section">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
                                <use xlink:href="#cross-icon"></use>
                            </svg>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
                                <use xlink:href="#discounts"></use>
                            </svg>
                        </div>
                        <div class="filter-text-section">Discounts</div>
                    </label>
                </div>
            </div>
        </div>
        <div class="container">
            <button class="filters-button right-filters-button" id="btn-right" aria-label="right-btn">
                <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top:-4px;">
                    <path d="M6.5 1L1.5 6L6.5 11" stroke="#232426" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
            <button class="filters-button left-filters-button" id="btn-left" style="float:left;display:none;" aria-label="left-btn">
                <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top:-4px;">
                    <path d="M6.5 1L1.5 6L6.5 11" stroke="#232426" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
    </div>
</div>
<!-- svgs icons -->
<div class="listing-svg d-none">
    <svg>
        <defs>
            <g id="crose-icon-svg">
                <path d="M4.65313 3.97798L7.89313 0.737981C7.96594 0.652958 8.00399 0.543591 7.99967 0.431735C7.99535 0.319879 7.94898 0.213773 7.86983 0.134619C7.79067 0.0554663 7.68457 0.0090961 7.57271 0.00477558C7.46085 0.000455069 7.35149 0.0385024 7.26646 0.111314L4.02646 3.35131L0.786464 0.10687C0.701441 0.0340579 0.592074 -0.00398905 0.480218 0.00033146C0.368362 0.00465197 0.262256 0.0510217 0.183103 0.130175C0.10395 0.209328 0.0575794 0.315434 0.0532588 0.42729C0.0489383 0.539146 0.0869857 0.648513 0.159797 0.733536L3.3998 3.97798L0.155353 7.21798C0.108828 7.25782 0.0710408 7.30685 0.0443638 7.36199C0.0176868 7.41713 0.00269541 7.47719 0.000331191 7.5384C-0.00203303 7.59961 0.00828072 7.66065 0.030625 7.71768C0.0529692 7.77471 0.0868618 7.82651 0.130175 7.86983C0.173488 7.91314 0.225287 7.94703 0.28232 7.96937C0.339354 7.99172 0.40039 8.00203 0.461599 7.99967C0.522807 7.9973 0.582866 7.98231 0.638006 7.95564C0.693146 7.92896 0.742176 7.89117 0.782019 7.84465L4.02646 4.60465L7.26646 7.84465C7.35149 7.91746 7.46085 7.95551 7.57271 7.95119C7.68457 7.94687 7.79067 7.9005 7.86983 7.82134C7.94898 7.74219 7.99535 7.63608 7.99967 7.52423C8.00399 7.41237 7.96594 7.303 7.89313 7.21798L4.65313 3.97798Z" fill="currentColor"/>
            </g>
            <g id="pocket-icon">
                <path d="M4 3H20C20.5304 3 21.0391 3.21071 21.4142 3.58579C21.7893 3.96086 22 4.46957 22 5V11C22 13.6522 20.9464 16.1957 19.0711 18.0711C17.1957 19.9464 14.6522 21 12 21C10.6868 21 9.38642 20.7413 8.17317 20.2388C6.95991 19.7362 5.85752 18.9997 4.92893 18.0711C3.05357 16.1957 2 13.6522 2 11V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8 10L12 14L16 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </g>
            <g id="female-doc-icon">
                <path d="M19 20.5998V17.9998C19 16.7268 18.4943 15.5059 17.5941 14.6057C16.6939 13.7055 15.473 13.1998 14.2 13.1998H5.8C4.52696 13.1998 3.30606 13.7055 2.40589 14.6057C1.50571 15.5059 1 16.7268 1 17.9998V20.5998" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0224 2.14644L11.0225 2.14647C11.5177 2.3774 11.9809 2.8351 12.2341 3.35411C12.3853 3.6639 12.4327 3.83989 12.4936 4.6601C12.5786 5.80481 12.8104 6.70867 13.2545 7.5H6.73668C7.22428 6.60813 7.51469 5.50466 7.51469 4.51072C7.51469 3.37574 8.22022 2.36651 9.18501 2.03336L9.18501 2.03335C9.40344 1.95792 9.73549 1.92146 10.0986 1.94322C10.4605 1.9649 10.7965 2.04103 11.0224 2.14644ZM3.82025 9.45811C3.55181 9.33516 3.40039 9.10859 3.40039 8.8203C3.40039 8.64059 3.55782 8.4157 4.05197 7.88965C4.70465 7.19476 5.22259 6.35363 5.41213 5.681C5.46432 5.49556 5.54258 4.92644 5.58587 4.41623C5.68076 3.29989 5.87392 2.7 6.38832 1.92395C6.99561 1.00797 8.05796 0.286361 9.09182 0.0876055C11.3133 -0.339323 13.3501 0.821686 14.1476 2.96973C14.2602 3.27284 14.361 3.82258 14.4102 4.40266C14.4541 4.92028 14.5329 5.49556 14.5851 5.681C14.7746 6.35363 15.2925 7.19476 15.9452 7.88965C16.6164 8.60417 16.7071 8.81482 16.506 9.19168C16.4515 9.29383 16.4073 9.37045 16.273 9.42793L16.309 9.5H15.9949C15.3808 9.5991 13.9107 9.60029 10.0643 9.59998C6.34521 9.59972 4.17141 9.56845 3.97019 9.51248C3.95608 9.50855 3.94221 9.50439 3.92857 9.5H3.80629L3.82025 9.45811Z" fill="currentColor"/>
            </g>
            <g id="near-me">
                <g clip-path="url(#clip0)">
                <path d="M21 10.877C21 17.877 12 23.877 12 23.877C12 23.877 3 17.877 3 10.877C3 8.49 3.94821 6.20082 5.63604 4.51299C7.32387 2.82516 9.61305 1.87695 12 1.87695C14.3869 1.87695 16.6761 2.82516 18.364 4.51299C20.0518 6.20082 21 8.49 21 10.877Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 13.877C13.6569 13.877 15 12.5338 15 10.877C15 9.2201 13.6569 7.87695 12 7.87695C10.3431 7.87695 9 9.2201 9 10.877C9 12.5338 10.3431 13.877 12 13.877Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </g>
                <defs>
                <clipPath id="clip0">
                <rect width="24" height="24" fill="currentColor" transform="translate(0 0.876953)"/>
                </clipPath>
                </defs>
            </g>
            <g id="video-consulation">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6 12.5668C15.6 12.7124 15.5208 12.8464 15.3932 12.9168C15.2656 12.9872 15.11 12.9828 14.9868 12.9048L12.4348 11.2956V12.8C12.4348 13.0208 12.2556 13.2 12.0348 13.2H4.8C4.5792 13.2 4.4 13.0208 4.4 12.8V7.2C4.4 6.9792 4.5792 6.8 4.8 6.8H12.0348C12.2556 6.8 12.4348 6.9792 12.4348 7.2V8.7044L14.9868 7.0952C15.11 7.0172 15.2656 7.0128 15.3932 7.0832C15.5208 7.1536 15.6 7.2876 15.6 7.4332V12.5668ZM17.0712 2.9288C15.1824 1.04 12.6712 0 10 0C7.3288 0 4.8176 1.04 2.9288 2.9288C1.0404 4.8176 0 7.3288 0 10C0 11.8368 0.5004 13.626 1.4492 15.1872L0.0204004 19.4736C-0.0271996 19.6172 0.0099997 19.7756 0.1172 19.8828C0.1936 19.9592 0.2956 20 0.4 20C0.4424 20 0.4852 19.9932 0.5264 19.9796L4.8128 18.5508C6.374 19.4996 8.1632 20 10 20C12.6712 20 15.1824 18.96 17.0712 17.0712C18.96 15.1824 20 12.6712 20 10C20 7.3288 18.96 4.8176 17.0712 2.9288Z" fill="currentColor"/>
            </g>
            <g id="online-now">
                <path d="M16 21.8276V19.8276C16 18.7668 15.5786 17.7494 14.8284 16.9992C14.0783 16.2491 13.0609 15.8276 12 15.8276H5C3.93913 15.8276 2.92172 16.2491 2.17157 16.9992C1.42143 17.7494 1 18.7668 1 19.8276V21.8276" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8.5 11.8276C10.7091 11.8276 12.5 10.0368 12.5 7.82764C12.5 5.6185 10.7091 3.82764 8.5 3.82764C6.29086 3.82764 4.5 5.6185 4.5 7.82764C4.5 10.0368 6.29086 11.8276 8.5 11.8276Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M17 11.8276L19 13.8276L23 9.82764" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </g>
            <g id="od-care">
                <path d="M23 7.13379L16 12.1338L23 17.1338V7.13379Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M14 5.13379H3C1.89543 5.13379 1 6.02922 1 7.13379V17.1338C1 18.2384 1.89543 19.1338 3 19.1338H14C15.1046 19.1338 16 18.2384 16 17.1338V7.13379C16 6.02922 15.1046 5.13379 14 5.13379Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </g>
            <g id="most-experience">
                <path d="M20 7.90405H4C2.89543 7.90405 2 8.79948 2 9.90405V19.9041C2 21.0086 2.89543 21.9041 4 21.9041H20C21.1046 21.9041 22 21.0086 22 19.9041V9.90405C22 8.79948 21.1046 7.90405 20 7.90405Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M16 21.9041V5.90405C16 5.37362 15.7893 4.86491 15.4142 4.48984C15.0391 4.11477 14.5304 3.90405 14 3.90405H10C9.46957 3.90405 8.96086 4.11477 8.58579 4.48984C8.21071 4.86491 8 5.37362 8 5.90405V21.9041" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </g>
            <g id="available-today">
                <path d="M19 4.3501H5C3.89543 4.3501 3 5.24553 3 6.3501V20.3501C3 21.4547 3.89543 22.3501 5 22.3501H19C20.1046 22.3501 21 21.4547 21 20.3501V6.3501C21 5.24553 20.1046 4.3501 19 4.3501Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M16 2.3501V6.3501" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8 2.3501V6.3501" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M3 10.3501H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </g>
            <g id="high-rating">
                <path d="M7 22.2163H4C3.46957 22.2163 2.96086 22.0056 2.58579 21.6305C2.21071 21.2554 2 20.7467 2 20.2163V13.2163C2 12.6859 2.21071 12.1772 2.58579 11.8021C2.96086 11.427 3.46957 11.2163 4 11.2163H7M14 9.21631V5.21631C14 4.42066 13.6839 3.6576 13.1213 3.09499C12.5587 2.53238 11.7956 2.21631 11 2.21631L7 11.2163V22.2163H18.28C18.7623 22.2218 19.2304 22.0527 19.5979 21.7403C19.9654 21.4279 20.2077 20.9932 20.28 20.5163L21.66 11.5163C21.7035 11.2297 21.6842 10.937 21.6033 10.6586C21.5225 10.3801 21.3821 10.1226 21.1919 9.90382C21.0016 9.68504 20.7661 9.51024 20.5016 9.39153C20.2371 9.27281 19.9499 9.21303 19.66 9.21631H14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </g>
            <g id="discounts">
                <g clip-path="url(#clip0)">
                <path d="M23.2265 13.6091C22.935 13.0187 22.6341 12.4083 22.6341 11.9999C22.6341 11.5915 22.935 10.9811 23.2255 10.3912C23.7254 9.37594 24.2923 8.22516 23.8259 7.10088C23.3435 5.93811 22.1012 5.52069 21.0049 5.15276C20.431 4.9603 19.7807 4.74184 19.5187 4.48039C19.2583 4.21994 19.0398 3.56957 18.8473 2.99618C18.4799 1.8999 18.063 0.657141 16.8997 0.174735C15.7749 -0.291674 14.6247 0.275215 13.6099 0.774618C13.0195 1.06556 12.4091 1.366 11.9997 1.366C11.5913 1.366 10.9809 1.06556 10.391 0.775118C9.37619 0.275215 8.22442 -0.291174 7.10064 0.174735C5.93787 0.657141 5.52095 1.8999 5.15302 2.99618C4.96006 3.56957 4.7421 4.21994 4.48065 4.48089C4.2202 4.74234 3.56933 4.9603 2.99544 5.15326C1.89965 5.52119 0.656897 5.93861 0.173991 7.10088C-0.292418 8.22566 0.274971 9.37594 0.775373 10.3917C1.06632 10.9821 1.36726 11.592 1.36726 12.0004C1.36726 12.4088 1.06632 13.0192 0.775873 13.6096C0.276971 14.6244 -0.289918 15.7747 0.17649 16.899C0.658896 18.0622 1.90115 18.4797 2.99794 18.8476C3.57133 19.04 4.2217 19.2585 4.48265 19.519C4.7436 19.7804 4.96206 20.4308 5.15502 21.0047C5.52245 22.101 5.93986 23.3432 7.10264 23.8256C7.39758 23.9476 7.69402 23.9991 7.98896 23.9991C8.8203 23.9991 9.64364 23.5937 10.3925 23.2252C10.9824 22.9343 11.5923 22.6338 12.0012 22.6338C12.4101 22.6338 13.0205 22.9348 13.6109 23.2252C14.6262 23.7251 15.7769 24.2915 16.8997 23.8256C18.0625 23.3437 18.4799 22.101 18.8478 21.0047C19.0408 20.4308 19.2593 19.7804 19.5207 19.519C19.7817 19.258 20.432 19.04 21.0054 18.8471C22.1017 18.4792 23.3445 18.0622 23.8269 16.8995C24.2933 15.7752 23.7264 14.6244 23.2265 13.6091ZM21.4313 14.4924C21.7128 15.0638 22.0982 15.8457 21.9787 16.1331C21.8448 16.4561 20.9914 16.7425 20.3685 16.9515C19.5477 17.2269 18.6994 17.5118 18.1065 18.1052C17.5126 18.6986 17.2277 19.5475 16.9522 20.3678C16.7428 20.9912 16.4563 21.8445 16.1334 21.978C15.8429 22.0984 15.0636 21.7115 14.4937 21.4311C13.6978 21.0392 12.8755 20.6337 12.0007 20.6337C11.1264 20.6337 10.3035 21.0392 9.50867 21.4306C8.93778 21.712 8.15843 22.0984 7.86799 21.978C7.54555 21.8445 7.25911 20.9912 7.05015 20.3683C6.7747 19.5475 6.48976 18.6986 5.89587 18.1047C5.30249 17.5118 4.45465 17.2274 3.63431 16.9515C3.01144 16.7425 2.1576 16.4556 2.02363 16.1321C1.90415 15.8447 2.28958 15.0628 2.57102 14.4919C2.96295 13.6966 3.36837 12.8738 3.36837 11.9994C3.36837 11.1251 2.96245 10.3023 2.57052 9.50691C2.28908 8.93602 1.90365 8.15368 2.02213 7.86723C2.1566 7.5443 3.00994 7.25735 3.63332 7.04839C4.45415 6.77245 5.30299 6.4875 5.89587 5.89412C6.48926 5.30123 6.7737 4.4529 7.04965 3.63206C7.25861 3.00868 7.54555 2.15485 7.86799 2.02137C7.90498 2.00588 7.94997 1.99938 8.00146 1.99938C8.35289 1.99938 9.01126 2.32332 9.50917 2.56877C10.305 2.96069 11.1274 3.36561 12.0012 3.36561C12.8755 3.36561 13.6988 2.96019 14.4942 2.56877C15.0656 2.28782 15.8454 1.9019 16.1344 2.02187C16.4573 2.15585 16.7438 3.00918 16.9527 3.63256C17.2282 4.4534 17.5126 5.30173 18.106 5.89512C18.6999 6.4885 19.5482 6.77345 20.369 7.04889C20.9919 7.25785 21.8453 7.5448 21.9792 7.86773C22.0987 8.15518 21.7138 8.93752 21.4318 9.50841C21.0404 10.3038 20.635 11.1266 20.635 12.0004C20.6345 12.8743 21.0399 13.6971 21.4313 14.4924Z" fill="currentColor"/>
                <path d="M16.6108 7.38611C16.2203 6.99569 15.587 6.99568 15.1965 7.38661L7.38955 15.2001C6.99962 15.5905 6.99962 16.2239 7.39005 16.6138C7.58551 16.8093 7.84096 16.9062 8.09691 16.9062C8.35286 16.9062 8.60881 16.8088 8.80428 16.6133L16.6113 8.79983C17.0012 8.40891 17.0012 7.77603 16.6108 7.38611Z" fill="currentColor"/>
                <path d="M8.49566 6.35535C7.01195 6.35535 5.80469 7.56261 5.80469 9.04632C5.80469 10.5305 7.01195 11.7378 8.49566 11.7378C9.97937 11.7378 11.1861 10.5305 11.1861 9.04632C11.1861 7.56261 9.97937 6.35535 8.49566 6.35535ZM8.49566 9.73818C8.11473 9.73818 7.80429 9.42774 7.80429 9.04632C7.80429 8.66489 8.11423 8.35495 8.49566 8.35495C8.87658 8.35495 9.18652 8.66539 9.18652 9.04632C9.18652 9.42774 8.87658 9.73818 8.49566 9.73818Z" fill="currentColor"/>
                <path d="M15.5049 12.2617C14.0212 12.2617 12.8145 13.4694 12.8145 14.9536C12.8145 16.4373 14.0212 17.6441 15.5049 17.6441C16.9886 17.6441 18.1959 16.4368 18.1959 14.9536C18.1959 13.4689 16.9886 12.2617 15.5049 12.2617ZM15.5049 15.6445C15.124 15.6445 14.8141 15.3346 14.8141 14.9536C14.8141 14.5717 15.124 14.2613 15.5049 14.2613C15.8864 14.2613 16.1963 14.5717 16.1963 14.9536C16.1963 15.3346 15.8859 15.6445 15.5049 15.6445Z" fill="currentColor"/>
                </g>
                <defs>
                <clipPath id="clip0">
                <rect width="24" height="24" fill="currentColor"/>
                </clipPath>
                </defs>
            </g>
            <g id="cross-icon">
                <path d="M17.9701 6L6.3042 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M6.3042 6L17.9701 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </g>
            <g id="male-doc-icon">
                <path d="M16 21.3708V19.3708C16 18.31 15.5786 17.2925 14.8284 16.5424C14.0783 15.7922 13.0609 15.3708 12 15.3708H5C3.93913 15.3708 2.92172 15.7922 2.17157 16.5424C1.42143 17.2925 1 18.31 1 19.3708V21.3708" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8.5 11.3708C10.7091 11.3708 12.5 9.57996 12.5 7.37082C12.5 5.16168 10.7091 3.37082 8.5 3.37082C6.29086 3.37082 4.5 5.16168 4.5 7.37082C4.5 9.57996 6.29086 11.3708 8.5 11.3708Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M20 8.37082V14.3708" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M23 11.3708H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </g>
        </defs>
    </svg>
</div>

<script>
// javascript for scroll on click
(function(w){
    w.addEventListener('load', function(){
        const   btn_left = document.getElementById('btn-left'),
                btn_right = document.getElementById('btn-right'),
                content = document.getElementById('new-search-filters');
        const content_scroll_width = content.scrollWidth;
        let content_scoll_left = content.scrollLeft;
        if (btn_right) {
        btn_right.addEventListener('click', () => {
            content_scoll_left += 199;
            if (content_scoll_left >= content_scroll_width) { content_scoll_left = content_scroll_width;
            }
            // check for button hide and show
            if (content_scroll_width - 400) {
                btn_left.style.display="block";
            }
            // check for button hide and show
            content.scrollLeft = content_scoll_left;
        });
        }
        if (btn_left) {
        btn_left.addEventListener('click', () => {
            content_scoll_left -= 199;
            if (content_scoll_left <= 0) {
                content_scoll_left = 0;
                // check for button hide and show
                btn_left.style.display="none";
                // check for button hide and show
            }
            btn_right.style.display="block";
            content.scrollLeft = content_scoll_left;
        });
        }
    });
})(window);
document.addEventListener('DOMContentLoaded', () => {
    var scrollLeftPrev = 0;
    $('#new-search-filters').scroll(function () {
        var $elem=$('#new-search-filters');
        var newScrollLeft = $elem.scrollLeft(),
            width=$elem.width(),
            scrollWidth=$elem.get(0).scrollWidth;
        var offset=8;
        if (scrollWidth- newScrollLeft-width<1) {
            $("#btn-right").hide();
            $("#btn-left").show();
        }
        if (newScrollLeft === 0) {
            $("#btn-right").show();
            $("#btn-left").hide();
        }
        scrollLeftPrev = newScrollLeft;
    });
});
// javascript for scroll on click ends here
</script>
</body>
</html>

How to Change the Order in Grid?

Zain Muhammad — Mon, 27 Dec 2021 07:15:41 +0000

We can change the grid order using simple css3 keyword order .check the code snippet below.


<!DOCTYPE html>
<html>
<head>
<title>Change Grid Order</title>
<style>
.order-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 3%;
}
.order-grid .section-one,.order-grid .section-two{
    width:100%;
    font-size:20px;
    font-weight:600;
    text-align:center;
    color:#ffffff;
    padding:50px 0px;
}
.order-grid .section-one{
    background: brown;
    order:2;
}
.order-grid .section-two{
    background: red;
    order:1;
}
</style>
</head>
<body>

<div class="order-grid">
  <div class="section-one">grid one</div>
  <div class="section-two">grid two</div>
</div>

</body>
</html>`