In my controller, I have:
$scope.woffset = window.pageYOffset;
$scope.$watch("woffset", function (newValue, oldValue) {
console.log("hello");
console.log(window.pageYOffset);
}, true);
});
So when I scroll, I should be receiving console logs of "hello" as the pageYOffset changes. However, it doesn't do anything. But if I run window.pageYOffset in the console as I scroll down, I can see that the value is changing. Any ideas?
I've tried multiple variations of watch (with and without true, using functions instead of strings, but nothing seems to work).
(I know there is a work around with onscroll, but I'd like to learn how it would work this way) Thanks!
Edit: This doesn't seem to work either:
$scope.test = function () {
return window.pageYOffset;
}
$scope.$watch("test", function (newValue, oldValue) {
console.log("hello");
console.log(window.pageYOffset);
}, true);
The issue is that $scope.woffset is being set to a normal number - it's never changing. It's like doing the following:
var i = 5;
var j = i;
i = 7;
// Wondering here why j isn't 7
There are 2 ways to solve your problem - the naive way or the more efficient way.
First:
window.onscroll = function () {
console.log("hello");
console.log(window.pageYOffset);
// any $scope variable updates
$scope.$digest();
};
However, with this solution, every time you scroll this will be running like crazy. The more efficient way would be to use the above solution combined with some "debouncing" - check out this Stack Overflow question to learn about doing that Can I debounce or throttle a watched <input> in AngularJS using _lodash?
One problem this has is it will never un-watch scrolling, even once the controller is garbage collected. To solve this problem, also do the following:
$scope.$on('$destroy', function() {
window.onscroll = null;
});
One good thing to verify is that your window.pageYOffset value is actually changing. Scroll the window then execute a window.pageYOffset in the console to verify it is changing. It could be that you are scrolling a child container and not the window so you are not seeing any change.
angular.element($window).on("scroll resize", function (e) {
console.log($window.pageYOffset)
});
scope.$on('$destroy', function () {
angular.element($window).unbind("scroll resize");
});
Related
Abstract
Hi, I'm trying to manipulate scroll logic of my angular application (by hand), Since there is no such thing as onLoaded event in angular, I was trying to accomplish that within $interval loop. It worked but UI was flickering, it looked like the scroll first goes all way up and then down again making everything look terrible. I've started looking for solution to my problem and found this answer. In which it was said that I have to be looking to $evalAsync which is capable of queueing an operation before UI does it's rendering. It lead me to the following code:
var restoreScroll = function (scroll) {
angular.element($window).scrollTop(scroll);
var fn = function () {
debugger;
var value = angular.element($window).scrollTop();
if (value !== scroll) {
angular.element($window).scrollTop(scroll);
$rootScope.$evalAsync(fn);
}
}
$rootScope.$evalAsync(fn);
};
which hangs and shows my misunderstanding of Angular's $evalAsync method.
Question
According to code above I need a method that would be trying to set the scroll until it succeeds, after when it should stop, how do you do that using $evalAsync?
Thank you in advance!
==================
Edit
Ive managed to make it work, however not without the devils (the $$postDigest) in my code, so here goes:
var restoreScroll = function (scroll) {
angular.element($window).scrollTop(scroll);
var fn = function () {
var value = angular.element($window).scrollTop();
if (value !== scroll) {
angular.element($window).scrollTop(scroll);
$rootScope.$$postDigest(fn);
}
}
$rootScope.$$postDigest(fn);
};
Is there a better way?
I have a web site which displays a portfolio using this scrollbar http://manos.malihu.gr/jquery-custom-content-scroller/ .
I want to have an automatic scroll when the page is
fully loaded. When a user pass over the portfolio it stops the scroll and whe, he leaves it starts moving again.
It currently works well but sometimes it's getting slow or sluggish randomly.
Is there something wrong with my js function?
Here's the page having problems : http://www.lecarreau.net/new/spip.php?rubrique5 (I need the change the hosting provider, I know the site is slow).
This is the function:
(function($){
var timerId = 0;
$(window).load(function(){
$("#carousel").show().mCustomScrollbar( {
mouseWheel:false,
mouseWheelPixels:50,
horizontalScroll:true,
setHeight:370,
scrollButtons:{
enable: true,
scrollSpeed:50
},
advanced:{
updateOnContentResize:true
}
});
timerId = setInterval(function(){myTimer()},50);
$('#carousel').mouseenter(function () {
clearInterval(timerId);
});
$('#carousel').mouseleave(function () {
timerId = setInterval(function(){myTimer()},50);
});
});
})(jQuery);
function myTimer()
{
var width = $(".mCSB_container").width();
var left = $(".mCSB_container").position().left;
if (width-left>0) {
var scrollTo = -left+4;
$("#carousel").mCustomScrollbar("scrollTo", scrollTo);
}
}
Is there something obvious I'm missing?
Timing in the browser is never guaranteed. Since all functionality contents for time on a single event loop, continuous repeated tasks sometimes get a little janky.
One thing you could do that might decrease the jank is to cache the jQuery objects you're creating every 50ms:
var mCSBContainerEl = $(".mCSB_container");
var carouselEl = $("#carousel")
function myTimer()
{
var width = mCSBContainerEl.width();
var left = mCSBContainerEl.position().left;
if (width-left>0) {
var scrollTo = -left+4;
carouselEl.mCustomScrollbar("scrollTo", scrollTo);
}
}
Selecting these to elements only needs to happen once. From there they can just reference a variable instead of having to find the element on the page and wrap it in jQuery again and again.
Caching the variable in this case depends on them being in the DOM when the code runs, which isn't guaranteed here. You may have to move the variable assignment and function declaration into the function passed to load.
Also, as John Smith suggested, consider checking out requestAnimationFrame. Here's a shim I use by Paul Irish: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
I know this subject has been already discussed in similar topics, but none of the solutions I could find can help me understand the issue I have.
Here is my simplified class and its the usual was I define them.
BottomNav = function() {
this.init();
}
$.extend(BottomNav.prototype, {
init: function(){
this.insue = false;
$(".up").click($.proxy(function () {
var thisinuse = this.inuse;
if(this.inuse===false) {
this.inuse = true;
this.moveSlider('up');
}
},this));
},
moveSlider: function(d){
//some instructions
alert('move slider');
}
});
$(document).ready(function() {
new BottomNav();
});
In FireBug on the breakpoint inside the click event this.inuse is undefined! (this is my problem), my scope looks good on the watch (right panel of firebug), this.insue is false as it should be - sorry I cannot post images yet!
I would be grateful of someone might help identifying this very strange behavior.
I tried some staff like putting the click event definition inside another function but it does not work either. I tried different ways of bindings and it does not work too.
However the below example is working on a number of other classes I made. I could access class scope from events, effects.
It's just a typo:
this.insue = false;
Change insue to inuse and the property will be there :-)
Apart from that, the variable thisinuse is quite superfluous in here. And change the condition to if(! this.inuse) instead of comparing to booleans…
this.inuse can be assigned to a variable out side your click event handler and use the variable inside the handler.
I am reading a jQuery book and trying to do an example. In the example lightning flashes on the screen, and that part works fine. The problem is that when you switch tabs, and then switch back, the lightning starts flashing in rapid succession. The problem is supposed to be fixed using the window.onblur and window.onfocus events, but it's not working. Can anybody see what I am doing wrong?
There are three hidden lightning pictures with different id's, and three different functions that make each one flash. goLightning() sets the interval for each function to go, and stopLightning() should clear that interval. That part is what seems not to be working for all I know. Here is the code:
$(document).ready(function(){
goLightning();
window.onblur = stopLightning;
window.onfocus = goLightning;
var int1; var int2; var int3;
// this function sets the lightning interval
function goLightning() {
int1 = setInterval(function() { lightning_one(); },4000);
int2 = setInterval(function() { lightning_two(); },5000);
int3 = setInterval(function() { lightning_three(); },7000);
}
// this function clears the lightning when the window isn't focused
function stopLightning() {
window.clearInterval(int1);
window.clearInterval(int2);
window.clearInterval(int3);
}
// these three functions make the lightning flash and seem to be working fine
function lightning_one() {
$("#container #lightning1").fadeIn(250).fadeOut(250);
}
function lightning_two() {
$("#container #lightning2").fadeIn(250).fadeOut(250);
}
function lightning_three() {
$("#container #lightning3").fadeIn(250).fadeOut(250);
}
});
I have no idea why this isn't working. It seems like stopLightning() isn't clearing the interval, or window.onblur isn't working. Anyway, any feedback would be helpful. Thanks!
Add stopLightning() to the beginning to goLightning(), before setting the new intervals.
Re-arrange the following lines:
goLightning();
window.onblur = stopLightning;
window.onfocus = goLightning;
var int1; var int2; var int3;
in to this instead:
var int1, int2, int3, w = window;
w.onblur = stopLightning;
w.onfocus = goLightning;
goLightning();
Next, use the variable w instead of window in the stopLightning() function to ensure you use a reference to the proper window. Also, as #Kolink mentioned, it wouldn't hurt to put a call to stopLightning() at the beginning of your goLightning() function to ensure you don't have multiple instances running in the event the focus event gets fired more than once.
EDIT I moved the call to goLightning() after having set up the events - untested but I think it would be better that way?
I've done a little bit of research and have found that using setTimeout() causes a bad memory leak, as seen on this post. I'm hoping to find a remedy or an alternative.
What I have is a small view appearing on the screen when any of my many buttons is touched. At the same time I set a timeout to fadeout the small view after 3 seconds. When the button is first pressed, I also clear the timeout so that I don't continue setting multiple ones. Though now while analyzing my code I see that I'm setting an interval and clearing a timeout. Not sure if this is part of my issue. It looks like this:
var Modal = Titanium.UI.createView({
width:151,
height:83,
owner: null,
myView: null,
});
var modalTimer;
var addModal = function(){
clearInterval(modalTimer);
theView.add(Modal);
modalTimer = setTimeout( function() {
removeModal();
changeTurn();
},3000);
}
playerButton.addEventListener('click',function(){
addModal();
});
Thanks!!!
I may have solved this issue with the following:
var Modal = Titanium.UI.createView({
width:151,
height:83,
owner: null,
myView: null,
});
var modalTimer;
var addModal = function(){
clearTimeout(modalTimer);
theView.add(Modal);
modalTimer = setTimeout(removeModal(),3000);
}
playerButton.addEventListener('click',function(){
addModal();
});
I put my changeTurn() function in my removeModal() function, and removed the anonymous function from setTimeout. I also corrected the clearTimeout confusion. I still have to see how well this holds up over extended gameplay, but from first impressions this has fixed my issues. I hope this helps anyone with similar issues.
I don't know if this helps but I have noticed that my app crashes if i use:
modalTimer = setTimeout(removeModal(),3000);
but doesn't if i use
modalTimer = setTimeout(removeModal, 3000);
where removeModal is defined as
var removeModal = function()
{...};