We Keep Coding

Trying to make Masonry-Layout work in Safari with imagesLoaded

I successfully implemented a Masonry-Gallery for a WordPress website by using Bootstrap 5 in combination with 'Masonry-Layout'.
It works all fine except in Safari, where the layout usually breaks, a known problem and the solution is supposed to be 'imagesLoaded'.
I tried a lot, but I just don't manage to add the needed classes at the right place(s).
The code as far as I got, see below. Anybody who can help?
<div class="row grid" id="gallery-masonry" data-masonry='{"percentPosition": true }'>
<?php
$images = get_field('gallery');
$size = 'large';
if( $images ): ?>
<?php foreach( $images as $image_id ): ?>
<div class="col-md-6 mb-3">
<div id="post-<?php the_ID(); ?>" class="card rounded-0" >
<?php echo wp_get_attachment_image( $image_id, $size, "", ["class" => "card-img-top rounded-0","alt"=>""]); ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<!--Masonry-Layout-->
<script src="https://cdn.jsdelivr.net/npm/masonry-layout#4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
<!--ImagesLoaded-->
<script src="https://unpkg.com/imagesloaded#5/imagesloaded.pkgd.min.js"></script>
<!--Script ImagesLoaded-->
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
// options...
});
});
</script>

Please check my post regarding adding a Masonry to a Wordpress Site.
https://www.customfitwebdesign.com/how-to-add-masonry-layout-in-wordpress/
Note: Masonry is actually built into the core of WordPress ( wp-includes/js/masonry.min.js ). This WordPress version of Masonry also includes ImagesLoaded (imagesloaded.min.js).

Wordpress: Turn off display of posts until filter button is clicked

(This is an extension of a series of questions I have asked previously as I'm going through the process of learning how to work with Wordpress)
I'm using a small javascript to turn on and off the display of posts on a page, depending on the posts respective category. The script enables a group of filter buttons at the top of the page to switch between displaying posts that belong to a certain category.
Now I would like to change the page's code so that upon loading the page for the first time (i.e. before any of the filter buttons have been clicked) there is no content/posts being displayed at all. Right now when accessing the page, all posts which belong to the parent category of the sub-categories (which the buttons allow to filter) are being displayed.
How do I have to change the site to do so?
An online version of the site can be visited here: http://udkdev.skopec.de/category/studierende/
Here's the site's code along with the javascript of the filter-button at the bottom:
<?php get_header(); ?>
</div>
<br>
<div class="wrapper-offset-fix wrapper-studierende">
<div class="projekte content">
<div class="button-group filters-button-group">
<button class="projekt-btn btn" id="category-stud-sose17">SoSe 2017</button>
<button class="projekt-btn btn" id="category-stud-wise1617">WiSe 2016/17</button>
<button class="projekt-btn btn" id="category-wise-201415">SoSe 2016 </button>
<button class="projekt-btn btn" id="category-sose-14">WiSe 2015/16</button>
<button class="projekt-btn btn" id="category-sose-14">SoSe 2015 </button>
<button class="projekt-btn btn" id="category-sose-14">WiSe 2014/15</button>
</div>
<?php if (have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<div <?php post_class(); ?>>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('full');
} ?>
<?php the_content(); ?>
</a>
<!--<div class="meta">Tags: <?php the_tags( '', ', ', '<br />' ); ?> </div>-->
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>Couldn’t find any articles!</h2>
<?php endif; ?>
</div>
<script>
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('.projekte > .post').fadeIn(300);
} else {
var $el = $('.' + this.id).fadeIn(300);
$('.projekte > .post').not($el).fadeOut(300);
}
$btns.removeClass('active');
$(this).addClass('active');
})
</script>
<?php get_footer(); ?>

You can begin this by first hiding all the posts. One way to do this would be add a CSS style
.projekte .post {display:none;}
Looking at your codes, rest should just work out by itself. I would however swap these lines so that the posts are removed before the new ones are added like this:
$('.projekte > .post').not($el).fadeOut(300);
var $el = $('.' + this.id).fadeIn(300);

Adding and Removing class on clicks (in wordpress loop)

So I have a wordpress loop to show certain posts. Each posts has a modal that I'll show the in and each modal is triggered by the .modal-trigger class. However, because there are more than one posts I want to prevent the user from opening more than one modal at a time and this is why I want to remove the .modal-trigger class once it is clicked. I will then addClass the .modal-trigger once the .fa-close is clicked
my main objective is to remove the .modal-trigger class once it is clicked and add this class once the .fa-close class is clicked
<section class="meet-the-team">
<div class="inner">
<?php
$team = new wp_query (array(
'post_type' => 'team',
'orderby' => 'date',
'order' => 'ASC'
));
if($team->have_posts()):
while($team->have_posts()):
$team->the_post();
?>
<div class="team-section">
<p class="team-header"><?php the_title(); ?></p>
<p class="team-details"><?php the_field('person_job_title'); ?></p>
<button class="button modal-trigger ">Read More</button>
<!-- MODAL SECTION FOR READ MORE POSTS -->
<div class="my-Modal">
<i class="fa fa-close"></i>
<?php the_title(); ?>
<p><?php the_field('person_job_title'); ?></p>
<?php the_content(); ?>
</div>
<!-- ENDING OF MODAL SECTION -->
</div>
<?php
endwhile;
else: "no posts available" ;
endif;
wp_reset_postdata();
?>
my jquery
$(document).ready(function(){
$('.modal-trigger').click(function(){
var post_content = $(this).parent('.team-section').find('.my-Modal').fadeIn().css('transform' , 'translate(0px , 15%)' );
$('.button .modal-trigger').removeClass('modal-trigger');
});
$('.fa-close').click(function(){
$('.my-Modal').fadeOut().css('transform' , 'translate(0px , 5%)');
$('.button .modal-trigger').addClass('modal-trigger');
});
});
thank you for any help!

