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
});
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.
I am very new to web development. I am trying to use jquery to show slider on the web-page. However, I am not able to see the silder on the web-page. I tried debugging the code via. firebug. However, I don't see any error over there. Can somebody please tell me on what I am missing possibly?
I am using Linux - Fedora core 16 and Firefox- 38.0.5 to run this code
index.html
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
Here is the jqueryTutorial.js file.
(function() {
$("#slider").slider();
})();
There are no errors in the firebug console.
Here is the screen shot.
Finally, I did the following from the source - jquery slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Now, I see the following error on the firebug.
ReferenceError: $ is not defined
$(function() {
index.html (line 11, col 2)
Try this:
jQuery(document).ready(function () {
(function() {
$("#slider").slider();
})();
});
EDITED:
Ok , the issue comes from the tags.
You wrote this:
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
And you HAVE to write this:
<!DOCTYPE html>
<html>
<head>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
</head>
<body>
<div id="slider"> </div>
</body>
</html>
;-)
EDITED AGAIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
jQuery(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Include your <script> tags before closing body tag </body>. Moreover you have some mistakes in your markup, like the <title> should be inside <head> tag( for heading use <h1> upto <h7> tags ). Like this:
<!DOCTYPE html>
<html>
<head>
<title>"My Page"</title>
</head>
<body>
<h1>hello jQuery</h1>
<div id="slider"></div>
<!-- load scripts -->
<script src="jquery-2.1.4.min.js">
</script>
<script src="js/jquery-ui.js">
</script>
<script src="js/jqueryTutorial.js">
</script>
</body>
</html>
And your javascript will simply be:
$('#slider').slider();
if that doesn't works try:
$(document).ready( function () {
$('#slider').slider();
}
Because if you include them at beginning, whole HTML document will not be completely loaded at the time the scripts get executed, so the script won't be able to find elements.
And I don't think .slider() gives you what you want. I suggest you learn more first. Try www.codecademy.com
I was able to set shadowbox to initailize upon page load to show a photo, but I need it to show a bunch of photos, and after looking at the shadowbox site, I cannot find how to do this.
html for page:
<link rel="stylesheet" type="text/css" href="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
window.onload = function() {
Shadowbox.open({
content:'images/IMG00255-20110531-1435.jpg',
player: "img",
title: "Before and After- Hyundai Tiburon",
height: 400,
width: 700
});
};
</script>
I couldn't find a way to do it with shadowboxes built in functions but this is pretty simple and should work fine.
<!DOCTYPE html>
<html>
<head>
<title>Shadowbox</title>
</head>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<style type="text/css">
/* Hide all <a> tags */
a[rel~="shadowbox"]{
display: none;
}
</style>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- on page load, fake a click to call shadowbox -->
<body onload="document.getElementById('first').click();">
<!-- put all gallery items like this. Only the first link needs the id "first". -->
</body>
</html>
I have two jquery javascripts (scrollpane and last.fm one). However, whichever one is posted later in the <head> is the one that executes and shows up on the page and the other one disappears. I don't know how to fix this. Here is my head code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--LASTFM-->
<link href="css/engage.lastfm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/engage.lastfm.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Begin jQuery goodness
$('div#lastfm').lastFM({
username: 'angrypink',
apikey: '255b0123e857aa3f6fd52a76b70ec15d',
number: 2,
artSize: 'medium',
onComplete: function(){
}
});
// End jQuery goodness
});
</script>
<!--JSCROLL-->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" id="sourcecode">
$(document).ready(function() {
var $images = $(".tumblr img")
, imageCount = $images.length
, counter = 0;
$images.one("load",function(){
counter++;
if (counter == imageCount) {
$('.scroll-pane').jScrollPane();
}
}).each(function () {
if (this.complete) {
$(this).trigger("load");
}
});
});
</script>
</head>
You make a mistake : You have multiple definition of jquery :
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Try to just put this one time, keep this one : <script src="js/jquery-1.10.2.min.js"></script>
Because is local one, and not depending on google
Try to clean a bit because multiple definition of jquery can create error
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