Develop Reference

Jquery CSS fadeOut animation not working when menu close

This is my simple approach for a dropdown menu. When I click to open a menu, it opens with an amination. But I want to add another animation when It will be closed. I tried in many ways, But not working. Why? Somebody, please assist me. When It closes, it directly disappears. No animation is working. Why?
body {
padding: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-btn {
width: 40px;
height: 40px;
border-radius: 50px;
border: none;
background-color: #f4f4f4;
left: 10px;
font-size: 20px;
}
.dropdown-btn__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.dropdown-menu {
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
display: none;
min-width: 150px;
overflow: hidden;
transform-origin: top right;
animation: dropdown-menu-open 0.3s forwards;
}
.dropdown-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.dropdown-menu__list li {
padding: 0px;
}
.dropdown-menu__list a {
text-decoration: none;
color: #000;
font-size: 16px;
display: block;
padding: 8px 16px;
}
#keyframes dropdown-menu-open {
from {
opacity: 0;
transform: scale(0, 0);
}
to {
opacity: 1;
transform: scale(1, 1);
}
}
.dropdown--open .dropdown-menu {
display: block;
}
.dropdown-menu__list {
opacity: 1;
transition: opacity 03s ease;
}
.dropdown-menu__list--hidden {
opacity: 0;
transition: opacity 03s ease;
}
#asma {
float: right! important;
}
<span id="asma">
<div class="dropdown">
<button class="dropdown-btn mi-ripple mi-ripple-dark">
<div class="dropdown-btn__icon"> ≡ </div>
</button>
<div class="dropdown-menu">
<ul class="dropdown-menu__list">
<li class="mi-ripple mi-ripple-dark">Home</li>
<li class="mi-ripple mi-ripple-dark">Dropdown</li>
<li class="mi-ripple mi-ripple-dark">Createanewbjsbsjshsbsticket</li>
</ul>
</div>
</div>
</span>
$(document).ready(function() {
$('.dropdown-btn').on('click', function() {
$('.dropdown').toggleClass('dropdown--open');
if ($('.dropdown').hasClass('dropdown--open')) {
$('.dropdown-menu').stop(true, true).fadeIn(300);
} else {
$('.dropdown-menu').stop(true, true).fadeOut(300, function() {
$(this).removeClass('dropdown-menu__list--hidden');
});
}
});
$(document).on('touchstart click', function(event) {
if (!$('.dropdown').is(event.target) && $('.dropdown').has(event.target).length === 0) {
$('.dropdown').removeClass('dropdown--open');
$('.dropdown-menu').stop(true, true).fadeOut(300, function() {
$(this).addClass('dropdown-menu__list--hidden');
});
}
});
});
The jquery fadeOut effect not working. What I can do now? How to add it?

You don't actually need to use fadeIn and fadeOut, or even CSS animation at all. Instead, you can achieve the same effect using CSS transition.
Updated script:
$(document).ready(function() {
$('.dropdown-btn').on('click', function() {
$('.dropdown').toggleClass('dropdown--open');
});
$(document).on('touchstart click', function(event) {
if (!$('.dropdown').is(event.target) && $('.dropdown').has(event.target).length === 0) {
$('.dropdown').removeClass('dropdown--open');
}
});
});
Updated styles:
.dropdown-menu {
transition: all 0.3s ease-in-out; <--- here is the trick
transform: scale(0); <---
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
min-width: 150px;
overflow: hidden;
transform-origin: top right;
}
.dropdown.dropdown--open .dropdown-menu {
transform: scale(1); <---
}
See https://jsfiddle.net/cheack/kd92r8g0/42/
Update: If you want to apply a different transition when closing, simply add another transition and add a delay to the first one.
.dropdown-menu {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s; <--- last 0.3s is a delay for a scaling (to fade out first, then scale down)
transform: scale(0);
opacity: 0;
}
.dropdown.dropdown--open .dropdown-menu {
transform: scale(1);
opacity: 1;
transition: transform 0.3s ease-in-out;
}

JS hover animation

