I'm using this code snippet from Bootstrap:
https://bootsnipp.com/snippets/featured/material-card-reveal-with-image-effect
I then created an Advanced Custom Fields repeater field to show multiple cards. The problem is, once i trigger one card, they all get triggered. Is there a way to separate the action?
Here is my code with the repeater field integrated, the CSS and JS is the same as the Bootstrap demo.
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
The best way to handle this would be to put a unique ID on the modal and accompanying trigger. They are all firing at the same time, because they all have the same trigger. You can use a count to generate the unique ID. Your javascript would also have to be in the loop (or you repeat the loop just for the JS).
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php $count = 1;?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show<?php echo $count; ?>">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal panel<?php echo $count; ?>">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<script>
$(function(){
$('#show<?php echo $count; ?>').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
$('.card-reveal panel<?php echo $count; ?> .close').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
First thing's first: You are repeating this markup, so that ID of show is no longer unique - remove it or make it unique for each repeated item.
Now, I've added a 'show' class to your button:
<button type="button" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
And, in the JavaScript, selected that instead. I've used closest() and next() in order to slideToggle the cardReveal in the current context:
$(function(){
$('.show').on('click',function(){
$(this).closest('.card-content').nextAll('.card-reveal').slideToggle('slow');
});
$('.card-reveal .close').on('click',function(){
$(this).closest('.card-reveal').slideToggle('slow');
});
});
See it working here
Related
I am trying to display dynamic content (dynamic custom fields) inside a boostrap accordion. In order to do so, I'm using $var to get de index of the while loop I'm in, and use that to discriminate the first element and set the "aria-expanded" property to "true" for the first element and "false" for the rest.
When this code is executed, the "aria-expanded" property has "true" as value, and "false" on each other element in the accordion.
<div class="accordion faqs" id="accordionExample-b">
<?php if( have_rows('preguntas') ): ?>
<?php
$var = 0;
while( have_rows('preguntas') ): the_row(); ?> <div class="accordion-item">
<h2 class="" id="<?php echo('heading-'.$var)?>">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="<?php echo('#collapse-'.$var)?>"
aria-expanded="<?php if($var==0):echo ('true'); else: echo ('false'); endif;?>" aria-controls="<?php echo('collapse-'.$var)?>">
<h3><?php the_sub_field('pregunta'); ?></h3>
</button>
</h2>
<div id="<?php echo('collapse-'.$var)?>" class="accordion-collapse collapse show" aria-labelledby="<?php echo('heading-'.$var)?>" data-bs-parent="#accordionExample-b">
<div class="">
<?php the_sub_field('respuesta'); ?>
</div>
</div>
</div>
<?php $var++; endwhile; ?>
<?php endif; ?>
The problem is, when the page loads, all items are expanded, and if I click two times the same element, all other elements collapse.
You must apply show class ONLY to the first accordion-collapse element, so you must verify that the loop index is 0 then apply show class.
class="accordion-collapse collapse <?php if($var==0){echo ('show')}; ?>"
then your code must look like that:
<div class="accordion faqs" id="accordionExample-b">
<?php if( have_rows('preguntas') ): ?>
<?php
$var = 0;
while( have_rows('preguntas') ): the_row(); ?> <div class="accordion-item">
<h2 class="" id="<?php echo('heading-'.$var)?>">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="<?php echo('#collapse-'.$var)?>"
aria-expanded="<?php if($var==0):echo ('true'); else: echo ('false'); endif;?>" aria-controls="<?php echo('collapse-'.$var)?>">
<h3><?php the_sub_field('pregunta'); ?></h3>
</button>
</h2>
<div id="<?php echo('collapse-'.$var)?>" class="accordion-collapse collapse <?php if($var==0){echo ('show')}; ?>" aria-labelledby="<?php echo('heading-'.$var)?>" data-bs-parent="#accordionExample-b">
<div class="">
<?php the_sub_field('respuesta'); ?>
</div>
</div>
</div>
<?php $var++; endwhile; ?>
<?php endif; ?>
is it possible to work in pagination if there are no tables or do I have to change my output style entirely.
<div class="row">
<?php if ($company != null): ?>
<?php foreach ($company as $row): ?>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="job-grid">
<div class="job-title-sec">
<div class="thumb"><?php echo $row['logo']; ?></div>
<div class="c-logo"> <img src="http://placehold.it/235x115" alt="" /> </div>
<div><h3><strong><?php echo $row['employerName']; ?></strong></h3></div>
<div><h3><strong>SECTOR: </strong><?php echo $row['sectorName']; ?></h3></div>
<div class="job-lctn"><i class="fa fa-map-marker"></i><?php echo $row['stateName']; ?></div>
</div>
<div class=""><i class="fa fa-external-link"></i>Website</div>
<div><i class="fa fa-external-link"></i>About</div>
</div><!-- JOB Grid -->
</div>
<?php endforeach; ?>
</ul>
<?php else: ?>
<?php if($this->session->flashdata('none') != null) {
echo '<div class="alert alert-danger">';
echo $this->session->flashdata('none');
echo '</div>';
} ?>
<?php endif; ?>
</div>
There are a large number of results for the foreach and I want to split it using pagination. Thanks
I am doing a dynamic site. My main page shows a persons profile on the left and the articles written by him on the right.This is my main page.When i click 'read more', that particular article should open up in a new page on the left, and the remaining articles written by the same person should be shown on the right.
But here all the articles are shown This is the image of my blog page. I only want the selected article to be shown on the left and all the remaining articles on the right.
This is my table for articles. In the first page i am calling the articles on the right using the person's id.
This is the code for my first page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from person_details where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="background-color:rgba(125, 178, 194, 0.43); margin-bottom:10px;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img style="margin:20px;" src="uploads/<?php echo $ar[17]; ?>">
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
<h3><b>Mr. <?php echo $ar[1];?></b></h3>
<h5><?php echo $ar[8];?>, <?php echo $ar[12];?></h5>
<h5><?php echo $ar[2];?>, <?php echo $ar[7];?> years of experience</h5>
<p><?php echo $ar[16];?></p>
</div>
</div>
<div style="margin:20px;">
<h4><b>Services</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[18]; ?></h5>
</li>
</ul>
<h4><b>Specialisations</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[2]; ?></h5>
</li>
</ul>
<h4><b>Education</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[8]; ?> - <?php echo $ar[9]; ?> , <?php echo $ar[10]; ?> , <?php echo $ar[11];?></h5>
</li>
</ul>
<ul>
<li>
<h5><?php echo $ar[12]; ?> - <?php echo $ar[13]; ?> , <?php echo $ar[14]; ?> , <?php echo $ar[15];?></h5>
</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Articles by Mr. <?php echo $ar[1];?></h3><?php } ?>
<hr>
<?php
$sql1="select * from article_tb where id=$q";
$res1=mysql_query($sql1);
while($ar=mysql_fetch_array($res1))
{
$_SESSION['id'] = $q;
?>
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88">
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
<?php } ?></div>
</div>
</div>
and this is the code for my second page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from article_tb where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="border:1px solid #005212;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<center><img style="margin-top:10px;" src="uploads/<?php echo $ar[3]; ?>" /></center>
<div class="col-sm-12 col-md-12 col-lg-12">
<h4><b><?php echo $ar[1]; ?></b></h4>
<p><?php echo $ar[2]; ?></p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88" />
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
</div></div></div>
<?php } ?>
Can somebody please help me?
< script >
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("fast");
});
}); <
/script>
I want to display each tuple in different panel upon clicking the button in particular panel the details of that particular tuple should be shown in slide down panel and once again clicking on the button details should be hidden.
but according to my code only first tuple is correctly functioning.
$num=mysqli_num_rows($res); for($i=1;$i
<=$num; $i++) { while($row=mysqli_fetch_array($res)) { ?>
<div>
<a id="flip" class="btn btn-info btn-lg" href="#" id="flip">
<?php echo $row['pname']; ?> </a>
<div id="panel">
<p id="flip">
<?php echo "{$row['startDate']}"; ?> </p>
<p id="flip">
<?php echo $row['endDate']; ?> </p>
<p id="flip">
<?php echo $row['reference']; ?> </p>
</div>
</div>
<hr/>
<?php
remove all the ids, they are unique
you dont need the for loop around the while loop
<?php
while($row=mysqli_fetch_array($res)) {
?>
<div class="item">
<a class="toggle btn btn-info btn-lg" href="#">
<?php echo $row['pname']; ?>
</a>
<div class="panel">
<p>
<?php echo "{$row['startDate']}"; ?>
</p>
<p>
<?php echo $row['endDate']; ?>
</p>
<p>
<?php echo $row['reference']; ?>
</p>
</div>
</div>
<hr/>
<?php
}
?>
<script>
$(document).ready(function() {
$(".toggle").click(function(event) {
event.preventDefault();
event.stopPropagation();
$(this).next('.panel').slideToggle("fast");
});
});
</script>
I am trying to a create a pop-up for product but I Am not even able to see the object in alert box:
I have defined $new_date = date('m-d-Y', $dt); in another Div
Code:
<script>
$(document).ready(function(){
$('.pre-sale-product').on('click', function(){
$('.productcart').addClass('pre-sale-item-included');
});
$('.productcart').on('click', function(){
if($(this).hasClass('pre-sale-item-included')){
alert('this.$new_date' );
//tried alert(".$new_date.");
}
});
})
</script>
Also I want to create a pop-up instead of alert:
<script>
$(document).ready(function(){
$('.pre-sale-product').on('click', function(){
$('.productcart').addClass('pre-sale-item-included');
});
$('.productcart').on('click', function(){
if($(this).hasClass('pre-sale-item-included')){
<class="productcart" data-toggle="modal" data-target="#myModal_product">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal_product" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
});
})
</script>
Something like this But I don't get error in console nor it works...
Actual .tpl file
<script>
$(document).ready(function(){
$('.pre-sale-product').on('click', function(){
$('.productcart').addClass('pre-sale-item-included');
});
$('.productcart').on('click', function(){
if($(this).hasClass('pre-sale-item-included')){
alert('this <?php echo $new_date?>' );
}
});
})
</script>
<div class="thumbnails grid row list-inline">
<?php
$icount = 0;
foreach ($products as $product) {
$item = array();
$item['image'] = $product['thumb']['thumb_html'];
$item['title'] = $product['name'];
$item['description'] = $product['model'];
$item['rating'] = ($product['rating']) ? "<img src='" . $this->templateResource('/image/stars_' . $product['rating'] . '.png') . "' alt='" . $product['stars'] . "' />" : '';
$item['info_url'] = $product['href'];
$item['buy_url'] = $product['add'];
$preSaleImg = '';
$expectedShippingDate = '';
$newPriceClass = '';
$preSaleClass = '';
if($product['date_available'] > date('Y-m-d')){
$preSaleImg = "<img src='" . $this->templateResource('/image/pre-sale.png') . "' class='pre-sale-img'>";
$dt = strtotime($product['date_available']);
$new_date = date('m-d-Y', $dt);
$expectedShippingDate = "<span class='expected-shipping-date'>expected shipping date " . $new_date . " </span>";
$newPriceClass = "price-with-expected-shipping-date";
$preSaleClass = 'pre-sale-product';
}
if (!$display_price) {
$item['price'] = '';
}
$review = $button_write;
if ($item['rating']) {
$review = $item['rating'];
}
if($icount == 4) {
$icount = 0;
?>
<div class="clearfix"></div>
<?php
}
$icount++;
?>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="fixed_wrapper">
<div class="fixed">
<a class="prdocutname" href="<?php echo $item['info_url'] ?>"
title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?></a>
<?php echo $this->getHookvar('product_listing_name_'.$product['product_id']);?>
</div>
</div>
<div class="thumbnail">
<?php if ($product['special']) { ?>
<span class="sale tooltip-test"><?php echo $text_sale_label; ?></span>
<?php } ?>
<?php if ($product['new_product']) { ?>
<span class="new tooltip-test"><?php echo $text_new_label; ?></span>
<?php } ?>
<?php echo $preSaleImg; ?>
<?php echo $item['image'] ?>
<div class="blurb"><?php echo $product['blurb'] ?></div>
<?php echo $this->getHookvar('product_listing_details0_'.$product['product_id']);?>
<?php if ($display_price) { ?>
<div class="pricetag jumbotron">
<span class="spiral"></span>
<?php if($product['call_to_order']){ ?>
<a data-id="<?php echo $product['product_id'] ?>" href="#"
class="btn call_to_order"><?php echo $text_call_to_order?> <i class="fa fa-phone"></i></a>
<?php } else if ($product['track_stock'] && !$product['in_stock']) { ?>
<span class="nostock"><?php echo $product['no_stock_text']; ?></span>
<?php } else { ?>
<a data-id="<?php echo $product['product_id'] ?>"
href="<?php echo $item['buy_url'] ?>"
class="productcart <?php echo $preSaleClass; ?>"><?php echo $button_add_to_cart ?></a>
<?php } ?>
<div class="price">
<?php if ($product['special']) { ?>
<div class="pricenew"><?php echo $product['special'] ?></div>
<div class="priceold"><?php echo $product['price'] ?></div>
<?php } else { ?>
<div class="oneprice <?php echo $newPriceClass; ?>"><?php echo $expectedShippingDate; ?><span class='aslowas' style="font-size:12px;">AS LOW AS: </span><?php echo $product['price'] ?></div>
<?php } ?>
</div>
<?php echo $this->getHookvar('product_listing_details1_'.$product['product_id']);?>
</div>
<?php } ?>
</div>
</div>
<?php
}
?>
</div>
<div class="thumbnails list row">
<?php
foreach ($products as $product) {
$item = array();
$item['image'] = $product['thumb']['thumb_html'];
$item['title'] = $product['name'];
$item['rating'] = ($product['rating']) ? "<img src='" . $this->templateResource('/image/stars_' . $product['rating'] . '.png') . "' alt='" . $product['stars'] . "' />" : '';
$item['info_url'] = $product['href'];
$item['buy_url'] = $product['add'];
if (!$display_price) {
$item['price'] = '';
}
$review = $button_write;
if ($item['rating']) {
$review = $item['rating'];
}
?>
<div>
<div class="thumbnail">
<div class="row">
<div class="col-md-4">
<?php if ($product['special']) { ?>
<span class="sale tooltip-test"><?php echo $text_sale_label; ?></span>
<?php } ?>
<?php if ($product['new_product']) { ?>
<span class="new tooltip-test"><?php echo $text_new_label; ?></span>
<?php } ?>
<?php echo $this->getHookvar('product_listing_label_'.$product['product_id']);?>
<?php echo $item['image'] ?>
</div>
<div class="col-md-8">
<a class="prdocutname" href="<?php echo $item['info_url'] ?>"><?php echo $item['title'] ?>
<?php echo $product['model'] ? "(".$product['model'].")" :''; ?></a>
<div class="productdiscrption"><?php echo $product['description'] ?></div>
<div class="blurb"><?php echo $product['blurb'] ?></div>
<?php echo $this->getHookvar('product_listing_details00_'.$product['product_id']);?>
<?php if ($display_price) { ?>
<div class="pricetag pull-right">
<span class="spiral"></span>
<?php if($product['call_to_order']){ ?>
<a data-id="<?php echo $product['product_id'] ?>" href="#"
class="btn call_to_order"><?php echo $text_call_to_order?> <i class="fa fa-phone"></i></a>
<?php } else if ($product['track_stock'] && !$product['in_stock']) { ?>
<span class="nostock"><?php echo $product['no_stock_text']; ?></span>
<?php } else { ?>
<a data-id="<?php echo $product['product_id'] ?>"
href="<?php echo $item['buy_url'] ?>"
class="productcart"><?php echo $button_add_to_cart ?></a>
<?php } ?>
<div class="price">
<?php if ($product['special']) { ?>
<div class="pricenew"><?php echo $product['special'] ?></div>
<div class="priceold"><?php echo $product['price'] ?></div>
<?php } else { ?>
<div class="oneprice"><?php echo $product['price'] ?></div>
<?php } ?>
</div>
</div>
<?php } ?>
<?php echo $this->getHookvar('product_listing_details11_'.$product['product_id']);?>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
Code for modal at the bottom of .tpl file
<script>
$(document).ready(function(){
$('.pre-sale-product').on('click', function(){
$('.productcart').addClass('pre-sale-item-included');
});
$('.productcart').on('click', function(){
if($(this).hasClass('pre-sale-item-included')){
<class="productcart" data-toggle="modal" data-target="#myModal_product">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal_product" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
});
})
</script>
I think $new_date is a PHP variable, right? If it's true, you have to echo it out using PHP. Try this:
alert('this <?php echo $new_date?>' );