We Keep Coding

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

Scrolling the height of several divs by several buttons

I have a page with the following structure:
<div id="about" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
<div id="films" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
<div id="projects" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
I would like that when clicking on the image, you will be scrolled to the end of the <div> where the <img>is located.
I have stated with this code but it works only for the first image.
function go_to(){
$("body,html").animate({scrollTop: $('.section').height()}, 900, "easeInOutExpo");
}
$(document).ready(function(){
var go_to_div = $('.button img');
$(go_to_div).click(function(event) {
go_to()
});
});
If necessary, I can change the HTML structure. Thank you!!

Because for scrollTop property, you need to give a value to go there. Your $('.section').height() code allways gives the same value so it kinda stuck. Try this instead
function go_to(section){
var pos = section.position();
$("body,html").animate({scrollTop: section.height() + pos.top}, 900, "easeInOutExpo");
}
$(document).ready(function(){
$('.button img').click(function(event) {
go_to($(this).closest(".section"));
});
});
FIDDLE

jQuery click to scroll to cloest div.class and show not working

hi does anyone have any ideas what im doing wrong here?
When you click show content i want it to find the closest div with the class i ask and scroll to it but does not work... im new to jquery so maybe im doing wrong but i think my logic is correct haha
getting an error in console:
Cannot read property 'top' of undefined
Example:
$(document).ready(function() {
// show examples
$(document).on("click", ".show-syntax", function(e) {
var ele = $(this).parent().closest(".render-syntax");
// this will search within the section
ele.show();
$("html, body").animate({
scrollTop: $(ele).offset().top
}, 100);
e.preventDefault();
});
});
.render-syntax {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
show content
</div>
<div class="render-syntax">
<p>content to show</p>
</div>
<div class="container">
show content
</div>
<div class="render-syntax">
<p>content to show</p>
</div>
<div class="container">
show content
</div>
<div class="render-syntax">
<p>content to show</p>
</div>

closest doesn’t go through the siblings; next does the job you need. Simply replacing closest by next in your code will give you the proper behavior.
var ele = $(this).parent().next(".render-syntax");
Otherwise ele won’t have any elements, ele.offset() returns null and then there’s no top property of null, hence the error.

The Problem is NOT that ele.offset().top is undefined, it is that ele is undefined.
So I opened JS Fiddle, f***** it until it worked and now I can give you this:
$(document).ready(function () {
// show examples
$(document).on("click", ".show-syntax", function (e) {
var ele = $(this).parent().find(".render-syntax");
// this will search within the section
if (ele.css("display") == "none")
{
ele.show();
$("html, body").animate({
scrollTop: $(ele).offset().top
}, 100);
e.preventDefault();
} else
{
ele.hide();
e.preventDefault();
}
});
});
.render-syntax {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"> show content
<div class="render-syntax">
<p>content to show</p>
</div>
</div>
<div class="container"> show content
<div class="render-syntax">
<p>content to show</p>
</div>
</div>
<div class="container"> show content
<div class="render-syntax">
<p>content to show</p>
</div>
</div>
I'm sorry for the poorly done JS {}'s, but JS Fiddle is just not my editor :D

toggleClass used to execute two different scrollTop methods, not working

So I have the following function running and it works great. The selected div expands with the .slideToggle() function and the page slides down the body with the .animate() and .scrollTop() methods.
$('.pfitem').click(function(){
$(this).toggleClass('minimized maximized');
$(this).next().toggleClass('minimized maximized');
$(this).next().slideToggle(1200);
});
$('.pfitem.minimized').click(function(){
$('html, body').animate({
scrollTop: $(this).next().offset().top
}, 1200);
});
Now when I try to add this following code which from my understanding should slide the page back up to the div with an id of #portfolio it does nothing even though that now the class of the div that is targeted by the .click() function has been toggled to .pfitem.maximized, so the previous .click() function should not interfere.
$(".pfitem.maximized").click(function() {
$('html, body').animate({
scrollTop: $('#portfolio').offset().top
}, 1200);
});
This is a snippet of my HTML, I have tried to strip it of irrelevant information (I am using bootstrap and have left some bootstrap classes in the code)
<div class="page" id="portfolio">
<div class="content container">
<ul class="row npr">
<li class="container col-xs-12 col-sm-4 col-md-3 pfitem businesscards minimized">
<div class="orangeover">
<span>Business Cards</span>
</div>
</li>
<div class="container col-xs-12 maximizeitem minimized" id="businesscards">
<div class="maxicontent col-sm-4">
<h4>BUSINESS CARDS</h4>
<p>Some text goes here</p>
<p>Some text goes here</p>
</div><!-- maxicontent -->
<div class="maxiimages col-sm-8">
<button class="close"><span class="">X</span></button>
<img src="" class="">
</div><!-- maxiimages -->
</div><!-- container maximizeitem -->
</ul>
</div><!-- .content .container -->
</div><!-- #portfolio -->
This is my first post, I hope I have provided sufficient information.
Thanks

Since you want the selectors to be evaluated dynamically you will have to use event delegation
$(document).on('click', '.pfitem', function () {
$(this).toggleClass('minimized maximized');
$(this).next().toggleClass('minimized maximized');
$(this).next().slideToggle(1200);
});
$(document).on('click', '.pfitem.minimized', function () {
$('html, body').animate({
scrollTop: $(this).next().offset().top
}, 1200);
});

Making a text disappears when another text appears with jquery

$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
$('.' + elmDay).toggleClass('display');
});
});
Please, visit this site to understand -> http://jsfiddle.net/g42d8pjp/
When you click in the first box, one text with background red will show, right?, them if you click in the other box, other text with a red background will show too.
Can i make the first text with the red background disappear if the second box is clicked??

Add a common class for the boxes like 'day'
<div class="row">
<div data-day="thursday" class="box thursday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div data-day="friday" class="box friday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div class="col-9">
</div>
</div>
<div class="thursday display day">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div class="friday display day">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
Hide elements with this class attached on click.
$(document).ready(function () {
var days = $('.day');
$('.box').on('click', function() {
var elmDay = $(this).data('day');
days.addClass('display');
$('.' + elmDay).toggleClass('display');
});
});

Why don't you just change the css via javascript/jquery? Here is a quickly done updated jsfiddle:
http://jsfiddle.net/ykoo873e/
You can just set all the other styles for those divs to 'display: none' and only set the one:
$('.display').css('display', 'none');
$('.display.' + elmDay).css('display', 'block');
Though you could also just dynamically change the html inside the div like so:
http://jsfiddle.net/m5hL220d/

Try this:
http://jsfiddle.net/g42d8pjp/1/
<div id="thursday" class="thursday display">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div id="friday" class="friday display">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
if (elmDay == 'thursday')
{
$('#thursday').show();
$('#friday').hide();
}else
{
$('#friday').show();
$('#thursday').hide();
}
//$('.' + elmDay).toggleClass('display');
});
});