We Keep Coding

How can I get the full height parallax images to stick to the top of the screen shrunk into stripes underneath each other?

I'm working on an animation. According to the plans, I should implement the following: 4 parallax images that fill the entire screen width and screen height (100vh, 100vw) are positioned one below the other (their number may change, since these images are preview images of galleries, and the user can add new galleries through the WordPress back end. I use ACF and CPT UI plugins, and I go through the posts' fields in PHP with a foreach loop). So the point would be that as you scroll down, the first parallax image sticks to the top, the next parallax image sticks 124px lower, and at the end, when you have already scrolled down completely, only 4 pieces of 124 px narrow strips remain from the full screen height images (100vh).
I wrote some JavaScript code, I looped through the image containers and I got the top position of each iteration with the getBoundingClientRect() method. The header is sticky and it's height is 62px, so I'm not checking if the top of the div has reached 0, but 62px. So when the first div with the image reaches 62px, it has to stop and stick, the second div has to stop at 62px + 124px (height of the strip that should remain of the full height image) and so on. I do not know what am I doing wrong, but now when the first image reaches the top, every image container disappears from the screen. I hope I have put it clearly and if someone can help, I would be very grateful.
HTML:
<?php
$posts = get_posts(array(
'posts_per_page' => -1,
'order' => 'ASC',
'post_type' => 'galleries'
));
if ($posts) :
?>
<?php foreach ($posts as $post) :
setup_postdata($post);
?>
<div class="gallery-preview-card" style="height: 100vh; background-image: url('<?php echo get_the_post_thumbnail_url(); ?>'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;" data-target="<?php the_permalink(); ?>" id="gallery-preview-card-id-<?php echo get_post_thumbnail_id($post); ?>">
<h3 class="gallery-title">
<?php echo the_title(); ?>
</h3>
</div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
JS:
let galleryPrevs = document.querySelectorAll('.gallery-preview-card');
document.addEventListener('scroll', scroll, false);
function scroll(n) {
for (let i = 0; i < galleryPrevs.length; i++) {
let divTop = galleryPrevs[i].getBoundingClientRect().top;
if (divTop < 62 + 124 * i) {
galleryPrevs[i].style.position = 'fixed';
galleryPrevs[i].style.top = 62 + 124 * i;
}
}
}

Flexslider prev/next navigation appears below images in wordpress

I followed this article to enable flexsliderhttps://code.tutsplus.com/tutorials/adding-a-responsive-jquery-slider-to-your-wordpress-theme--wp-27914
I found they use font-awesome rather than image for the navigation and got it sorted out correctly.
However the prev/ next navigation are not showing up at their locations. I believe this has something to do with css.
Can someone guide me on how to fix this please?
I got the navigation appearing side by side after changing the
left:10px and right:10px to left:1px and right:1px for these class.
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 0.7;
left: 1px;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 0.7;
right: 1px;
}
Why could this kind of issue happen and what could the fix in css?
The image slider html
<div class="flexslider">
<ul class="slides">
<?php
// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li>
<?php // Check if there's a Slide URL given and if so let's a link to it
if ( get_post_meta( get_the_id(), 'wptuts_slideurl', true) != '' ) { ?>
<a href="<?php echo esc_url( get_post_meta( get_the_id(), 'wptuts_slideurl', true) ); ?>">
<?php }
// The Slide's Image
echo the_post_thumbnail();
// Close off the Slide's Link if there is one
if ( get_post_meta( get_the_id(), 'wptuts_slideurl', true) != '' ) { ?>
</a>
<?php } ?>
</li>
<?php endwhile; ?>
</ul><!-- .slides -->
</div><!-- .flexslider -->

There are too much missing informations for givin a precise answer, as there are only css for the two navigation buttons, but I guess it could have something to do with a parent position: (or sizing properties) property or something like that.

Change Height of Div After Ajax Call

