Develop Reference

How can I check if the current location is outside of a set radius?

I'm currently working on an app that triggers a notification when someone is within a square. The following defines the square:
var zonebounds = [[30,35], [40,45]];
var zone = L.rectangle(zonebounds, {color: "#ff7800", weight: 1, oppacity: .5});
I've made the following statement to check if someone is within the square.
if (posY > zonebounds[0][0] && posY < zonebounds[1][0] && posX > zonebounds[0][1] && posX < zonebounds[1][1] && zoneTimer == 0) {
ons.notification.toast('Test', { timeout: 5000 });
zoneTimer = 1;
} else if (posY >! zonebounds[0][0] && posY <! zonebounds[1][0] && posX >! zonebounds[0][1] && posX <! zonebounds[1][1] && zoneTimer == 1) {
zoneTimer = 0;
}
I think >! sadly doesn't behave as I would like it to.
I've made the zoneTimer variable so that the notification doesn't repeat itself. Maybe there is an even better way to do this.
Update
I fixed it by using a combination of the two answers I got, here is the final result:
if(zoneBoundslatLng.contains(latLng)){
if (inZone == 0) {
inZone = 1;
ons.notification.toast('Zone 1, klik voor informatie.', { timeout: 5000 });
}
} else {
inZone = 0;
}

You could take the reverse of >, <= for checking.
For the second check, you need an OR condition.
if (
posY > zonebounds[0][0] && posY < zonebounds[1][0] &&
posX > zonebounds[0][1] && posX < zonebounds[1][1] &&
zoneTimer === 0
) {
ons.notification.toast('Test', { timeout: 5000 });
zoneTimer = 1;
} else if (
(posY <= zonebounds[0][0] || posY >= zonebounds[1][0] ||
posX <= zonebounds[0][1] || posX >= zonebounds[1][1]) &&
zoneTimer === 1
) {
zoneTimer = 0;
}
A shorter check.
if (posY > zonebounds[0][0] && posY < zonebounds[1][0] && posX > zonebounds[0][1] && posX < zonebounds[1][1]) {
if (zoneTimer === 0) {
ons.notification.toast('Test', { timeout: 5000 });
zoneTimer = 1;
}
} else {
if (zoneTimer === 1) {
zoneTimer = 0;
}
}

You can check with leaflet if point is in the rectangle.
var bounds = L.latLngBounds(zonebounds);
if(bounds.contains(latlng) ){
console.log("notify");
}else{
console.log("nothing");
}
If your point (posX and posY) are pixels you can use this to convert:
var point = L.point(posX ,posY); // x=0,y=0
var latlng = map.layerPointToLatLng(point);
Update ...
var bounds = L.latLngBounds(zonebounds);
if(bounds.contains(latlng) && zoneTimer == 0){
zoneTimer = 1;
ons.notification.toast('Test', { timeout: 5000 });
console.log("notify");
}else{
zoneTimer = 0;
console.log("nothing");
}

Functions not being triggered on scroll

I have a code which is supposed to trigger various functions as I scroll down (each function draws a chart below another). The thing is that this code works well on my screen but when I run it on a bigger screen the functions are not triggered.
I haven't harcoded anything, I have debugged, and tested each conditions and all throw true.
This is the troublesome snippet:
$(window).scroll(function() {
if ($('#chartdiv').html().length != 0) {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if (Math.round((scrollHeight - scrollPosition) / scrollHeight) === 0) {
if ($('#chartdiv2').html().length == 0) {
drawChar2();
}
okas.
else if ($('#chartdiv3').html().length == 0) {
drawChar3();
} else if ($('#chartdiv4').html().length == 0) {
drawChar4();
} else if ($('#chartdiv5').html().length == 0) {
drawChar5();
}
}
}
});

If your screen is very big, you have to add if condition.
Because there is no reason to scroll.
$(window).scroll(function() {
if ($('#chartdiv').html().length != 0) {
var $window = $(window);
var windowHeight = $window.height();
var scrollHeight = $(document).height();
var scrollPosition = windowHeight + $window.scrollTop();
if (windowHeight === scrollHeight || // add this condition!!!
Math.round((scrollHeight - scrollPosition) / scrollHeight) === 0) {
if ($('#chartdiv2').html().length == 0) {
drawChar2();
} else if ($('#chartdiv3').html().length == 0) {
drawChar3();
} else if ($('#chartdiv4').html().length == 0) {
drawChar4();
} else if ($('#chartdiv5').html().length == 0) {
drawChar5();
}
}
}
});

Prev answer not working to test if DOM is in viewport

