On Click Dissapear html div - javascript

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>

Related

My accordion toggle signs '+', '-' not changing i thin removeClass('current-bod') not working

This is my html code i am using ACF-
When i clicking others panel then it works but when i click same panel (open and close) then toggle sign only show '-' its not convert into '+' sign.
<section class="section-padding" id="currentOpening" style="background-color:#f2f2f2;">
<div class="container">
<div class="row">
<?php
if( have_rows('current_openings') ): ?>
<div class="current-opening">
<h2 class="section-heading">Current Openings</h2>
<div class="accordion-carrier">
<?php
while( have_rows('current_openings') ): the_row();
$profile = get_sub_field('opening_profile');
?>
<div class="openingTab"><a class="openingsToggle" href="javascript:void(0);"><?php the_sub_field('opening_profile'); ?> </a>
<?php
if( have_rows('openings') ): ?>
<div class="inner-carrier">
<?php
while( have_rows('openings') ): the_row();?>
<?php /*<h5><?php the_sub_field('opening_title'); ?></h5> */?>
<div class="inner-carrierrr">
<?php the_sub_field('opening_jd'); ?> Apply Now
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
</section>
and this js code-
<script>
jQuery('.openingsToggle').click(function(e) {
e.preventDefault();
jQuery('div.openingTab > a.openingsToggle.current-bod').removeClass('current-bod');
jQuery(this).addClass('current-bod');
var $this = jQuery(this);
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('.openingTab .inner-carrier').removeClass('show');
$this.parent().parent().find('.openingTab .inner-carrier').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});
</script>

How to show specific content relating to link clicked on

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%');
});

OwlCarousel2 cannot get jquery to work

I'm doing an slider image by using the plugin OwlCarousel2
I have added the JavaScript and CSS files that they provide on the website.
I'm also setup this on WordPress custom theme. I having a hard time trying to figure out how to setup my own custom Jquery.
Custom animation
jQuery(document).ready(function() {
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
Boolean: false,
Number: 10
});
});
Wordpress Slider Image with Advanced Custom Gallery/Checkbox Fields
<?php $images = get_field('image_carousel'); ?>
<?php $activate_carousel_array = get_field( 'activate_carousel' ); ?>
<?php if( $images ): ?>
<?php if ( $activate_carousel_array ):
foreach ( $activate_carousel_array as $activate_carousel_item ):
echo $activate_carousel_item; ?>
<?php
$images = get_field('image_carousel');
if( $images ): ?>
<div id="hero">
<div class="slider owl-carousel owl-theme">
<?php foreach( $images as $image ): ?>
<div><img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
<?php endforeach; ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
<?php endif; ?>
In your code you use
jQuery(document).ready(function() and
$(document).ready(function()
remove one of them.

Giving unique ID's in a loop doesnt work

I'm trying to give each ID in the loop a unique ID.
Like: check-1, check-2 etcera.
But it is not working .
Here is my code:
<?php
if( have_rows('activiteiten_knoppen') ): $count=0;?>
<?php while(have_rows('activiteiten_knoppen') ): the_row();
$meer_info = get_sub_field('meer_info');
$tijd = get_sub_field('reserveren');
?>
<p class="activiteitInfo"><a class="fancybox-inline" style="color: #f3f3f3 !important;">Meer info</a></p>
<p class="activiteitReserveer"><a style="color: #f3f3f3 !important;" href="<?php echo $tijd; ?>">Reserveren</a></p>
<div id="check-<?php echo $count ?>" style="display: none;"><?php echo $meer_info; ?></div>
<script>
$(document).ready(function () {
$(".activiteitInfo").click(function () {
$(".hoi").css("display", "block");
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>

Lighbox only showing data of the current post in Wordpress

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 */

Categories