I am trying to achieve the animation on cards when they are scrolled as shown in the following link .
In the below example, I want the animation done in the right-hand side cards ( fade off when they are out the view ).
LINK HERE
I had used the whileInView attribute of framer motion, from Docs. But it not what I expected.
Below is my code, but it is very long. However you can take simply 6 cards in 4x2 (4 rows, 2 cols) as an example.
import React from "react";
import imgurl1s from "../public/mssmall.png";
import imgurl1l from "../public/mslarge.png";
import Image from "next/image";
import {
SiBootstrap,
SiFramer,
SiJavascript,
SiLichess,
SiMongodb,
SiNextdotjs,
SiPostman,
SiReact,
SiRedux,
SiTailwindcss,
} from "react-icons/si";
import { FaNodeJs, FaEye, FaHtml5, FaCss3, FaSpotify } from "react-icons/fa";
import { HiCode } from "react-icons/hi";
import { AiOutlineApi } from "react-icons/ai";
import { motionValue } from "framer-motion";
const Projects = () => {
const currentOffSetY = motionValue(0);
return (
<>
<div className="min-h-full">
<div className=" mx-auto shadow container">
<div className="px-4 py-6 sm:px-0">
<div className="p-5 border-2 border-red-400/20 flex flex-col lg:flex-col items-center justify-center ">
<div className="p-2 sm:p-10 flex flex-col lg:flex-row items-center space-y-3 lg:space-y-0 lg:space-x-16 justify-center">
{/* card1 mschatapp*/}
<div className="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute ">
<div
className="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row md:max-w-6xl md:max-h-96 hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100"
>
<div className="block sm:hidden">
<Image
height={350}
width={700}
className="object-cover rounded-t-lg "
src={imgurl1l}
alt=""
/>
</div>
<div className="hidden sm:block">
<Image
width="500%"
height="1000%"
className="object-cover rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
src={imgurl1s}
alt=""
/>
</div>
<div className="flex flex-col justify-between p-3 leading-normal ">
<h5 className="mb-2 text-lg sm:text-2xl font-bold tracking-tight text-gray-900 ">
ms-chatApp
</h5>
<p className="mb-3 font-normal text-xsm sm:text-base text-justify text-gray-700 ">
ms-chat-app is the macro version of ms-teams where you
can form groups and can message & share images with
different people. You can also customize the UI by
yourself.
</p>
<hr className="m-auto text-black bg-black" />
<h3 className="text-sm sm:text-base text-black font-semibold">
Technologies
</h3>
<div className="text-black flex flex-row space-x-3 py-2">
<span>
<SiReact className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<SiMongodb className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<FaNodeJs className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
<span>
<SiPostman className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
</div>
<div className="flex flex-row items-center justify-between w-full lg:w-4/5 mt-3 lg:mt-5 mx-auto bg-slate-300 rounded-lg">
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Live"
>
<a
href="#"
target="_blank"
>
<FaEye size={18} />
</a>
</button>
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Code"
>
<a
href="#"
target="_blank"
>
<HiCode size={18} />
</a>
</button>
</div>
</div>
</div>
</div>
{/* card2 */}
<div className="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute ">
<div
className="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row md:max-w-6xl md:max-h-96 hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100"
>
<div className="block sm:hidden">
<Image
height={350}
width={700}
className="object-cover rounded-t-lg "
src={imgurl1l}
alt=""
/>
</div>
<div className="hidden sm:block">
<Image
width="500%"
height="1000%"
className="object-cover rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
src={imgurl1s}
alt=""
/>
</div>
<div className="flex flex-col justify-between p-3 leading-normal ">
<h5 className="mb-2 text-lg sm:text-2xl font-bold tracking-tight text-gray-900 ">
ms-chatApp
</h5>
<p className="mb-3 font-normal text-xsm sm:text-base text-justify text-gray-700 ">
ms-chat-app is the macro version of ms-teams where you
can form groups and can message & share images with
different people. You can also customize the UI by
yourself.
</p>
<hr className="m-auto text-black bg-black" />
<h3 className="text-sm sm:text-base text-black font-semibold">
Technologies
</h3>
<div className="text-black flex flex-row space-x-3 py-2">
<span>
<SiReact className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<SiMongodb className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<FaNodeJs className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
<span>
<SiPostman className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
</div>
<div className="flex flex-row items-center justify-between w-full lg:w-4/5 mt-3 lg:mt-5 mx-auto bg-slate-300 rounded-lg">
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Live"
>
<a
href="#"
target="_blank"
>
<FaEye size={18} />
</a>
</button>
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Code"
>
<a
href="#"
target="_blank"
>
<HiCode size={18} />
</a>
</button>
</div>
</div>
</div>
</div>
</div>
<div className="p-2 sm:p-10 flex flex-col lg:flex-row items-center space-y-3 lg:space-y-0 lg:space-x-16 justify-center">
{/* card3 */}
<div className="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute ">
<div
className="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row md:max-w-6xl md:max-h-96 hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100"
>
<div className="block sm:hidden">
<Image
height={350}
width={700}
className="object-cover rounded-t-lg "
src={imgurl1l}
alt=""
/>
</div>
<div className="hidden sm:block">
<Image
width="500%"
height="1000%"
className="object-cover rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
src={imgurl1s}
alt=""
/>
</div>
<div className="flex flex-col justify-between p-3 leading-normal ">
<h5 className="mb-2 text-lg sm:text-2xl font-bold tracking-tight text-gray-900 ">
ms-chatApp
</h5>
<p className="mb-3 font-normal text-xsm sm:text-base text-justify text-gray-700 ">
ms-chat-app is the macro version of ms-teams where you
can form groups and can message & share images with
different people. You can also customize the UI by
yourself.
</p>
<hr className="m-auto text-black bg-black" />
<h3 className="text-sm sm:text-base text-black font-semibold">
Technologies
</h3>
<div className="text-black flex flex-row space-x-3 py-2">
<span>
<SiReact className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<SiMongodb className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<FaNodeJs className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
<span>
<SiPostman className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
</div>
<div className="flex flex-row items-center justify-between w-full lg:w-4/5 mt-3 lg:mt-5 mx-auto bg-slate-300 rounded-lg">
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Live"
>
<a
href="#"
target="_blank"
>
<FaEye size={18} />
</a>
</button>
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Code"
>
<a
href="#"
target="_blank"
>
<HiCode size={18} />
</a>
</button>
</div>
</div>
</div>
</div>
{/* card4 /}
<div className="card w-full h-full bg-transparent hover:bg-gradient-to-r hover: hover:to-[#b2eff7] transition hover:rounded-lg hover:drop-shadow-3xl hover:ease-in-oute ">
<div
className="transition p-2 flex flex-col items-center bg-gradient-to-r from-[#ffa0ae,5%] to-[#b2eff7] rounded-lg border shadow-md sm:flex-row md:max-w-6xl md:max-h-96 hover:cursor-pointer hover:from-[#ffa0ae,5%] hover:to-[#b2eff7] hover:transition hover:duration-500 ease-in-out opacity-90 hover:opacity-100"
>
<div className="block sm:hidden">
<Image
height={350}
width={700}
className="object-cover rounded-t-lg "
src={imgurl1l}
alt=""
/>
</div>
<div className="hidden sm:block">
<Image
width="500%"
height="1000%"
className="object-cover rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
src={imgurl1s}
alt=""
/>
</div>
<div className="flex flex-col justify-between p-3 leading-normal ">
<h5 className="mb-2 text-lg sm:text-2xl font-bold tracking-tight text-gray-900 ">
ms-chatApp
</h5>
<p className="mb-3 font-normal text-xsm sm:text-base text-justify text-gray-700 ">
ms-chat-app is the macro version of ms-teams where you
can form groups and can message & share images with
different people. You can also customize the UI by
yourself.
</p>
<hr className="m-auto text-black bg-black" />
<h3 className="text-sm sm:text-base text-black font-semibold">
Technologies
</h3>
<div className="text-black flex flex-row space-x-3 py-2">
<span>
<SiReact className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<SiMongodb className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl" />
</span>
<span>
<FaNodeJs className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
<span>
<SiPostman className="hover:text-purple-900 hover:border-[1px] hover:border-purple-900 hover:scale-150 hover:rounded-xl " />
</span>
</div>
<div className="flex flex-row items-center justify-between w-full lg:w-4/5 mt-3 lg:mt-5 mx-auto bg-slate-300 rounded-lg">
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Live"
>
<a
href="#"
target="_blank"
>
<FaEye size={18} />
</a>
</button>
<button
className="bg-indigo-900 text-sm sm:text-base text-white p-1 px-2 rounded-md hover:bg-indigo-800 hover:cursor-pointer transition duration-50 ease-in-out"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="See Code"
>
<a
href="#"
target="_blank"
>
<HiCode size={18} />
</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default Projects;
Related
How can make the calendar pop up? I am using tailwind CSS, it won't work. I tried to follow the documentation about the z-index.
This is my main homepage. And it's arranged completely.
const Homepage = () => {
return (
<div>
<Navbar />
<Header />
<UnderHeader />
<div className="mt-14 flex flex-col items-center gap-8">
<Featured />
</div>
</div>
)
}
This is UnderHeader.jsx where the content of search box, date etc.
return (
<div className="w-screen h-80 max-h-7xl drop-shadow-lg ">
<div
className="w-full h-full mt-5 bg-no-repeat bg-cover bg-center opacity-100 bg-neutral-800 bg-blend-overlay flex items-center justify-center "
style={{ backgroundImage: `url(${BackgroundIsland})` }}
>
<div className="flex items-center justify-evenly p-4 w-3/4 h-16 text-lg border-2 border-white/[.2] bg-white/[.08] rounded-full">
<div className="flex gap-3 items-center justify-center text-white">
<FaBed size={36} className="" />
<input
type="text"
placeholder="Location..."
className="px-3 border-b-2 py-1 text-dark focus:outline-none w-72 bg-transparent cursor-pointer"
/>
</div>
<div className="flex gap-3 cursor-pointer text-white items-center relative z-50 justify-center">
<FcCalendar size={36} className="text-white" />
<p onClick={() => setOpenDate(!openDate)}>
{`${format(date[0].startDate, 'MM/dd/yyyy')}`}
<span className="mx-2 font-thin">to</span>
{`${format(date[0].endDate, 'MM/dd/yyyy')}`}
</p>
{openDate && (
<DateRange
editableDateInputs={true}
onChange={(item) => setDate([item.selection])}
moveRangeOnFirstSelection={false}
ranges={date}
className="absolute top-[50px]"
/>
)}
</div>
<div className="flex gap-3 text-white items-center justify-center relative">
<HiUserGroup size={36} className="" />
<p
className="cursor-pointer"
onClick={() => setOpenOptions(!openOptions)}
>{`${options.adult} adult • ${options.children} children • ${options.room} room`}</p>
{openOptions && (
<div className="absolute top-[50px] bg-white text-gray-800 rounded-sm px-3 py-4 drop-shadow-2xl">
{/* This is person choose */}
<ButtonHeader
title="Adult"
buttonName="adult"
quantity={options.adult}
handleOption={handleOption}
/>
<ButtonHeader
disabled={options.children <= 1}
title="Children"
buttonName="children"
quantity={options.children}
handleOption={handleOption}
/>
<ButtonHeader
disabled={options.room <= 1}
title="Room"
buttonName="room"
quantity={options.room}
handleOption={handleOption}
/>
</div>
)}
</div>
<div className="flex gap-1 cursor-pointer bg-blue-200 hover:bg-blue-300 duration-300 rounded-full px-4 py-3 items-center justify-center">
<FcSearch size={24} className="" />
<p className="text-lg font-bold">Search</p>
</div>
</div>
</div>
</div>
)
This is featured.jsx that contains the image, which, and it is under the header.jsx
const Featured = () => {
return (
<div className="w-full max-w-5xl flex justify-between gap-4 ">
<div className="w-full object-cover relative">
<img
src="https://images.unsplash.com/photo-1472213984618-c79aaec7fef0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=855&q=80"
alt=""
className="w-full object-fit z-[1]"
/>
<div className="text-white rounded-lg h-64 absolute bottom-4">
<p className="text-5xl absolute">Dublin</p>
<p className="text-5xl absolute">123 Properties</p>
</div>
</div>
</div>
)
}
export default Featured
live demo: https://booking-ui-sand.vercel.app/
repo: https://github.com/Zurcemozz/bookingUI
I don't know if this is a great approach, I inline code the CSS to the feature and make it negative. is there any way to apply it in tailwind CSS?
const Featured = () => {
return (
<div className="w-full max-w-7xl flex justify-space-between gap-4 ">
<div
className="relative text-white drop-shadow-lg h-64"
style={{ zIndex: -1 }}
>
<img
src="https://images.unsplash.com/photo-1511515828069-1e4853d8b336?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
alt=""
className="w-full object-cover"
/>
<div className="absolute bottom-5 left-4">
<p className="text-7xl">Dublin</p>
<p className="text-5xl">123 Properties</p>
</div>
</div>
</div>
)
}
export default Featured
Tailwind allows the use of negative values. You could try to use the class -z-10 instead of using the inline style.
i'm new with Stack Overflow. I don't have enough 10 reputation to embed image. Sorry for this inconvenience but I have some question about iframe tag:
I tried some way to get html element in #document of iframe tag, but somehow it still not work. Can you explain why for me and how can I get element have id = "check". I'm try to learn
There is test.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<iframe src="/login" width="100%" height="100%" id="iframe"></iframe>
<script>
const iframe = $("#iframe");
console.log(iframe);
console.log(iframe.contents());
console.log(iframe.contents().find("#check").html());
</script>
</body>
</html>
There is login.blade.php
<x-common :title="'Login'">
<x-slot name='main'>
<div class="w-full lg:w-4/12 px-4">
<div class="pt-20"></div>
<div
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-200 border-0">
<div class="rounded-t mb-0 px-6 py-6">
<div class="text-center mb-3">
<h6 class="text-gray-500 text-sm font-bold">
Sign in with
</h6>
</div>
<div class="btn-wrapper text-center">
<button
class="bg-white active:bg-gray-50 text-gray-700 px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
type="button">
<img alt="..." class="w-5 mr-1"
src="{{ asset('assets/img/github.svg') }}" />Github</button><button
class="bg-white active:bg-gray-50 text-gray-700 px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
type="button">
<img alt="..." class="w-5 mr-1" src="{{ asset('assets/img/google.svg') }}" />Google
</button>
</div>
<hr class="mt-6 border-b-1 border-gray-300" />
</div>
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
<div class="text-gray-400 text-center mb-3 font-bold">
<small>Or sign in with credentials</small>
</div>
<x-alert></x-alert>
<form action="login" method="post">
<div class="relative w-full mb-3">
<label class="block uppercase text-gray-600 text-xs font-bold mb-2"
for="grid-password">Email</label><input type="email"
class="border-0 px-3 py-3 placeholder-gray-300 text-gray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Email" name="email" value="{{ old('email') }}" />
</div>
<div class="relative w-full mb-3">
<label class="block uppercase text-gray-600 text-xs font-bold mb-2"
for="grid-password">Password</label><input type="password" autocomplete="on"
class="border-0 px-3 py-3 placeholder-gray-300 text-gray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Password" name="password" value="{{ old('password') }}" />
</div>
<div id="check">
<label class="inline-flex items-center cursor-pointer"><input id="customCheckLogin"
type="checkbox"
class="form-checkbox border-0 rounded text-gray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
name="remember" /><span class="ml-2 text-sm font-semibold text-gray-600">Remember
me</span></label>
</div>
<div class="text-center mt-6">
<button
class="bg-gray-800 text-white active:bg-gray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
type="submit">
Sign In
</button>
</div>
#csrf
</form>
<div class="flex flex-wrap">
<div class="w-1/2">
<a href="password/forgot" class="text-gray-500 text-sm font-bold"><small>Forgot
password?</small></a>
</div>
<div class="w-1/2 text-right">
<a href="register" class="text-gray-500 text-sm font-bold"><small>Create new
account</small></a>
</div>
</div>
</div>
</div>
</div>
</x-slot>
</x-common>
Console
Elements
I think the iframe document is not ready when you try to access the nodes. You should wait for the iframe load event after that you can access the child nodes.
$('#iframe').on("load", function() {
// do the stuff here
});
You should try to catch the event 'load' of the iframe using javascript:
document.querySelector("iframe").addEventListener( "load", function() {
console.log("This will appear on the console when the iframe is loaded");
});
Or you can use jquery instead:
$('iframe').on("load", function() {
// content for the iframe when it is loaded
}
This is my tailwind scroll bar and I want to change its height how can I do that? The below image shows its height. I cannot change the sm:h-96 can you suggest to me an method to change the height ?
{/** Chat Scroll View */}
<div class=" text-gray-500 bg-white rounded-lg border w-full max-w-xl sm:h-96 p-4 overflow-y-scroll scrollbar border-solid border-2 border-red-500">
<div class="space-y-1">
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/300"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-green-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Ryann Remo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
23
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/300"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-green-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Ryann Remo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
23
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/500"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Karp Bonolo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
10
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/500"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Karp Bonolo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
10
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md border-l-4 border-red-500">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/200"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Mercedes Yemelyan</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/600"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Cadi Kajetán</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/650"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Rina Samuel</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
</div>
</div>
</div>
</div>
{/** Chat Scroll View */}
If you want to change the height based on your preference you can use an arbitrary value like h-[120px] or h-[30rem] or h-[180px] for example. you can change the value inside the square brackets according to the height you want.
You can learn more about arbitrary values in the tailwind documentation here:
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
I want to comment dynamically on a video with jQuery, but when I comment on what I'm doing, the old comment changes and all comments receive the same text. The value I get from the input is written to all comments. How can I fix this?
$(document).ready(function() {
$("#addCommentBtn").click(function() {
var comment = $("#commentText").val();
if (comment === "") {
$("#error-msg").fadeIn();
setTimeout(function() {
$("#error-msg").fadeOut();
}, 3000);
} else {
$('<li class="w-full comment mt-4"><div class="w-full md:w-1/2 comment flex flex-col"><div class="flex gap-4 items-center text-lg font-bold"><img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt=""><h1>André Potchinka</h1></div><div class="ml-16 flex flex-col justify-center"><div class=" mt-2 flex gap-1 items-center"><h1 class="comment-content text-gray-500 font-bold"></h1><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up" aria-hidden="true"></i>0</span><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down" aria-hidden="true"></i>0</span></div><div class="w-full flex flex-col"><input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment..."><ul class="responses p-4 flex flex-col gap-2"> </ul><button class="responseBtn text-right mt-2 text-gray-500">Answer</button></div></div></div></li>').appendTo(".comments");
$(".comment-content").text(comment);
$("#commentText").val("");
$("#valid-msg").fadeIn();
setTimeout(function() {
$("#valid-msg").fadeOut();
}, 3000);
}
});
});
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="comments" class="hidden p-4">
<div class="container mx-auto">
<div class="w-full flex gap-4">
<img src="assets/media/svg/Group 199.png" alt="">
<input type="text" required id="commentText" class="pt-4 flex-1 focus:outline-none border-b border-gray-500 py-1 px-2 bg-transparent" placeholder="Please login to leave a comment...">
</div>
<div class="w-full flex gap-4 justify-end items-center mt-4">
Cancel
<button id="addCommentBtn" class="focus:outline-none bg-black px-6 border border-black py-1 rounded-full text-gray-500 flex items-center pt-3">Comment</button>
</div>
<ul class="w-full comments">
<li class="w-full comment mt-4">
<div class="w-full md:w-1/2 comment flex flex-col">
<div class="flex gap-4 items-center text-lg font-bold">
<img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt="">
<h1>André Potchinka</h1>
</div>
<div class="ml-16 flex flex-col justify-center">
<div class=" mt-2 flex gap-1 items-center">
<h1 class="text-gray-500 font-bold">Nice work, congragulations.</h1>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up"></i>0</span>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down"></i>0</span>
</div>
<div class="w-full flex flex-col">
<input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment...">
<ul class="responses p-4 flex flex-col gap-2 text-gray-500">
<li>Yoruma yanıt verildi :)</li>
</ul>
<div class="flex justify-end">
<button class="responseBtn mt-2 text-gray-500 w-24 text-center">Answer</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
With the selector .comment-content, you are selecting all the elements with that class, so of course all comments' text content will be overwritten. Save your new element into a variable and restrict the class selector on that new element instead:
$(document).ready(function() {
$("#addCommentBtn").click(function() {
var comment = $("#commentText").val();
if (comment === "") {
$("#error-msg").fadeIn();
setTimeout(function() {
$("#error-msg").fadeOut();
}, 3000);
} else {
let newComment = $('<li class="w-full comment mt-4"><div class="w-full md:w-1/2 comment flex flex-col"><div class="flex gap-4 items-center text-lg font-bold"><img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt=""><h1>André Potchinka</h1></div><div class="ml-16 flex flex-col justify-center"><div class=" mt-2 flex gap-1 items-center"><h1 class="comment-content text-gray-500 font-bold"></h1><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up" aria-hidden="true"></i>0</span><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down" aria-hidden="true"></i>0</span></div><div class="w-full flex flex-col"><input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment..."><ul class="responses p-4 flex flex-col gap-2"> </ul><button class="responseBtn text-right mt-2 text-gray-500">Answer</button></div></div></div></li>').appendTo(".comments");
$(".comment-content", newComment).text(comment);
$("#commentText").val("");
$("#valid-msg").fadeIn();
setTimeout(function() {
$("#valid-msg").fadeOut();
}, 3000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="comments" class="hidden p-4">
<div class="container mx-auto">
<div class="w-full flex gap-4">
<img src="assets/media/svg/Group 199.png" alt="">
<input type="text" required id="commentText" class="pt-4 flex-1 focus:outline-none border-b border-gray-500 py-1 px-2 bg-transparent" placeholder="Please login to leave a comment...">
</div>
<div class="w-full flex gap-4 justify-end items-center mt-4">
Cancel
<button id="addCommentBtn" class="focus:outline-none bg-black px-6 border border-black py-1 rounded-full text-gray-500 flex items-center pt-3">Comment</button>
</div>
<ul class="w-full comments">
<li class="w-full comment mt-4">
<div class="w-full md:w-1/2 comment flex flex-col">
<div class="flex gap-4 items-center text-lg font-bold">
<img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt="">
<h1>André Potchinka</h1>
</div>
<div class="ml-16 flex flex-col justify-center">
<div class=" mt-2 flex gap-1 items-center">
<h1 class="text-gray-500 font-bold">Nice work, congragulations.</h1>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up"></i>0</span>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down"></i>0</span>
</div>
<div class="w-full flex flex-col">
<input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment...">
<ul class="responses p-4 flex flex-col gap-2 text-gray-500">
<li>Yoruma yanıt verildi :)</li>
</ul>
<div class="flex justify-end">
<button class="responseBtn mt-2 text-gray-500 w-24 text-center">Answer</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
I've done this but the modal won't open whatsoever
document.addEventListener('click', ({ target }) => {
if (!target.closest('#modal-submit')) {
document.getElementById('modal-submit').classList.add('hide-visibility');
}
})
The trickier part is that there's a form inside the modal.
This to trick "mostly code" error: ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
document.getElementById('show-modal').onclick = (e) => {
document.getElementById('modal-submit').classList.remove('hide-visibility')
}
.hide-visibility {
opacity: 0;
visibility: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<div
id="modal-submit"
class="fixed z-10 inset-0 overflow-y-auto hide-visibility"
style="z-index: 9999; transition: all .5s;"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
>
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
<!--
Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100"
Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-->
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pb-4 sm:p-3 sm:pb-4">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Submit Exam
</h3>
<div class="mt-5">
<p class="text-sm text-gray-500">
<input id="certify-checkbox" type="checkbox" class="form-checkbox h-3 w-3 text-gray-600">
I certify that
</p>
</div>
<div class="mt-5">
<p class="text-sm text-gray-500">
<input id="final-checkbox" type="checkbox" class="form-checkbox h-3 w-3 text-gray-600">
I have conducted a final round of proofing before submitting this project.
</p>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm">
Submit
</button>
</div>
</div>
</div>
</div>
<button id="show-modal" class="border border-indigo-600">Show</button>
document.getElementById("show-modal").onclick = (e) => {
document.getElementById("modal-submit").classList.remove("hide-visibility");
};
document.addEventListener('click', (event) => {
const boolIsOutside = document.getElementById("grey-bg").isSameNode(event.target);
if (boolIsOutside) {
document.getElementById("modal-submit").classList.add("hide-visibility");
}
});
.hide-visibility {
opacity: 0;
visibility: hidden;
}
<div
id="modal-submit"
class="fixed z-10 inset-0 overflow-y-auto hide-visibility"
style="z-index: 9999; transition: all .5s; border: 2px solid black"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
>
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<div id="grey-bg" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
<!--
Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100"
Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-->
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pb-4 sm:p-3 sm:pb-4">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Submit Exam
</h3>
<div class="mt-5">
<p class="text-sm text-gray-500">
<input id="certify-checkbox" type="checkbox" class="form-checkbox h-3 w-3 text-gray-600">
I certify that
</p>
</div>
<div class="mt-5">
<p class="text-sm text-gray-500">
<input id="final-checkbox" type="checkbox" class="form-checkbox h-3 w-3 text-gray-600">
I have conducted a final round of proofing before submitting this project.
</p>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm">
Submit
</button>
</div>
</div>
</div>
</div>
<button id="show-modal" class="border border-indigo-600">Show</button>
Using the concept of event propagation, you can use this,
// You can use any other selector according to your need
const ele = document.getElementById('someId');
// adding click event listener to the selected elem (can use any other event)
document.addEventListener('click', (event) => {
const boolIsInside = ele.contains(event.target);
if (boolIsInside) {
// logic if the click was inside the modal
} else {
// logic if the click was outside the modal
}
});