First of all i checked all duplicates below. But i still couldnt figure out how to.
make animation hover like transition hover
JS hover-like animation Hover animation with js not working
My problem is
I have
<a class="tooltip animated fadeIn" href="#" style="margin-left: 30px; font-size: 1.6em; font-family: 'Open Sans Condensed'; -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */ animation-delay: 1s; ">
<i class="fa fa-info helper" ></i>
<span class="tooltip-content"><span class="tooltip-text"><span class="tooltip-inner"> If you require access to programs, <br /> please contact to your system administrator </span></span></span>
</a>
And i can use hoover functionality with css like below
#import url(http://fonts.googleapis.com/css?family=Satisfy);
.tooltip {
display: inline;
position: relative;
z-index: 999;
font-size: 1.2em;
color: #D93742;
}
/* Gap filler */
.tooltip::after {
content: '';
position: absolute;
width: 100%;
height: 20px;
bottom: 100%;
left: 50%;
pointer-events: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tooltip:hover::after {
pointer-events: auto;
}
/* Tooltip */
.tooltip-content {
position: absolute;
z-index: 9999;
width: 400px;
left: 50%;
bottom: 100%;
font-size: 18px;
line-height: 1.4;
text-align: center;
font-weight: 400;
color: #D93742; /* #fffaf0; */
background: transparent;
opacity: 0;
margin: 0 0 5px -200px;
cursor: default;
pointer-events: none;
font-family: inherit; /* 'Satisfy', cursive; */
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 0.3s 0.3s;
transition: opacity 0.3s 0.3s;
}
.tooltip:hover .tooltip-content {
opacity: 1;
pointer-events: auto;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.tooltip-content span {
display: block;
}
.tooltip-text {
border-bottom: 10px solid #D93742; /* #fffaf0; */
overflow: hidden;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.3s 0.3s;
transition: transform 0.3s 0.3s;
}
.tooltip:hover .tooltip-text {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
.tooltip-inner {
background: rgba(85,61,61,0.95);
padding: 5px;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
color: white;
}
.tooltip:hover .tooltip-inner {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Arrow */
.tooltip-content::after {
content: '';
bottom: -20px;
left: 50%;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #D93742; /* #fffaf0; */
border-width: 10px;
margin-left: -10px;
}
I would like to do same thing with javascript mouseover(hover) and mouseout.
First my div mustn't show. I have table which has headers like 'th'. If a user hoover on that header i want to show tooltip with my javascript closure like how css way does. Css codes only opening in certain positions. But my js tooltip one must open for specific table headers. I can show tooltip in js way like below but i cant add animate functionality and css changes to this one. How can i do that ?
<div id="toolTipContainer"
style="z-index:100; font-size: 1.2em; color: #D93742; border-style: solid; border-width: 2px; width: 200px; height: 80px; position:absolute; display:none;">
<span class="tooltiptable-content"><span class="tooltiptable-text"><span class="tooltiptable-inner"> If you require access to modules, <br/> please contact to your system administrator </span></span></span>
</div>
my script :
<script>
$(document).ready(function () {
$('th').mouseover(function () {
if ($(this).index() === 0) {
return;
} else {
const top = $(this).offset().top - 82;
// var left = $(this).offset().left;
const left = $(this).offset().left;
$('#toolTipContainer').css({'top': top, 'left': left, 'width': $(this).width()});
$('.tooltiptable-content').css({'width': $(this).width()});
//show tool tips
$('#toolTipContainer').show();
}
});
$('th').mouseout(function () {
$("#toolTipContainer").hide();
});
$('#toolTipContainer').mouseover(function () {
$('#toolTipContainer').show();
});
$('#toolTipContainer').mouseout(function () {
$('#toolTipContainer').hide();
});
});
</script>

I can show tooltip in js way like below but i cant add animate functionality and css changes to this one. How can i do that ?
You can use the jQuery fadeIn() method instead of show() and fadeOut() instead of hide() to add transitions. If you need more control over the animation there's animate().
Docs:
http://api.jquery.com/fadein/
http://api.jquery.com/animate/

How do transitions work when fading in and out using css classes and javascript

I am trying to find out how transitions work. I am trying to make a thumbs up appear using a fade in fade out transition for a recycling simulator program, however, I do not know how understand how transitions work.
Here is a snippet of my html
<div class="thumbs-up-bg">
<i class="fas fa-thumbs-up" id="thumbs-up"></i>
</div>
<div class="thumbs-down-bg">
<i class="fas fa-thumbs-down" id="thumbs-down"></i>
</div>
Here is the CSS
.thumbs-up-bg {
position: absolute;
visibility: hidden;
background-color: green;
display: inline-block;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
#thumbs-up-bg.visible {
opacity: 1;
}
#thumbs-up {
font-size: 50px;
color: white;
}
.thumbs-down-bg {
position: absolute;
visibility: hidden;
background-color: red;
display: inline-block;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
#thumbs-down {
font-size: 50px;
color: white;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
opacity: 0;
transition: visibility 5s, opacity 2s linear;
}
Are transitions supposed to be set on the selector that is going to be changed? Is there a simpler way to complete this task?
Here is the Javascript
if (drop === trashDropZone){
if(!isRecyclable(draggable)){
alert("Success, it is garbage");
thumbsUp.classList.toggle("visible");
setTimeout(() =>{
thumbsUp.classList.toggle("visible");
thumbsUp.classList.toggle("hidden");
}, 1000);
makeInvisible(draggable);
} else{
//show thumbs down
alert("Thumbs down");
thumbsDown.classList.toggle("visible");
setTimeout(() =>{
thumbsDown.classList.toggle("visible");
thumbsDown.classList.toggle("hidden");
}, 1000);

Event listener not firing for some reason

I've adapted the code from Simply-Nav (great lightweight mobile nav – thanks obscuredetour) so that the background semi-transparent overlay fades in as opposed to sliding in with the nav.
Got that working fine, but what I've lost now is the ability to click/tap the semi-transparent overlay (on the right hand side) to close the whole nav.
The event listener is still there – pageOverlay.addEventListener('click', toggleNav); – but it's not firing pageOverlay.classList.remove('-open');.
The overlay div is no longer a child of the parent <ul class="nav-list">, so I don't know if that has something to do with it.
I've tried creating a transparent overlay over the overlay div, and add an eventlistener to that, but that hasn't worked.
Here's the code, if anyone has any ideas, I'd be really grateful for any help. I'm still a novice, so no doubt it's something obvious. Thanks so much.
/*
simply-nav.js - v1.2.1
https://github.com/obscuredetour/simply-nav
Licensed MIT © Jeffrey Summers
*/
// This anonymous function can be inserted anywhere
// (eg. within a <script> tag or anywhere in an existing .js file)
(simplyNavDuty => {
const sideNav = document.querySelector('.nav-list'),
toggleNavBtn = document.querySelector('.toggle-nav'),
burger = document.querySelector('.burger'),
pageOverlay = document.querySelector('.overlay'),
navLinks = document.querySelectorAll(".link"),
body = document.querySelector('body'),
html = document.querySelector('html');
// Disable page scroll
function disablePageScroll() {
if (sideNav.classList.contains('-open')) {
body.classList.add('_disableScroll');
html.classList.add('_disableScroll');
} else {
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
};
// Nav funtion (toggle)
function toggleNav() {
sideNav.classList.toggle('-open');
pageOverlay.classList.toggle('-open');
burger.classList.toggle('open');
disablePageScroll();
};
// To default
toDefaults = () => {
// Close nav menu
sideNav.classList.remove('-open');
pageOverlay.classList.remove('-open');
burger.classList.remove('open');
// Make sure scrolling is enabled
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
// Event listeners
toggleNavBtn.addEventListener('click', toggleNav);
pageOverlay.addEventListener('click', toggleNav);
// (on mobile) close nav menu when link is clicked
// this is useful on mobile when clicking an anchor tag on the current page (eg. index.html#last-section)
navLinks.forEach(el => {
el.addEventListener('click', (event) => {
toDefaults();
});
});
// when browser is resized (past breakpoint) reset to defaults
(function() {
window.addEventListener("resize", resizeThrottler, false);
let resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
function actualResizeHandler() {
// handle the resize event
// Window resized width
let width = window.innerWidth;
// If resized greater than BREAKPOINT (default: 800px), then reset nav functions
if (width >= 800) {
toDefaults();
}
}
}());
})();
/*******HAMBURGER TOGGLE*******/
.toggle-nav {
background-color: transparent;
cursor: pointer;
box-shadow: none;
border: 0;
outline: none;
margin: 0;
padding: 3vh;
}
.logo-link {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
}
.logo-link>.logo {
max-width: 60px;
width: 100%;
height: auto;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transition: max-height 0.2s ease-in-out;
-webkit-transition: max-height 0.2s ease-in-out;
}
/*******HAMBURGER TOGGLE*******/
.nav-list {
background-color: transparent;
list-style: none;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 10vh;
bottom: 0;
left: -50rem;
width: 60%;
min-height: 100vh;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
z-index: 6;
}
.nav-list.-open {
width: 100%;
left: 0;
padding-bottom: 4.5rem;
}
.nav-list.-open>.list.-left {
overflow-y: auto;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-list>.list.-left {
background: rgba(50, 31, 101, 0.95);
position: relative;
width: 60%;
height: 100%;
}
.overlay {
margin: 0;
padding: 0;
display: block;
min-height: 100vh;
background: rgb(0 0 0 / 65%);
position: absolute;
bottom: 0;
width: 100%;
top: 10vh;
cursor: pointer;
z-index: 5;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s linear;
}
.toggle-overlay {}
.overlay.-open {
visibility: visible;
opacity: 1;
}
/****** LIST ITEMS ******/
.nav-list>.list>.item {
display: flex;
padding: 0;
border-bottom: 1px solid rgba(176, 176, 176, 0.5);
}
.nav-list>.list>.item:last-child {
border-bottom: 0;
}
.nav-list>.list>.item>.link {
border-color: transparent;
text-decoration: none;
padding: 1.5rem 1rem 1.5rem 1rem;
flex-basis: 100%;
display: block;
background: transparent;
font-size: 1.5rem;
padding-left: 1.5rem;
color: #e0e0e0;
transition: all 0.3s ease-in-out;
}
.nav-list>.list>.item>.link:hover,
.nav-list>.list>.item>.link.-active {
color: #e90052;
}
._disableScroll {
overflow-y: hidden !important;
}
/***********BURGER BUTTON STYLES***********/
.burger {
height: 3em;
width: 3em;
position: relative;
font-size: 10px;
cursor: pointer;
-webkit-transition: .2s all;
-o-transition: .2s all;
transition: .2s all;
}
.burger:after {
content: '';
display: block;
position: absolute;
height: 150%;
width: 150%;
top: -25%;
left: -25%;
}
.burger>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger>.burger-lines:before {
left: 0;
top: 1em;
}
.burger>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-offset>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines,
.burger.-squeeze .burger-lines:before,
.burger.-squeeze .burger-lines:after {
-webkit-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
-o-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset .burger-lines:before,
.burger.-squeeze.-offset .burger-lines:after {
width: 2em;
}
.burger.-squeeze.-offset .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset .burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open .burger-lines,
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
-webkit-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
-o-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open .burger-lines {
background-color: transparent;
}
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open .burger-lines:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.burger.-squeeze.open .burger-lines:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.burger-lines,
.burger-lines:after,
.burger-lines:before {
pointer-events: none;
display: block;
content: '';
width: 100%;
border-radius: 0.25em;
background-color: #e0e0e0;
height: 0.25em;
position: absolute;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.burger.-squeeze>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-squeeze>.burger-lines,
.burger.-squeeze>.burger-lines:after,
.burger.-squeeze>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze>.burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset>.burger-lines,
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open>.burger-lines,
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.open>.burger-lines {
background-color: transparent;
}
.burger.-squeeze.open>.burger-lines:before,
.burger.-squeeze.open>.burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open>.burger-lines:before {
transform: rotate(-45deg);
}
.burger.-squeeze.open>.burger-lines:after {
transform: rotate(45deg);
}
<header>
<button class="toggle-nav" type="button">
<div class="burger -squeeze -offset" type="button">
<span class="burger-lines"></span>
</div>
</button>
<ul class="nav-list" role="navigation">
<div class="list -left">
<li class="item">
<a class="link" href="#">Menu item 1</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 2</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 3</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 4</a>
</li>
</div>
</ul>
<div class="overlay"></div>
</header>

That actually looks like a css problem. The tag <ul class="nav-list -open"> has a width of 100%, and for that reason it fills up the whole screen, not allowing the mouse click to get to the overlay element. You should:
remove width: 100% on the -open class (the source of the problems)
remove width: 60% on the .list.-left (The child of the nav doesn't fill it, it doesn't make too much sense...)
set left: -80rem instead of 50rem in .nav-list (to fully hide it)
That would make it work.

Why ajax loaded content is not showing properly?

I am trying to show products of a particular category when it is clicked by using jquery ajax i.e without reloading the page.
Now when the products load with Ajax it seems that their CSS is disturbed or maybe some jQuery events not loading. I have checked, all the CSS classes are well placed as in original file and also i ave tried the ".on" method as suggested in some other answers but it doesn't do anything. can you please help me find what the problem is?
original look :
this is what the look should be like
After Ajax loaded content :
and this look is after the ajax loading
all_products.php (original file)
<div class="product_grid">
<div class="product_grid_border"></div>
<div id="prod_container">
#foreach($products as $product)
<!-- Product Item -->
<div class="product_item is_new">
<div class="product_border"></div>
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
<div class="product_content">
<div class="product_price">${{$product->price}}</div>
<div class="product_name"><div>{{ucwords($product->name)}}</div></div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
#endforeach
</div>
</div>
ajax_products.blade.php (to be added via ajax)
#foreach($products as $product)
<!-- Product Item -->
<div class="product_item is_new">
<div class="product_border"></div>
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
<div class="product_content">
<div class="product_price">${{$product->price}}</div>
<div class="product_name"><div>{{ucwords($product->name)}}</div></div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
#endforeach
my_js.js
$(document).on('click','.cat',function(){
$.ajax({
url: 'http://localhost/cart_test/user/get_cats',
type: 'POST',
data: { cat : $(this).attr('id')},
success: function(data){
d = JSON.parse(data);
var container = $('#prod_container');
container.empty();
container.append(d);
},
error: function()
{
alert('error');
}
});
});
frontController.php
public function get_cats(Request $request)
{
$id = $request->input('cat');
$products = product::where('category_id','=',$id)->get();
$prods = view('frontend.modules.ajax_products',compact('products'))->render();
echo json_encode($prods);
}
shop.css
.product_grid
{
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
width: calc(100% + 40px);
}
.product_grid_border
{
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 3px;
height: 100%;
background: #FFFFFF;
z-index: 1;
}
.product_item
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 20%;
background: #FFFFFF;
cursor: pointer;
padding-top: 40px;
padding-bottom: 24px;
text-align: center;
}
.product_border
{
display: block;
position: absolute;
top: 52px;
right: 1px;
width: 1px;
height: calc(100% - 71px);
background: #e5e5e5;
}
.product_image
{
width: 100%;
height: 115px;
}
.product_image img
{
display: block;
position: relative;
max-width: 100%;
}
.product_content
{
width: 100%;
}
.product_price
{
font-size: 16px;
font-weight: 500;
margin-top: 25px;
}
.product_item.discount
{
color: #df3b3b;
}
.product_price span
{
position: relative;
font-size: 12px;
font-weight: 400;
color: rgba(0,0,0,0.6);
margin-left: 10px;
}
.product_price span::after
{
display: block;
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: 1px;
background: #8d8d8d;
content: '';
}
.product_name
{
margin-top: 4px;
overflow: hidden;
}
.product_name div
{
width: 100%;
}
.product_name div a
{
font-size: 14px;
font-weight: 400;
color: #000000;
white-space: nowrap;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_name div a:hover
{
color: #0e8ce4;
}
.product_fav
{
position: absolute;
top: 33px;
right: 12px;
width: 36px;
height: 36px;
background: #FFFFFF;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
border-radius: 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_fav:hover
{
box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.product_fav i
{
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
color: #cccccc;
line-height: 36px;
pointer-events: none;
z-index: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_fav.active i
{
color: red;
}
.product_item:hover .product_fav
{
visibility: visible;
opacity: 1;
}
.product_marks
{
display: block;
position: absolute;
top: 33px;
left: 24px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_mark
{
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
line-height: 36px;
font-size: 12px;
}
.product_new
{
display: none;
background: #0e8ce4;
visibility: hidden;
opacity: 0;
}
.product_discount
{
display: none;
background: #df3b3b;
visibility: hidden;
opacity: 0;
}
.product_item.is_new .product_new,
.product_item.discount .product_discount
{
display: inline-block;
visibility: visible;
opacity: 1;
}
shop.js (this is also not working after ajax)
function initIsotope() {
var sortingButtons = $('.shop_sorting_button');
$('.product_grid').isotope({
itemSelector: '.product_item',
getSortData: {
price: function(itemElement) {
var priceEle = $(itemElement).find('.product_price').text().replace('$', '');
return parseFloat(priceEle);
},
name: '.product_name div a'
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
// Sort based on the value from the sorting_type dropdown
sortingButtons.each(function() {
$(this).on('click', function() {
$('.sorting_text').text($(this).text());
var option = $(this).attr('data-isotope-option');
option = JSON.parse(option);
$('.product_grid').isotope(option);
});
});
}
/*
8. Init Price Slider
*/
function initPriceSlider() {
if ($("#slider-range").length) {
$("#slider-range").slider({
range: true,
min: 0,
max: 1000,
values: [0, 580],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$('.ui-slider-handle').on('mouseup', function() {
$('.product_grid').isotope({
filter: function() {
var priceRange = $('#amount').val();
var priceMin = parseFloat(priceRange.split('-')[0].replace('$', ''));
var priceMax = parseFloat(priceRange.split('-')[1].replace('$', ''));
var itemPrice = $(this).find('.product_price').clone().children().remove().end().text().replace('$', '');
return (itemPrice > priceMin) && (itemPrice < priceMax);
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
});
}
}