Develop Reference

Scroll event won't fire what so ever

I have a (fairly simple) issue and I'm breaking my head over it.
The issue is pretty simple - scroll event won't fire (ever).
I'm writing this angular project, so I've tried the following:
angular.element($window).bind('scroll', ()=> {
console.log('scroll!');
if (!scope.scrollPosition) {
scope.scrollPosition = 0;
}
// Alerting for test cause wtf is going on
scope.boolChangeClass = this.pageYOffset > 600 ? alert(true) : alert(false);
scope.scrollPosition = this.pageYOffset;
scope.$apply();
}
);
but nothing happened. (assume $window is intact and that i'm using webpack etc.)
This example works great if I change the scroll to click. weird.
So I've tried vanilla~~!
window.addEventListener('scroll',function(){
console.log('test')
})
This attempt works on every other website except mine (gotta admit it's classic).
So - has anyone ever dealt with this and knows what's going on?
I assume that some other element is consuming this event at early stage thus not letting it bubble up. Yet this is just an assumption.'
Would love to understand this :)
=== EDIT ===
I've tried to see all the fired events using monitorEvents(window) (using Chrome) and I see every event that's being fire except the scroll..

Looks like it's the body element that is scrolling. Try adding the following code in the console.
document.body.addEventListener('scroll', function() {
console.log('test');
});

trying to hide div with content on javascript call

I Have been trying to use this http://www.gloucesterwebdesign.com/showhidecontent/
but instead of hitting a link I want some JavaScript to call this function
like
if(input == true){
toggleLayer('id');
}
else if(input == false){
toggleLayer('id2');
}
the script call the toogleLayer function, but nothing happens, and curse
the input value is place within a other script there runs at page load up. I'm been wondering if this is the problem. anyone who like to comment on this?
-- Update --
So i was ask for more of the code,
http://pastebin.com/UD3tjz1s
The value in the localStorage is set on a other page, so you only get this page after that. this is only to show what kind of data im using
im a bit of a javaScript noob, so hope it's not to hard to read

Okay, I did a quick test and this will do it. Just replace your current function iwht this, it;s a lot cleaner and simpler. Also, document.getElementById(id) is supported in every current browser and goes back to IE6, so unless you want netscape support you don't; need all the extra code your resource provided.
function toggleLayer(id){
// get the element (this is supported in all modern browsers)
var element = document.getElementById(id);
// set the style display of this element to none if its set to be
// anything else than none, otherwise set it to block
element.style.display = element.style.display != "none"
? "none"
: "block";
}
I tested this and it worked.
Edit - [different thing!]
Okay, sorry I sort of misunderstood but I found a way to fix it. Heres what it comes down to: Because your javascript code is above your DIV elements, it gets executed BEFORE the DIV elements are created by the page. So javascript will look for the elements, and it will return undefined because, well, they aren't defined yet. SO you will have to either move your script to just before the ending tag, or add the following to the code (please not I also added an interval to see your function working):
window.onload = function(){
setInterval(setSize,1000);
// the rest of your functions here - the above interval is so you can see it toggling
}
// function toggleLater(){...} here
You might also want to move ToggleLayer OUTSIDE of the window.onload function, as you can't trigger it from the page otherwise (again, the function is now defined INSIDE window.onload and outside of the scope for DIV elements...).

Struggling with onmouseover and onmouseout

I am struggling with onmouseover and onmouseout.
Every site I have been to shows this syntax almost exactly. I practically copied pasted it from Mozilla. The problem I’m having is that it calls the largeDiv and smallDiv functions immediately. (Eventually, I am hoping to apply a new class to the div when during the mouseover event, and return to the old class when mouseout.) I am pretty sure that my mouse events are to blame. I was also wondering if my onload function caused any problems, but when I commented it out, the only thing that changed was the small div did not load, as expected.
I tried to use an event listener, thinking I wasn’t calling the event properly, but that did not work at all, although I am not sure I coded it properly, and didn’t spend more than an hour on the damn thing! I have tried numerous tweaks, camelcasing onmouseover, using parenthesis, etc… Anyway, here is the code:
var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv();
introEl.onmouseout = smallDiv();
I coded this in my browser and when I copied it to jsFiddle to ask this question it wouldn’t load the small div on load, but it did log the statements. I put it on CodePen and it worked as I have described. Not sure what caused this but this is the second time this has happened.
By the way, if you go to CodePen or jsFiddle, I know my design skills are lacking. I am just doing this for a playground, and for a place to keep code that works, like a notebook. I promise you it will get much much worse.
As always, any help is appreciated.

var introEl = document.getElementById("intro");
//display large div by default and
//use small div with js enabled
window.onload = function(){
introEl.className = "small";
}
function largeDiv(){
console.log("It Worked");
};
function smallDiv(){
console.log("Mouse Out!");
};
introEl.onmouseover = largeDiv; // here you don't need "()" with your defined functions
introEl.onmouseout = smallDiv; // here you don't need "()" with your defined functions

Please go to following fiddle i have made some small changes and its working fine for me
fiddle
Also You could have used
<div id="intro" onmouseover="largeDiv();" onmouseout="smallDiv();">
Mouse over this text
</div>
See working example here fiddle 2

dont know why touch events triggered twice

I'm using Jquery Mobile, and my touch events are being triggered twice. At first I thought it might be an overlap between mouse events and touch events, but I tried to unbind mouse events on tablets/smartphones and the events are still being triggered twice.
Here is my code
//Tablet Features
var eventType = {
swipeleft: '-=100',
swiperight: '+=100'
}
$('#navMenu').bind('swipeleft swiperight',
function(e) {
$('#prbBtnHolder').animate({left:eventType[e.type]});
//alert(e.type);
}
);
//Device Detection
(function () {
var agent = navigator.userAgent.toLowerCase();
var isDevice = agent.match(/android/i);
if (isDevice == 'android') {
//alert(isDevice);
$('*').unbind('mousedown').unbind('mouseout').unbind('mousemove').unbind('mouseup');
}
})();
I've been trying to figure this out for a while, please help if you have any ideas.
UPDATE
I managed to solve the problem locally by placing the touch handlers outside the .ready() method. However, when i run the page on the server, the double trigger happens again. Now I'm completely stumped. Why are two identical pages (literally identical) behaving differently locally and on the server?

I had the same problem and fixed it with a little tweak around... I don't recommend this for the exact solution but my take you out of the problem fast.
I define a global Flag
var bDidPan=true;
and inside the trigger wrote the following:
if (bDidPan) {
bDidPan = false; // IT'S IMPORTANT TO PUT THIS FIRST
//code to execute when triggers
}
else
{
bDidPan = true;
}
and that did the trick. You can do the trick with numbers (It worked better with numbers for me!)
Hope it helps!

This sounds like you're putting your scripts into the <body> tag. If you do that, they'll get run twice. I've had this very same thing happen and went a little balder for the trouble and frustration. Make sure all your scripts are inside the <head> tag.

Object literal + document.body.onclick not doing what I expect

ok, people here is my amazing antigravity library. I'm trying to define it as an object literal, which, uh, i read all the cool kids are doing in order to to encapsulate their libraries. Basic tests indicate it's working properly, but I cannot seem to see document.body from inside my object.
what should happen is when I click on the page "It is working" should alert. Instead I get a document.body=null error. what gives? Where is my body? why can I not set a mouse event for it? I have wasted my whole friday day with this! Gah!
antigrav={
activate:function(){
// turn on antigrav
document.body.onmousedown = antigrav.startPan();
},
startPan:function(event){
alert('it is working!');
},
}
document.onload=antigrav.activate();

You probably want to do
document.onload=antigrav.activate;
With parenthesis, you are setting document.onload to the result of running antigrav.activate(), instead of indicating you want antigrav.activate to run as the document.onload handler. Therefore, activate() was getting run in order to make the assignment, before the document was loaded, hence document.body wasn't defined yet.
You would want to do the same thing for the onmousedown handler assignment:
document.body.onmousedown = antigrav.startPan;
Trying this out, I also had to switch to window.onload...
Also, watch out for trailing commas in object literal definitions. Firefox is ok with them, but IE chokes. So, altogether:
var antigrav={
activate:function(){
// turn on antigrav
document.body.onmousedown = antigrav.startPan;
},
startPan:function(event){
alert('it is working!');
}
};
window.onload=antigrav.activate;

ok here is the current status:
var antigrav={
activate:function(){
// turn on antigrav
alert('started');
document.body.onmouseup = antigrav.startPan;
// make flash shield
},
startPan:function(event){
alert('dude, you are panning!');
},
}
antigrav.activate();
//document.onload=window.antigrav.startPan;
it gets as far as "alert('started'), but still throws "error:document.body is null"
the commented out lines have the same result...

Ok, people, I am a fool, but you were all very helpful anyway.
The /real/ problem, and nothing to do with anything, and reveals a bizarre quirk of body.onclick behavior:
in my /HTML/ I had tried to set up a big document to test my clicks on:
<html>
<script src="antigrav.js"></script>
<body onload='test()'>
<!--<body onload="antigrav.activate();" >-->
yo, fool, this is the body!
<div style="position:absolute; top:2000px; left:2000px;">
it is mad wide and tall!
</div>
</body>
</html>
To stretch the body, I placed a div over at 2000px, 2000px. the scrollbars are there, the body must be huge, right? In reality, all that space between the div has /nothing at all/ in it - including a body element, I guess? You have to click on the actual text to trigger document.body.onclick...
Oddly, (and this is the revealed "bizarre quirk") if you give the body tag an onclick="foo()", then foo() is triggered when you click anywhere on the page, including the nonexistent body area. I have no idea why this is, but that was ctually the problem. thanks for your help people, you pointed out some other good techniques too.