We Keep Coding

Left align element with centered and variable width element in top row

I would like to find a way to left align <p> with centered <img> in the top.
As images are centered and my page contains different images with different widths, it seems to be a bit challenging.
Here is my html structure:
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 my-auto">
<div class="d-flex flex-row justify-content-center">
<img class="img-fluid d-flex flex-wrap align-items-center" id="image-id">
</div>
</div>
<div class="col-md-8">
SOME CONTENT
</div>
</div>
<div class="collapse collapse-information">
<div class="row row-collapse m-0">
<!--What I want to be left aligned with img tag-->
</div>
</div>
</div>
</div>
A way to do it would be to get the distance between image's div and border of centered image and to report this measure as a left-margin on the element I want to be aligned.
To solve it, I tried to use margin measurments based on window width but it as not working.

While working to have a clean question, I went through https://developer.mozilla.org/en/docs/Web/API/HTMLElement/offsetLeft.
The interresting part is that, javascript allows a dynamic measurement I can also dynamically attribute to other elements.
// get left offset
var leftDistanceLogo = document.querySelector("#image-id").offsetLeft;
// assing as margin to the following element
document.querySelector('.row-collapse').style.marginLeft = leftDistanceLogo + "px";
Last interesting point, this code should wait until the end of page loading (otherwise offet will be equal to 0), so I called it in a structure like:
window.addEventListener("load", function (event) {
setTimeout(() => {
var leftDistanceLogo = document.querySelector("#image-id").offsetLeft;
document.querySelector('.row-collapse').style.marginLeft = leftDistanceLogo + "px";
}, 0);
});

Make div top two divs fixed after some scroll and reset back when scrolled to top again?

Hi i am trying to make a div remain fixed after some scroll in parent div?
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="fw ofndr-box">
<div class="ofndr-box-half add-here">
Header 1
</div>
<div class="ofndr-box-half2 add-here">
+New
</div>
<div class="fw ofndr-box-in">
</div>
</div>
</div>
here is my working fiddle i want to fix header and +new button after scroll of blue colored div.
https://jsfiddle.net/pavansn/tvg3d709/1/

As your scroll is on ofndr-box instead of window so in Js you can try
var scroll = $('.ofndr-box').scrollTop();
and change :
$(".add-here").addClass(".fixed"); to $(".add-here").addClass("fixed");

window.scroll to activate class one at a time

I incorporated a window.scroll function to activate when animations start on my page. I have three different images, that look like this:
image
image
image
I am wanting them to appear once I scroll to their div. However, for some reason right now, if I go over one of them, the entire sequence starts for all of them.
My window scroll function looks like this:
$(function() {
var oTop = $('.home-img-block', this).offset().top - window.innerHeight;
$(window).scroll(function() {
var pTop = $('body').scrollTop();
console.log(pTop + ' - ' + oTop);
if (pTop > oTop) {
imgDelaysSlide();
}
});
});
The HTML looks like this:
<div id="home-img-block-section">
<div id="home-img-blocks">
<div class="home-img-block fadeBlock1">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="/images/test1.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought
to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div>
</div>
<div class="home-img-block fadeBlock2">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="/images/test2new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.
gfdgfdsg greg reg regrfesg fdsg gretswtgy tgreswt treswt trgegfd gsvbd fbgre greasgv drfdg greaag gredr</div>
</div>
</div>
<div class="home-img-block fadeBlock3">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="/images/test3new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES gfdgf fdggs gfsg gfsg gf sgf g
gfdsg sdfggfs gfdsgssdfg fdggfds gfdsg gfds gfdgs gf dsgfdsgfgs gfdgfs gtrg resg reg rgesgresrgrg</div>
</div>
</div>
</div>
Should the this in my window.scroll function make these animations start when I hover over the current div class?
var oTop = $('.home-img-block', this).offset().top - window.innerHeight;
$(window).scroll(function() {
Is there anything else I could try to do to call out that specific div, rather than the entire class?
UPDATE adding imgDelaysSlide function
function imgDelaysSlide() {
$('.fadeBlock1').delay(300).animate({
'left': '0%'
}, 700);
$('.fadeBlock2').delay(800).animate({
'left': '0%'
}, 700);
$('.fadeBlock3').animate({
'left': '0%'
}, 700);
}

jQuery Progress animate to predefined width - Multiple Div

How can I animate multiple div width using animate, when a div has already a width defined in the css of html.
For example. If I have style="width:30%;" in the html, and I want to animate that div from 0 to 30% how can I do it? And do that in multiple divs with the same class?
To animate a div that has no width defined, to a certain value, I know I can do it like this $('div').animate({ width: 'value' }, milisecs); but I don't want to set the width value on the JS and repeating this line multiple times.
I created this Fiddle that may help better understanding.
Thank you in advance.

Try to use data() like,
HTML
<p>Single</p>
<div class="container">
<div class="fill" data-width="80%">
<span><b>Bar One</b></span>
</div>
</div>
<hr>
<p>Multiple</p>
<div class="container">
<div class="fillmult" data-width="90%">
<span><b>Bar 1</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="50%">
<span><b>Bar 2</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="70%">
<span><b>Bar 3</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="20%">
<span><b>Bar 4</b></span>
</div>
</div>
SCRIPT
$('.container > div').each(function(){ // you can use $('.fill, .fillmult').each
var width=$(this).data('width');
$(this).animate({ width: width }, 1500);
});
Live Demo

How to make thumbnails slide show only the thumbnails pic

I need to make some simple JavaScript gallery with Thumbnail slider.
I made the slider and when I click on the left or the right arrow the margin-right change and add or remove 570px. But I want to make it better, and when the gallery loads, cancel the Scroll right option because there's actually pictures, the same also for last images.
HTML Structure look like this:
<div class="tumbNavigation">
<div class="right_nav"></div>
<div class="thumbnails">
<div class="thumbnailsWrapper">
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
</div>
</div>
<div class="left_nav"></div>
</div>
JavaScript code look like this:
var pos = 0;
var width = 570;
$('.left_nav').click(function(){
pos = pos - width;
$('.thumbnailsWrapper').stop(true).animate({ marginRight: pos + "px"}, 500);
});
$('.right_nav').click(function(){
pos = pos + width;
$('.thumbnailsWrapper').stop(true).animate({ marginRight: pos + "px"}, 500);
});

You're on the right track, but there's no need to reinvent the wheel here. Carousels such as this are one of the most commonly developed widgets, so much so that you're bound to find something that's better, more stable, and has more features than anything you could quickly build. Here's a list of 55 carousel javascript plugins: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html . I'm sure that one of them will work great for you, or it will be close enough that you can modify it to be perfect.