serkan Posts - Answer Overflow

serkan

Posts Comments

KPCKevin Powell - Community

•Created by serkan on 9/19/2023 in #front-end

Why is this overflowing in x axis?

1 replies

KPCKevin Powell - Community

•Created by serkan on 9/18/2023 in #front-end

Where is this slide transition coming from

I have this navbar on my site and I want it to slide in just like in the video but I couldn't understand how is it working, I need to know which property makes this so I can only add transition to that property and not to background color. I exaggerated the transition duration to show what I mean. I'm writing css version of important parts for those who don't know tailwindcss. Before scrolling the page navbar has these properties.

position: relative;
transition: all;
top: 0px;
z-index: 30;

position: relative;
transition: all;
top: 0px;
z-index: 30;

After scrolling:

position: sticky;
transition: all;
top: 0px;
z-index: 30;

position: sticky;
transition: all;
top: 0px;
z-index: 30;

My Navbar:

function FeedNavbar() {
  const { scrollY } = useWindowScrollPosition();
  console.log(scrollY);

  return (
    <div
      className={`${
        scrollY > 200 && `bg-white dark:bg-[#1B2430] sticky shadow-xl py-2`
      } z-30 relative top-0 transition-all ease-in duration-1000`}
    >
      <FeedHeading text="İlanlar" />
      <HamburgerMenu />
    </div>
  );
}

function FeedNavbar() {
  const { scrollY } = useWindowScrollPosition();
  console.log(scrollY);

  return (
    <div
      className={`${
        scrollY > 200 && `bg-white dark:bg-[#1B2430] sticky shadow-xl py-2`
      } z-30 relative top-0 transition-all ease-in duration-1000`}
    >
      <FeedHeading text="İlanlar" />
      <HamburgerMenu />
    </div>
  );
}

1 replies

KPCKevin Powell - Community

•Created by serkan on 8/22/2023 in #front-end

How did I create this cool effect? | Video and the code is in the comments

I was applying Kevin's height 0 to auto video(https://www.youtube.com/watch?v=B_n4YONte5A) but somewhere in the code I had a couple of other issues, so I changed it a bit and solved my problem but now it's interestingly disappear to the middle 😄 I kinda love it but I don't know where it come from. I belive it has something to do with how I position div to the center (top: 50% left: 50% translateX(-50%) translateY(-50%)) but I don't know why exactly. (Now I see there is not a Tailwind tag in here, I hope I am not breaking any rules.)

3 replies

KPCKevin Powell - Community

•Created by serkan on 8/7/2023 in #front-end

Variable Scopes

It's more likely about JavaScript more than React but I tagged it anyway, my question is in commented lines.

function App() {
  const [fullName, setFullName] = useState({
    fName: "",
    lName: ""
  });

  const { fName, lName } = fullName; // I destructed fullName as fName and lName and they are in global scope

  function handleChange(e) {
    const newValue = e.target.value;
    const inputName = e.target.name;

    setFullName((prevValue) => {
      const { fName: prevFName, lName: prevLName } = prevValue; // And here I destructed prevValue as fName and lName, why it doesn't create conflict with fullName destructing? It does work even if I don't rename the variables
      console.log(prevValue);
      if (inputName === "fName") {
        return {
          fName: newValue,
          lName: prevLName
        };
      } else {
        return {
          fName: prevFName,
          lName: newValue
        };
      }
    });
  }

  return (
    <div className="container">
      <h1>
        Hello {fName} {lName}
      </h1>
      <form>
        <input
          onChange={handleChange}
          value={fName}
          name="fName"
          placeholder="First Name"
        />

        <input
          onChange={handleChange}
          value={lName}
          name="lName"
          placeholder="Last Name"
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

function App() {
  const [fullName, setFullName] = useState({
    fName: "",
    lName: ""
  });

  const { fName, lName } = fullName; // I destructed fullName as fName and lName and they are in global scope

  function handleChange(e) {
    const newValue = e.target.value;
    const inputName = e.target.name;

    setFullName((prevValue) => {
      const { fName: prevFName, lName: prevLName } = prevValue; // And here I destructed prevValue as fName and lName, why it doesn't create conflict with fullName destructing? It does work even if I don't rename the variables
      console.log(prevValue);
      if (inputName === "fName") {
        return {
          fName: newValue,
          lName: prevLName
        };
      } else {
        return {
          fName: prevFName,
          lName: newValue
        };
      }
    });
  }

  return (
    <div className="container">
      <h1>
        Hello {fName} {lName}
      </h1>
      <form>
        <input
          onChange={handleChange}
          value={fName}
          name="fName"
          placeholder="First Name"
        />

        <input
          onChange={handleChange}
          value={lName}
          name="lName"
          placeholder="Last Name"
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

2 replies

KPCKevin Powell - Community

•Created by serkan on 7/12/2023 in #front-end

How big should the image sizes be?

5 replies

KPCKevin Powell - Community

•Created by serkan on 7/3/2023 in #front-end

Scrolling to an element with scrollIntoView or with a #

I first used #'s to scroll but it doesn't center the element and it just stops at the start of element. I need to view the element at center, scrollIntoView works perfectly fine but I don't want to use JavaScript for like this easy task, is it possible with plain CSS and HTML?

14 replies

Gaming

Programming