We Keep Coding

$window.scrollY , window.scrollY and window.pageYOffset nothing is working in angularjs

I tried all the possibilities I know and which I found in Stackoverflow to get window.scrollY value it always gave me "0" even same with window.scrollX. Please, can somebody suggest me what I'm doing wrong?
I tried $window.scrollY, $document[0].documentElement.scrollTop ,$document[0].documentElement.scrollLeft, $window.pageYOffset , angular.element($window) nothing is working for me.
This is my code snippet (angular way)
Here in below code
topOfNav working great
fixNav is triggering on scroll event
eventListener is working great
window.scrollY not working and I'm always getting zero.
$timeout(function () {
var nav = angular.element($document[0].querySelector("#main"));
// getting this offsetTop value
var topOfNav = nav.prop('offsetTop');
var fixNav = function () {
console.log(topOfNav, $window.scrollY);
};
// this is working great, it is listening to scroll event
$window.addEventListener('scroll', fixNav, true);
});
To test I tried creating simple HTML file and added this snippet (javascript way) in <script></script> tag it's working great.
here is the code (works like a champ)
<script>
const nav = document.querySelector('#main');
const topOfNav = nav.offsetTop;
function fixNav() {
console.log(topOfNav, window.scrollY);
}
window.addEventListener('scroll', fixNav);
</script>
Additional Information:
AngularJS Version: 1.6.2
Browser Type: chrome
Browser Version: Version 55.0.2883.87 (64-bit)
OS: Ubuntu 14.04 LTS
Thank you.
EDIT:
Angular Material Version: 1.x.x
After digging too much (Updating Packages, uninstalling and re-installing packages) one thing I found is Angular-Material is the Blocker.
I tried with other projects of angular too, the only blocker I found was Angular Material

Somewhere removing the style height:100% from the body element, the above code worked for me

The following worked for me:
html, body { height: auto }

jQuery function not working in Firefox

I have a basic "scroll to top" jQuery function for use on my site. This function works as I would like in Chrome, Opera, and IE though not in my Firefox (37.0.2).
The function is as follows:
function scrollUp(){
$("#to-top").hide();
$(window).bind('mousewheel', function(){
var num = $(window).scrollTop();
if (num > 100){
$("#to-top").show(500);
};
if (num < 100){
$("#to-top").hide();
};
$("#to-top").click(function(){
$("#to-top").hide();
$('body,html').stop().animate({scrollTop:0},1200);
});
});
}
scrollUp();
I have checked the inspect element boxes in Firefox but no errors are appearing.
For this to work the HTML is:
<a id="to-top">
<center><p>^ ^ ^</p><p>Scroll To Top</p></center>
</a>
<script src="../scripts/toTop.js">scrollUp()</script>
located at the bottom of the page before the closing body tag.
The HTML is not showing anything in firefox which means that the first line of the jQ function must be working, though for some reason after that it doesn't.
I originally had .on() instead of .bind() they functioned the same in the other browsers buy not firefox....
Any help is appreciated, thanks guys!

Use the scroll event and bind using .on
$(document).on('scroll', function () { /* your mousewheel code here */ });
If memory serves, Firefox doesn't like the mousewheel event. I'm pretty sure the scroll event should work though.
Also, you don't need to run $(window).bind every time you scrollUp(). That only needs to be done on $(document).ready

Using a window.load function in Internet Explorer

I want to run some code after everything on the target page is done loading AND rendering. It was suggested to me to use the Window.load function and it is working perfectly in Firefox and Chrome. I just can't get it to work in IE. Is there another way of doing this?
Edit: Ok so here is what I have:
appAPI.ready(function($) {
if (appAPI.isMatchPages("192.168.1.156/test/*"))
{
$("body").css("display","none");
if ( $('.welcome p').text().indexOf("user") >= 0 )
{
if ( $('h1').text().indexOf("header") >= 0 )
{
//alert("Found data");
$('td:contains("testdata")').text("newdata");
}
}
$(window).load(function () {
$("body").css("display","block");
});
}
});
Basically before there was code flickering, I could see the data being changed as the page loaded so I asked for some advice and the solution I got was to set the body style to display:none and use window.load to set it back to block once everything is loaded. This works perfectly in Firefox and Chrome but not in IE. The actual code that changes the data works in IE tho.

You should have no issue with this in IE, I use it frequently when I need to ensure all resources have been downloaded:
$( window ).load(function() {
// Run code
});
"Run a function when the page is fully loaded including graphics." ref: http://api.jquery.com/load-event/

jQuery resize event not firing

For whatever reason the following:
$(function() {
$(window).resize(function() {
alert("resized!");
});
});
only fires an event when the page is loaded. Resizing the browser window does nothing in both Safari and Firefox. I have not tried it on any other browsers.
Any ideas or workaround?

I think your alert is causing a problem try this instead
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
jsfiddle

it is best to avoid attaching to events that could potentially generate lots of triggering such as the window resize and body scroll, a better approach that flooding from those events is to use a timer and verify if the even has occurred, then execute the proper action, something like this:
$(function() {
var $window = $(window);
var width = $window.width();
var height = $window.height();
setInterval(function () {
if ((width != $window.width()) || (height != $window.height())) {
width = $window.width();
height = $window.height();
alert("resized!");
}
}, 300);
});
another advantage doing it using timer is you have full control of how often to check, which allows you flexibility if you have to consider any additional functionality in the page

works in any browser:
http://jsbin.com/uyovu3/edit#preview
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});

5 years later...
The only browser I have this problem with, is Chrome; I don't have Safari.
The pattern I noticed is that it works when I inline the code:
<script type="text/javascript">
$(window).resize(function(e) { console.log("resize inline", +new Date()) });
</script>
but not when I put it in a separate Javascript file that I load with:
<script type="text/javascript" src="/js/resized.js"></script>
where the script contains
console.log('script loaded');
$(window).resize(function(e) { console.log("resize in script file", +new Date()) });
I can only guess this is some kind of "protection" built in by the Chrome development team, but it is silly and annoying. At least they could have let me bypass this using some "same domain policy".
Update for a while I thought using $(document).ready() fixed it, but apparently I was wrong.

try
$(document).resize(function(){ ... };);
I think its the document that fires the resize consistently across browsers. But I'm not at work now to check what I usually do.

Try this code.
window.addEventListener("resize", function(){
console.log('yeap worked for me!');
})

Standart
$(window).bind("resize",function(){
console.log(window.innerWidth);
})
For Wordpress
jQuery(window).bind("resize",function(){
console.log(window.innerWidth);
})

I was with the same problem, saw all kind of solutions and didn't work.
Making some tests I noticed that the $(window).resize, at least in my case, would only trigger with $(document).ready() before it. Not $(function()); nor $(window).ready();
So my code now is:
$(document).ready(function(){
$(window).resize(function(){
// refresh variables
// Apply variables again
});
});
...and even an alert work!

$(window).load(function()-how it works with FF

I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.

It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.

I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.

I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>