PROBLEM:
I have a dynamic form that is using JQuery steps to make it a wizard. Right now, there is a step where a drop down box selection triggers an AJAX call that then adds form fields to the form. I need the height of the div that this field is in to become longer based off of the amount of fields added.
IMAGES:
The form starts with two drop downs:
Once something is selected for the second dropdown, the AJAX call is made and the form appends fields.
The grey box should resize to accomodate the appended fields.
CODE:
The CSS for the div is as follows:
.wizard > .content
{
background: #eee;
display: table-cell;
margin: 0.5em;
min-height: 35em;
position: relative;
width: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
I can add a permanent height here, but it's not dynamic.
The form is a Zend Form, so the HTML is as follows:
<div class="container-fluid">
<?php if ($this->error) : ?>
<div class="row-fluid">
<?php echo $this->error; ?>
</div>
<?php else : ?>
<?php echo $this->form()->openTag($form); ?>
<h3>Details</h3>
<section>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_NAME, false, true); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DUE_DTTM, !($this->uberAdmin)); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DESCRIPTION); ?>
</section>
<h3>Options</h3>
<section>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_REVIEW_PROJECT); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_WTL_PROJECT); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_JOB_TABLE); ?>
</section>
<h3>Project Configuration</h3>
<section>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_TYPES, !($this->uberAdmin), true); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_SUBTYPES, !($this->uberAdmin)); ?>
<?php
echo $this->partial('project/project/dynamicFormElements.phtml', array('form' => $this->projectForm, 'div' => 'project-config-elts'));
?>
</section>
<h3>Workflow Configuration</h3>
<section>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_TYPES, !($this->uberAdmin)); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_SUBTYPES, !($this->uberAdmin), true); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_WORKFLOW_CONFIG, !($this->uberAdmin)); ?>
</section>
This generates HTML with the structure below:
The highlighted div is the div in question.
My AJAX call is done here:
// Handle AJAX dynamic form creation results
function updateProjectForm(resp) {
$('div#project-config-elts').html(resp.html);
}
// Handle ajax error
function projectFormError(req, status, err) {
var errorString = '<div class="row-fluid alert alert-error">' +
'Error retrieving project form.' +
'</div>';
$('div#project-config-elts').html(errorString);
}
// AJAX request to get dynamic Project config form
function requestProjConfigForm() {
var request = {project_type: $('select[name=project_types]').val(),
project_subtype: $('select[name=project_subtypes]').val()
};
var ajaxOptions = {
url: 'projectform',
type:'POST',
dataType: 'json',
success: updateProjectForm,
error: projectFormError,
data: request
};
// Initiate the request!
$.ajax(ajaxOptions);
}
$('select[name=project_types]').change(function(){
updateProjectSubtypes();
});
// Handle a change in the selection of the particular project
$('select[name=project_subtypes]').change(function(){
requestProjConfigForm();
});
$('select[name=workflow_types]').change(function(){
updateWorkflowSubtypes();
});
$.validator.addMethod("validJSON", function(val, el) {
try {
JSON.parse(val);
return true;
} catch(e) {
return false;
}
}, "*Not valid JSON");
form.validate({
errorPlacement: function(error, element) {
$( element )
.closest( "form" )
.find( "label[for='" + element.attr( "id" ) + "']" )
.append( error );
},
rules: {
project_config: { validJSON: true }
}
});
I'm thinking that here I can dynamically change the height, but I'm not quite sure how to do so.

It looks like you're running into an issue that has been discussed on the jQuery Steps plugin github page: https://github.com/rstaib/jquery-steps/issues/147
basically, since the body of the step content is positioned absolutely with a percent height, it's height is no longer based on the content within it. A few things people used to try to fix this are:
By waqashsn:
.content > .body{
/*position: absolute*/
float:left;
width:95%;
height:95%;
padding:2.5%
}
Here's another alternative by AneeshRS that instead causes overflowing content to scroll:
.wizard.clearfix > .content.clearfix{
min-height: 500px;
overflow-y: auto;
}
Checkout the link to the issues page for a better explanation of either of these. Note however that any solution that involves removing the absolute positioning will likely cause transitions to no longer work.

Click image in horizontal scroll gallery to center function not working

