ABUL KALAM Posts - Answer Overflow

ABUL KALAM

•Created by ABUL KALAM on 10/24/2024 in #front-end

Animate SVG

Hi Guys. I am trying to animate an svg on hover/mouseover and reverse the animation on mouseleave. I am not achieving exactly what i want to. The first video show what I am trying to do and the second one is what I have done. Please help out.

7 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 10/6/2024 in #front-end

Backdrop blur not working on a specific element in Brave and Chrome

Hi. I am facing a strange issue here. This backdrop blur is working well on other elements and on this element as well on Firefox. It's just not working on this specific element on Brave and Chrome.

import Image from "next/image";
import React from "react";
import { motion } from "framer-motion";

type FindYourRideSubMenuLayoutProps = {
  children: React.ReactNode;
  heading: string;
  icon: string;
};

const FindYourRideSubMenuLayout = ({
  children,
  heading,
  icon,
}: FindYourRideSubMenuLayoutProps) => {
  return (
    <>
      <div className="w-max min-w-max absolute right-[calc(100%+.5rem)] bg-white/30 backdrop-blur-md border border-white rounded-md text-white ~px-3/6 pt-2 pb-4 space-y-2 sm:w-auto">
        <div className="flex items-center gap-2">
          <span className="font-bold ~text-sm/lg">{heading}</span>
          <Image
            src={icon}
            alt={heading}
            width={24}
            height={24}
            className="~w-4/6 h-auto"
          />
        </div>
        {children}
      </div>
    </>
  );
};

export default FindYourRideSubMenuLayout;

import Image from "next/image";
import React from "react";
import { motion } from "framer-motion";

type FindYourRideSubMenuLayoutProps = {
  children: React.ReactNode;
  heading: string;
  icon: string;
};

const FindYourRideSubMenuLayout = ({
  children,
  heading,
  icon,
}: FindYourRideSubMenuLayoutProps) => {
  return (
    <>
      <div className="w-max min-w-max absolute right-[calc(100%+.5rem)] bg-white/30 backdrop-blur-md border border-white rounded-md text-white ~px-3/6 pt-2 pb-4 space-y-2 sm:w-auto">
        <div className="flex items-center gap-2">
          <span className="font-bold ~text-sm/lg">{heading}</span>
          <Image
            src={icon}
            alt={heading}
            width={24}
            height={24}
            className="~w-4/6 h-auto"
          />
        </div>
        {children}
      </div>
    </>
  );
};

export default FindYourRideSubMenuLayout;

1 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 9/19/2024 in #front-end

White background when image loads

Hi. This is my site in Next.js. When the page reloads, a white background is displayed behind the image of the hero section, especially when you visit another page from the navbar like About or Solutions Can we avoid it or reduce this effect? https://visible-paths-six.vercel.app/

21 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 9/2/2024 in #front-end

Using media query with each property

Suppose I have a div which is to be displayed only above lg screens. I have a button inside that div. Should I use lg with each property of the button or not?

<div className="hidden lg:block">
  <button className="text-white w-max hover:bg-green-800 py-4 px-6 rounded-md">
    Contact sales
  </button>
  <!-- other content -->
</div>

<div className="hidden lg:block">
  <button className="text-white w-max hover:bg-green-800 py-4 px-6 rounded-md">
    Contact sales
  </button>
  <!-- other content -->
</div>

3 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 3/13/2024 in #front-end

Fonts in tailwindcss

I was just curious, where does tailwindcss gets its fonts from? I just added this thing inside extend object of tailwind.config.js file and was able to use the font.

fontFamily: {
  "proxima-nova": ["Proxima Nova", "sans-serif"],
},

fontFamily: {
  "proxima-nova": ["Proxima Nova", "sans-serif"],
},

8 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 3/9/2024 in #front-end

Merged cells in table

5 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 1/2/2024 in #front-end

Ellipsis without fixed width

2 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 12/30/2023 in #front-end

No Scroll bar design

I am working on a project and the client has said that their shouldn't be any main scroll bar (either horizontal or vertical). There can be scroll bars for individual sections and most of the time, user will be navigating using buttons (like carousels). The project is having a user panel and admin panel. I want to ask if this is practically possible since it should be responsive as well. If there is an article on it, please share the link.

3 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 12/19/2023 in #front-end

SASS Issue in Create React App

I have a react template made with create react app. It has bootstrap and SASS setup in it. I want to change the $primary color. Changing color in .css files does not work. I know that changing anything in SCSS file needs to compile it. I have tried to compile it but it gives a lot of errors related to scss functions deprecations. What should I do?

2 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 9/29/2023 in #os-and-tools

Updates are disabled

2 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 8/30/2023 in #front-end

Dynamically setting the color in TailwindCSS.

I am working with Next.js and Tailwind CSS and using Context API to set the theme of my webpage dynamically. I have a color palette of 8 colors. But hover:${themeColor.bg.base} is not working with hover, otherwise the color is working fine. themeColor.hover.base actually points to bg-themeColor2Base, and themeColor2Base is defined in tailwind.config.css.

22 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 8/29/2023 in #front-end

What tags should be used for a large clickable div having a button.

6 replies

KPCKevin Powell - Community

•Created by ABUL KALAM on 8/25/2023 in #front-end

Optimal Approach for Displaying Different Content on Mobile and Desktop Screens

I am working with React.js and Tailwind CSS. I have two divs with multiple pictures each. I want to display one on the mobile screen and the other on the desktop and tablet screen. * What would be the preferred way to do that? * Although the first method looks preferable, wouldn't it load the images unnecessarily in both divs if they are needed in only one div at a time? * Method 1:

<>
  <div className="block sm:hidden"> {content} </div> // display: block above 640px and display: hidden from 0-640px
  <div className="hidden sm:block"> {content} </div> // display: hidden above 640px and display: block from 0-640px
</>

<>
  <div className="block sm:hidden"> {content} </div> // display: block above 640px and display: hidden from 0-640px
  <div className="hidden sm:block"> {content} </div> // display: hidden above 640px and display: block from 0-640px
</>

* Method 2:

<>
  {window.innerWidth > 640 ? (
    <div className="block"> {content} </div>
  ) : (
    <div className="block"> {content} </div>
  )}
</>

<>
  {window.innerWidth > 640 ? (
    <div className="block"> {content} </div>
  ) : (
    <div className="block"> {content} </div>
  )}
</>

10 replies

Gaming

Programming