We Keep Coding

JS Display none with PHP foreach only working with first elemnt

I'm bringing articles from a database with ORDER BY RAND() with a PHP foreach cycle:
<?php foreach($posts as $post): ?>
<div class="post" id="post">
<article>
<div class="post-head">
<a href="<?php echo ROUTE; ?>/profile.php/<?php echo $post['user_id']; ?>">
<img class="post-pfp" src="<?php echo ROUTE; ?>/users_pics/<?php echo ($post['profile_pic']); ?>">
</a>
<h1>
<a class="links-3" href="<?php echo ROUTE; ?>/profile.php?user=<?php echo $post['user_id']; ?>"><?php echo $post['post_by']; ?></a>
</h1>
<p class="post-date"><?php echo get_date($post['date']); ?></p>
<div class="x_hover" onclick="hide_post()">
<img src="<?php echo ROUTE; ?>/icons/cross.svg">
</div>
<hr id="post-hr">
<br>
<a href="<?php echo ROUTE; ?>/post.php?p=<?php echo $post['ID']; ?>">
<p class="post-content"><?php echo $post['content']; ?></p>
</a>
</div>
</article>
</div>
<?php endforeach; ?>
As you can see, the div with the class x_hover has an onclick attribute:
<div class="x_hover" onclick="hide_post()">
<img src="<?php echo ROUTE; ?>/icons/cross.svg">
</div>
What the hide_post() function does is this:
var post = document.getElementsByClassName("post");
function hide_post(){
if (post[0].style.display = "block") {
post[0].style.display = "none"
}
}
I'm new to JS so I have some issues as well.
We are declaring that var post is equal to all the elements with the class name "post", such as the HTML code I added at the beginning, has the class post:
<div class="post" id="post">
This div has the display: block; attribute. However, when I run all this code, It only turns into display: none the first element that brings us from the database, it doesn't works with the rest of them...
Why is this happening?

IDs must be unique and since you have named all of the post only the first one will ever been "seen". Make the IDs unique, change your hide_post function to accept a ID name to hide, and add the unique ID to your onclick calls.
Change
<div class="post" id="post">
to something like
<div class="post" id="post<?php echo $post['ID']; ?>">
Then change
<div class="x_hover" onclick="hide_post()">
to
<div class="x_hover" onclick="hide_post('post<?php echo $post['ID']; ?>')">
Finally, modify your hide_post function to accept the name of the ID to show or hide.
function hide_post(idToHide){
if (idToHide.style.display = "block") {
idToHide.style.display = "none"
}
}

When you use getElementsByClassName it returns an HTMLCollection. You should iterate elements and hide all of them if it's what you intent to. Right now you are just hiding 0th element of this collection.
var posts = document.getElementsByClassName("post");
for (let post of posts) {
if (post.style.display = "block") {
post.style.display = "none"
}
}
If you intent to hide a single post you give unique ids to divs, and call hide_post with id of that post. Also you should use getElementById for that. Notice that it's not plural. Function should be like this:
function hide_post(postId){
var post = document.getElementById(postId);
if (post.style.display = "block") {
post.style.display = "none"
}
}

A more cleaner way of doing this would be.
function hide_post() {
document.querySelectorAll('.post').forEach(v => {
if(v.style.display == block) v.style.display = none; }); }

Jquery sortable function is not working in wordpress

Here is my code
jQuery:
jQuery(document).ready(function(){
jQuery('#admin-page-wrapper ul').sortable({cursor: 'move'});
});
Here is my order of jquery which are enqued
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
And here is my plugin code
<div id="admin-page-wrapper">
<h2>Published Pages</h2>
<?php
$pages = new WP_Query(array('post_type'=>'page','post_status'=>'publish','posts_per_page'=>'-1','order'=>'ASC'));
?>
<ul id="dashboard-page">
<?php if($pages -> have_posts()){
while($pages -> have_posts()){
$pages->the_post(); ?>
<li class="dashboard-item"><?php echo the_title(); ?></li>
<?php }
} ?>
</ul>
</div>

