We Keep Coding

Repositioning bootstrap card after filtering

through Bootstrap Studio and a few lines of PHP, I dynamically generate a series of Cards.
I can filter the cards via an input box, but the filtered cards, don't reposition....they do if i change the width of the browser window....is there a way to make them reposition?
I'm posting my code
<div style="padding: 20px;border-radius: 20px;" id="card-list">
<div class="row" id="myItems" data-masonry="{"percentPosition": true }" >
<?php
//creo l'elenco dei campionati che si disputeranno fra oggi e domani
foreach ($arr_fed_NS as $key => $value) {
$text_camp=str_replace(']','',str_replace('[','',$value));
// echo '<br>ecco: '.$text_camp.'<BR>';
echo'
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<picture type="" srcset=""><img class="card-img-top p-3" src="'.$arr_camp[$text_camp].'" style="border-radius: 24px; object-fit: cover"></picture>
<div class="card-body">
<h3 class="fw-bolder card-title" style="text-align: center;--bs-body-font-weight: bold;">'.$text_camp.'</h3>
</div>
</div>
</div>';
}
?>
</div><script async="" src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
</div>
function prova(){
const input = document.getElementById('filter').value.toUpperCase();
const card = document.getElementsByClassName('card');
for (let i = 0; i < card.length; i++) {
let title = card[i].querySelector(".card-body h3.card-title");
if (title.innerText.toUpperCase().indexOf(input) > -1){
card[i].style.display="";
}else {
card[i].style.display="none";
}
}
}

Slide up hover with JS

I have a hover effect (with 'div' slide up on a hover), but it works not properly - for some reason it opens on every element in the grid, but I need it to be only on mouseover element
$(document).ready(function() {
if($(document).width() > 992) {
$('.one').hover(function() {
var color = $(this).css('background-color'),
hint = $(this).parent().find('.morehover');
if (($(hint).text()).trim() == "") return 0;
$(hint).css('border-top-color', color).clearQueue().delay(500).slideDown();
}, function() {
var hint = $(this).parent().find('.morehover').first();
$(hint).clearQueue().delay(500).slideUp();
});
}});
and
<div class="one">
<?= $f_AdminButtons ?>
<div class="img-logo-cat"> <img src="<?= $f_imagelogocatalogue ?>" alt="">
<div class="link-not-link">
<?= $f_linkShow ?>
</div>
</div>
<div class="image"><img src="<?= $f_phoneImage ?>" alt=""></div>
<div class="line"></div>
<div class="more">
<div class="morehover">
<?= nc_edit_inline('morehover', $f_RowID, $cc)?>
<div class="ssilka-podrob"><a class="ssilka-podrob-link" href="<?= $f_linkMore ?>">Подробнее </a><i class="fas fa-angle-right"></i></div>
</div><span><?= nc_edit_inline('Price', $f_RowID, $cc)?></span>
<a href="<?= $f_buttonLink ?>" class="button" target="_blank">
<?= $f_buttonText ?>
</a>
</div>
</div>
Where is my mistake?

look at this line:
hint = $(this).parent().find('.morehover');
You are on the element <div class="one"> and you are selecting the parent element of it than looking for morehover. You want the morehover inside of the element you are on, so you should NOT be looking at the parent.
hint = $(this).find('.morehover');

Like counter javascript

