We Keep Coding

Angular: how to keep resetting $timeout on scroll events, and let $timeout finish otherwise

I'm working on a little controller that watches for a scroll event and applies a CSS class, and applies a different CSS class. Long story short I'm trying to have the scrollbar thumb disappear when you're not scrolling, and appear when you ARE scrolling (like the scrollbar thumb on an iPhone).
I'm having trouble implementing it. My thought process doing this is:
1) On page load, set a $scope variable to false.
2) Watch for a scroll event on the div I want.
3) Once the scroll event starts, set the $scope variable to true.
4) Keep on resetting the $timeout whenever a scroll event fires.
5) In the timeout function, set the $scope variable back to false if the $timeout finishes.
6) In the HTML, set an ng-class to watch for this $scope variable.
I thought that sounded pretty simple, but I'm having a lot of trouble implementing it and I'm not sure if it's just something about $timeout that I'm missing, or if I'm just thinking in circles and don't realize it yet.
This is the controller I have set up for it (An actual working JSFiddle is linked beneath this wall of code):
(function () {
'use strict';
angular
.module('scrollingApp')
.controller('scrollbarController', scrollbarController);
function scrollbarController($scope, $timeout) {
$scope.actuallyScrolling = false;
$scope.scrolling = function() {
$('.container').on('scroll', function(event) {
$scope.actuallyScrolling = true;
console.log('before checkScroll ', $scope.actuallyScrolling);
checkScroll();
});
};
var checkScroll = function() {
var timeoutEnded = false;
$timeout(function() {
if($scope.actuallyScrolling) {
$scope.actuallyScrolling = false;
console.log('inside $timeout if statement', $scope.actuallyScrolling);
}
}, 1000);
console.log($scope.actuallyScrolling);
};
$scope.scrolling();
}
})();
I set up a JSFiddle here (https://jsfiddle.net/hurgledurf/k5naeora/) with the code I have so far (hopefully it's self-explanatory), and would appreciate any help/insight anyone might have. Thank you!

Angular of not... To "reset" a timeout on scroll should be done this way:
var timer;
$('.container').on('scroll', function(event) {
console.log('User is actually scrolling...');
clearTimeout(timer);
timer = setTimeout(function(){
console.log('User finished scrolling.');
},500);
});
It replace this chunk of your code:
$('.container').on('scroll', function(event) {
$scope.actuallyScrolling = true;
console.log('before checkScroll ', $scope.actuallyScrolling);
checkScroll();
});

AngularJS Timer doesn't work with Ajax Data

I have to pages, where one is screen.php witch shows a table with data pulled from data.php with 2 seconds interval.
In screen.php data is being pulled like this:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('.container').load('data.php');
}, 2000);
});
After this i have made a AngularJS Timer app :
angular.module('MyApp', ['timer'])
.controller('MyAppController', ['$scope', function ($scope) {
$scope.timerRunning = true;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.$on('timer-stopped', function (event, args) {
console.log('timer-stopped args = ', args);
});
}]);
The data returned bu the first script (from data.php) is in this format:
XXX XXXXXXXXXX XXXXXXXXX XXXXXXXX {{minutes}} : {{seconds}}
Witch should convert the {{minutes}} : {{seconds}} , in 00:00 , since in the datatest.php the filed is :
<timer start-time="<?php echo $dt; ?>">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
I know this might be a real noob question but better ask .
I have included the AngularJS in the screen.php page, and makred the boday with :
body ng-app="MyApp"
Any kind of help would be appreciated
P.S. To whoever is down voting the question, pls live a comment on why, so I dont make the same mistakes again.

For whoever might be interested , i ditched AngularJS Timer at all, and just pulled back the already calculated time in min and sec with php, so it refreshes every 2 secs, and its the same
$ms=(strtotime($timeNow) * 1000)-(strtotime($row[6]) * 1000);
$time=floor($ms/60000).':'.floor(($ms%60000)/1000);

use javascript to make element take turns to appear

So I have two element first and second; I'm trying to let them take turns to appear; I have following code;
setTimeout(setInterval(function(){
$(".first").hide();
$(".second").show();
},20000),10000)
setTimeout(setInterval(function(){
$(".first").show();
$(".second").hide();
},20000),0)
it seems these codes doesn't work, can someone tell me what's wrong?

i found an alternative:
var d=0;
setInterval(function(){
if(d==0){
d=1
$(".first").hide();
$(".second").show();
}else if(d==1){
d=0
$(".first").show();
$(".second").hide();
}
},10000)

Your setTimeout() callbacks need to be actual function references like function() {setInterval(...)}. The way you had it, you were executing the setInterval() immediately and then passing the results to setTimeout() which was doing nothing:
setTimeout(function() {
setInterval(function(){
$(".first").hide();
$(".second").show();
},20000),10000);
But, there is a much better way to implement this with only a single timer:
(function() {
var flag = true;
setInterval(function() {
flag = !flag;
$(".first")[flag ? "hide" : "show"]();
$(".second")[flag ? "show" : "hide"]();
}, 10000);
})();
Or, if you set the hide/show state opposite initially, then you can just use jQuery's .toggle() to reverse the visibility:
$(".first").show();
$(".second").hide();
setInterval(function() {
$(".first").toggle();
$(".second").toggle();
}, 10000);

Scroll to bottom of page after get request AngularJs

I'm familiar with using something like:
$scope.gotoBottom = function(){
$location.hash('bottom');
$anchorScroll();
}
and this works.. yet what I'm seeing is an issue when retrieving data that's being used in an ng-repeat and attempting to resize when that data comes in.
Example (in controller):
users.get({userList:$routeParams.conversationId}, function(data){
$scope.userList = data;
$scope.gotoBottom();
})
The gotoBottom method is firing to fast, while the ng-repeat is looking on $scope.userList and buidling it's table based off that.
I want to be able to toggle gotoBottom after that list has been remade (or whenever it's modified). Is there a better way to achieve this?
Thank you!

You can use $watch listener to fire gotoBotton when an AngularJs variable change.
$scope.ActivityList = new Array();
$scope.$watch("ActivityList", function () {
$scope.$evalAsync(function () {
$scope.DoSomething();
});
}, true);
$scope.DoSomething = function () {
$(function () {
//$scope.gotoBottom();
});
};

Also you can run scrolling bottom after page is loaded
angular.element($window).bind('load',
function() {
var element = document.getElementById("messages-list").lastElementChild;
element.id = "bottom";
/*-------------*/
$location.hash('bottom');
$anchorScroll();
}

Fire javascript (lightbox) once per session

Hey all I have a quick javascript question! Frustrated trying to get it sorted.... right now my modal div shows after 10 seconds which is right, but I want to only show it ONCE per session. Here's my current code:
<script type="text/javascript">
$(function() { // wait for the DOM
setTimeout(function () {
var $modal = $('#free-awesome'); // your selector; cache it; only query the DOM once!
$modal.modal('show'); // show modal; this happens after 10 seconds
setTimeout(function () {
$modal.modal('hide'); // hide modal;
}, 50000);
}, 10000);
});
</script>
Any ideas how I can adapt that javascript to show once per visit/session?
I'm quite new to javascript so if you could let me know exactly what to swap the above out for that'd be great!
Thanks in advance

You can use the session storage:
if(!sessionStorage.hidemodal) {
// your code ...
sessionStorage.hidemodal = true;
}