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);
});
});
});
Related
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);
}
}
});
});
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.
I need to select element by id and class with JQuery function. Problem is that elements are not parents. Smth like this:
<div class="image"></div>
<div id="contact"></div>
My code is working but this isn't a solution.
$(document).ready(function() {
$(window).scroll(function() {
$('.featurette-image').each(function() {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 700);
}
});
$("#contactme").each(function() {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 500);
}
});
});
});
Thanks in advance.
You can join jquery selectors using commas , like so:
$("#contactme, .featurette-image").each(...
This behavior is described in their documentation here: https://api.jquery.com/multiple-selector/
Maybe this :
$("#contactme, .featurette-image").each(function() {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 700);
}
});
or
$(document).ready(function() {
$(window).scroll(function() {
$('body div').each(function() {
if ($(this).hasClass('featurette-image') || $(this).attr('id') == 'contact') {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 700);
}
}
});
});
});
i am new in javascript. its working fine if we refresh the page but its not working when we resize the window.
$(window).load(function(){
equl_height();
});
$(window).resize(function(){
equl_height();
});
function equl_height () {
var highestBox = 0;
$('ul li').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$('ul li').height(highestBox);
}
window.addEventListener("resize", equl_heigh);
cheers!
Problem is in how you measure height of an li. use scrollHeight instead of height(). Check this fiddle.
Update your equl_height method with
function equl_height () {
console.log( "resizing" );
var highestBox = 0;
$('ul li').each(function(){
//var height = $(this).outerHeight();
var height = $(this)[0].scrollHeight;
if(height > highestBox){
highestBox = height;
}
});
$('ul li').outerHeight(highestBox);
}
Also, since resize event can be fired at a higher rate so try this throttling trick as well.
I'm adding and removing a class for active anchor link (color:red). The issue is the class is not being added consistently according to sections and I don't seem to figure this one out.
How can I modify my code as so anchor links get "highlited" when its respective section is on top of the page consistently?
Here is my code:
// for secondary nav
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
contentTop = [];
// Set up content an array of locations for secondary nav
$('.overlay-box').find('a').each(function(){
var href = $(this).attr('href');
var name = href.substr(href.lastIndexOf('#')+1);
contentTop.push( $('[name="' + name + '"]').offset().top );
});
// adjust secondary nav on scroll
$(window).scroll(function(){
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each( contentTop, function(i,loc){
if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
$('.nav-bar li')
.removeClass('anchor-selected')
.eq(i).addClass('anchor-selected');
}
});
});
here is the site:
http://www.icontrol.com/what-we-do/platform-services/
I cant see exactly how you are going about doing this.
I have put together a jsfiddle to achieve what you are looking to do
Hope its what you need :-)
http://jsfiddle.net/66ZbB/
$(document).ready(function() {
$('a').click(function() {
$('a').removeClass('anchor-selected');
var obj = $(this);
$('html, body').animate({
scrollTop: obj.offset().top
}, 1000, function () {
obj.addClass('anchor-selected');
});
});
$(window).scroll(function() {
$('a').removeClass('anchor-selected');
//alert($(window).scrollTop() +":");
$('a').each(function() {
console.log($(this).offset.top);
if (($(window).scrollTop() <= ($(this).offset().top)) && ($(window).scrollTop() > ($(this).offset().top - 20))) {
$(this).addClass('anchor-selected');
}
});
});
});