I have just started trying to learn JQuery event handling, and cannot seem to understand why this is happening. I read through the section on event handling in the documentation, but I am still having trouble manipulating objects on the page from the event handler. I get the basic idea of event bubbling up through the DOM, and have been successful i attaching primitive functions that operate on the specific object to which they are attached, or which can launch an alert. Below is the HTML, CSS, and Javascript, and the trouble is specifically with this handler:
$("#picTwo").click(function() {
alert("Handle for left arrow");
$("#picOne").slideDown(3000, linear, function()
{
alert("Why doesn't it work?");
});
Here is the full code
$(document).ready(function() {
$("#leftButton").click(function() {
alert("Handle for left button click()");
$(this).hide();
$("#picOne").slideDown(3000, linear, function() {
alert("Why doesn't it work?");
});
});
$("#blockRed").click(function() {
$(this).hide();
});
$("#blockBlue").click(function() {
alert("Handle for blue block");
});
$("#blockGreen").click(function() {
alert("Handle for green block");
});
$("#picOne").click(function() {
alert("Handle for right arrow");
});
$("#picTwo").click(function() {
alert("Handle for left arrow");
$("#picOne").slideDown(3000, linear, function() {
alert("Why doesn't it work?");
});
});
});
#picOne {
float: right;
margin-right: 0px;
}
#picTwo {
float: left;
}
.friendImg {
width: 250px;
height: 100px;
border: #000;
display: inline-block;
margin-right: auto;
margin-left: auto;
margin-bottom: 2%;
text-align: center;
padding-left: 25%;
}
.lightRedBox {
background-color: rgb(23, 0, 0);
width: 800px;
height: 400px;
border: #09C;
border-width: thin;
margin-top: 10%;
margin-left: 5%;
}
#blackBox {
background: black;
height: 400px;
width: 100%;
}
#blockBlue {
background: blue;
width: 75px;
height: 75px;
}
#blockRed {
background: red;
width: 75px;
height: 75px;
}
#blockGreen {
background: green;
width: 75px;
height: 75px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bonsai Exquisite - Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/galleryCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="blackBox">
<div class="lightRedBox" id="firstBox">
<h4 class="boxTitle">Bonsai </h4>
<img src="images/coolFilteBonsai.jpg" alt="bonsai image" id="leftFriendImage" class="friendImg">
<p class="boxBlurb">This associatin has been assisting local bonsai associations for over fifty years, and has contributed to the larger pattern of bonsai growth globally. In the past five years, the association has been dealing with blah blah blsah blah.....</p>
<button type="button" id="leftButton" class="leftClassButton" name='leftClassName' onMouseOver="leftBotWinShine()" onMouseOut="botWinShineout()" onClick="closeLeftBox()">Close Me!</button>
</div>
</div>
<div id="vanishing">
<div id="blockBlue">
</div>
<div id="blockRed">
</div>
<div id="blockGreen">
</div>
</div>
<img src="images/images/rightPage.png" id="picOne">
<img src="images/images/leftPage.png" id="picTwo">
</body>
</html>
Thanks for your time and help, it is greatly appreciated.
slideDown() used for animate in some content which is not visible. Here your content is already visible so slideDown() seems not working although it is working but cannot be seen. To get animation you need to hide the element by changing css display:none or else add .hide() method before slideDown() like
$("#picTwo").click(function() {
$("#picOne").hide().slideDown(3000, "linear", function() {
alert("Why doesn't it work?");
});
});
Related
I cannot make a simple click event on the "canvas" using JQuery click function.
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>
"test" message is appearing but functions above is not working. Other siblings of div "middle" (I did not include since I tried to remove them for testing and it still happening) can execute events but only this div and inside cannot execute a single event.
Tried also to console.log($("#canvas")) and it fetches some data below.
[div#canvas]
here is the complete html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="/demo/resources/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/demo/resources/themes/custom/css/custom.css" rel="stylesheet" />
<script src="/demo/resources/themes/bootstrap/js/bootstrap.min.js"></script>
<script src="/Sketchy-demo/resources/themes/custom/js/custom.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>App Page</title>
</head>
<body>
<div class="middle">
<div id="canvas"></div>
</div>
</body>
</html>
custom.css
.middle{
z-index: -1;
position: relative;
display: block;
height: 88%;
width:100%;
top: 0px;
left:0px;
margin: 0px;
background-color: transparent;
}
#canvas{
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
Below is the image of the divs:
This is really frustrating because this is a basic function that I cannot call.
Edit:
I added a https://jsfiddle.net/5mtt2khu/
Please let me know any questions.
Thanks!
Do with event.target element .And match with condition
Updated js Fiddle
$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if($(e.target).attr('id')== 'canvas'){
alert('canvas')
//do stuff for canvas
}
else{
alert("middle");
//do stuff for middle
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>
Updated
Remove or change the z-index
$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if ($(e.target).attr('id') == 'canvas') {
alert('canvas')
//do stuff for canvas
} else {
alert("middle");
//do stuff for middle
}
});
});
.middle {
z-index:0;/*remove or change > -1*/
position: relative;
display: block;
height: 88%;
width: 100%;
top: 0px;
left: 0px;
margin: 0px;
background-color: red;
}
#canvas {
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>
Your code seems to work.
So the problem must come from other things. Here is some possibilities :
JQuery is not correctly installed
You have a javascript error before so this is never executed
Your html is dynamically added after you load the event handler
You have an other div with the same id somewhere
If your html is dynamically added, I recommend you to do something like this
$(document).ready ( function () {
$(document).on ("click", "#canvas", function () {
alert("canvas");
});
$(document).on ("click", "#middle", function () {
alert("middle");
});
});
If you have several "canvas" id, you can do something like :
$("[id=canvas]").click(function () {
alert("canvas");
});
I think you are looking for something like this:
$(document).ready(function(){
alert("test");
$("#canvas").click(function(e){
alert("canvas");
e.stopPropagation();
});
$(".middle").click(function(){
alert("middle");
});
});
.middle {
width: 200px;
height: 200px;
background: red;
}
#canvas {
width: 100px;
height: 100px;
background: green;
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>
Hope it helps :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="middle">
<div id="canvas" style="width:10px;height:10px;background:red;"></div>
</div>
</body>
<script>
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
</script>
Try to change the div to input type or button.It works when I specified the color to the div and clicking it.So, without knowing where to click the event was not working.
Your jQuery code is actually working fine as it should. The problem here is propably because the canvas has no height and width defined, so it's too small to actually be able to click on it.
Give the divs a height and width like the below code snippet and you'll see that the jQuery gets executed correctly.
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle" style="border: 1px solid black; height: 50px; width: 100px;">
<div id="canvas" style="border: 1px solid red; height: 15px; width: 30px;"></div>
</div>
I have a simple jQuery website, where there are four blocks, when you press a block, another block slides out of it. It all works, for the most part, however, i was wondering how i could get the block that slides out to move the other elements below it down.
$(document).ready(function() {
var height = 145;
var speed = 600;
$("#one").animate({
width: "100%",
height: height
}, speed, function() {
$("#two").animate({
width: "100%",
height: height
}, speed, function() {
$("#three").animate({
width: "100%",
height: height
}, speed, function() {
$("#four").animate({
width: "100%",
height: height
}, speed);
});
});
});
$("#one").click(function() {
$(".dropDown").not("#oneS").slideUp();
$("#oneS").slideToggle();
});
$("#two").click(function() {
$(".dropDown").not("#twoS").slideUp();
$("#twoS").slideToggle();
});
$("#three").click(function() {
$(".dropDown").not("#threeS").slideUp();
$("#threeS").slideToggle();
});
$("#four").click(function() {
$(".dropDown").not("#fourS").slideUp();
$("#fourS").slideToggle();
});
});
#charset "utf-8";
.selectors {
position: relative;
border-radius: 30px;
}
#one {
background-color: blue;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#two {
background-color: red;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#three {
background-color: yellow;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#four {
background-color: green;
height: 400px;
width: 100px;
}
.dropDown {
background-color: #E9E9E9;
height: 300px;
width: 100%;
position: absolute;
//overflow:auto;
border-radius: 10px;
z-index: 1;
}
#oneS {
display: none;
top: 150px;
}
#twoS {
display: none;
top: 150px;
}
#threeS {
display: none;
top: 150px;
}
#fourS {
display: none;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jQuery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="one" class="selectors">
<div id="oneS" class="dropDown"></div>
</div>
<div id="two" class="selectors">
<div id="twoS" class="dropDown"></div>
</div>
<div id="three" class="selectors">
<div id="threeS" class="dropDown"></div>
</div>
<div id="four" class="selectors">
<div id="fourS" class="dropDown"></div>
</div>
</body>
</html>
Four blocks:
Slid out block:
As you can see when the block is slid out, it covers over the red and yellow block. Instead i would like the sliding block to move the red and yellow block down the page, and out from under the sliding block.
There's a few things wrong.
The general issue is that you're fighting the natural behavior of the HTML since the .dropDown elements are children of the .selectors elements. You would get closer to your desired result if they were siblings.
Make them siblings and remove some troublesome CSS properties like position:absolute and top and you should get closer to your desired effect.
Here is a JSBin of a working demo: http://jsbin.com/titibununu/1/edit?html,css,js,output
I'm a fourteen year old trying to cope with a fairly new language so please bear with me. I made a quick html doc so that I can express my problem as clearly as possible.
If you run the snippet, you can see that by clicking the menu button the body is pushed 285 pixels from the left, and the menu is shifted to 0px from -285px.
I want to be able to click on the menu button again and shift the body back to 0, and the menu back to -285. Please look under the J Query to see the processes I've tried so far.
var main = function(){
$('.menu_button').click(function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
});
$('.menu_button_active').click(function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$('.menu_button_active').addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
/* At first, I tried to just plug in the same class name in the second function, however I
quickly realized that by doing so the menu will automatically close since both functions
will run at the same time.
My understanding is that in order for the function to being separately, the menu button
would have to have a different class at the time of the click. So, I tried using
toggleClass to remove the menu_button class while at the same time adding the
menu_button_active class so that on click, the menu_button_active class can act as the
same button, but used for a different function (closing the menu.) Perhaps my understanding
of what the toggleClass method was used for was flawed, however here is the code anyway to
show you what I had done.
$('.menu_button').toggleClass("menu_button" "menu_button_active");
in place of
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
(this doesn't work)
So, my final method is shown above. By separately adding and removing the class I don't see
why it doesn't work after working out what the js would be doing. First the menu_button
would be clicked and the page is shifted, afterwards the menu_button would have a different
class name, so that it can be called by the menu_button_active function, which then
changes the class again so that the menu button can open again and so on.
*/
#first_row {
width: 100%;
height: 25em;
position: absolute;
top: 3em;
box-shadow: 0px 5px 5px #888888;
}
#sec2 {
background-color: #2CD148;
height: 100%;
width: 50%;
float: left;
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
header {
width: 100%;
height: 3em;
background-color: #404040;
position: fixed;
}
.menu {
background-color: black;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu_button {
width: 4em;
cursor: pointer;
}
.menu_button_active {
width: 4em;
cursor: pointer;
}
.menu_row {
width: 100%;
height: 0.25em;
margin-top: 0.5625em;
background-color: white;
border-bottom: 1px solid #2CD148;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
<html>
<head>
<title>Samer | Welcome</title>
<link rel="shortcut icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/Interactive.js"></script>
</head>
<body>
<header>
<div class="menu"></div>
<div class = "menu_button">
<div class = "menu_row"></div>
<div class = "menu_row"></div>
<div class = "menu_row"></div>
</div>
<span></span>
</header>
<div id = first_row>
<section id = "sec1"></section>
<section id = "sec2"></section>
</div>
</body>
</html>
What's the flaw in this logic?
You define your class from javascript so you need to attach event to your class name. see http://api.jquery.com/on/
var main = function(){
$('body').on('click', '.menu_button', function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$(this).addClass('menu_button_active').removeClass('menu_button');
});
$('body').on('click', '.menu_button_active', function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$(this).addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
#first_row {
width: 100%;
height: 25em;
position: absolute;
top: 3em;
box-shadow: 0px 5px 5px #888888;
}
#sec2 {
background-color: #2CD148;
height: 100%;
width: 50%;
float: left;
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
header {
width: 100%;
height: 3em;
background-color: #404040;
position: absolute;
}
.menu {
background-color: black;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu_button {
width: 4em;
cursor: pointer;
}
.menu_button_active {
width: 4em;
cursor: pointer;
}
.menu_row {
width: 100%;
height: 0.25em;
margin-top: 0.5625em;
background-color: white;
border-bottom: 1px solid #2CD148;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
<html>
<head>
<title>Samer | Welcome</title>
<link rel="shortcut icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/Interactive.js"></script>
</head>
<body>
<header>
<div class="menu"></div>
<div class = "menu_button">
<div class = "menu_row"></div>
<div class = "menu_row"></div>
<div class = "menu_row"></div>
</div>
<span></span>
</header>
<div id = first_row>
<section id = "sec1"></section>
<section id = "sec2"></section>
</div>
</body>
</html>
You lost .menu_button_active, I can't see in nowhere of the code.Your second click function never runs, because the trigger button is missing.
var main = function(){
$('body').on('click', '.menu_button', function(){
// $('.menu_button').click(function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
});
$('body').on('click', '.menu_button_active', function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$('.menu_button_active').addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
Ok, I am creating a landing page, where what I want to happen, is the page split in half, and either side slide off of the screen, and the main page is left. I almost have it, but what the right side is doing, is whenever the window is at certain sizes, it is going below the left side. I'm not sure quite how to fix this, and everything I try doesn't really work, and there I haven't been able to find any answers online. Thanks for any help
CODE
body,
html {
min-width: 100%;
min-height: 100%;
margin: 0px;
background-color: gray;
}
#landingDiv {
min-width: 1100px;
height: 100vh;
}
#lBanText {
font-size: 50px;
}
#lBanText p {
top: 0;
bottom: 0;
position: relative;
margin: auto;
margin-top: 2px;
}
.lBan {
dispay: block;
width: 100%;
min-height: 60px;
background-color: red;
padding: 0px;
postion: relative;
float: left;
}
#leftHalf,
#rightHalf {
min-width: 50%;
position: relative;
float: left;
height: 100%;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>
Name of Site
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.addEventListener("keydown", checkKey);
function checkKey(e) {
var key = e.keyCode;
//alert(key);
if(key === 79) {
$("#leftHalf").hide("slide", {direction: "left"}, 1000);
$("#rightHalf").hide("slide", {direction: "right"}, 1000);
}
};
});
</script>
</head>
<body>
<div id="landingDiv">
<div id="leftHalf">
<div id="lBanText" class="lBan">
<p>
Title of Website Here
</p>
</div>
</div>
<div id="rightHalf">
<div class="lBan">
</div>
</div>
</div>
</body>
</html>
I have already seen the docs for jquery mobile but couldn't understand how to integrate it on my mobile website. The docs are here at
http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html
Actually the gif image doesn't animate on 2.x android devices so I am thinking about making a text only kind of pre loading widget.
I tried changing it via css like this
.ui-icon-loading {
background: url(themes/images/custom-ajax-loader.gif);
}
but the new imag doesn't scale properly and the old background is still visible.
I am a complete noob with javascript.can someone plz help me with this?
You are mentioning the jQM 1.2 Alpha Docs so my answer is based in this jQM version.
Below you can find 2 options to change the default loader image.
Solution 1
As stated in the jQM 1.2 Alpha Docs:
When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit. Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
To configure the loading dialog globally the following settings can be defined on its prototype during the mobileinit event:
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
Below you can find a working example in which you can fully customize the loader in the html prototype option.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.loading('show');
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
Solution 2
Override the default CSS styles used to depict the page loader.
EDITED
For jQM 1.1.1 version there are the following configurable options:
loadingMessage string, default: "loading"
Set the text that appears when a page is loading. If set to false, the message will not appear at all.
loadingMessageTextVisible boolean, default: false
Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.
loadingMessageTheme string, default: "a"
The theme that the loading message box uses when text is visible.
Code example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loadingMessageTheme = 'e';
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "test";
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.showPageLoadingMsg();
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
Furthermore you could try to override the default CSS used to style the jQM loader. More specifically you could modify or override the styles in the section loading screen and the style in the section loading icon which are used to depict the page loader.
You will find here the CSS used in jQM 1.1.1.
/* loading icon */
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background-size: 46px 46px;
}
/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }