I'm trying to load the data when cursor pointer is pointing on svg "i" (information).
It's showing after I click on "i", but I want to load not on button but when cursor pointer is above this svg like this:
Is there any way to load the data when my cursor pointer is set on "i" like this?
Here is my code:
<div click.delegate="getTenantAgentById(agent.agentId,agent.info)" class="bg-white px-4 py-5 sm:grid sm:grid-cols- sm:gap-4 sm:px-6">
<dd repeat.for="i of info" class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
${i.name} : ${i.value}
</dd>
</div>
Related
I'm aware that I can add a blur placeholder or blur animation until the image has loaded, but I don't feel that's the way to go for a hero section, I would say that's pretty bad UX.
I'm already using the priority prop, which I thought would solve the issue I'm seeing.
Page is using getStaticProps and pictures are served via Cloudinary.
Video of behavior:
https://jumpshare.com/v/JPq1yXozMTKrQREl0s7U
Is there a way to tell Next.js to not serve the page until the hero image is loaded?
In this case, I rather have the user wait so that the page is served with the pictures directly.
Or do I need to switch completely to server-side rendering for the whole index page, or is there another way to go about it?
Hero section:
<div className="hidden sm:relative sm:z-0 sm:block sm:h-[calc(100vh-89px)] sm:overflow-hidden sm:border-b sm:border-black sm:bg-cover sm:bg-fixed sm:bg-center sm:bg-no-repeat">
<Image src={heroDesktopImage} objectFit="cover" alt={heroDesktopImageAlt} layout="fill" priority={true} />
<div className="mx-auto h-full max-w-screen-3xl ">
<div className="flex h-full w-full items-end justify-center">
<div className="relative bottom-[15%] text-center">
<h1 className="mb-8 text-4xl font-bold text-white">{lead.toLocaleUpperCase()}</h1>
<button className="border border-gray-900 bg-white text-sm text-gray-900 lg:hover:bg-black lg:hover:text-white ">
<Link href="/products" passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="block h-full w-full py-5 px-10">{buttonText.toLocaleUpperCase()}</a>
</Link>
</button>
</div>
</div>
</div>
</div>
I want to trigger a dropdown menu via hover so use #mouseover. But when the cursor places between text and chevron, dropdown becomes hide. I use mouseover with a tag so it should contain text and chevron, shouldn't it?
here's my code
<header class="relative z-50" x-data="{ dropdown: '' }">
<nav class="overflow-hidden z-50">
<div class="container space-x-14 py-7 desktop:justify-start flex items-center z-50">
<nav class="space-x-14">
<a #mouseover="dropdown = dropdown === 'open' ? '' : 'open'" class="cursor-pointer font-semibold">
<span class="border-b-2 pb-2 transition duration-300" :class="dropdown === 'open' ? 'border-seaweed' : 'border-transparent'">{{ __('test1') }}</span> <span class="inline-block bg-caret-down bg-center bg-no-repeat w-4 h-2"></span>
</a>
what is the prolem?
To fix this, we need to embed the two <span> elements into a <div> where we add the pointer-events-none class (assuming you are using TailwindCSS) to disable the pointer events of the child elements. Furthermore we also add the #mouseleave event to change the open state.
<a #mouseover="dropdown = 'open'"
#mouseleave="dropdown = ''"
class="cursor-pointer font-semibold">
<div class="pointer-events-none">
<span class="border-b-2 pb-2 transition duration-300" :class="dropdown === 'open' ? 'border-seaweed' : 'border-transparent'">{{ __('test1') }}</span>
<span class="inline-block bg-caret-down bg-center bg-no-repeat w-4 h-2"></span>
<div>
</a>
I made this style for side bar navigation
I made a box and used transform to hide it on the left side, to get the curved border effect.
On hover, active ect
Border button -> bg-green-300
text-green-300 for icon and text
font-semibold for text only
<a href="/dashboard">
<div class="flex flex-row space-x-8 w-72 text-lg pb-3 text-gray-200">
<div class="h-8 w-8 rounded transform -translate-x-7 hover:bg-green-300"></div>
<div class="flex flex-row items-center space-x-8 transform -translate-x-10 -translate-y-1">
<i class="bi bi-columns-gap hover:text-green-300 transform translate-x-1"></i>
<h2 class="hover:font-semibold hover:text-green-300 transform translate-y-1 text-base">Dashboard</h2>
</div>
</div>
</a>
Is there something I can add to the main div to activate the hover effect in each child element at same time?
Right now it works only when I hover over each individual element.
Any help is much appreciated :)
Use group-hover state
Add group class to your parent element (anchor-tag in your case)
Replace hover: with group-hover:
Worth to mention not every property supports group-hover, so there can be situation, where you may need to extend core plugins. More info about group-hover here
DEMO https://play.tailwindcss.com/dzacJTR76X
Use group in parent and group:hover in child
Code Structure:
<div class="group">
<div class="group-hover:... "/>
<div class="group-hover:... "/>
</div>
Example:
<div class="group flex ">
<div class="rounded-full bg-black w-10 h-10 group-hover:bg-cyan-400 "></div>
<i class="text-4xl ml-4 group-hover:bg-cyan-400 cursor-pointer ">Brighten me</i>
</div>
Output:
OnHover:
I am using accordion something like this
https://www.tailwindtoolbox.com/components/accordion and I have a input field inside my accordion
<div class="tab-content overflow-y-scroll border-l-2 bg-gray-100 border-indigo-500 leading-normal">
<div class="border border-black mt-3 p-3 grid grid-cols-4">
<div class="col-span-1">
<label for="about" class="block text-sm leading-5 font-medium text-gray-700">
Title
</label>
<div class="rounded-md shadow-sm">
<textarea wire:model="additional_docs.title" name="additional_docs" id="edit_additional_docs" name="" rows="3" class="form-textarea mt-1 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5" placeholder="description"></textarea>
</div>
<p class="mt-2 text-sm text-gray-500">
Document Title
</p>
</div>
</div>
The accordion is working fine but as soon as I start typing the accordion closes and I need to open accordion again and start typing, but if I remove wire:model ,it works fine .I am new to live wire and if I use wire:ignore it doesn't help too.
Thanks for any help :)
Add wire:ignore.self on the element which will be hidden/shown.
So I have two image being used in two locations.
Location 1:
<div class="row">
<div class="col-md-1 col-md-offset-9">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
Location 2
<div class="row">
<div class="col-md-7">
<form autocomplete="off">
<div class="form-group">
<input placeholder="What are you looking for?" type="text" class="form-control" id="search" data-provide="typeahead" data-source='{{keywordsList}}'/>
</div>
</form>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-block{{#if entry}} btn-lg{{/if}}" style="margin-bottom:15pt">or just show me EVERYTHING!</button>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;margin-bottom:4px;">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
The images themselves are big and 512x512 and bootstrap decided to scale it down in location 1 to 79x79. Strangely, with the addition of an input field and a button in location 2, the images get scaled down to 59x59.
This whole scaling thing seems arbitrary to me and I'd really appreciate it if someone could explain the logic behind it to me.
The image width is dependent upon the column size. The reason for the discrepancy in image size between the two locations is because Location 2 was inside a <div class="col-md-10">.
What this did is it made the image smaller since the second location's width is 1/12 of 10/12 versus just 1/12 in location 1.
The image width depend on boostrap column size, if your image is responsive it will occupy all the column width