I'm new to JS. I'd like to achieve exactly this effect showcasing photos: kristianhammerstad.com
I'm already using masonry, see the code: http://codepen.io/Kiks/pen/YWzNjr
Images will have same width but different height. That's the only rule.
The problem is shown on video simulation: jmp.sh/mMcu1Bb – as soon as images have different height, the grid is broken and images are placed on each other. But when I have same height of linked images, the grid is OK.
Funny thing is that the issue you see in the video is only on my website (Chrome, Safari) But it's working nicely in Codepen (after first load, even if I resize browser window, always OK). Can you explain this? What special does Codepen include there?
This is exactly my code. Could you tell me what I'm missing and where? I'm just learning, please have patience. Thank you
/* Masonry magic */
.container { width: 96% !important; margin: 0 auto; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#masonry { margin: 0 auto; width: 100%; position: relative; /*z-index:2001;*/ }
.item {
width: 460px; height: auto; background: invisible;
margin: 0 auto 20px auto;
/*float: left;*/
}
.card-text {
width: 460px;
padding-right: 40px;
}
/* End of Masonry magic */
body { padding-top: 60px; }
.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
.lead {
font-weight: 400;
font-size: 24px;
line-height: 1.6;
color: #444444;
margin-bottom: 40px;
}
.text {
text-align: left;
font-size: 18px;
line-height: 1.7;
color: #444444;
}
p {
margin-bottom: 20px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Showcase Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Own styles -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- <div id="masonry">
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
</div> -->
<div id="masonry">
<div class="item"><img src="http://placehold.it/460x500"></div>
<div class="item"><img src="http://placehold.it/460x800"></div>
<div class="item"><img src="http://placehold.it/460x600"></div>
<div class="item"><img src="http://placehold.it/460x460"></div>
<div class="item"><img src="http://placehold.it/460x300"></div>
<div class="item"><img src="http://placehold.it/460x400"></div>
<div class="item"><img src="http://placehold.it/460x200"></div>
<div class="item"><img src="http://placehold.it/460x500"></div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#masonry');
var msnry = new Masonry( container, {
columnWidth: 460,
gutter: 20,
isFitWidth: true,
itemSelector: '.item'
});
</script>
</body>
</html>
I found it! Just one bracket was in addition. Now, I'm not loading whole window, just the div with images. I hope it's really okay but finally it looks like my code works properly.
Working code: http://codepen.io/Kiks/pen/oLNBrG
$('#masonry').imagesLoaded(function() {
$('#masonry').masonry({
itemSelector : '.item',
columnWidth : 460,
isAnimated: true,
gutter: 20,
isFitWidth: true,
animationOptions: {
duration: 700,
easing: 'linear',
queue: false
}
});
});
Although, there's still a tiny problem. Look how you can see just one column before the proper grid is created: http://jmp.sh/5wqeF4Q (I'm refreshing the page twice)
Any ideas how to get nice grid immediately?
Related
Is there an approach to to create a centered owl-carousel where each image has the same height without losing its aspect ratio?
I tried to calculate the image sizes with JS/jQuery, but then the calculation of the owl-carousel gets messed up. Same result with CSS s. example (JSFiddle):
$(document).ready(function () {
$('.loop').owlCarousel({
center: true,
items: 3,
loop: true,
margin: 20
});
});
.owl-carousel .owl-stage {
height: 150px;
}
.owl-carousel .owl-item {
height: 100%;
}
.owl-carousel .owl-item .item {
height: 100%;
}
.owl-carousel .owl-item img {
height: 100% !important;
width: auto !important;
margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="loop owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/320x460/ff0000/000000?text=IMG 01" /></div>
<div class="item"><img src="http://via.placeholder.com/460x320/00ffff/000000?text=IMG 02" /></div>
<div class="item"><img src="http://via.placeholder.com/100x80/00ff00/000000?text=IMG 03" /></div>
<div class="item"><img src="http://via.placeholder.com/50x100/ff00ff/000000?text=IMG 04" /></div>
<div class="item"><img src="http://via.placeholder.com/70x80/ffff00/000000?text=IMG 05" /></div>
</div>
The current div/image should be
in the center of the carousel,
has the same height like all other items
keeps it aspect ratio and
is side by side to the previous or next item.
If the element is bigger wider then the viewport, well than it gets cut.
Is there even a method to achieve that with the owl-carousel?
I checked some other similar questions on SO but as far I can see they have all different focus:
Image slider: maintaining equal height for all images while keeping slider responsive
// overrides the aspect ratio
Owl Carousel align each item vertically when their height not equal
// not the same height of each item*
I just double checked the auto-height demo...
To enable use autoHeight: true. At the moment works only with 1 item on screen. The plan is to calculate all visible items and change height according to highest item.
Seems like there is not such an options yet.
If all of your images have the same height - try adding autoWidth: true:
$(document).ready(function () {
$('.owl-carousel').owlCarousel({
center: true,
margin:10,
loop:true,
autoWidth:true,
items:4
})
});
.owl-carousel .owl-stage {
height: 200px;
}
.owl-carousel .owl-item {
height: 100%;
}
.owl-carousel .owl-item .item {
height: 100%;
}
.owl-carousel .owl-item img {
height: 100% !important;
width: auto !important;
margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="loop owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/320x460/ff0000/000000?text=IMG 01" /></div>
<div class="item"><img src="http://via.placeholder.com/460x320/00ffff/000000?text=IMG 02" /></div>
<div class="item"><img src="http://via.placeholder.com/100x80/00ff00/000000?text=IMG 03" /></div>
<div class="item"><img src="http://via.placeholder.com/50x100/ff00ff/000000?text=IMG 04" /></div>
<div class="item"><img src="http://via.placeholder.com/70x80/ffff00/000000?text=IMG 05" /></div>
</div>
I have a 1 column/3 rows grid with 3 equal sliders, 1 in each row. Each slider contains the same sized slides.
I set the parent container to 100vh, each child filling up 1/3 of the screen's height, 100% of the screen's width.
What I am struggling with is to keep the images within the containers centered and always fully visible. In essence, I would like to have the sliders fill up the whole width and height of the screen, but the images within the slides always fully visible with a flexible padding left and right. Right now these fill up the full width in each row but only parts of the images are visible height-wise (cropped depending on aspect ratio change)
Here is the code I got so far (the snippet doesn't seem to render right even thought it doesn't give me any console prompts and runs just fine in my editor):
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.theme.default.min_home_up_6.css">
<style>
.owl-carousel {
width:100%;
}
.grid-1 {
display: grid;
height: 100vh;
grid-template-columns: repeat(1,1fr);
grid-template-rows: repeat(3,1fr);
}
/* items */
.grid-1 div {
color: white;
max-height: calc(100vh /3);
font-size: 0px;
padding: 0px;
}
/* specific item styles */
.item-1 {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
width: auto;
height: auto;
overflow: hidden;
}
.item-2 {
grid-column: 1 / span 1;
grid-row: 2 / span 2;
width: auto;
height: auto;
overflow: hidden;
}
.item-3 {
grid-column: 1 / span 1;
grid-row: 3 / span 3;
width: auto;
height: auto;
overflow: hidden;
}
#import "compass/css3";
</style>
</head>
<body>
<section class="grid-1">
<div class="item-1">
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
</div>
</div>
<div class="item-2">
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
</div>
</div>
<div class="item-3">
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
<div class="item"><img src="http://via.placeholder.com/150x150"></div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.carousel.min.js"></script>
<script>
var someFunction = function(){};
(function() {
$('.owl-carousel').owlCarousel({
center: true,
items:1,
loop:true,
dots: false
})
})();
someFunction();
</script>
</body>
</html>
I am looking to make a slider that holds multple images, its an extremely simple product slider with images that link to their product pages. I want the arrows to be on either side of the slider. I notice that when i also implement my slider it negates the "prettyPhoto" feature i have in the div before.
I am using HTML4 unfortunately. here is a JS fiddle i put together of my slider!
I cant get the arrows to show for some reason... and all the images are on top of eachother. im just not quite sure what im doing wrong with this. i am fairly new at javascript and sliders.
Thanks in advance for all the help.
I need it to look like this:
There a couple of things you must do in order to customize the controls :
You have to have the controls in the first place. By default, the prev/Next controls are are set to false:
navigation: true
Next, we will create the actual arrows for the the controls using the navigationText options to parse the array of strings into real functioning HTML.
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
I almost forgot, when I reviewed your Fiddle, it wasn't functioning at all. There are at least 3 external files that are needed to run Owl Carousel.
Owl Carousel CSS (Optional Recommended):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
Owl Carousel Themed CSS (Optional):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
Font-Awesome Icons CSS (Optional):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
jQuery (Essential):
<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
Owl Carousel JS (Essential):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<!--These 4 external Files are necessary for Owl to function-->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
-->
<!--This link is both owl CSS files combined into one-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/jquery.owlcarousel#1.31(owl.carousel.css+owl.theme.css)">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">
<!--<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script>
<style>-->
<!--This tag is both JS files combined-->
<script src="https://cdn.jsdelivr.net/g/jquery#2.2.4,jquery.owlcarousel#1.31"></script>
<style>
/*
| SVG Nav Arrow Style
*/
/* https://gist.github.com/seeRead/11229083 */
.prod-slider-container {
position: relative;
font-family: font-awesome;
}
.owl-buttons {
display: flex;
width: 100%;
justify-content: space-between;
}
.owl-prev,
.owl-next {
position: absolute;
}
i.fa {
cursor: pointer;
position: absolute;
font-size: 60px;
padding-top: 8px;
height: 64px;
width: 72px;
color: rgba(0, 0, 0, .5);
background: rgba(0, 75, 222, .7);
border-radius: 50%;
display: table-cell;
}
.owl-prev,
.owl-next {
background-color: transparent;
border: 0px none transparent;
width: 0px;
height: 0px;
}
.owl-perv {
left: 0;
}
.owl-next {
right: 72px;
}
.item {
outline: 3px dashed grey;
}
</style>
</head>
<body>
<!-- + PRODUCT SLIDERS -->
<div class="prod-slider-container">
<div class="inner-container">
<div class="slider_header_text">
<b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</div>
</div>
<div class="owl-carousel">
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
</div>
<!--.owl-carousel-->
</div>
<!--.prod-slider-container-->
<script>
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 3,
autoPlay: 3000,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3],
navigation: true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
});
});
</script>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to use jquery knob plugin
to display a circle through which the user can post a rating. But I cannot get it to display. I'm posting my code here, please tell me whats wrong.
PS : I'm using JQuery Mobile. So the page is being loaded via Ajax. Please keep that in mind.
<html>
<head>
<title>Rate and Review</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="flatUI/jquery.mobile.flatui.css" />
</head>
<body>
<div data-role="page" id="pageRate">
<script src="jQueryKnob/jquery.knob.js"></script>
<script src="jquery-2.1.3.min.js"></script>
<style type="text/css">
#ratingHeader {
font-family: arial;
font-size: 1em;
font-weight: bold;
margin: 18vw 0 0;
padding: 1.5vh;
text-align: center;
width: 90%;
}
#reviewHeader {
font-family: arial;
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 2% 2% 2% 10vw;
text-align: left;
width: 90%;
}
#ratingCircleDiv {
width: 50vw;
overflow: hidden;
position:relative;
margin-left:25vw;
}
.dial {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
color: #ff8800;
font: bold 3em Arial;
height: 80px;
left: 0;
margin: 0; !important
padding: 0;
position: absolute;
text-align: center;
top: 0;
vertical-align: middle;
width: 124px;
}
#header1 {
color: white;
font-family: arial;
font-size: 1.4em;
margin: 0;
padding: 1.5vh;
text-align: center;
width: 90%;
}
#textarea {
margin-left: 3vw;
width: 93%;
}
</style>
<div data-role="header" style="width:100%;position:fixed;z-index:1" data-theme="a">
<div class="ui-grid-a" style="width:100%">
<div class="ui-block-a" style="min-height:10vw;width:20%;overflow:hidden;margin-left:2%"> <div class="ui-bar ui-bar-a" style="height:90%;width:90%;margin:5%;padding:0;border:0">
<img src="images/logo.png" style="max-height:100%;max-width:100%">
</div></div>
<div class="ui-block-b" style="min-height:10vw;width:70%;overflow:hidden;margin-left:0%"> <div class="ui-bar ui-bar-a" style="height:90%;width:90%;margin:0;padding:0;border:0">
<h2 class="removeShadow" id="header1">Rate & Review</h2>
</div></div>
</div><!-- /grid-a -->
</div><!-- /header -->
<div data-role="content" style="padding:0;z-index:0;position:relative;height:100vh" data-theme="a">
<label id="ratingHeader">
Your Rating : </label>
<div id="ratingCircleDiv">
<input class="dial" data-width="200" data-min="-100" data-displayPrevious=true value="2.5" style="margin:0">
<script>
$("#pageRate").on("pageinit",function(e)
{
$(".dial").knob({
'min':0,
'max':5,
'step':0.5,
'fgColor':'#ff8800',
'bgColor':'#BBBBBB',
'width':'100%'
alert('initialized Knob');
});
$('.dial').css('margin','11vw 0 0 10vw');
});
</script>
</div>
<label id="reviewHeader">
write a review : </label>
<div data-role="fieldcontain">
<!-- <label for="textarea">review:</label> -->
<textarea name="textarea" id="textarea"></textarea>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Wrap you code in pagecreate event delegated to #pageRate. You also need to add data-role="none" to input to prevent jQM from styling it.
<input class="dial" data-role="none">
$(document).on("pagecreate", "#pageRate", function () {
$(".dial", this).knob({
'min': 0,
'max': 5,
'step': 0.5,
'fgColor': '#ff8800',
'bgColor': '#BBBBBB'
});
});
Demo
I solved it. Looks like it was a minor mistake
in the (".dial").knob function, i accidentally added a "width:100%" which was not defined for the jQuery knob plugin. It was supposed to go in the css. i removed that line and everything works properly.
Thanks
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; }