I can not run my like counter in javascript.
The replacement of the empty heart with the full one works properly but the counter update no. Can someone help me? Thank you
$query2 = mysql_query("SELECT * FROM totlike WHERE id_user_like = $id_user AND id_post_like = ". $risultato['id']."");
if(mysql_num_rows($query2) ==1) {
$like='<i class="glyphicon glyphicon-heart" id="'. $risultato['id'] .'"></i>';
} else {
$like='<i class="glyphicon glyphicon-heart-empty" id="'. $risultato['id'] .'"></i>';
}
echo '<div class="list" id="list_'. $risultato['id'] .'">
<div class="panel panel-default">
<div class="btn-group pull-right postbtn">
<button type="button" class="dotbtn dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="dots"></span> </button>
<ul class="dropdown-menu pull-right" role="menu">
<li>Segnala</li>
'. $delete .'
</ul>
</div>
<div class="col-md-12">
<div class="question" id="question8025"><div class="img imgLiquid imgLiquid_bgSize imgLiquid_ready" style="width: 60px; height: 60px; margin: 0px auto; background-image: url("download.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;"><img src="download.jpg" id="questionavatar" style="display: none;"></div>
<div class="media-body">
<h4 class="media-heading">'. $risultato['username'] .'<br>
<small><i class="fa fa-clock-o"></i> Yesterday, 2:00 am</small> </h4>
<p><h4>'. $status = nl2br($risultato['post']) .'</h4></p>
<ul class="nav nav-pills pull-left ">
<li>'.$like.' '.$risultato['total_like'].'</li>
</ul>
</div>
</div>
</div>
</div>
</div>';
and then
function like(id_post, tot_like) {
$.ajax({
type: "POST",
url: '../ajax/like.php',
data:{id_post:id_post},
complete: function() {
var elem = $('#'+id_post).attr('class');
if (elem=="glyphicon glyphicon-heart") {
$('#'+id_post).removeClass('glyphicon glyphicon-heart').addClass('glyphicon glyphicon-heart-empty');
$('#'+id_post).text(tot_like - 1);
} else {
$('#'+id_post).removeClass('glyphicon glyphicon-heart-empty').addClass('glyphicon glyphicon-heart');
$('#'+id_post).text(tot_like + 1);
}
}
});
When I click the counter goes to -1 or +2

You must have a refresh after you update by clicking on +1 or -1 which you are not doing it.
Also you must do ++ or -- which will be better.
1º Get the total likes, 2º show them as you are doing till now, 3º update which the user action, 4º get again refreshing o just update DOM object with +1 or -1 but will be quite useless and there may occur some error soon or mistake.

Unable to add to cart on other .php pages

I'm trying to create a simple ecommerce website. Everything is going well but I can only add products on my cart when I'm in index.php. When I try to click the add_cart button on all_products.php page, it redirects me to the index.php page and doesn't add the product to the cart.
I wanted to be able to add products as well on all_products.php page. What is wrong with my code:
function.php( functions where the "add to cart" button is created and the function on what will happen when the add to cart button is clicked:
function getProd(){
if(!isset($_GET['cat'])){
global $con;
$get_prod = "select * from item order by RAND() LIMIT 0, 6";
$run_prod = mysqli_query($con, $get_prod);
while($row_prod = mysqli_fetch_array($run_prod)){
$prod_id = $row_prod['ItemId'];
$prod_name = $row_prod['ItemName'];
$prod_desc = $row_prod['ItemDesc'];
$prod_price = $row_prod['ItemPrice'];
$prod_qty = $row_prod['ItemQty'];
$prod_cat = $row_prod['ItemCat'];
$prod_img = $row_prod['ItemImg'];
echo "
<div id='single_product'>
<img src='../admin_int/product_images/$prod_img' width='180' height=180'/>
<h4>Name:</h4><h4> $prod_name</h4>
<p><b>Price: $ $prod_price</b></p>
<a href='details.php?prod_id=$prod_id' style='float:left; font-size:19px;padding-top:10px;text-decoration:none'>Details</a>
<a href='index.php?add_cart=$prod_id'><button style = 'float:right; border:1; border-radius:12px; color:blue;
height:50px; width:50px;
background-color: #80ff80'>
Add to Cart</button></a> //THIS IS THE CREATION OF ADD TO CART BUTTON
</div>
";
}
}// if(!isset($_GET['cat'])){
}//END OF getProd()
cart() // This is what will the add to cart button is going to perform.
function cart(){
if(isset($_GET['add_cart']))
{
global $con;
$ip = getIp();
$pro_id = $_GET['add_cart'];
$check_pro = "select * from cart where ip_add = '$ip' AND p_id = '$prod_id" ;
$run_check = mysqli_query($con, $check_pro);
if(mysqli_num_rows($run_check)>0){
echo "";
}
else {
$insert_pro = "insert into cart (orderId,ip_add) values ('$pro_id','$ip')";
$run_pro = mysqli_query($con, $insert_pro);
echo "<script> window.open('all_products.php','_self')</script>";
}
}
}//cart()
all_products.php
<!DOCTYPE html>
<?php
include("../functions/function.php");
?>
<html>
<head>
<title>Online Shop</title>
<link rel='stylesheet' href='../CSS/style.css' media="all"/>
</head>
<body>
<!--Main Wrapper starts here!-->
<div class="main_wrapper">
<!--Header Wrapper starts here!-->
<div class="header_wrapper" >
<a href='index.php'><img id="logo" src="../Pictures/logo.png"/></a>
</div>
<!--Header ends here!-->
<!--Menu Bar starts here!-->
<div class="menubar">
<ul id="menu">
<li> Home </li>
<li> All Products </li>
<li> My Account </li>
<li> Sign Up </li>
<li> Shopping Cart </li>
<li> Contact Us </li>
</ul>
<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">
<input type="text" name="user_query" placeholder="Search Product"/>
<input type="submit" name="search" value="search" style='background-color:#80dfff; border:none;'/>
</form>
</div>
</div><!--Menubar ends here!-->
<!--Content Wrapper here!-->
<div class="content_wrapper">
<div id="sidebar">
<div id="sidebar_title"> Categories</div>
<ul id="cats">
<?php getCats(); ?>
</ul>
</div>
<!--CONTENT AREA starts here-->
<div id="content_area">
<?php cart(); ?>
<div id='shopping_cart'>
<span style='float:right; font-size:18px; padding-right:5px; padding:5px; line-height:40px;'>
Welcome Guest!
<b style='color:#336600'>SHOPPING CART</b>
Total Items:<?php total_items(); ?>
Total Price: <?php total_price(); ?>
<a href="cart.php" style='color:#336600'>Go to Cart</a>
</span>
</div>
<div id="product_box">
<!--CODE IN SHOWING ALL PRODUCTS-->
<?php
$get_prod = "select * from item order by ItemName";
$run_prod = mysqli_query($con, $get_prod);
while($row_prod = mysqli_fetch_array($run_prod)){
$prod_id = $row_prod['ItemId'];
$prod_name = $row_prod['ItemName'];
$prod_desc = $row_prod['ItemDesc'];
$prod_price = $row_prod['ItemPrice'];
$prod_qty = $row_prod['ItemQty'];
$prod_cat = $row_prod['ItemCat'];
$prod_img = $row_prod['ItemImg'];
echo "
<div id='single_product'>
<img src='../admin_int/product_images/$prod_img' width='180' height=180'/>
<h4>Name:</h4><h4> $prod_name</h4>
<p><b>Price: $ $prod_price</b></p>
<a href='details.php?prod_id=$prod_id' style='float:left; font-size:19px;padding-top:10px;text-decoration:none'>Details</a>
<a href='index.php?prod_id=$prod_id'><button style = 'float:right; border:1; border-radius:12px; color:blue;
height:50px; width:50px;
background-color: #80ff80'>
Add to Cart</button></a>
</div>
";
}
?> <!--END OF ALL PRODUCTS-->
</div>
</div><!--END OF CONTENT AREA-->
</div><!--Content Wrapper ends here!-->
<div id="footer"><h2 style='text-align:center; padding-top:25px;'>© Jerlon Buenconsejo 2015</h2> </div>
</div><!--Wrapper-->
</body>
</html>

You are redirected to index.php because this is the page specified in your link :
<a href='index.php?prod_id=$prod_id'>
Change it for the name of your page. Also, you will need the cart() function to be called on top of your page.
You should consider to call a unique page which is addCaddy.php for an example, that redirect to the page where you were after inserting the product, or that you could call with ajax.

Bootstrap carousel news slides timing wrong

I've been developing a wordpress template with a bootstrap (3.3.6.) carousel news slider. But the slides timing is all wrong after a few seconds. I already set a timer in custom.js, but it only worked on the news button (replacement of indicator), while the slides are moving way too fast after a few seconds.The weirdest thing is, if I change the bootstrap link to the cdn, the slides move properly but the news button are not moving at all. Any ideas on how to fix this?
This is the website for you to review: http://tfcakalimantan.org
The front-page.php
<?php
$args = array(
'post_type' => 'post',
'tag' => 'featured',
'posts_per_page' => 5
);
$the_query = new WP_Query( $args );
?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="list-group col-sm-4" style="padding-right: 0px;"> <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $the_query->current_post; ?>" class="list-group-item <?php if( $the_query->current_post == 0) echo 'active'; ?>"><h5><?php the_title(); ?></h5></li><?php endwhile; endif; ?>
</ol>
<?php rewind_posts(); ?>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
$thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true);
?>
<div class="item <?php if( $the_query->current_post == 0) echo 'active'; ?>">
<img src="<?php echo $thumbnail_url[0]; ?>" class="img-responsive" alt="<?php echo $thumbnail_meta; ?>">
<div class="carousel-caption">
<p><?php the_title(); ?></p>
</div></div>
<?php endwhile; endif; ?>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
</div>
<!-- Controls -->
<div class="row">
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<i class="fa fa-arrow-circle-left fa-2x"></i>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<i class="fa fa-arrow-circle-right fa-2x"></i>
</a>
</div>
</div>
</div><!-- End Carousel -->
The custom.js
// Carousel
$(document).ready(function(){
var clickEvent = false;
$('#myCarousel').carousel({
interval: 2000
}).on('click', '.list-group li', function() {
clickEvent = true;
$('.list-group li').removeClass('active');
$(this).addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.list-group').children().length -1;
var current = $('.list-group li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.list-group li').first().addClass('active');
}
}
clickEvent = false;
});
});
$(window).load(function() {
var boxheight = $('#myCarousel .carousel-inner').innerHeight();
var itemlength = $('#myCarousel .item').length;
var triggerheight = Math.round(boxheight/itemlength+1);
$('#myCarousel .list-group-item').outerHeight(triggerheight);
});
The style.css
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
#myCarousel .carousel-caption {
left:0;
right:0;
bottom:0;
text-align:left;
padding:10px;
background:rgba(0,0,0,0.6);
text-shadow:none;
font-family: 'Droid Sans', sans-serif;
color: #FFFFFF;
}
#myCarousel .list-group {
position:absolute;
top:0;
right:0;
font-family: 'Pontano Sans', sans-serif;
}
#myCarousel .list-group-item {
border-radius:0px;
cursor:pointer;
}
#myCarousel .list-group .active {
background-color:#6D9755;
}
#myCarousel .item {
height: 300px;
}
.carousel-controls {display:none;}