I am currently working on a site where my client wants a list of icons and when you click on an icon a panel slides in with the information relating to that icon. Here is a link to the section - https://vibrantpropertyservices-u8uj.temp-dns.com/wp/services/#services.
I have the sliding panel working but I can't seem to get the relevant content to show, it just shows the first icon's info. Here is my code:
<?php
$services_query = new WP_Query( array(
'post_type' => 'servicespage',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'menu_order'
)
);
?>
<?php if ( $services_query->have_posts() ) : ?>
<?php while ( $services_query->have_posts() ) : $services_query->the_post(); ?>
<?php $current_id = get_the_ID(); ?>
<div class="icon" onclick="openNav()" data-src="content-<?php echo $current_id ?>">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
<h3><?php the_title(); ?></h3>
</div>
<div id="slide" class="overlay">
×
<div id="content-<?php echo $current_id ?>">
<div class="test">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php endif; ?>
</div>
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("slide").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("slide").style.width = "0%";
}
I know I'm calling the id of "slide" but I don't know how to target <div id="content-<?php echo $current_id ?>"> for each individual link?
Many thanks
remove onclick function for both open
<div class="icon" data-src="content-<?php echo $current_id ?>">
and for close also
×
add below Jquery instead of functions
jQuery(document).on("click",".services-wrap .icon",function(){
jQuery(this).closest('div.overlay').css('width:100%');
});
jQuery(document).on("click",".overlay .closebtn",function(){
jQuery(this).closest('div.overlay').css('width:0%');
});
Related
Below is the code from home.php template which displays posts. Not sure how can I add ajax on scroll pagination. Once page is loaded 5-6 posts must be displayed and when user scrolls down, then loader icon must come and must show other remaining post.
I have created a page in wordpress and i have selected template as home.
<?php
/**
* Genesis Sample.
*
* This file adds the landing page template to the Genesis Sample Theme.
*
* Template Name: Home
*
* #package Genesis Sample
* #author StudioPress
* #license GPL-2.0-or-later
* #link https://www.studiopress.com/
*/
get_header();
get_template_part( 'content-archive' );
?>
<div class="body-container">
<div class="blogs-banner">
<?php
$image = get_field('image');
if (!empty($image)) : ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="img-main" />
<?php endif; ?>
</div>
<div class="about-container">
<div class="blog-list">
<div class="row-same-height">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
wp_reset_query();
$post_ids = (array) get_query_var('post_ids');
$args = array(
'post_type' => array('post'),
'post_status' => 'publish',
'posts_per_page' => 1500,
'paged' => $paged,
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post(); ?>
<a href="" class="link-post">
<div class="col-same-height">
<div class="content">
<div class="TopArticleCard-Container">
<div class="img-container">
<?php
$thumbnail = get_post_meta(get_the_id(), 'large_img', true);
if ( $thumbnail ) { ?>
<img src="<?php echo $thumbnail; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" loading="lazy"/>
<?php } else if ( has_post_thumbnail() ) {
the_post_thumbnail('large', ['title' => get_the_title()], ['alt' => get_the_title()]); ?>
<?php
} else { ?>
<img src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/09/default.jpg" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" loading="lazy"/>
<?php } ?>
</div>
<div class="article-description">
<div class="article-tag">
<?php $cat = get_the_category(); echo $cat[0]->cat_name; ?>
</div>
<div class="content">
<div class="article-title">
<?php the_title(); ?>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<?php endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
</div>
</div>
<?php get_footer();
I have listed my data through a custom-post-type plugin having some custom fields. Below code will display the custom-post-type listing data.
<?php
$args = array(
'post_type' => 'inde_case',
'posts_per_page' => -1
);
query_posts($args);
?>
<ul class="case_study_section1 col-md-12 nopadding">
<?php while ( have_posts() ) : the_post(); ?>
<?php $terms = get_the_terms( get_the_ID(), 'inde_case_category');
if( !empty($terms) ) {
$term = array_pop($terms);
}
?>
<li data-category="<?php echo $term->slug; ?>" class="case_study_img col-md-3 col-sm-6">
<div class="caseSection">
<div class="imagediv"><?php the_post_thumbnail(); ?></div>
<div style="width:100%;float:left;">
<a class="case_study_pdf" href="<?php the_field('linkicon'); ?>" >PDF</a>
<a class="case_study_title" href="<?php the_field('linktext'); ?>" ><?php the_title(); ?></a>
</div>
</div>
</li>
<?php endwhile; ?>
I have properly listed my data having thumbnail and pdf link...etc.
I am trying to create a popup by popup-maker plugin, it has created a class to open a popup. And when I put that class in above code (refer below), in this case only one popup will apply for each post.
<a class="popmake-6981 case_study_pdf" href="<?php the_field('linkicon'); ?>" >PDF</a>
When somebody click on pdf link how can I open a separate popup for each particular post?
Or can I open a specific popup-form using postId or some unique data?
Please Advice.
You can create popups with their [popup] shortcodes, like described here.
Match ID and a trigger class.
<?php while ( have_posts() ) : the_post();?>
<article>
<h2><a class="popmake-post-<?php the_ID();?>" href="<?php the_permalink();?>"><?php the_title();?></a></h2>
<?php echo do_shortcode("[popup id='post-". get_the_ID() ."' size='small' title='". get_the_title() ."']". get_the_content() . "[/popup]");?>
</article>
<?php endwhile; ?>
Beware that you may also need some popup on that page in targeting settings, otherwise they may not initialize.
I have a structure like this in my wordpress search.php:
<div class="tags">
<!-- show all tags from posts in here -->
</div>
<div class="posts">
<!-- Wordpress Query loop here -->
<!-- get_the_tags() for each posts -->
<!-- End loop -->
</div>
I'm able to show inside the loop the list of tags for all the posts. But I need to show them on the div with the class "tags" that is outside the loop.
I know that if I want to show them after the loop is easy, I just have to use a global php variable and show them afterwards. But the only way I think I can add those tags before the loop is inserting them on the HTML DOM with javascript.
Is there any other method to do this more easily?.
Full code as requested:
<?php
global $global_tags;
?>
<div class="col-left">
<div class="tags">
<div class="placeholder-tags"></div>
</div>
</div>
<div class="col-right">
<div class="profile-wrapper">
<?php
$tag = single_tag_title( '', false );
$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="profile">
<a href="<?php echo get_permalink(); ?>">
<?php $current_profile = get_field("profile_personal")[0]; ?>
<div class="profile-image">
<img alt="" src="<?php echo $current_profile["profile_image"]['sizes']['thumbnail']; ?>"/><br>
</div>
<div class="profile-name">
<?php echo $current_profile["profile_name"] . ' ' . $current_profile["profile_surname"]; ?>
</div>
<div class="profile-country">
<?php echo $current_profile["profile_country"]; ?><br>
</div>
<?php
$list_tags = get_the_tags();
foreach ( $list_tags as $single_tag) {
$global_tags[] = $single_tag->slug;
}
?>
<?php if ( has_category("bolaber",$post->ID) ) { ?>
<div class="worked-with-us">
●
</div>
<?php } ?>
</a>
</div>
<?php endwhile; ?>
<!-- end of the loop -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'default Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
I came up with a not very elegant or efficient solution, but it works perfectly, I added another loop on the tags placeholder with the same query loop parameters, but without showing anything but the tags.
<?php
global $global_tags;
?>
<div class="col-left">
<div class="tags">
<?php
$tag = single_tag_title( '', false );
$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
$list_tags = get_the_tags();
foreach ( $list_tags as $single_tag) {
$global_tags[] = $single_tag->slug;
}
?>
<?php endwhile; ?>
<pre>
<?php
if ( $global_tags ) {
$global_tags = array_unique($global_tags);
foreach ($global_tags as $value) {
echo '</br>#'. $value .'';
}
}
?>
</pre>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
</div>
</div>
<div class="col-right">
<div class="profile-wrapper">
<?php
$tag = single_tag_title( '', false );
$args = array (
'pagination'=> true,
'posts_per_page' => '8',
'post_type' => 'profile',
'tag_slug__in' =>array($tag)
);
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="profile">
<a href="<?php echo get_permalink(); ?>">
<?php $current_profile = get_field("profile_personal")[0]; ?>
<div class="profile-image">
<img alt="" src="<?php echo $current_profile["profile_image"]['sizes']['thumbnail']; ?>"/><br>
</div>
<div class="profile-name">
<?php echo $current_profile["profile_name"] . ' ' . $current_profile["profile_surname"]; ?>
</div>
<div class="profile-country">
<?php echo $current_profile["profile_country"]; ?><br>
</div>
<?php
$list_tags = get_the_tags();
foreach ( $list_tags as $single_tag) {
$global_tags[] = $single_tag->slug;
}
?>
<?php if ( has_category("bolaber",$post->ID) ) { ?>
<div class="worked-with-us">
●
</div>
<?php } ?>
</a>
</div>
<?php endwhile; ?>
<!-- end of the loop -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'default Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
I wanted to show some lightbox funtionality with the use of shortcodes. The code is working fine except for the data shown in the ligthbox. It only shows the data from the latest post in the loop. How can i manage to get lightbox showing the data belonging to the post?
<?php
// Posts are found
if ( $posts->have_posts() ) {
while ( $posts->have_posts() ) :
$posts->the_post();
global $post;
?>
<center>
<div id="su-post-<?php the_ID(); ?>" class="su-post">
<?php if ( has_post_thumbnail() ) : ?>
<a class="su-post-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php endif; ?>
<div class="su-post-excerpt">
<!-- Shows the button and the hidden lightbox -->
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showInfo"][su_button] Info[/su_button][/su_lightbox]'); ?>
<!-- Shows the lightbox if button is clicked with the data -->
<?php echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showVideo"][su_button] Video[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showVideo"][su_video url="{su_meta key=video}"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showFoto"][su_button] Foto[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showFoto"][su_meta key="fotos" default="Geen fotos"][/su_lightbox_content]'); ?>
</div>
</div>
</center>
<?php
endwhile; echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]');
}
// Posts not found
else {
echo '<h4>' . __( 'Posts not found', 'shortcodes-ultimate' ) . '</h4>';
}
?>
By adding a counter in the while loop and using the variable in the shortcode SRC and ID fields. I needed unique ID's for each post.
$n = 0; /* Outside While Loop */
echo do_shortcode( '[su_lightbox type="inline" src="#showInfo'.$n.'"][su_button] Info[/su_button][/su_lightbox] ');
echo do_shortcode( '[su_lightbox_content id="showInfo'.$n.'"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]' );
$n++; /* Inside While Loop */
Why is it that when I click on the button the status refreshes, but the button dissappears?
JS
$( ".refreshstatus" ).click(function(){
$( ".navplayers" ).load('stats.php');
});
CSS
.refreshstatus{
font-family:'Noto Sans';
font-weight: 900;
text-align:center;
background-color:tomato;
}
HTML
<div class="refreshstatus">Refresh</div>
stats.php
<?php include ("statsfunction.php"); ?><?php if( ( $Players = $Query->GetPlayers( ) ) !== false ): foreach( $Players as $Player ): ?>
<img src="https://minotar.net/avatar/<?php echo htmlspecialchars( $Player ); ?>/32"><div class="playerinfo" id="<?php echo htmlspecialchars( $Player ); ?>"><?php echo htmlspecialchars( $Player ); ?></div></img>
<?php endforeach; else: ?>
No players
<?php endif; ?>
<p><b>Players <?php echo "<font color='green' ><?php $players_online ?></font>" ?> online</b></p>
<div class="col-sm-3 navplayers">
<?php include ("stats.php"); ?>
<div class="refreshstatus">Refresh</div>
</div>
Ok, your div.refreshstatus is being overlapped by your loaded content. Make a proper button or use an <a> link.
Something like...
<div class="col-sm-3 navplayers">
<?php include ("stats.php"); ?>
Refresh
</div>
Or a button...
<div class="col-sm-3 navplayers">
<?php include ("stats.php"); ?>
<button type="button" class="refreshstatus">Refresh</button>
</div>