Add 3rd script & add it as last one:
wp_enqueue_script( 'jquery-ui-sortable');
You can find a list of all WordPress built in scripts at this page:
https://codex.wordpress.org/Function_Reference/wp_enqueue_script

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

How to dynamically append text to images in a carousel?

The carousel in question is elastislide http://tympanus.net/Development/Elastislide/index.html, currently mine is displayed after a search with the results inside the carousel but I have no way to add text text dynamically in order to make it clear to the user exactly what the result is.
<!-- Elastislide Carousel and Overlay -->
<ul id="carousel" class="elastislide-list">
<?php
if(isset($_POST["title"]))
{
$se = $_POST['title'];
$DBH = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
$sth = $DBH->prepare("SELECT subjects_id FROM subjects WHERE title LIKE '%".$se."%'");
$sth->execute();
$result = $sth->fetchAll();
$arr = $result;
$image=2;
$length = count($arr);
for ($i=0; $i < $length && $i<40; $i++)
{
if ($arr[$i]!="")
{
echo'<li><a id="dummy" href="http://localhost/website/subjects/view/'.$arr[$i][0].'" ><img src="images/small/'.$image.'.jpg" alt="image02" /></a></li>';
$image++;
}
}
}
?>
</ul>
<script type="text/javascript">
( function($)
{
$( '#carousel' ).elastislide();
} ) ( jQuery );
</script>
<!-- End Elastislide Carousel and Overlay -->

Check my answer here
You can add a div after image and change its content dynamically.
<ul id="carousel" class="elastislide-list">
<div id="description">
<label id="caption">First image</label>
</div>
Hope this helps.

Need help making jQuery loop for basic .fadeIn()/.fadeOut() slider

I'm new to jQuery and am having trouble figuring out the right way to loop a set of code for a basic carousel/banner rotator. I've tried a few versions of "for" statements and .each(), but I can't get it to work on my own so I'm reaching out for help.
Here's my code so far:
$('.next-1').click(function () {
$('.featured-1').fadeOut(500,function(){
$('.featured-2').fadeIn(500,function(){
$('.featured-2').toggleClass("hide");
});
});
});
$('.next-2').click(function () {
$('.featured-2').fadeOut(500,function(){
$('.featured-3').fadeIn(500,function(){
$('.featured-3').toggleClass("hide");
});
});
});
And then a similar code block for going back within the slider:
$('.prev-2').click(function () {
$('.featured-2').fadeOut(500,function(){
$('.featured-1').fadeIn(500,function(){
$('.featured-2').toggleClass("hide");
});
});
});
$('.prev-3').click(function () {
$('.featured-3').fadeOut(500,function(){
$('.featured-2').fadeIn(500,function(){
$('.featured-3').toggleClass("hide");
});
});
});
This code does work right now, I just don't want to have to output so many unnecessary lines of code when I know I could loop it. I'd like to be able to loop until there are no more "featured-n" divs to cycle through (being able to cycle around to the beginning would be great too!)
Here's the PHP/HTML I'm using to generate each "featured-n" div block:
function home_slider_loop() {
$count = 0;
query_posts ('tag=slider');
if (have_posts()) : while (have_posts()) : the_post();
$count++;
?>
<div class="featured-post featured-<?php echo $count; if ($count>1) { echo ' hide';}?>">
<div class="featured-header">
<h1 class="featured-title"><?php the_title(); ?></h1>
<p class="author">Written by Evan Luzi</p>
</div>
<div class="image-wrap">
<?php the_post_thumbnail('full', array('class' => 'slider-image')); ?>
<div class="slider-nav">
<div class="featured-prev prev-<?php echo $count; ?>"></div>
<div class="featured-next next-<?php echo $count; ?>"></div>
</div><!--End Navigation-->
</div><!--End Image <?php echo $count; ?>-->
<div class="featured-footer">
<?php the_excerpt(); ?>
<a class="more-link" href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>" >Read more</a>
</div>
</div><!--End Featured <?php echo $count; ?>-->
<?php
endwhile;
endif;
}
Here's a sample of one of the static HTML outputs (just imagine this iterated several times with the "featured-n" classes incrementing:
<div class="featured-1">
<div class="featured-header">
<h1 class="featured-title">5 Useful Cinematography Apps for iOS You Should Download Today</h1>
<p class="author">Written by Evan Luzi</p>
</div>
<div class="image-wrap">
<img width="1018" height="416" src="http://www.tbabdev.com/wp-content/uploads/2013/07/cinematography-apps-8-hero.jpg" class="slider-image wp-post-image" alt="cinematography-apps-8-hero" />
<div class="slider-nav">
<div class="featured-prev prev-1"></div>
<div class="featured-next next-1"></div>
</div><!--End Navigation-->
</div><!--End Image 1-->
<div class="featured-footer">
<p>The devices we have in our pockets, the ones that can run these apps, these are the new leathermans. They have everything we need. They eliminate the need to carry paper manuals and enable us to do complex timelapse calculations in a fraction of the time as a paper and pen.</p>
<a class="more-link" href="http://www.tbabdev.com/?p=27" alt="5 Useful Cinematography Apps for iOS You Should Download Today" >Read more</a>
</div>
</div><!--End Featured 1-->
You can see the code in action at http://www.tbabdev.com/
Thank you in advance for your help and please be kind to a n00b :)

