this code works well with scrolling down but im trying to make works as well to fade out the id when scroll up.
<script>
tiles = $("#widgeted-title1").fadeTo(0, 0);
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
});
</script>
If your code works (for the fade-in) than all you need is:
var tiles = $("#widgeted-title1").fadeTo(0, 0);
$(window).on("scroll resize", function() { // do it also on resize!
var a = tiles.offset().top + tiles.height();
var b = $(this).scrollTop() + $(this).height();
tiles.stop().fadeTo(500, a<b ? 1 : 0);
});
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);
}
}
});
});
i have this piece of code.
First i'm setting some heights - the code works on load and on resize.
However, setting heights based on the highest item it doesn't work on resize, but only on load. Can you give me an advice?
$(window).resize(function () {
// speakers - height equal to width
var imgwidth = $('.speakers-section-items-item-image').width();
$('.speakers-section-items-item-image').css({'height': imgwidth + 'px'});
var height = $('.executive-section-items-item-img').height();
$('.executive-section-items-item-list').css({'line-height': height + 'px'});
var heightTeam = $('.team-section-items-item-img').height();
$('.team-section-items-item-meta-last').css({'line-height': heightTeam + 'px'});
// set heights based on the highest item
var maxHeightTeam = -1;
$('.team-section-items-item').each(function () {
maxHeightTeam = maxHeightTeam > $(this).height() ? maxHeightTeam : $(this).height();
});
$('.team-section-items-item').each(function () {
$(this).height(maxHeightTeam);
});
var maxHeightExecutive = -1;
$('.executive-section-items-item').each(function () {
maxHeightExecutive = maxHeightExecutive > $(this).height() ? maxHeightExecutive : $(this).height();
});
$('.executive-section-items-item').each(function () {
$(this).height(maxHeightExecutive);
});
var maxHeightSpeakers = -1;
$('.speakers-section-items-item').each(function () {
maxHeightSpeakers = maxHeightSpeakers > $(this).height() ? maxHeightSpeakers : $(this).height();
});
$('.speakers-section-items-item').each(function () {
$(this).height(maxHeightSpeakers);
});
}).resize();
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');
}
});
});
});
I have div element inside that I have a list of(ol) elements. I use drag and drop using jquery nestable. Please look at the issue here (How to scroll the window automatically when mouse moves bottom of the page using jquery).
I used to get the visible <li> in current view, using view-port(plugin - http://www.appelsiini.net/projects/viewport).
I used the below script. I couldn't scroll the page more efficient and
script doesn't work in FF (scrolling does not work).
if ($('.dd-dragel').length > 0) {
var totalVisibleLi = $('#ol_id li:visible').length;
var liInViewPort = $('#ol_id li:in-viewport').length;
var closestLi = $(this.placeEl).prev('li');
var items = $('#ol_id li:in-viewport');
var indexOfClosestLi = items.index(closestLi);
if (indexOfClosestLi >= (liInViewPort - 3) && (e.pageY < $('#div_id').height())) {
$('body').animate({
scrollTop: $(window).scrollTop() + 200
}, 1);
}
if (indexOfClosestLi <= 3) {
$('body').animate({
scrollTop: $(window).scrollTop() - 200
}, 1);
}
}
What am I missing here?
Edited your code. Now scroll also work in FF
if ($('.dd-dragel').length > 0) {
var totalVisibleLi = $('#ol_id li:visible').length;
var liInViewPort = $('#ol_id li:in-viewport').length;
var closestLi = $(this.placeEl).prev('li');
var items = $('#ol_id li:in-viewport');
var indexOfClosestLi = items.index(closestLi);
if (indexOfClosestLi >= (liInViewPort - 3) && (e.pageY < $('#div_id').height())) {
$('html,body').animate({
scrollTop: $(window).scrollTop() + 200
}, 400);
}
if (indexOfClosestLi <= 3) {
$('html,body').animate({
scrollTop: $(window).scrollTop() - 200
}, 400);
}
}
ok so i have an interspire shopping cart so its hard to customize..
anyway,
here is a link to my code
http://jsfiddle.net/WTvQX/
im having trouble getting the scroll to work properly...
it works differently on my actual site here...
so i need help... re-doing it or just fixing..
let me kno
You need to add the "relatedLeft" ID to the left button, however try something like this...
Demo: http://jsfiddle.net/wdm954/WTvQX/3/
$('#relatedRight').click(function() {
$('#scool').animate({left: "+=100px"}, 'slow');
});
$('#relatedLeft').click(function() {
$('#scool').animate({left: "-=100px"}, 'slow');
});
You can adjust pixel distance and speed to your liking.
EDIT: Try something like this. The first part finds the width of all the images. Then the animates only fire when the offset is within range.
Demo: http://jsfiddle.net/wdm954/WTvQX/5/
var w = 0;
$('#scroll img').each(function (i, val) {
w += $(this).width();
});
$('#relatedRight').click(function() {
var offset = $('#scroll').offset();
if (offset.left < w) {
$('#scroll').animate({left: "+=100px"}, 'slow');
}
});
$('#relatedLeft').click(function() {
var offset = $('#scroll').offset();
if (offset.left > -w) {
$('#scroll').animate({left: "-=100px"}, 'slow');
}
});
EDIT: One more code option here. This one will stop scrolling sooner (note there are CSS changes here also).
Demo: http://jsfiddle.net/wdm954/WTvQX/7/
var w = 0;
$('#scroll img').each(function (i, val) {
w += $(this).width();
w += parseFloat($(this).css('paddingRight'));
w += parseFloat($(this).css('paddingLeft'));
w += parseFloat($(this).css('marginRight'));
w += parseFloat($(this).css('marginLeft'));
});
$('#scroll').css('width', w + 'px');
$('#relatedRight').click(function() {
var offset = $('#scroll').offset();
if (offset.left < 0) {
$('#scroll').stop().animate({left: "+=100px"}, 'slow');
}
});
$('#relatedLeft').click(function() {
var offset = $('#scroll').offset();
var b = $('#bar').width();
if (offset.left > b-w) {
$('#scroll').stop().animate({left: "-=100px"}, 'slow');
}
});