How to hide siblings elements - javascript

How would I hide rest of the categories when I click on one, and if I click again rest of the categories would appear again.
<?php if($slide1_row_cnt > 0){ ?>
<div class="item active">
<h4>Groups</h4>
<?php while ($row = mysqli_fetch_assoc($slide1_result)) { ?>
<div class="row">
<div class="col-xs-2">
<p class="groups-list"><button type="button" class="btn btn-primary groups-button" rel="/tasks/stock/stock-category-list.php?filter=<?php echo $row['id_stc']; ?>"><?php echo $row['description_stc']; ?></button></p>
</div>
</div>
<?php } ?>
</div>
<!-- /Slide1 -->
Javascript:
$('.groups-button').click(function() {
$(this).parent('p').siblings().toggle();
});
Thanks

Based on your code shared
<?php while ($row = mysqli_fetch_assoc($slide1_result)) {
You are showing a list of rows, so you should hide the rows
$(this).closest('.row').siblings().toggle();

Related

gallery image not showing their order

I have an gallery.php file.It consist Albums and it's gallery images. My problem is when I click on Album image, Gallery images start to showing from images 4/4 then 3/4 and so on.
gallery.php
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script>
<div class="menu-port">
<div class="container">
<div class="menu-grid-main">
<?php
include("database/connection.php");
$result=mysql_query("SELECT * from Album_image where status='process'");
while ($row1= mysql_fetch_array($result)) {
?>
<div class="col-md-4 menu-grid wow bounceInDown" data-wow-delay="0.3s">
<?php
include("database/connection.php");
$result1=mysql_query("SELECT * from Gallery_image where aid=$row1[aid]");
while ($row2= mysql_fetch_array($result1)) {
?>
<a href="admin/gcatch//<?php echo $row2['image'] ?>" data-lightbox="<?php echo $row1['name']?>" >
<?php }?>
<img src="admin/acatch/<?php echo $row1['image'] ?>" alt="" class="img-responsive">
</a>
<h3><?php echo $row1['name']?></h3>
<p><?php echo $row1['des']?></p>
</div>
<?php }?>
<div class="clearfix"> </div>
</div>
</div>
</div>
I used lightbox effect to showing gallery images
Please anyone help me to showing image proper format
there is syntax issue. try this
<div class="menu-port">
<div class="container">
<div class="menu-grid-main">
<?php
include("database/connection.php");
$result=mysql_query("SELECT * from Album_image where status='process'");
while ($row1= mysql_fetch_array($result)) {
?>
<?php
include("database/connection.php");
$result1=mysql_query("SELECT * from Gallery_image where aid=$row1[aid]");
while ($row2= mysql_fetch_array($result1)) {
?>
<div class="col-md-4 menu-grid wow bounceInDown" data-wow-delay="0.3s">
<a href="admin/gcatch//<?php echo $row2['image'] ?>" data-lightbox="<?php echo $row1['name']?>" >
<img src="admin/acatch/<?php echo $row1['image'] ?>" alt="" class="img-responsive">
</a>
<h3><?php echo $row1['name']?></h3>
<p><?php echo $row1['des']?></p>
</div>
<?php }?>
<?php }?>
<div class="clearfix"> </div>
</div>
</div>
</div>
this query is better for fetch data
"SELECT * from Gallery_image where aid=$row1[aid] ORDER BY id DESC"
ordering result is best way to figure out what data in what order is fetching
REMEMBER : mysql_* functions (mysql_connect OR mysql_query) are deprecated ! you should use PDO or at least mysqli functions
here is some resource to learn PDO : PDO and mysqli
/ intro to PDO (laracast tutorial)

Load my php script only once the page load

I am creating a shopping website where this it the page where product shows up.
now i want to add sorting functionality by color but issue comes when the page load only first mysql query run not any other this happens every time the page loads.
This php script create multiple div in row, what I want to do is run $query only once but when the page reload second time those div does not show up.
I want to this because I want to run other mysql query after the page reload.
<?php
//get rows query
$query = $db->query("SELECT pd.Product_Details_ID,pd.Slide_Photos,pd.rate,pm.Product_Name,pm.Product_ID,pm.gender from product_details as pd INNER JOIN product_master as pm ON pd.Product_ID=pm.Product_ID where pm.gender='$gender' ");
if ($query->num_rows > 0) {
while ($row = $query->fetch_assoc()) {
?>
<div class="col-sm-4 ">
<div class="productBox">
<div class="productImage clearfix">
<img src="<?php echo $row["Slide_Photos"]; ?>" alt="products-img">
<div class="productMasking">
<ul class="list-inline btn-group" role="group">
<li><a class="btn btn-default btn-wishlist"><i class="fa fa-heart-o"></i></a></li>
<li><i class="fa fa-shopping-basket"></i></li>
<li><a class="btn btn-default" href="product_info.php?Product_Details_ID=<?php echo $row["Product_Details_ID"]; ?>"><i class="fa fa-eye"></i></a></li>
</ul>
</div>
</div>
<div class="productCaption clearfix">
<a href="single-product.html">
<h5><?php echo $row['Product_Name']; ?> <?php echo $row["Product_Details_ID"]; ?></h5>
</a>
<h3><?php echo $row["rate"]; ?></h3>
</div>
</div>
</div>
<?php }
} else { ?>
<p>Product(s) not found.....</p>
<?php } ?>

Retrieve ACF unique ID generated by repeater field for use in a JavaScript function

I'm using advanced custom fields to repeat divs. There is a unique ID injected into the wrapper div for a click function that reveals content (i can't use a class because it triggers all the divs at once).
How do I target this ID in my javascript function dynamically? Here is my code;
<?php if( have_rows('team') ): $i = 0; ?>
<?php while( have_rows('team') ): the_row(); $i++;
$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-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" id="wrap-<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
And my function;
<script>
(function($) {
$('#wrap-1').on('click',function(){
$('#show-1').slideToggle('slow');
});
$('#show-1 .close').on('click',function(){
$('#show-1').slideToggle('slow');
});
})( jQuery );
</script>
Edit: the id is dynamically injected here;
id="wrap-<?php echo $i; ?>"
I would add the ID to each element in a data attribute, and use this and that ID to toggle appropriately. To summarize the JS, when you click on the button, you get the stored data attribute, which can be used to find the appropriate target for toggling.
To the HTML, I add the data ID to the #show divs, and removed the id completely from the button. It's not needed.
HTML changes:
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
and
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">`
Javascript
(function($) {
$('.teamInfo').on('click', function() {
var id = $(this).data('toggle-id');
$('#show-' + id).slideToggle();
});
$('.card-reveal .close').on('click',function() {
var id = $(this).closest('.card-reveal').data('toggle-id');
$('#show-' + id).slideToggle('slow');
});
})( jQuery );
And the entire HTML as you posted it:
<div class="small-12 medium-4 large-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>
I'd look at using this. You can still use a class for an event selector, and in the handler, have context to know which was selected.
<script>
(function($) {
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
})( jQuery );
</script>
^ i'm not clear if you were adding the .close class for a visual cue or if you wanted to use that to trach shown state. Might just need the one handler to act as a toggle. Or an if statement in the toggle if other things need to happen on the transition.

Get multiple checkbox values in Yii

I have a page in which a user is able to select his desired category and get a listing of organizations. As for now, I've managed to get data from one selected category.
My issue now is getting multiple selected categories and retrieve data from multiple ids.
List of categories:
<div class="col-md-4 sidebar well col-md-push-8">
<div class="sidebar__block">
<div class="sidebar__inner">
<h4 class="h4">Filter by category</h4>
<?php foreach ($categories as $c): ?>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="category[]" id="<?php echo $c->id;?>" value="<?php echo $c->id;?>" class="styled" <?php if($c->id==$_GET['category']){ echo 'checked="checked"'; } ?>>
<label for="<?php echo $c->title; ?>"><?php echo $c->title;?></label>
</div>
</div>
<?php endforeach ?>
<div class="form-group">
<button type="submit" class="btn btn-sd btn-sd-green full-width filter_button" name="subscribe">Filter <i class="icon-right-small"></i></button>
</div>
</div>
</div>
</div>
List of data(organizations according to category selected):
<div class="col-md-8 col-md-pull-4">
<!--start show category with title-->
<div class="lgi__block lgi__block-2" id="appnendGridId">
<!--start show single category with title-->
<?php if(!empty($enterprises)): ?>
<?php foreach ($enterprises as $e): ?>
<div class="lgi__item category1">
<a class="lgi__item-inner" target="_blank" href="<?php echo $this->createUrl('frontend/enterprise', array('id' => $e->id)) ?>">
<div class="lgi__block-img">
<h5 class="lgi__label"><?php if($e->isIdeaEnterpriseActiveAccreditedMembership()): ?><?php echo $e->renderIdeaEnterpriseMembership('text')?><?php endif; ?></h5>
<img class="img-responsive-full lgi__img wp-post-image" src="<?php echo $e['imageLogoUrl']; ?>" alt="">
<div class="overlay"></div>
</div>
<div class="lgi__title stripe">
<h4><?php echo $e['title']; ?></h4>
<p><?php echo ysUtil::truncate($e['text_oneliner'], 85) ?></p>
</div>
</a>
</div>
<?php endforeach ?>
<?php else: ?>
<?php echo Notice::inline('Enterprises not found in this category or keyword') ?>
<?php endif; ?>
<!--end show single category with title-->
</div>
<!--end show category with title-->
<div class="row load_more_div">
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts collapse please_wait_btn_class">
<h4 style="margin-top: 7px; color: #fff;">Loading...</h4>
</button>
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts load_more_btn_class">
Load More <i class="icon-arr-down"></i>
</button>
</div>
</div>
</div>
JS :
$(document).on('click','.filter_button',function(e){
e.preventDefault();
var category = [];
$.each($("input[name='category[]']:checked"), function(){
window.location.replace('/idea/frontend/explore/category/'+$(this).val());
});
});
Appreciate if anyone could help me in this matter.

How to open page with dynamically created modal already open

I'm using the loop to create a new module every time a new post is published. The ID is assigned using id="modal-<? the_ID(); ?>"
Now I want people to be able to visit the site from an external link with a module already open. I can do this js if I know the ID of the modal, like so (using dreamsModal-23 as an example):
var target = document.location.hash.replace("#", "");
if (target.length) {
if(target=="dreamsModal-23"){
$("#dreamsModal-23").modal('show');
}
}else{
}
Since these modal's are dynamically created though, obviously I don't know the IDs before they're created.
Is there a way I can I can append any ID to the js so that it will take any value and work? Basically I'm looking for this:
var target = document.location.hash.replace("#", "");
if (target.length) {
if(target=="dreamsModal-ANYTHING"){
$("#dreamsModal-WHATEVER-ID-IS-APPENDED-ABOVE").modal('show');
}
}else{
}
As always, any help is greatly appreciated!
EDIT ----
Here's an example of the modal markup in the loop:
<div class="modal fade" id="dreamsModal-<? the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="dreamsModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="dreamsModalLabel">Manifested Dream #<? the_ID(); ?></h4>
</div>
<div class="modal-body">
<p><?php echo substr(the_title('', '', FALSE), 0, 140); ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn-main" data-dismiss="modal">Close</button>
<?php $next_post = get_next_post();
if (!empty( $next_post )): ?>
<
<?php endif;
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
>
<?php endif; ?>
</div>
</div>
</div>
</div>
And here's the trigger for above example:
<a data-id="<?php the_ID(); ?>" data-toggle="modal" class="clickme">
<article id="post-<?php the_ID(); ?>">
<div class="content">
<p class="post-title"><?php echo substr(the_title('', '', FALSE), 0, 140); ?></p>
</div> <!-- .content -->
</article> <!-- .article -->
</a>
js for trigger:
$(".clickme").on ("click", function(){
$("#dreamsModal-" + $(this).attr('data-id')).modal();
});
You could simply use the data-target attribute that comes for default with the Modal Plugin to make modal popup, so you could change your code like this:
<a data-target="#dreamsModal-<?php the_ID(); ?>" data-toggle="modal" >
<article id="post-<?php the_ID(); ?>">
<div class="content">
<p class="post-title"><?php echo substr(the_title('', '', FALSE), 0, 140); ?></p>
</div> <!-- .content -->
</article> <!-- .article -->
</a>
This way you could remove your the script that triggers the modal, because it would be unnecesary, and change the script I linked to you in the comment to this:
$(document).ready(function(){
$(window.location.hash).modal('show');
$('a[data-toggle="modal"]').click(function(){
window.location.hash = $(this).attr('data-target');
});
});
EDIT
As navigation also worked on href, then you can change the href atribute to data-target as well
<?php $next_post = get_next_post();
if (!empty( $next_post )): ?>
<a data-target="#dreamsModal-<?php echo $next_post->ID; ?>" class="btn-main" data-dismiss="modal" data-toggle="modal"><</a>
<?php endif;
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
<a data-target="#dreamsModal-<?php echo $prev_post->ID; ?>" class="btn-main" data-dismiss="modal" data-toggle="modal">></a>
<?php endif; ?>

Categories