This won't work because your opening click removes the class you use to 'close' as well. Essentially, the following element you try to select doesn't exist anymore:
$('.button .modal-trigger').addClass('modal-trigger');
I'd go with a global variable that blocks all clicks when active, something like this:
$(document).ready(function(){
var hasActiveModal = false;
$('.modal-trigger').click(function(){
if(!hasActiveModal) {
hasActiveModal = true;
var post_content = $(this).parent('.team-section').find('.my-Modal').fadeIn().css('transform' , 'translate(0px , 15%)' );
return;
}
});
$('.fa-close').click(function(){
if(hasActiveModal) {
hasActiveModal = false;
$('.my-Modal').fadeOut().css('transform', 'translate(0px , 5%)');
return;
}
});
});
This way you keep track of an active modal, and only allow modals to be opened when there's no open modal, and close them when there's a modal open.

button Onclick function with document.getElementById

I have created a button using woocommerce for each product, when clicked on it is meant to dropdown a form with its corresponding ID. I'm using woocommerce for displaying the products, and gravity forms for the forms.
I have placed this code html code to create the function for the button :
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SPECIFY PRODUCT</button>
<div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
<?php gravity_form( 1, false, false, false, '', true ); ?>
</div>
</div>
I also have the script above this html block (as i tried putting in the head section but was giving me a 'null is not an object error' for the document.GetElem...)
<script>
var theid = "<?php echo get_the_ID(); ?>";
function myFunction() {
document.getElementById('gform_' + theid).classList.toggle('show');
}
</script>
When i go to click on either of the 3 buttons it only drops down on the 3rd (pulling that ID first and not getting the others).
How can I make all the buttons dropdown and not just one?
Any help would be greatly appreciated as I've been trying to work this out for a while now..
Here is the link: http://www.ctagroup.com.au/cta-group-home/products/tactile-guidance/suresteel/suresteel-classic/

try the code below:
<script>
function myFunction(myid) {
document.getElementById('gform_' + myid).classList.toggle('show');
}
</script>
<div class="dropdown">
<button onclick="myFunction(<?php echo get_the_ID(); ?>)" class="dropbtn">SPECIFY PRODUCT</button>
<div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
<?php gravity_form( 1, false, false, false, '', true ); ?>
</div>
</div>

You can use the element's next sibling
function myFunction(el) {
el.nextSibling.classList.toggle('show');
}
<button onclick="myFunction(this)" class="dropbtn">SPECIFY PRODUCT</button>

Alternatively, I'll present a jQuery solution because I'm more comfortable with it than with regular JS. WooCommerce already uses it so the library is already loaded.
I would drop the onclick() from your HTML and rely on class-based selectors. I'm making the assumption that you only want to drop down the form that relates to the button clicked.
<div class="dropdown">
<button class="dropbtn">SPECIFY PRODUCT</button>
<div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
<?php gravity_form( 1, false, false, false, '', true ); ?>
</div>
</div>
And then my jQuery (which you only need once in the footer) would look like:
$( document ).ready(function() {
$('.dropbtn').click(function(e) {
e.preventDefault();
$(this).next().slideToggle();
})
});
Here's an example fiddle

Bxslider breaking after leaving page

I wonder if anyone could help me with a problem I am having with bxslider. I am creating a Wordpress site and using the jQuery bxslider instead of the plugin version. Everything with the slider is fine when you load the website, but when you leave the homepage to go to another page, and then come back the slider is broken.
When I say broken, both slides are showing and the JavaScript has stopped. Im using Bootstrap 3 as the framework of the theme.
I'm not used to posting on here, so sorry if I have made a mistake please feel free to correct it.
Any help would be appreciated.
Many Thanks
<div class="container">
<section class="row" id="slidercontainer">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="sliderholder">
<ul class="bxslider">
<?php
global $post;
$args = array('numberposts' => 4, 'category' => 2, 'post_status'=>"publish");
$myposts = get_posts($args);
foreach($myposts as $post) : setup_postdata($post);
?>
<li id="post-<?php the_ID(); ?>" class="slider-item">
<h1><?php echo get_the_title();?></h1>
<?php
$imageArray = get_field('slider_image'); // Array returned by Advanced Custom Fields
$imageAlt = $imageArray['alt']; // Grab, from the array, the 'alt'
$imageThumbURL = $imageArray['sizes']['postslider']; //grab from the array, the 'sizes', and from it, the 'thumbnail'
?>
<img class="pull-right" src="<?php echo $imageThumbURL;?>" alt="<?php echo $imageAlt; ?>">
<?php
$content = apply_filters( 'the_excerpt', get_the_excerpt() );
$content = str_replace( ']]>', ']]>', $content );
?>
<div class="slider-content"><?php echo $content;?></div>
</li>
<?php
endforeach;
wp_reset_postdata();
?>
</ul>
</div>
</section>
</div>
<!-- JavaScript -->
$(document).ready(function(){
$('.bxslider').bxSlider({
maxSlides: 4,
pager: false,
auto: true,
autoHidePager: true,
pause: 10500,
controls: true,
speed: 1800,
mode: 'horizontal'
});
});