I need to reverse this code:
$(window).scroll(function () {
$('#portfolio-entrybox li').each(function (i) {
var oTop = $(this).offset().top;
var oHeight = $(this).outerHeight();
var wTop = $(window).scrollTop();
var wHeight = $(window).height();
if (oTop < wTop + wHeight) {
var diff = ((wTop + wHeight - oTop) / oHeight);
if (diff > 1) diff = 1;
else if (diff < 0) diff = 0;
$(this).css('opacity', diff);
}
});
});
I need the items to fade at the top instead of fading on the bottom. They should start with opacity 100% and as you scroll down the it changes to 0%. Same principal as this code instead just reversed.
Fiddle with live demo.
Here's how I did it:
Change your if-statement to this:
if (oTop < wTop) {
var diff = ((wTop - oTop) / oHeight);
if (diff >= 1) diff = 1;
else if (diff <= 0) diff = 0;
diff = 1 - diff;
$(this).css('opacity', diff);
}
Updated Fiddle.
The above solution doesn't seem to work right according to what my browser seems to be doing (check out http://i.imgur.com/5AbwOuY.png).
However, I also made an attempt at this which you can view here: http://jsfiddle.net/RrBEV/70/
$(window).scroll(function () {
$('#portfolio-entrybox li').each(function (i) {
var oTop = $(this).offset().top;
var oHeight = $(this).outerHeight();
var wTop = $(window).scrollTop();
var wHeight = $(window).height();
if (oTop + oHeight > wTop) {
var diff = ((oTop + oHeight - wTop) / oHeight);
if (diff > 1) diff = 1;
else if (diff < 0) diff = 0;
$(this).css('opacity', diff);
}
});
});
Related
I wrote following functon and I am trying to use that in different elements but it doesn't work.
$.fn.sticky = function() {
var
scrollTop = $(window).scrollTop();
replace_class = $(this),
sticky = "ceras_sticky_header",
elementOffset = replace_class.offset().top,
distance = (elementOffset - scrollTop),
leftPositionofImage = replace_class.offset().left,
windowWidth = $(window).width(),
elementWidth = replace_class.width(),
rightPosition = (windowWidth - leftPositionofImage - elementWidth - 12);
$(window).scroll(function() {
if( $(this).scrollTop() > distance) {
replace_class.addClass(sticky);
replace_class.css('right',rightPosition);
replace_class.draggable();
} else {
replace_class.removeClass(sticky);
}
});
};
I want to it to work like:
$( ".ancor_controls" ).sticky();
$( ".ancor_controls1" ).sticky();
I have a Javascript animation at http://dev17.edreamz3.com/css/
All code works, however, there are performance problems. on Desktop, its good, On mobile things are so slow that it's unusable. I want to optimize the animation so that it runs smoothly on mobile. It can take 20 seconds or more for the animation to render.
Right now the way the code is designed is in js/anim.js there is a render() function that gets executed every time a scroll event happens. The problem is that this routine is not efficient, that's what I think of. Each time render() executes it loops through all the paths and sections of the maze and redraws them, is there any alternative way or a strategy to get it working both on mobile as well as desktop.
var offPathTime = 1000;
window.offSection = -1;
function render() {
// var top = ($window.scrollTop() + (0.4 * $window.height())) / window.scale;
var top = ($('.parent-div').scrollTop() + (0.4 * $('.parent-div').height())) / window.scale;
top -= 660;
top /= mazeSize.h;
if (window.offSection != -1) {
$body.addClass("blockScroll");
$('.parent-div').addClass("blockScroll");
// var wtop = $window.scrollTop() / window.scale;
var wtop = $('.parent-div').scrollTop() / window.scale;
wtop -= 660;
wtop /= mazeSize.h;
var $offSection = $("#offSection" + window.offSection);
var $section = $("#section" + window.offSection);
$(".section").removeClass("sectionActive");
$offSection.addClass("sectionActive");
$section.addClass("sectionActive");
var sTop = 200 -(mazeSize.h * (window.offSections[window.offSection].cy - wtop));
$container.animate({
left: 290 -(mazeSize.w * window.offSections[window.offSection].cx) + "px",
top: sTop + "px"
}, offPathTime);
// Path
var lr = offPaths[window.offSection].x1 > offPaths[window.offSection].x0;
var dx = Math.abs(offPaths[window.offSection].x1 - offPaths[window.offSection].x0);
var dashw = (dx * mazeSize.w) | 0;
$offPaths[window.offSection].css("width", "0px");
$offPaths[window.offSection].show();
if (lr) {
$offPaths[window.offSection].animate({
width: dashw + "px"
}, offPathTime);
} else {
var x0 = offPaths[window.offSection].x0 * mazeSize.w;
var x1 = offPaths[window.offSection].x1 * mazeSize.w;
$offPaths[window.offSection].css("left", x0 + "px");
$offPaths[window.offSection].animate({
width: dashw + "px",
left: x1 + "px"
}, offPathTime);
}
return;
}
$body.removeClass("blockScroll");
$('.parent-div').removeClass("blockScroll");
$(".offPath").hide();
if ($container.css("top") != "0px") {
$container.animate({
left: "-1550px",
top: "0px"
}, 500);
}
var pathIdx = -1;
var path0 = paths[0];
var path1;
var inPath = 0;
var i;
var curTop = 0;
var found = false;
for (i=0; i<paths.length; i++) {
var top0 = (i == 0) ? 0 : paths[i-1].y;
var top1 = paths[i].y;
if (top >= top0 && top < top1) {
pathIdx = i;
path1 = paths[i];
inPath = (top - top0) / (top1 - top0);
found = true;
if (i > 0) {
var dy = paths[i].y - paths[i-1].y;
var dx = paths[i].x - paths[i-1].x;
var vert = dx == 0;
if (vert)
$paths[i-1].css("height", (dy * mazeSize.h * inPath) + "px");
$paths[i-1].show();
}
} else if (top >= top0) {
path0 = paths[i];
var dy = paths[i].y - top0;
var vert = dy != 0;
if (i > 0) {
if (vert)
$paths[i-1].css("height", (dy * mazeSize.h) + "px");
$paths[i-1].show();
}
} else {
if (i > 0) {
$paths[i-1].hide();
}
}
curTop = top1;
}
// Check for an active section
$(".section").removeClass("sectionActive");
var section;
for (i=0; i<sections.length; i++) {
var d = Math.abs(sections[i].cy - (top - 0.05));
if (d < 0.07) {
var $section = $("#section" + i);
$section.addClass("sectionActive");
}
}
}
1) At the very least - assign all DOM objects to variables outside of the function scope. Like this:
var $parentDiv = $('.parent-div');
var $sections = $(".section");
...
function render() {
...
2) Also you should probably stop animation before executing it again, like this:
$container.stop(true).animate({
...
If you are running render() function on scroll - it will run many times per second. stop() helps to prevent it somewhat.
3) If it will not be sufficient - you can switch from jQuery to Zepto(jQuery-like api, but much faster and uses css transitions for animations) or to Velocity(basically drop-in replacement for jQuery $.animate and much faster than original) or even to GSAP - much more work obviously, but it is very fast and featured animation library.
I have a 2 column layout. The left column is way longer than the sidebar. I want the sidebar only to stick when its bottom reaches the bottom of the browser window. So the user can continue to scroll down the left column content while the right sidebar sticks.. how use jquery and javascipt
$(function() {
var $window = $(window);
var lastScrollTop = $window.scrollTop();
var wasScrollingDown = true;
var $sidebar = $("#sidebar");
if ($sidebar.length > 0) {
var initialSidebarTop = $sidebar.position().top;
$window.scroll(function(event) {
var windowHeight = $window.height();
var sidebarHeight = $sidebar.outerHeight();
var scrollTop = $window.scrollTop();
var scrollBottom = scrollTop + windowHeight;
var sidebarTop = $sidebar.position().top;
var sidebarBottom = sidebarTop + sidebarHeight;
var heightDelta = Math.abs(windowHeight - sidebarHeight);
var scrollDelta = lastScrollTop - scrollTop;
var isScrollingDown = (scrollTop > lastScrollTop);
var isWindowLarger = (windowHeight > sidebarHeight);
if ((isWindowLarger && scrollTop > initialSidebarTop) || (!isWindowLarger && scrollTop > initialSidebarTop + heightDelta)) {
$sidebar.addClass('fixed');
} else if (!isScrollingDown && scrollTop <= initialSidebarTop) {
$sidebar.removeClass('fixed');
}
var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);
if (dragBottomDown) {
if (isWindowLarger) {
$sidebar.css('top', 0);
} else {
$sidebar.css('top', -heightDelta);
}
} else if (dragTopUp) {
$sidebar.css('top', 0);
} else if ($sidebar.hasClass('fixed')) {
var currentTop = parseInt($sidebar.css('top'), 10);
var minTop = -heightDelta;
var scrolledTop = currentTop + scrollDelta;
var isPageAtBottom = (scrollTop + windowHeight >= $(document).height());
var newTop = (isPageAtBottom) ? minTop : scrolledTop;
$sidebar.css('top', newTop);
}
lastScrollTop = scrollTop;
wasScrollingDown = isScrollingDown;
});
}
});
SeeDemo
i have this error when scroll top
i wanted this style
My tooltip displays correctly but if I scrolldown the tooltips offset brakes.
How can I calculate the offset position of the parent if this is offscreen?
Tooltip should display correctly onscreen! DEMO
Jquery:
$.fn.tooltip = function () {
var $el = $(this);
var $w = $(window);
var timer;
var delay = 500;
$el.mouseenter(function (e) {
timer = setTimeout(function () {
var $c = $(e.currentTarget);
var $tt = $('<div class="tooltip fade right"><div class="arrow"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content"><article class="default"><h1>Anchorman 2: The Legend Continues</h1><ul><button>£10.99 Buy</button><button>£3.49 Rent</button><p>Hilarious comedy sequel starring Will Ferrell and Steve Carell.</p></article></div></div>').appendTo($(e.currentTarget).closest('.item')).fadeIn(300);
$tt.toggleClass('horiz-offscreen', $w.width() < $tt.outerWidth() + $tt.offset().left);
if ($w.height() < $tt.outerHeight() + $tt.offset().top) {
$tt.css('top', $w.scrollTop() + $w.height() - $c.position().top - $tt.outerHeight());
}
}, delay);
});
$el.mouseleave(function (e) {
$('.tooltip', e.currentTarget).fadeOut(500, function () {
$(this).remove();
});
clearTimeout(timer);
});
};
$('.item').tooltip();
try This! u need to ply a bit with css a swell.
http://fiddle.jshell.net/j7MWE/3/
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop(),
docViewBottom = docViewTop + $(window).height(),
elemTop = $(elem).offset().top,
elemBottom = elemTop + $(elem).height(),
result = 0;
if (elemBottom > docViewBottom) {
result = 1;
} else if (elemTop < docViewTop) {
result = -1;
}
return result;
};
$el.mouseenter(function (e) {
timer = setTimeout(function () {
var $c = $(e.currentTarget);
var content = $c.data('content');
var $tt = $('<div class="tooltip fade right"><div class="arrow"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content"><article class="default"><h1>Anchorman 2: The Legend Continues</h1><ul><button>£10.99 Buy</button><button>£3.49 Rent</button><p>Hilarious comedy sequel starring Will Ferrell and Steve Carell.</p></article></div></div>').appendTo(e.currentTarget).hide().fadeIn(500);
$tt.toggleClass('horiz-offscreen', $w.width() < $tt.outerWidth() + $tt.offset().left);
if (isScrolledIntoView($c) < 0) {
$tt.css('top', $w.scrollTop() + 120 - $c.offset().top);
} else if (isScrolledIntoView($c) > 0) {
$tt.css('top', $w.scrollTop() + $w.height() - $c.offset().top - $tt.outerHeight());
}
}, delay);
});
While scrolling down the page, progress bar are filled up. But what I want they should b start filling up while they are visible on screen. How to achieve that?
Fiddle
$(window).scroll(function () {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d-c)) * 100;
var position = scrollPercent;
$("#progressbar").attr('value', position);
$("#progressbar2").attr('value', position);
});
Assumption 1: You wish them to be always visible on the screen. A bit of CSS tweak will do:
progress {
top:10px;
position:fixed;
right:10px;
}
#progressbar2 {
top: 40px;
}
DEMO : http://jsfiddle.net/ddh3t/1/
Assumption 2: You want an animated fill, when the progress bar is visible. This requires change in JS:
(isScrolledIntoView from here).
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function () {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d - c)) * 100;
var position = scrollPercent;
var p1 = $("#progressbar"), p2 = $("#progressbar2");
if(isScrolledIntoView(p1)) {
var val = 0, delay = 32, timer;
timer = setInterval(function() {
p1.attr('value', val++);
if(val>=position) clearInterval(timer);
},delay);
}
});
DEMO : http://jsfiddle.net/ddh3t/3/
Note that p2 (the second progress bar) can be filled similarly.
Final Update : http://jsfiddle.net/ddh3t/6/
Try this -
$(window).scroll(function () {
var c = $(window).height();
var progressLowerLimit=1000-c; //assuming the first progressbar to 1000px away from top.
if(progressLowerLimit<0)
progressLowerLimit=0;
var s = $(window).scrollTop(),
d = $(document).height()-progressLowerLimit;
if(s<progressLowerLimit)
return;
else
s=s-progressLowerLimit;
scrollPercent = (s / (d-c)) * 100;
var position = scrollPercent;
$("#progressbar").attr('value', position);
$("#progressbar2").attr('value', position);
});
updated fiddle