Develop Reference

My Card's Background and Image are flickering when I move over it (while hovering), it works fine when I just hover over it and stop moving my cursor

import React from 'react';
import { makeStyles, Typography, Grid } from '#material-ui/core';
import Card from '#material-ui/core/Card';
const styles = makeStyles((theme) => ({
card: {
background: 'black',
width: '140px',
margin: '0px 10px',
},
root: {
width: '142px',
height: '196px',
overflow: 'hidden',
position: 'relative',
transition: 'all 0.5s ease-out',
},
image: {
position: 'absolute',
width: '100%',
height: '100%',
objectFit: 'cover',
transition: 'all 0.5s ease-out',
zIndex: 10,
'&:hover': {
zIndex: -1,
},
},
textPositioning: {
width: '140px',
height: '40px',
overflow: 'hidden',
marginTop: '10px',
},
text: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Comfortaa',
},
genresContainer: {
backgroundColor: theme.palette.primary.main,
width: '100%',
height: '100%',
position: 'relative',
transition: 'all 0.5s ease-out',
zIndex: 2,
},
genreList: {
width: '100%',
height: '100%',
},
}));
interface AnimeData {
image_url: string;
title: string;
genres: Array<any>;
}
interface DisplayAnimeCardProps {
data: AnimeData;
}
const DisplayAnimeCard: React.FC<DisplayAnimeCardProps> = (
props: DisplayAnimeCardProps
) => {
const classes = styles();
const { data } = props;
console.log(typeof data, data.genres);
return (
<Card className={classes.card}>
<div className={classes.root}>
<img
className={classes.image}
alt='anime'
src={data.image_url}
/>
<div className={classes.genresContainer}>
<Grid
className={classes.genreList}
container
direction='column'
justifyContent='center'
alignItems='center'
>
{data.genres.map((genre) => (
<Typography
className={classes.text}
variant='body1'
>
{genre.name}
</Typography>
))}
</Grid>
</div>
</div>
<div className={classes.textPositioning}>
<Typography className={classes.text} variant='body1'>
{data.title}
</Typography>
</div>
</Card>
);
};
export default DisplayAnimeCard;
The Hovering effect show a div a top the image with some text. It works fine when I simply hover over the Card and do not move the cursor again. But If I move my cursor(during hovering) a top the card, the hover effect breaks and causes flickering between the textPositioningdiv and the image. I want to stop this flickering and just show the textPositioning div whenever I hover over the card and move my cursor

How can I change opacity of not hovered columns on highchart?