I found this: How to tell if a DOM element is visible in the current viewport?.
When I put it in my JS and force a scroll, it is not reporting the correct information.
function inViewport(e) {
//special bonus for those using jQuery
if (e instanceof jQuery) {
e = e[0];
}
var rect = e.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
$('html,body').animate({
scrollTop: $("#8").offset().top
});
var divsVisible = [];
$('div[id]').each(function() {
if (inViewport(this)) {
divsVisible.push( this.id );
}
});
debug.log(divsVisible);
My HTML file is here: https://dl.dropboxusercontent.com/u/163931/index.html
I would expect the array to have '8' in it. Instead it has '1' in it. Mac/Safari.

Background image change on scroll

I would like to change background image of one div on scrolling the browser.
Here is my code
$element = $('.girlBg'),
classNameOne = 'girlBg1';
classNameTwo = 'girlBg2';
classNameThree = 'girlBg3';
classNameFour = 'girlBg4';
classNameFive = 'girlBg5';
classNameSix = 'girlBg6';
$document.scroll(function () {
if ($document.scrollTop() >= 300) {
$element.addClass(classNameOne);
} else if ($document.scrollTop() >= 600) {
$element.addClass(classNameTwo);
} else if ($document.scrollTop() >= 900) {
$element.addClass(classNameThree);
} else if ($document.scrollTop() >= 1200) {
$element.addClass(classNameFour);
} else if ($document.scrollTop() >= 1500) {
$element.addClass(classNameFive);
} else if ($document.scrollTop() >= 1800) {
$element.addClass(classNameSix);
} else {
}
});
Now, when i scroll 300px, the first class adding without any problem, but when I scroll more no other classes adding to it.
Please help. Thanks..

you can reverse the conditions
if ($document.scrollTop() >= 1800) {
$element.addClass(classNameOne);
} else if ($document.scrollTop() >= 1500) {
$element.addClass(classNameTwo);
} else if ($document.scrollTop() >= 1200) {
$element.addClass(classNameThree);
} else if ($document.scrollTop() >= 900) {
$element.addClass(classNameFour);
} else if ($document.scrollTop() >= 600) {
$element.addClass(classNameFive);
} else if ($document.scrollTop() >= 300) {
$element.addClass(classNameSix);
} else {
}

Its because it is always going into your first if.
if ($document.scrollTop() >= 300 && $document.scrollTop() < 600) {
You need a less than check in your if.

You need range as mentioned in above answer of #Thomas Harris. But you need range for all condition. Try this:
$document.scroll(function () {
if ($document.scrollTop() >= 300) {
$element.addClass(classNameOne);
} else if ($document.scrollTop() >= 600 && $document.scrollTop() < 600) ) {
$element.addClass(classNameTwo);
} else if ($document.scrollTop() >= 900 && $document.scrollTop() < 900)) {
$element.addClass(classNameThree);
} else if ($document.scrollTop() >= 1200 && $document.scrollTop() < 1200)) {
$element.addClass(classNameFour);
} else if ($document.scrollTop() >= 1500 && $document.scrollTop() < 1500)) {
$element.addClass(classNameFive);
} else if ($document.scrollTop() >= 1800 && $document.scrollTop() < 1800)) {
$element.addClass(classNameSix);
} else {
}
});

Redirection based on page title/ location

i am trying to get my Online Help to redirect to a phone version. However, i am generating the phone and desktop versions from a single source so I want to have a piece of code that does it each way (phone <-769-> desktop). I got the redirection due to size happening using:
if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";
but when I was on the phone page it kept trying to load the page (i can see why). I had a go myself but I am new to this, here is my (failed) attempt:
windowWidth = window.innerWidth;
<!--
if (location.pathname = "/desktop/Selecting_a_School_Register.htm";)
{
} else if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";
}
</script><script>
if (location.pathname = "/phone/Selecting_a_School_Register.htm";)
{
} else if (screen.width >= 769 || windowWidth >= 769) {
window.location = "../desktop/Selecting_a_School_Register.htm";
}

Any type of conditional statement needs a double '==' as opposed to a single '=' like your code example suggests. Also, you don't need a semi-colon after your string in your if statements.
Even better than a double equals is a triple equals which is a strict comparison operator
Try this:
windowWidth = window.innerWidth;
if (location.pathname === "/desktop/Selecting_a_School_Register.htm") {
}
else if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";
}
if (location.pathname === "/phone/Selecting_a_School_Register.htm") {
}
else if (screen.width >= 769 || windowWidth >= 769) {
window.location = "../desktop/Selecting_a_School_Register.htm";
}
EDIT:
This code does exactly what you need:
var pathname = window.location.pathname
, width = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
if (width <= 769 && pathname !== '/mobile.html') {
window.location = '/mobile.html';
}
if (width > 769 && pathname !== '/desktop.html') {
window.location = '/desktop.html';
}

Hi,
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
Example :
To check to see if the user is on any of the supported mobile devices:
if( isMobile.any() ) alert('Mobile');
To check to see if the user is on a specific mobile device:
if( isMobile.iOS() ) alert('iOS');
Thank you,
Vishal Patel