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.
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);
}
}
});
});
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);
});
});
});
I'm using the following fixed navigation plug-in - https://codyhouse.co/demo/vertical-fixed-navigation/index.html
It works great when each section has 100% height as it picks the center of the section, but my sections aren't 100% height.
Is there a way to adapt this to work with smaller sections?
Here's a fiddle I created
As you can see, it doesn't even highlight the top or bottom sections as they aren't in the center point of the screen.
JS:
jQuery(document).ready(function($){
var contentSections = $('.cd-section'),
navigationItems = $('#cd-vertical-nav a');
updateNavigation();
$(window).on('scroll', function(){
updateNavigation();
});
//smooth scroll to the section
navigationItems.on('click', function(event){
event.preventDefault();
smoothScroll($(this.hash));
});
//smooth scroll to second section
$('.cd-scroll-down').on('click', function(event){
event.preventDefault();
smoothScroll($(this.hash));
});
//open-close navigation on touch devices
$('.touch .cd-nav-trigger').on('click', function(){
$('.touch #cd-vertical-nav').toggleClass('open');
});
//close navigation on touch devices when selectin an elemnt from the list
$('.touch #cd-vertical-nav a').on('click', function(){
$('.touch #cd-vertical-nav').removeClass('open');
});
function updateNavigation() {
contentSections.each(function(){
$this = $(this);
var activeSection = $('#cd-vertical-nav a[href="#'+$this.attr('id')+'"]').data('number') - 1;
if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
navigationItems.eq(activeSection).addClass('is-selected');
}else {
navigationItems.eq(activeSection).removeClass('is-selected');
}
});
}
function smoothScroll(target) {
$('body,html').animate(
{'scrollTop':target.offset().top},
600
);
}
});
edit: make your section containers a % height. ex: height: 100% it will not work properly with a fixed height.
change your updateNavigation to look like this, don't copy and paste this as you can see the if else statement needs work to check if you are at the bottom of the page.
function updateNavigation() {
contentSections.each(function(){
$this = $(this);
var activeSection = $('#cd-vertical-nav a[href="#'+$this.attr('id')+'"]').data('number') - 1;
if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
navigationItems.eq(activeSection).addClass('is-selected');
}
else if(!$(window).scrollTop() ){
navigationItems.eq(activeSection).removeClass('is-selected');
navigationItems.eq(0).addClass('is-selected');
}
else if(check if you are at the bottom of the page not sure how){
navigationItems.eq(activeSection).removeClass('is-selected');
navigationItems.eq(navigationItems.length -1).addClass('is-selected');
}else {
navigationItems.eq(activeSection).removeClass('is-selected');
}
});
}
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'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');
}
});
});
});