Here the code which i have used in my phonegap based application with sencha touch. I have tried with checking for internet connection availablity.The alert works only when conection available.When Internet connection failed it doesnot showing alert.Here the code
<!DOCTYPE HTML><html lang=en-US>
<head>
<meta http-equiv=Cache-control content=no-cache />
<meta name=format-detection content="telephone=no"/>
<meta name=apple-mobile-web-app-capable content=yes />
<title>WishList</title>
<link rel="stylesheet" href="resources/css/sencha-touch.css" />
<link rel="stylesheet" href="resources/css/app.css" />
<link href="resources/css/mobiscroll.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var a=navigator.onLine;
if(a){
alert('online');
}else{
Ext.Msg.alert("Alert!", "Please check your internet connection!");
}
</script>
<script src="libraries/sencha/sencha-touch-all.js" defer></script>
<script src="libraries/jquery/jquery.1.10.1.js" defer></script>
<script src="libraries/mobiscroll/mobiscroll.min.js" type="text/javascript" defer> </script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="app/views/app.js" defer></script>
<script src="app/views/JSfunctions.js" defer></script>
<script type="text/javascript" src="app/views/cordova.js"></script>
</head>
<body>
</body>
</html>
Whats the problem with the code?PLease help me
zvona answer points the issue, but his suggestion (moving the check to the end) is not guarenteed to work.
You need the following code (that waits till Ext has been initialized)
Ext.onReady(function(){
var a=navigator.onLine;
if(a){
alert('online');
}else{
Ext.Msg.alert("Alert!", "Please check your internet connection!");
}
});
You're calling Ext.Msg.alert before your framework (Sencha / ExtJS) is loaded. Move the navigator.onLine checking script to the bottom
Related
This my code.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="~/Style/fullcalendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/Custom/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/Custom/moment.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
})
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Doing with asp.net MVC project.It nothing show.What happen and what need more in my code?I just follow do with FullCalendar Basic Usage .Thanks.
So I am working on a simple image cropping function using pre-built Yahoo UI. However, it seems the cropping box or whatever it is called lies under the image, or maybe it's just transparent.
Here is my code, you can just copy and paste to inspect.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/resize.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/imagecropper.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/imagecropper/imagecropper-min.js"></script>
<img id="yui_img" src="http://developer.yahoo.com/yui/examples/imagecropper/assets/yui.jpg">
<script>
(function(){var crop = new YAHOO.widget.ImageCropper('yui_img');})();
</script>
Here is the URL to the demo Yahoo provides
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop_clean.html
Please help me. Thanks in advance!
This is the code that was working for me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Simple Crop Interface</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/imagecropper/imagecropper-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Simple Crop Interface</h1>
<div class="exampleIntro">
<p>This example shows how to make an image croppable.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<img id="yui_img" src="http://developer.yahoo.com/yui/examples/imagecropper/assets/yui.jpg">
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
When I removed the last script ie
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
This code then the box dissappeared please check with your code. Maybe the javascript is essential or maybe ur missing some thing else. Better to keep all the js and css and try debugging removing one by one. You will get to know the specific point. And my code is hopefully working please let me know if it isn't. :)
This question already has answers here:
jQuery Mobile loading message
(11 answers)
Closed 7 years ago.
I am building a basic jqm page and at the end of the page I am getting a big tag with the text "loading". I have seen a lot of answers but no one working for me. I have this html code:
<!DOCTYPE html>
<html>
<head>
<title>StackMob JS SDK Examples</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="cordova-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery_migrate.js"></script>
<script type="text/javascript" src="js/jquery_mobile.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.7.0-bundled-min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$.mobile.hidePageLoadingMsg();
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">...</div>
<input type="button" value="bbbb" id="bb">
<div data-role="content">...</div>
<div data-role="footer">...</div>
</body>
</html>
and this in my main.js file:
$(window).load(function(){
$.mobile.hidePageLoadingMsg();
});
jQuery('document').ready(function() {
$.mobile.hidePageLoadingMsg();
jQuery('#bb').click(function(){
$.mobile.hidePageLoadingMsg();
});
});
Nothing is working! Thanks!
You need to do it during mobileinit event, like this:
<script type="text/javascript">
$(document).bind('mobileinit',function(){
$.mobile.loadingMessage = false;
})
</script>
One more thing, this must be done before jQuery Mobile is loaded, like this:
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript">
$(document).bind('mobileinit',function(){
$.mobile.loadingMessage = false;
})
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
Here's an jsFiddle example: http://jsfiddle.net/Gajotres/RwRx9/
More about this can be found here: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html
If you want to completely remove the loading message, there is a global property to set that
$.mobile.loadingMessage = false;
If you want to do it in page level. Bind it inside the "mobileinit" function.
$("your page").on("pageinit", function(){
// hide here
});
I cannot understand why my Cufon is not working, All .js files load fine:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Company Name</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="includes/css/style.css?v=2" media="all">
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="includes/js/jquery-1.6.min.js"%3E%3C/script%3E'))</script>
<script src="includes/js/cufon.js"></script>
<script src="includes/js/Springsteel_Lig_300.font.js"></script>
<script>
window.addEvent('domready',function() {
Cufon.replace('header h1');
});
</script>
<body>
<div id="container">
<header>
<h1>Company</h1>
<div id="logo">Home</div>
Try with changing:
<script>
window.addEvent('domready',function() {
Cufon.replace('header h1');
});
</script>
to just:
<script type="text/javascript">
Cufon.replace('header h1');
</script>
It works for me after such change (using Vegur.font.js font, tested on Opera 11 and Google Chrome 11).
Edit:
Works as well with Springsteel_Lig_300.font.js font. I just donloaded Springsteel Light font (springsteel-lig.otf) and used that site to generate in js format.
Using the plugin from: Famspam's Facebox
however I seem to be encountering some issues getting it to open. The following is my head contents:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Prepotence</title>
<link rel="stylesheet" href="style2.css" type="text/css"/>
<script src="/src/jquery.js" type="text/javascript" charset="utf-8"></script>
<link href="/src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : '/src/loading.gif',
closeImage : '/src/closelabel.png'
})
})
</script>
</head>
And whenever I attempt to open anything with code similar to:
Link
Absolutely nothing shows up, at all.
$(function(){
$('a[rel*=facebox]').facebox({
loadingImage : '/src/loading.gif',
closeImage : '/src/closelabel.png'
});
});
I've checked it and it's working fine, you can change both $ to jQuery if you're using other frameworks $-related :)
Cheers
G.