Use something like this :
$('.nav .prev').click(function(){
activeBlock = $('.featured.active');
prevBlock = activeBlock.prev('.featured');
activeBlock.fadeOut('slow',function(){
prevBlock.fadeIn().addClass('active');
}).removeClass('active');
});
$('.nav .next').click(function(){
activeBlock = $('.featured.active');
nextBlock = activeBlock.next('.featured');
activeBlock.fadeOut('slow',function(){
nextBlock.fadeIn().addClass('active');
}).removeClass('active');
});
Html
<div class="nav">
<div class="prev"> </div>
<div class="next"> </div>
</div>
<div class="featured-post featured <?php if($count>1) echo 'hide' ?>">
<div class="featured-header">
<h1 class="featured-title"><?php the_title(); ?></h1>
<p class="author">Written by Evan Luzi</p>
</div>
<div class="image-wrap">
<?php the_post_thumbnail('full', array('class' => 'slider-image')); ?>
</div>
<!--End Image <?php echo $count; ?>-->
<div class="featured-footer">
<?php the_excerpt(); ?>
<a class="more-link" href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>" >Read more</a>
</div>
</div>

You could do it this way :
$('.featured-next, .featured-prev').click(function () {
//find out if the clicked element is a prev or next element, extract the last part, will be useful later
var direction = $(this).hasClass("featured-next") ? "next" : "prev";
//select the ".featured-n" block which is the super-parent of clicked element
var $fullBlock = $(this).closest('div[class^="featured-"]'); //or add a class here to make your life easier
//fade out full block
$fullBlock.fadeOut(500, function () {
//search for the next element and show it
//note that $fullBlock.next() => $fullBlock["next"]() => $fullBlock[direction]()
$fullBlock[direction]().fadeIn(500, function () {
//toggle the class "hide" of the element next to fullBlock
$(this).toggleClass("hide");
});
});
});
Explanation:
You can join up both prev and next events together.
Then, you have to check if its a next or a prev element. Set that to a variable called direction. We'll be using this to find out if we have to use prev() or next() when we're trying to fadeIn featured-n divs.
Find the parent with the class set to featured-n (in your case its the superparent). It might be better if you give a common class to all these elements so that we can stop using 'div[class^="featured-"]' selector, which is slightly inefficient.
Fade out the superparent.
In the callback, based on the direction variable, we'll have to decide if the carousel is gonna go to prev block or next block, something like this :
if(direction === "prev")
{
$fullBlock.prev().fadeIn(//your code)
}
else
{
$fullBlock.next().fadeIn(//your code)
}
You must also know that, in an object like this :
var data = {"name" : "Blah Blah"}
To get the "Blah Blah" out, we can say
data.name
or we could say :
data["name"]
So based on this, in our situation, instead of
$fullBlock.prev()
Or we could say
$fullBlock["prev"]()
Which is what direction variable contains. So finally, we could do this to select the next/prev element based on what was clicked :
$fullBlockdirection
Show the prev/next element.
Add/remove "hide" class.
Hope this helped!