Is that possible to change the opacity of not hovered points in Highcharts, without change the default opacity?
I have this columns charts with opacity: 1 for all columns by default. But I want to set all columns with opacity: 0.3, except the hovered one, when user hover a column, like in this example:
Chart without hover in any column:
Chart with hover:
Here is the code:
Html:
this.graphic = Highcharts.chart('graph-roa', {
chart: {
zoomType: 'xy',
marginTop: 20
},
title: {
text: undefined
},
credits: {
text: '',
href: ''
},
xAxis: [{
categories: ['13/07','14/07','15/07','16/07','17/07','20/07', '21/07']
}],
yAxis: [
{
lineWidth: 1,
gridLineWidth: 0,
labels: {
formatter() {
return this.value;
},
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
align: 'high',
offset: 3,
text: 'Reais',
rotation: 0,
y: -10
}
},
{
title: {
text: ''
},
labels: {
format: '',
style: {
color: '#fff'
}
},
opposite: true
}
],
tooltip: {
shared: true,
},
legend: {
layout: 'vertical',
align: 'left',
x: 700,
verticalAlign: 'top',
y: 10,
floating: true,
backgroundColor: ('#000' && '#fff') || 'rgba(255,255,255,0.25)'
},
series: [{
name: 'Valor',
type: 'column',
color: '#106D98',
data: [20,60,40,100,20,20,20],
cursor: 'pointer',
}]
});
.graph {
// width: auto;
height: 180px;
display: block;
margin-top: 20px;
}
.demais-dados-roa {
font-family: $tt-norms-regular;
font-size: 14px;
margin-bottom: 2em;
.label {
color: $sec-5;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="row demais-dados-roa justify-content-between atual no-gutters">
<div class="col-auto">
<h3 class="graphic-title">
Repasse Esc.
</h3>
<em class="fas fa-info-circle" (click)="tooltipVisible = true"></em>
</div>
<div class="col-auto">
<div class="row no-gutters">
<h3 class="graphic-title ml-auto">
1,50k
</h3>
</div>
<div class="row no-gutters">
<p class="label">
Acum. Julho
</p>
</div>
</div>
</div>
<div id="graph-roa" class="graph"></div>

You can achieve it by using the mouseOver and mouseOut callbacks to changes the opacity of the points.
Demo: https://jsfiddle.net/BlackLabel/1srupnxk/
point: {
events: {
mouseOver() {
let series = this.series;
series.points.forEach(p => {
p.graphic.css({
opacity: 0.3
})
})
this.graphic.css({
opacity: 1
})
},
mouseOut() {
let series = this.series;
series.points.forEach(p => {
p.graphic.css({
opacity: 1
})
})
}
}
},
API: https://api.highcharts.com/highcharts/series.column.point.events.mouseOver

Here's the code.
The idea is:
.outer:hover > * { opacity: 0.4; } here all the red items are slightly faded on hover.
Now .outer:hover > *:hover is to style the current item that is hovered.
.outer {
display: inline-block;
}
.inner {
height: 100px;
width: 20px;
background: red;
display: inline-block;
margin-right: 10px;
}
.outer:hover > * {
opacity: 0.4;
}
.outer:hover > *:hover {
transform: scale(1.1);
opacity: 1;
}
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>

Slick JS - How to reload content with ajax data

I have data in slick js slider
I want to reload another data and reinit slick with new data.
I tried this :
Here is the function:
function getSliderSettings(){
return {
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
centerMode: false,
arrows: false,
dots: true,
infinite: false,
responsive: [
{
breakpoint: 1100,
settings: {
slidesPerRow: 2,
slidesToScroll: 1
}
}
]
}
}
code for re-init slider
var data = "<div>a</div><div>b</div>";
$("#categorySlider-13").slick('reinit');
$("#categorySlider-13").html(data);
$("#categorySlider-13").slick(getSliderSettings());
But it doesnt work !
If You know another js plugin carousel working with ajax call, can you tell it to me please ?

You need to call $("#categorySlider-13").slick('unslick') before assigning new data then init again.
Also, it advised to use .not('.slick-initialized'), so you done accidentally initialize slider more than once See here for more
function getSliderSettings(){
return {
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
centerMode: false,
arrows: false,
dots: true,
infinite: false,
responsive: [
{
breakpoint: 1100,
settings: {
slidesPerRow: 2,
slidesToScroll: 1
}
}
]
}
}
$("#categorySlider-13").slick(getSliderSettings());
$('#btn1').on('click',function(){
var data = "<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>";
$("#categorySlider-13").slick('unslick')
$("#categorySlider-13").html(data);
$("#categorySlider-13").not('.slick-initialized').slick(getSliderSettings());
});
$c1: #3a8999;
$c2: #e84a69;
.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
background: #3a8999;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<section id ="categorySlider-13" class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
<button id="btn1" >
Click me!!
</button>

Slick Carousel - 5 items in slide to 1 on mobile

Inside each 'slide' of my slickCarousel I have 5 cards displayed (on desktop). On mobile however, I need the first card to be as slide one, second card to be as slide 2 etc.
http://kenwheeler.github.io/slick/#settings
Desktop
<slide 1>
[1][2]
[3][4][5]
</slide 1>
<slide 2>
[6][7]
[8][9][10]
</slide 2>
What I currently have on Mobile too
<slide 1>
[1][2]
[3][4][5]
</slide 1>
<slide 2>
[6][7]
[8][9][10]
</slide 2>
What I need on Mobile
<slide 1>
[1]
</slide 1>
<slide 2>
[2]
</slide 2>
<slide 3>
[3]
</slide 3>
<slide 4>
[4]
</slide 4>
<slide 5>
[5]
</slide 5>
<slide 6>
[6]
</slide 6>
<slide 7>
[7]
</slide 7>
<slide 8>
[8]
</slide 8>
<slide 9>
[9]
</slide 9>
<slide 10>
[10]
</slide 10>
JSFiddle
https://jsfiddle.net/tr0pec2m/
$(function () {
$(".regular").slick({
dots: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
});
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 25px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
border: 1px solid #000;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.hidde-sldie img {
border: 5px solid red;
}
.show-hide-slide-btn {
text-align: center;
margin: 0 auto;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<section class="regular slider">
<div>
<img src="http://placehold.it/150x100?text=1">
<img src="http://placehold.it/150x100?text=2">
<img src="http://placehold.it/150x100?text=3">
<img src="http://placehold.it/150x100?text=4">
<img src="http://placehold.it/150x100?text=5">
</div>
<div>
<img src="http://placehold.it/150x100?text=6">
<img src="http://placehold.it/150x100?text=7">
<img src="http://placehold.it/150x100?text=8">
<img src="http://placehold.it/150x100?text=9">
<img src="http://placehold.it/150x100?text=10">
</div>
</section>
The responsive settings are not quite what I need here, the responsive settings will deal with the number of SLIDES to appear. Currently I only have 1 slide with multiple items inside as far as slickCarousel knows.
I need the cards to be split into multiple slides, so Slick can then deal with all 10 slides instead.

If possible, add all the slider items as the direct child and use the responsive config of the slick slider
$(".regular").slick({
dots: true,
infinite: false,
vertical: true,
slidesToShow: 5,
slidesToScroll: 5,
responsive: [
{
breakpoint: 500,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
https://jsfiddle.net/tr0pec2m/2/

You Have to change HTML strcture, and add js parameter
<section class="regular slider">
<img src="https://placehold.it/150x100?text=1">
<img src="https://placehold.it/150x100?text=2">
<img src="https://placehold.it/150x100?text=3">
<img src="https://placehold.it/150x100?text=4">
<img src="https://placehold.it/150x100?text=5">
<img src="https://placehold.it/150x100?text=6">
<img src="https://placehold.it/150x100?text=7">
<img src="https://placehold.it/150x100?text=8">
<img src="https://placehold.it/150x100?text=9">
<img src="https://placehold.it/150x100?text=10">
</section>
$(function () {
$(".regular").slick({
dots: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1000,
settings: {
slidesToShow: 6,
slidesToScroll: 1
}
},
{
breakpoint: 800,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 500,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});

Reposition nav buttons inside owl carousel

i am using owl carousel and i want to change the default nav buttons "prev next" with arrows and place them on the right side and left side in carousel.
See the picture:
https://postimg.org/image/w4od5pb2z/
http://raffe.ro/bogdan.v/one-page/
Here is the js code:
< script >
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 3000,
smartSpeed: 900,
autoplayHoverPause: false,
loop: true,
margin: 30,
nav: false,
dotsEach: true,
touchDrag: true,
dotData: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
})
}) <
/script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Place the following code in your css (style.css):
.owl-nav .owl-prev,
.owl-nav .owl-next {
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
.owl-nav .owl-next {
left: auto;
right: 0;
}
In theory, it should work