I am using this code to check the Internet end user.
myapp.run(function($window, $rootScope) {
$rootScope.online = navigator.onLine;
$window.addEventListener("offline", function () {
$rootScope.$apply(function() {
$rootScope.online = false;
});
}, false);
$window.addEventListener("online", function () {
$rootScope.$apply(function() {
$rootScope.online = true;
});
}, false);
});
I have a div on my page that way. By default it is as display:none;
<div id="connec_failed">...</div>
How do I display this div starting the code that checks the internet if the result return false?
How to hide the div again when the result returns true?
Use ng-hide: if online
<div id="connec_failed" ng-hide="online">...</div>
Related
It's a basic question as I'm beginner in both Cordova and AngularJS.
I have an application with Cordova and AngulaJS and I want to check network connectivity using cordova-plugin-network-information in an angular way.
The below code works fine:
var app = angular.module('CordovaPluginTest', []);
app.run(['$rootScope', function ($rootScope) {
document.addEventListener('deviceready', function () {
document.addEventListener('online', toggleCon, false);
document.addEventListener('offline', toggleCon, false);
if (navigator.connection.type == Connection.NONE)
$rootScope.$apply(function () { $rootScope.isOnline = false; });
else
$rootScope.$apply(function () { $rootScope.isOnline = true; });
}, false);
function toggleCon(e) {
if (e.type == 'online')
$rootScope.$apply(function () { $rootScope.isOnline = true; });
else if (e.type == 'offline')
$rootScope.$apply(function () { $rootScope.isOnline = false; });
}
}])
But the below one does not work:
var app = angular.module('CordovaPluginTest', []);
app.run(['$rootScope', function ($rootScope) {
$rootScope.$on('deviceready', function () {
$rootScope.$on('online', function () { $rootScope.isOnline = true; });
$rootScope.$on('offline', function () { $rootScope.isOnline = false; });
if (navigator.connection.type == Connection.NONE)
$rootScope.isOnline = false;
else
$rootScope.isOnline = true;
});
$rootScope.$watch('isOnline', function (val) { alert('watch isOnline:'+val);})
}])
Why defining angular event listener doesn't work? In fact it doesn't get the event at all!
What is the correct way of doing this in angular?
For document DOM element Angular uses a wrapper ($document) and to bind relating events it relies on jQuery/jqLite.
So you can use $document.on("event-type",function( event ){ ... }); or angular.element(document).bind("event-type",function( event ){ ... }); to attach an handler to document.
But surely you can't use $rootScope.$on to listen to an event attached to document element.
Try this:
app.run(function($window, $rootScope) {
$rootScope.online = navigator.onLine;
$window.addEventListener("offline", function () {
$rootScope.$apply(function() {
$rootScope.online = false;
// $window.location.reload();
});
}, false);
$window.addEventListener("online", function () {
$rootScope.$apply(function() {
$rootScope.online = true;
// $window.location.reload();
});
}, false);
});
And add network information plugin in cordova
$('.slideArrow').toggle(function (event) {
//some code
}, function (event) {
//some code
});
This works fine for content which are loaded on page-load.But the same function does not work for content loaded with ajax.It just does not intercept the click.
What should I do?
In an other scenario,i faced a same problem(not for toggle,for click) and sorted it this way.I dont know what to do for toggle?
$('.common-parent').on('click','.target-of-click',function(){
//some code
})
The flag method :
var flag = false;
$(document).on('click', '.slideArrow', function(event) {
if (flag) {
// do one thing
}else{
// do another thing
}
flag = !flag;
});
the data method
$(document).on('click', '.slideArrow', function(event) {
if ( $(this).data('flag') ) {
// do one thing
}else{
// do another thing
}
$(this).data('flag', !$(this).data('flag'));
});
Based on this script I found on Stack Overflow, I tried adapting it to fade out an editor panel on a HTML page. Fading out works fine, but I'd like limit the fade-out from being triggered.
What I hope to accomplish is to prevent the fade-out whenever the mouse is over the editor panel (and child controls) or when there's keyboard activity in one of the input children.
var i = null;
// this part is working
$("#my-canvas").mousemove(function() {
clearTimeout(i);
$("#panel,#btn-panel-toggle,#fps").fadeIn(200);
var i = setTimeout('$("#panel,#btn-panel-toggle,#fps").fadeOut(800);', 3000);
})
// this part is not working
$("#panel").mouseover(function() {
clearTimeout(i);
})
For a live example, please check out this jsFiddle.
Two independent variables are needed here to indicate, whether the input#sc-url is focused and div#panel is hovered by mouse or not. Then you can handle the timer with these functions:
$(function () {
var t = null; //timer
var is_url_focused = false, is_panel_hovered = false;
var panel = $('#panel');
function hide_panel(){
if (t) {
clearTimeout(t);
}
t = setTimeout(function(){
if (is_url_focused || is_panel_hovered) {
return;
}
panel.stop().animate({
opacity:0
},800, function(){
panel.hide(); // == diplay:none
});
},2000);
}
function show_panel(){
panel.show().stop().animate({
opacity:1
},800);
}
$('#my-canvas').mouseenter(function(){
show_panel();
}).mouseleave(function(){
hide_panel();
});
$('#panel').hover(function(){
is_panel_hovered = true;
show_panel();
}, function(){
is_panel_hovered = false;
hide_panel();
});
$('#sc-url').focus(function(){
is_url_focused = true;
show_panel();
}).blur(function(){
is_url_focused = false;
hide_panel();
});
$('#btn-panel-toggle').click(function(){
if (panel.is(':hidden')) {
panel.css('opacity',1).show();
} else {
panel.css('opacity',0).hide();
}
});
});
http://jsfiddle.net/w9dv4/3/
I am trying to display a loading spinner when a user clicks on the submit button. I tried implementing the solution provided here, but it's not working.
I have validated that the function is being called and that the target div is being found by jQuery by tossing in an alert(spinner.innerHTML) as follows:
<script type="text/javascript">
$(document).ready(function () {
var spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>
As expected, when I click on my button, I get an alert window with the text "Loading..." which is the text from my div. However, if I add a second alert after the call to spinner.show(); it doesn't pop up, which leads me to believe that the call to spinner.show(); is causing jQuery to fail.
This is my first foray into jQuery, so I'm struggling with how to debug this and find out what is breaking.
Based on the debugging procedures, it looks like your project has not included jQuery library.
Please enable jQuery in your project to make use of jQuery functionality.
you should define spinner correctly(i.e. in global)
<script type="text/javascript">
var spinner;
$(document).ready(function () {
spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>
You're trying to access the spinner variable without having scope to it in the function.
<script type="text/javascript">
$(document).ready(function () {
var spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
var spinner = $("div#spinner");
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
var spinner = $("div#spinner");
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>
When I click on the 'slide-toggle' link, my url turns from mysite.com to mysite.com/#
I was told that I needed to put a 'return false' somewhere in here but I'm not sure where. Can someone kindly help me out?
$(document).ready(function() {
$('a#slide-up').click(function () {
$('.slide-container').slideUp(function(){
$('#slide-toggle').removeClass('active');
});
return false;
});
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
});
});
It would be nicer not to use return false but to use event.preventDefault instead. You can put this at the very top of your event handler:
$('a#slide-toggle').click(function(e) { // note e added as the function's parameter
e.preventDefault();
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
});
This has the same effect as return false, but with the following advantages:
It is semantically more logical -- it does what it says
You can put it at the head of the function, so it is immediately obvious
You can have multiple exit points without having to ensure they are all return false
If any part of your code causes an error, the default action will still be prevented
like this:
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
return false;
});
Probably you need to add the return false also in the $('a#slide-toggle').click() function
$(document).ready(function() {
$('a#slide-up').click(function () {
$('.slide-container').slideUp(function(){
$('#slide-toggle').removeClass('active');
});
return false;
});
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
**return false;**
});
});
I think, it should be like this:
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
return false;
});
You have one at the end of slide-up; add one to the end of slide-toggle.