I have been trying to get this function to work for some time now and I have searched Stackoverflow as well as other websites for an answer but have had absolutely no luck.
I am using a horizontal scroll gallery by Thomas Kahn (www.smoothdivscroll.com) and it works perfectly, however it does not have a built in click-to-center-image function. I have been trying to code my own function but it has not been working out for me - I am not sure if this is because of horizontal scroll gallery I am using or some other reason.
This is where I call the gallery in my index.php :
<div class="container-fluid gallery-container">
<div id="makeMeScrollable">
<?php
$args = array( 'post_type' => 'homegallery', 'posts_per_page' => 1000, 'orderby'=>'date', 'order'=>'desc' );
$loop = new WP_Query( $args );
$count=0;
while ( $loop->have_posts() ) : $loop->the_post();
$count++;
$imgID = 'img-home-' . $count;
?>
<img class="img-responsive horizontalscroll-img" id="portfolio-img <?php echo $imgID; ?>" src="<?php echo get_field('gallery-img'); ?>" alt="<?php the_title(); ?>" onClick="centerFunction('<?php echo $imgID; ?>');" />
<?php
endwhile;
wp_reset_query(); ?>
</div>
</div>
This is my css for the gallery :
.gallery-container {
padding:0px !important;
height:auto;
}
.horizontalscroll-img {
padding:0px 15px 0px 0px !important;
width: auto !important;
}
#makeMeScrollable
{
width:100%;
position: relative;
}
/* Replace the last selector for the type of element you have in
your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
if you have links use #makeMeScrollable div.scrollableArea a and so on. */
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
/* If you don't want the images in the scroller to be selectable, try the following
block of code. It's just a nice feature that prevent the images from
accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: #makeMeScrollable div.scrollableArea div;
-khtml-user-select: #makeMeScrollable div.scrollableArea div;
-moz-user-select: #makeMeScrollable div.scrollableArea div;
-o-user-select: #makeMeScrollable div.scrollableArea div;
user-select: #makeMeScrollable div.scrollableArea div;
}
And this is my javascript/jquery function(s) in my footer.php in a script tag :
I did try many different methods however none of them worked, I will list 2 below
function centerFunction(i) {
//First set of code I tried
var w = document.getElementById(i).clientWidth;
$(i).style.left = "50%"; //I tried both '$(i)' and 'this'
$(i).style.marginLeft = Math.round(w/2) + 'px';
$(i).style.margin = "0 auto";
}
This gave me the error
"TypeError: document.getElementByID(...) is null
var w = document.getElementById(i).clientWidth; "
I stepped though the function and for some reason it is not holding the unique id of my image, however I can see that it has passed though to the function correctly.
The second function I tried was:
function centerFunction(i) {
//Second set of code I tried
var w = $(i).width();
var margin = w/2;
$(i).css("margin-left","-"+margin);
$(i).css("margin","0 auto");
$(i).css("left","50%");
}
This did not give me an error but nothing happened when I clicked on the image.
I have tried other methods that I found online or tried to write myself but nothing seems to be working. If anyone could help I would really appreciate it.

It looks like there is a mismatch between the ID of the image and the one that's passed to your JS function.
you set the ID like this:
id="portfolio-img <?php echo $imgID; ?>"
but call the function like this:
onClick="centerFunction('<?php echo $imgID; ?>');"
Try removing the portfolio-img part...
Also, beware that you need to add a hash if you use jQuery:
function centerFunction(i) {
i = '#' + i;
var w = $(i).width();
...

Just FYI to anyone using the same horizontal scroller as me, I changed my code to this to get it to work:
function centerFunction(i) {
var newis = '#'.concat(i);
var w = $(newis).width();
if (w<600) { //for smaller images
var margin = w*(-1);
} else { //for larger images
var margin = w/6*(-1);
}
$("#makeMeScrollable").smoothDivScroll("scrollToElement", "id", i); //this scrolls to the element you want
$("#makeMeScrollable").smoothDivScroll("move", margin); //this was to get it in the middle
}

change position depending on DB value

I let people fill in a form, and insert distances etc. They get stored in a db.
Then I lead them to a page, where I show the number of axles (12 in this case) and make a circle of them (in css)
Then it looks like this:
The code for this:
<?php
$show_axle = $database->axles($_GET['train_id']);
?>
<div id="axle_bogie_border">
<div id="axle_position">
<?php
foreach($show_axle as $axlefigure){ ?>
<div id='number_of_axles'> <?php echo $axlefigure['axle'] ?></div>
<?php
}
?>
</div>
</div>
The axle_border make the Train image (The black rectangle)
The axle_position take care that the axles (Numbers actually) Don't go in the image but slightly below it (So it looks like wheels/axles).
The Number_of_axles make the numbers look like a circle (Like wheels/axles).
Now the function:
function axles($id){
$sql = "SELECT * FROM axle WHERE train_id = :id2";
$sth = $this->pdo->prepare($sql);
$sth->bindParam(":id2", $id, PDO::PARAM_STR);
$sth->execute();
return $sth->fetchAll();
}
The function selects everything from the table axle (See first image).
Now, I actually want the axles to take a position. And I'm thinking about doing that via the Distance row.
So:
Axle 1 has the number 5 for distance. So it goes 5px from the far left
Axle 2 has the number 10. So i want it 10 pixels next to the axle 1.
Axle 3 has the number 5. So i want it 5 pixels next to the axle 2.
Etc.
Eventually it needs to look like this:
My question: Is this posible. If yes, how?
EDIT:
it is working now :)
I did the following:
<?php
$show_axle = $database->axles($_GET['train_id']);
?>
<div id="axle_bogie_border">
<div id="axle_position2">
<?php
foreach($show_axle as $axlefigure){ ?>
<div style="margin-left:<?php echo $axlefigure['distance'];?>px;">
<?php echo $axlefigure['axle'] ?>
</div>
<?php
}
?>
</div>
</div>
And the css:
#axle_position2 {
margin-top: 9%;
position: relative;
float: left;
}
#axle_position2 div {
background: green;
float: left;
position: inline-block;
width: 40px;
height: 40px;
border-radius: 50px;
}