We Keep Coding

For loop equivalent for each statement?

I'm looking for an alternative for this each function. Can a for loop be created in its place to still have the same effect?
$(function() {
$(window).scroll(function() {
$('.fadeInBlock').each(function() {
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */
bottom_of_window = bottom_of_window + 200;
if (bottom_of_window > bottom_of_object) {
$(this).animate({
'opacity': '1'
}, 1000);
}
});
});
});
Reason for this is there is a problem with the IDE recognising the each function. Thank you in advance.
EDIT:
Its strange because this next batch of code works in the EXACT SAME file
$(function () {
var text = $(".text");
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
text.removeClass("hidden");
} else {
text.addClass("hidden");
}
if (scroll + 250 > $('.homeIm2').offset().top) { // when the div with homeIm2 class scrolls into view
text.hide();
}
if (scroll + 250 < $('.homeIm2').offset().top) { // when the div with homeIm2 class scrolls into view
text.show();
}
});
});

This could be a solution to what you have asked using for
$(function () {
$(window).scroll(function () {
AllClasses = $('.fadeInBlock')
for(var i=0; i<AllClasses.length; i++){
var bottom_of_object = $(AllClasses[i]).position().top + $(AllClasses[i]).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */
bottom_of_window = bottom_of_window + 200;
if (bottom_of_window > bottom_of_object) {
$(AllClasses[i]).animate({
'opacity': '1'
}, 1000);
}
}
});
});

Why is my Javascript running slow?

Can anyone advise on why my JS might be running super slow?
Is there anything I can do to speed it up?
Thanks!
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});

I couldn't help but notice how you make unecessary calls to $() to reference this and window. Here's a minor performance suggestion:
$(document).ready(function() {
$(window).scroll( function(){
$('.hideme').each( function(i){
var $el = $(this),
$window = $(window),
bottom_of_object = $el.offset().top + $el.outerHeight(),
bottom_of_window = $window.scrollTop() + $window.height();
if( bottom_of_window > bottom_of_object )
$el.animate({'opacity':'1'},500);
});
});
});

jquery get window position + scroll - but if not scroll not show

Hi have few photos show up on scroll.
I use this code:
$(document).ready(function() {
$(window).scroll( function(){
$('.fade').each( function(i){
var bottom_of_object = $(this).position().top + ( $(this).outerHeight() / 2 );
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).addClass('showme');
}
if( bottom_of_window < bottom_of_object ){
$(this).removeClass('showme');
}
});
});
});
This work so well, but when I open the page if the windows is to high the photos doesn't show up and let a with space very ugly. It (I think) is Because the add class work only on the window scroll.
How can I solve this problem? I need when the pictures show up in relation at the windows position and not only at the scroll?
Thank you!

Append scroll triggering to the code:
$(document).ready(function() {
$(window).scroll( function(){
$('.fade').each( function(i){
var bottom_of_object = $(this).position().top + ( $(this).outerHeight() / 2 );
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).addClass('showme');
}
if( bottom_of_window < bottom_of_object ){
$(this).removeClass('showme');
}
});
});
$(window).scroll();
});
$(window).scroll() triggers scroll event on window - docs.

Javascript FadeIn code add more classes

Im new in Javascript, Im sorry for the armature questions
i have a fadein code only for one class that works perfect, here is the code:
jQuery(document).ready(function($) {
var fadeinbig = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.fadeinbig').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('fadeinbig')) {
$(this).removeClass('fadeinbig');
}
});
}
fadeinbig();
$(window).on('scroll resize', fadeinbig);
I would like to add some more classes like, fadeinleft, fadeinright, etc.
like this:
jQuery(document).ready(function($) {
var fadeinbig = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.fadeinbig').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('fadeinbig')) {
$(this).removeClass('fadeinbig');
}
});
}
fadeinbig();
$(window).on('scroll resize', fadeinbig);
});
jQuery(document).ready(function($) {
var faidinbottom = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.faidinbottom').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('faidinbottom')) {
$(this).removeClass('faidinbottom');
}
});
}
faidinbottom();
$(window).on('scroll resize', faidinbottom);
});
jQuery(document).ready(function($) {
var faidintop = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.faidintop').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('faidintop')) {
$(this).removeClass('faidintop');
}
});
}
faidintop();
$(window).on('scroll resize', faidintop);
If you ask me why my code is with removeClass, not with addClass, it is becouse it is easer for me to manipulate whit my content, without changing the base css styles of my website. I just add some classes "faidintop, faidinbottom etc." to the style sheet, then to the class of a div, and the magic happens.
I will be very grateful if some one could help me whit this, or at least give me some directions, how to do it the right way.

Start function JS when you reach a specific div

I have the following Javascript code found on the internet, that run well in Chrome and Safari. Only in Firefox and IE the code will not run. Is there an alternative?
$(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
start_count();
}
});
});
function start_count(){
alert('start_count');
//Add your code here
}

Answer:
$(function() {
var oTop = $('.wordpress').offset().top - $(window).height();
$(window).scroll(function(){
var scrollTop = window.pageYOffset;
if( scrollTop > oTop ){
start_count();
}
});
});