I have a set of 6 images which corresponds to different cards.
Indicative image
Since the images are static, I am not making it a carousel to sync with the cards.I am trying to use the "go" method to direct the images to correspond with its respective card but to no avail.
There is a perPage option assigned to the cards at different breakpoints (and it runs);the idea is for the 6 images to only appear in mobile mode.
<div class="lg:hidden flex">
<img class="icon-one h-10 md:h-28" src="../Assets/icon-1-mobile.png">
<img class="icon-two h-10 md:h-28" src="../Assets/icon-2-mobile.png">
<img class="icon-three h-10 md:h-28" src="../Assets/icon-3-mobile.png">
<img class="icon-four h-10 md:h-28" src="../Assets/icon-4-mobile.png">
<img class="icon-five h-10 md:h-28" src="../Assets/icon-5-mobile.png">
<img class="icon-six h-10 md:h-28" src="../Assets/icon-6-mobile.png">
</div>
<div class="2xl:flex">
<section id="main-carousel" class="splide" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<div class="splide__list">
<div class="splide__slide splice-object-one">
<img class="rounded-lg h-auto 2xl:h-96" src="../Assets/card-1.jpg" alt="Card 1">
<img class="relative p-1 bg-white rounded-full bottom-10 mx-auto my-0" src="../Assets/icon-1 1.png" alt="Icon 1">
<p class="relative p-0 bg-gray-100 rounded-lg mx-3">ACCESIBILITY</p>
<p class="relative p-0 bg-gray-100 rounded-lg mx-3">Easy accessibility and convenience in terms of transportation options, highway connectivity and township connections.</p>
</div>
<div class="splide__slide splice-object-two">
<img class="rounded-lg h-auto 2xl:h-96" src="../Assets/card-2.jpg" alt="Card 2">
<img class="relative p-1 bg-white rounded-full bottom-10 mx-auto" src="../Assets/icon-2.png" alt="Icon 2">
<p class="relative p-0 bg-gray-100 rounded-lg mx-3">COMMUNITY</p>
<p class="relative bg-gray-100 rounded-lg">To engage and support the growth of the community and to improve overall wellbeing through adequate amenities and support services.</p>
</div>
<div class="splide__slide splice-object-three">
<img class="rounded-lg h-auto 2xl:h-96" src="../Assets/card-3.jpg" alt="Card 3">
<img class="relative p-1 bg-white rounded-full bottom-10 mx-auto" src="../Assets/icon-3.png" alt="Icon 3">
<p class="relative p-0 bg-gray-100 rounded-lg mx-3">HOME</p>
<p class="relative bg-gray-100 rounded-lg">A variety of quality and comfortable home configuration options for all layers of the community.</p>
</div>
<!--omitted 3 other cards to reduce the bulk of the text-->
</div>
</div>
</section>
</div>
let mc = new Splide("#main-carousel", {
breakpoints: {
2000: {
perPage: 3,
},
900: {
perPage: 2,
},
600: {
perPage: 1,
},
}
}).mount();
document.addEventListener('DOMContentLoaded', function() {
let iconOne = document.querySelector(".icon-one");
let iconTwo = document.querySelector(".icon-two");
let iconThree = document.querySelector(".icon-three");
iconOne.onClick = () => {
mc.go(1);
}
iconTwo.onClick = () => {
mc.go(2);
}
iconThree.onClick = () => {
mc.go(3);
}
})
Related
Once i load the page, the data loads nearly instantly but after going into another page and then back, it will either not show again or will take 10+ seconds to display. I will have to manually refresh the page for it to load again. My onSnapshot code is below. This happens on safari, chrome on IOS. It seems to work fine on windows chrome. Using firebase, vue3.
onMounted(() => {
onSnapshot(collection(db, "malesneakers") , (querySnapshot) => {
const maleProducts = [];
querySnapshot.forEach((doc) => {
const mlproducts = {
id: doc.id,
imageSrc: doc.data().imageSrc,
name: doc.data().name,
price: doc.data().price,
cheapestat: doc.data().cheapestat,
svgSrc: doc.data().svgSrc,
href: doc.data().href,
}
maleProducts.push(mlproducts)
});
products.value = maleProducts
});
});
I do have v-if statements to show a skeleton loader when loading. Not sure if this is causing the issue.
<div class="mt-6" v-if="products.length">
<div class="relative w-full pb-6 -mb-6 overflow-x-auto scrollbar-hide">
<ul role="list" class="mx-4 inline-flex space-x-0 gap-2 sm:mx-6 lg:mx-0 lg:space-x-0 lg:grid lg:grid-cols-6 lg:gap-x-4">
<li v-if="products.length" v-for="product in products" :key="product.id" class="w-44 border rounded-sm p-4 lg:w-auto">
<div class="group relative">
<Transition name="fade" mode="out-in">
<div class="hidden h-10 lg:flex text-end justify-end space-x-1 absolute left-[9.5rem]">
<Dropdownfav v-if="userStore.userData.uid"></Dropdownfav>
<heartauth v-if="!userStore.userData.uid"></heartauth>
</div>
</Transition>
<a :href="product.href">
<div class="w-[70%] lg:w-[55%] ">
<img :src="product.imageSrc" :alt="product.imageAlt" class="w-full h-20 overflow-hidden object-center object-contain" />
</div>
<div class="mt-2">
<h3 class="mt-1 font-rubikreg h-11 overflow-hidden text-xs lg:text-base uppercase text-gray-900">
<span class=" inset-0" />
{{ product.name }}
</h3>
<p class="mt-3 lg:mt-6 font-rubiklight uppercase text-xs lg:text-sm text-gray-900">
Cheapest At
</p>
<p class="mt-1 font-rubikreg underline-offset-2 underline uppercase text-xs lg:text-sm text-gray-900">
{{ product.cheapestat }}
</p>
<p class="mt-5 text-2xl uppercase font-rubik text-gray-900">
<span class="text-xs">From</span>
A${{ product.price }}
</p>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="text-center" v-else>No data</div>
<div v-else class="">
<Newskeleton />
</div>
I want to ask. I have a layout, there is a button when i click the button, a pop up will appear, the problem is when the modal appears, there are some components that are not dimmed, such as the button and the navbar as shown in the picture, I use vue cli and tailwind and for the modal I use flowbite. I've been looking for a way but still can't find it. Can anyone help me?
My website currently has a mobile-based display
this the web without modal
and this is the web when the button is clicked
here is the code in navbarWhite.vue
<template>
<header class="sticky h-14 top-0 z-50 bg-white" :class="boxShadow">
<div class="flex flex-row">
<div class="absolute" v-if="srcPictureLeft">
<img
#click="onClickBack"
class="ml-7 py-4 cursor-pointer text-black"
:src="require(`../assets/icon/${srcPictureLeft}`)"
/>
</div>
<div v-else></div>
<div class="py-4 relative mx-auto font-semibold text-black text-xl">
{{ title }}
</div>
</div>
</header>
</template>
<style>
</style>
<script>
export default {
name: "NavbarWhite",
props: {
onClickBack: {
type: Function,
},
title: String,
srcPictureLeft: String,
boxShadow: String,
},
};
</script>
and this is the button component (ButtonBottom.vue)
<template>
<div
class="
sticky
w-full
absolute
mb-0
bottom-0
z-50
bg-white
h-16
drop-shadow-[0_0_4px_rgba(0,0,0,0.25)]
"
>
<div class="mx-[30px] py-2">
<button-primary
class="
bg-green-button
text-white
hover:bg-green-button-darker hover:rounded-[32px]
"
>
<slot>Button</slot>
</button-primary>
</div>
</div>
</template>
<script>
import ButtonPrimary from "#/components/ButtonPrimary.vue";
export default {
name: "ButtonBottom",
components: {
ButtonPrimary,
},
};
</script>
and this is the parent where all the component called
<template>
<div class="h-screen relative">
<div class="h-[94%]">
<navbar-white
boxShadow="shadow-[0_0_10px_0_rgba(0,0,0,0.25)]"
srcPictureLeft="backIconBlack.svg"
:onClickBack="goBack"
title="Ringkasan Transaksi"
/>
<div class="mt-10 mx-[30px]">
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">No. Rekening</div>
<div>12345678</div>
</div>
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">Nama Penerima</div>
<div>Lorem Ipsum</div>
</div>
<div class="flex flex-row justify-between mb-4">
<div class="font-semibold">Bank Tujuan</div>
<div>12345678</div>
</div>
<hr class="mb-4" />
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">Nominal</div>
<div>Rp 200.000</div>
</div>
<div class="flex flex-row justify-between mb-4">
<div class="font-semibold">Fee</div>
<div>Rp 2.500</div>
</div>
<div class="flex flex-row justify-between">
<div class="font-semibold">Total</div>
<div class="font-semibold">Rp 202.500</div>
</div>
</div>
</div>
<button-bottom data-modal-toggle="biayaAdmin">Selanjutnya</button-bottom>
<!-- modal start here -->
<div
id="biayaAdmin"
tabindex="-1"
class="
hidden
overflow-y-auto overflow-x-hidden
fixed
top-0
right-0
left-0
z-50
w-full
md:inset-0
h-modal
md:h-full
"
>
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div
class="
flex
justify-between
items-center
p-5
rounded-t
border-b
dark:border-gray-600
"
>
<h3 class="text-xl font-medium text-gray-900 dark:text-white">
Small modal
</h3>
<button
type="button"
class="
text-gray-400
bg-transparent
hover:bg-gray-200 hover:text-gray-900
rounded-lg
text-sm
p-1.5
ml-auto
inline-flex
items-center
dark:hover:bg-gray-600 dark:hover:text-white
"
data-modal-toggle="biayaAdmin"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p
class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
With less than a month to go before the European Union enacts new
consumer privacy laws for its citizens, companies around the world
are updating their terms of service agreements to comply.
</p>
<p
class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
The European Union’s General Data Protection Regulation (G.D.P.R.)
goes into effect on May 25 and is meant to ensure a common set of
data rights in the European Union. It requires organizations to
notify users as soon as possible of high-risk data breaches that
could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div
class="
flex
items-center
p-6
space-x-2
rounded-b
border-t border-gray-200
dark:border-gray-600
"
>
<button
data-modal-toggle="biayaAdmin"
type="button"
class="
text-white
bg-blue-700
hover:bg-blue-800
focus:ring-4 focus:outline-none focus:ring-blue-300
font-medium
rounded-lg
text-sm
px-5
py-2.5
text-center
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
"
>
I accept
</button>
<button
data-modal-toggle="biayaAdmin"
type="button"
class="
text-gray-500
bg-white
hover:bg-gray-100
focus:ring-4 focus:outline-none focus:ring-gray-200
rounded-lg
border border-gray-200
text-sm
font-medium
px-5
py-2.5
hover:text-gray-900
focus:z-10
dark:bg-gray-700
dark:text-gray-300
dark:border-gray-500
dark:hover:text-white
dark:hover:bg-gray-600
dark:focus:ring-gray-600
"
>
Decline
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ButtonBottom from "#/components/ButtonBottom.vue";
import NavbarWhite from "#/components/NavbarWhite.vue";
export default {
name: "TransactionSummary",
components: {
ButtonBottom,
NavbarWhite,
},
methods: {
goBack() {
this.$router.go(-1);
},
},
};
</script>
The css z-index of your header and footer might be higher than the z-index of the overlay mask.
Try inspecting the elements and evaluate their z-index values, try forcing new values to ensure that the z-index of the header and footer is a lower value than the grey overlay mask.
The issue might be the lack of a z-index value on some of those elements to indicate which should appear over the top of another.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I have a modal that's is loaded with alpines when a button is click, the thing is it also triggers a click.outside event. Is there a way of stopping this happening? I have tried finding a solution online but can't find a thing, could someone help a newbie out?
<div class="mt-12" x-data="{isTrailerModalVisible: false,}">
<button
x-on:click="isTrailerModalVisible = true";
class="flex bg-blue-500 text-white font-semibold px-4 py-4 hover:bg-blue-600 rounded transition ease-in-out duration-150 items-center"
>
<i class="far fa-play-circle"></i>
<div class="ml-2">Play Trailer</div>
</button>
<template x-if="isTrailerModalVisible">
<div
x-show="isTrailerModalVisible"
style="background-color: rgba(0, 0, 0, .5);"
class="z-50 fixed top-0 left-0 w-full h-full flex items-center shadow-lg overflow-y-auto"
>
<div class="container mx-auto lg:px-32 rounded-lg overflow-y-auto">
<div class="bg-gray-300 rounded"
>
<div class="flex justify-end pr-4 pt-2">
<button
#click="isTrailerModalVisible = false"
#keydown.escape.window="isTrailerModalVisible = false"
class="text-3xl leading-none hover:text-gray-300"
>
×
</button>
</div>
<!--Finish the clicked away for closing the modal-->
<div class="modal-body px-8 py-8" #click.outside="console.log('clicked')";>
<div class="responsive-container overflow-hidden relative" style="padding-top: 56.25%" >
<iframe width="360" height="315" class="responsive-iframe absolute top-0 left-0 w-full h-full" src="{{ $game['trailer'] }}" style="border:0;" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
I ran into this problem as well when updating from Alpine 2 to 3. Switching #click.outside to #mousedown.outside solved it for me.
I'm not sure if this is a bug in Alpine since #click.away (the old way to call #click.outside) worked in Alpine 2 but it does work with this solution.
I am trying to build a function with jquery but I can't. I am trying to control video and audio with one button set for the different tabs. the problem is that the play pause button only controls the audio file not the video file in the second tab.
when we go to the second tab and press the button below it plays the same audio file.
see the sample code here
$(document).ready(function () {
$("#audio_play").on("click", function () {
$("#audio").get(0).play();
})
$("#audio_pause").on("click", function () {
$("#audio").get(0).pause();
})
$('.menu ul li:nth(1)').on("click", function () {
$("#audio_play").attr('id', 'video_play');
$("#audio_pause").attr('id', 'video_pause');
})
$("#video_play").on("click", function () {
$("#video").get(0).play();
})
$("#video_pause").on("click", function () {
$("#video").get(0).pause();
})
})
.con{
text-align:center;
width:156px;
margin:0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center items-center w-full h-screen inset-x-0 mx-auto">
<!--actual component start-->
<div class="menu" x-data="setup()">
<ul class="flex justify-center items-center my-4">
<template x-for="(tab, index) in tabs" :key="index">
<li class="cursor-pointer py-2 px-4 text-gray-500 border-b-8"
:class="activeTab===index ? 'text-green-500 border-green-500' : ''" #click="activeTab = index"
x-text="tab"></li>
</template>
</ul>
<div class="w-full bg-white p-16 text-center mx-auto border">
<div x-show="activeTab===0">
<h1>Audio Player</h1>
<audio id="audio"
src="https://res.cloudinary.com/foxyplays989/video/upload/v1558369838/LetsGo.mp3"></audio>
</div>
<div x-show="activeTab===1">
<iframe id="video" class="w-full h-56"
src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
<div x-show="activeTab===2">Content 3</div>
<div x-show="activeTab===3">Content 4</div>
</div>
</div>
<!--actual component end-->
</div>
<div class="flex con">
<button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none" id="audio_play">play</button>
<button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-red-500 rounded shadow ripple hover:shadow-lg hover:bg-red-600 focus:outline-none" id="audio_pause">Pause</button>
</div>
<script>
function setup() {
return {
activeTab: 0,
tabs: [
"Tab No.1",
"Tab No.2",
]
};
};
</script>
I want to display some data beloning to an image when a user hovers over it, how would I go adding and comparing id's from a livewire component ?
Livewire view
<div x-data="{tooltip : false}" class="grid grid-cols-3 gap-4 ml-2 antialiased text-gray-900">
<div #mouseover.away="{tooltip = false}">
#forelse($animals as $animal)
<img id="{{$animal->animals->id}}" x-on:mouseover="{tooltip = !tooltip}"
src="https://source.unsplash.com/random/350x350"
alt="Animal image"
class="object-cover rounded-lg shadow-md ">
<div x-show.transition="tooltip" class="absolute -mt-16 ">
<div class="p-6 bg-white rounded-lg shadow-lg">
<h4 class="mt-1 text-xl font-semibold leading-tight uppercase truncate">This is
: {{$animal->animals->name}}</h4>
<div class="mt-4">
<span class="font-semibold text-teal-600 text-md">4/5 ratings </span>
<span class="text-sm text-gray-600">(based on 234 ratings)</span>
</div>
</div>
</div>
#empty
<p class="text-center">No animals found</p>
#endforelse
</div>
</div>
Livewire class
class Dashboard extends Component
{
public function render()
{
$animal = UserAnimal::with('animals')->where('user_id', '=', Auth::id())->get();
return view('livewire.dashboard')->with('animals', $animal);
}
}
This snippet works when only one image is displayed, but as soon as another image is added the tooltip stops working,
E.g the user hovers over the first image and the name of that animal is displayed in the hovering tooltip.
Instead of having a global tooltip attribute on the parent div, I would use a tooltip attribute for each animal - which means you probably need to adjust your loop and html structure.
<div class="grid grid-cols-3 gap-4 ml-2 antialiased text-gray-900">
<div x-data="{tooltip : false}">
<img id="{{$animal->animals->id}}" x-on:mouseover="{tooltip = !tooltip}" x-on:mouseout="{tooltip = !tooltip}" src="https://source.unsplash.com/random/350x350" alt="Animal image" class="object-cover rounded-lg shadow-md ">
<div x-show.transition="tooltip" class="absolute -mt-16 ">
<div class="p-6 bg-white rounded-lg shadow-lg">
<h4 class="mt-1 text-xl font-semibold leading-tight uppercase truncate">This is
: A dog</h4>
<div class="mt-4">
<span class="font-semibold text-teal-600 text-md">4/5 ratings </span>
<span class="text-sm text-gray-600">(based on 234 ratings)</span>
</div>
</div>
</div>
</div>
<div x-data="{tooltip : false}">
<img id="{{$animal->animals->id}}" x-on:mouseover="{tooltip = !tooltip}" x-on:mouseout="{tooltip = !tooltip}" src="https://source.unsplash.com/random/350x350" alt="Animal image" class="object-cover rounded-lg shadow-md ">
<div x-show.transition="tooltip" class="absolute -mt-16 ">
<div class="p-6 bg-white rounded-lg shadow-lg">
<h4 class="mt-1 text-xl font-semibold leading-tight uppercase truncate">This is
: A cat</h4>
<div class="mt-4">
<span class="font-semibold text-teal-600 text-md">1/5 ratings </span>
<span class="text-sm text-gray-600">(based on 2 ratings)</span>
</div>
</div>
</div>
</div>
</div>
Example in Codepen