jQuery Forum

Animated Spinner UI
[2Replies]
- 30-Nov-2011 07:26 PM
- Forum: Using jQuery UI
Hi all.

Firstly, I don't want to cause any naming confusion. I'm referring to the animated spinners you often see on sites that indicate you need to wait a few secs while the page is doing something (you know ... "Please Wait - Loading" with a little circular animated GIF icon). I am NOT referring to the pending 1.9 spinner/stepper control :)

I'm calling it an "animated spinner" as that is what I think JQ call it on one of their pages (in the dialog section from memory).

Anyway, sorry to digress ... my question is this: Is there an animated spinner UI? I cannot seem to find one. The dialog UI might lend itself to such a purpose, but I'd really like to use a purpose-built UI for this.

The UI should allow me to control the size of the background rectangle (either full screen or a certain size), it's opacity, rounded or square corners, location on screen (fixed or auto centered vertically and/or horizontally), and perhaps the ability to select from various animated spinner styles.

If there is a plugin that exists to perform this function then please let me know as the plugin section of the JQ website is down at the moment.

Many thanks.

=Mark

JQM RC1 pageChange() DOM issues (bug?)
[6Replies]
- 16-Oct-2011 03:32 AM
- Forum: jQuery Mobile
The following issue has had me stumped for days. No matter how much I read and how much I try various things I cannot seem to get past this simple pageChange() problem.

I've stripped back my code to this template that reproduces the problem. I've tested on iPhone4, iPad2 and FF6 and Chrome - all produce the exact same error.

Any help would be greatly appreciated :)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>reproduce error</title>
5. <meta charset="utf-8" />
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
8. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
9. <script type="text/javascript">
10. // global debug
11. var debug = true;
13. // override some jqm defaults
14. $(document).bind( "mobileinit", function() {
16. if (debug) alert("$(document).bind(mobileinit) triggered");
18. // just before this page shows, get data from local storage and populate page ids with it
19. $("#page-2").live("pageshow", function(event,ui){
21. if (debug) alert("$(#page-2).live(pageshow) triggered");
23. var test_id = localStorage.getItem("test_id");
24. $("#test-id-data").text(test_id);
25. });
27. // just before this page shows, get data from local storage and populate form fields
28. $("#page-3").live("pageshow", function(event,ui){
30. if (debug) alert("$(#page-3).live(pageshow) triggered");
32. var test_id = localStorage.getItem("test_id");
33. $("#txtTestID").val(test_id);
34. });
36. // save form data to local storage
37. $("#btnSave").live("click", function(){
39. if (debug) alert("$(#btnSave).live(click) triggered");
41. var test_id = $("#txtTestID").val();
42. test_id = $.trim(test_id);
43. if (test_id == "")
44. {
45. $("#err-txtTestID").text("Your Test ID is required");
46. $("#txtTestID").focus();
47. return false;
48. }
49. else
50. {
51. $("#err-txtTestID").text("");
52. }
54. // save form data to local storage
55. localStorage.setItem("test_id",test_id);
57. // now jump to page-2 to display what user has entered
58. // this is where things go wrong
59. // we end up going to page-2 but instantly go to page-1 afterwards (as if the DOM refeeshed)
60. // what's going on????
61. $.mobile.changePage("#page-2");
62. });
64. });
65. </script>
66. <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
68. <script type="text/javascript">
69. // document.ready is fired *after* the page has loaded.
70. // this is not the ideal place to put this code becuase page 1 is already displayed at this point.
71. // jumping to page-3 might cause a flicker on-screen since page-1 is already loaded/displayed.
72. // but where else do we put this code logic?
73. $(document).ready(function () {
74. if (debug) alert("$(document).ready() triggered");
76. // redirect to page-3 if no test id
77. if (debug) alert("checking for test id ...");
78. if (debug) alert("deleting test id ...");
79. localStorage.removeItem("test_id"); // force a deletion to test next few lines of code
80. if (!localStorage.getItem("test_id"))
81. {
82. if (debug) alert("no test id - jumping to page 3");
83. $.mobile.changePage("#page-3");
84. }
85. });
86. </script>
87. </head>
88. <body>
89. <section id="page-1" data-role="page" data-theme="b">
91. <div data-role="header" data-position="fixed" data-theme="b" data-nobackbtn="true">
92. <h1>Page-1</h1>
93. </div>
95. <div data-role="content" id="pin-content" data-theme="d">
96. <p>content goes here</p>
97. </div>
99. <div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">
100. <div data-role="navbar" id="pin-footer-navbar">
101. <ul>
102. <li><a href="#page-1" class="ui-btn-active ui-state-persist" data-icon="grid">Page-1</a></li>
103. <li><a href="#page-2" data-icon="star">Page-2</a></li>
104. <li><a href="#page-3" data-icon="info">Page-3</a></li>
105. </ul>
106. </div>
107. </div>
109. </section>
112. <section id="page-2" data-role="page" data-add-back-btn="true">
114. <div data-role="header" data-position="fixed" data-theme="b">
115. <h1>Page-2</h1>
116. <a href="#page-3" class="ui-btn-right" data-theme="d">Edit</a>
117. </div>
119. <div data-role="content" data-theme="d">
120. <div class="ui-body ui-body-d">
121. <h3>ID</h3>
123. <div class="ui-grid-a" style="margin-bottom:5px">
124. <div class="ui-block-a"><strong>Test ID:</strong></div>
125. <div class="ui-block-b ui-body-e"><span id="test-id-data"></span></div>
126. </div>
127. </div>
128. </div>
130. <div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">
131. <div data-role="navbar">
132. <ul>
133. <li><a href="#page-1" data-icon="grid">Page-1</a></li>
134. <li><a href="#page-2" class="ui-btn-active ui-state-persist" data-icon="star">Page-2</a></li>
135. <li><a href="#page-3" data-icon="info">Page-3</a></li>
136. </ul>
137. </div>
138. </div>
140. </section>
143. <section id="page-3" data-role="page">
145. <div data-role="header" data-position="fixed" data-theme="b">
146. <h1>Page 3</h1>
147. </div>
149. <div data-role="content" data-theme="d">
150. <form id="form-settings-edit">
151. <div class="ui-body ui-body-d">
152. <h3>Details</h3>
153. <p>Test ID: <input type="text" name="txtTestID" id="txtTestID" placeholder="Enter your Test ID" required autofocus maxlength="10" /><div id="err-txtTestID" style="color:red;"></div></p>
154. </div>
155. <a href="#page-2" data-rel="back" data-role="button" data-inline="true" data-icon="arrow-l" data-iconpos="left">Cancel</a>
156. <input type="submit" name="btnSave" id="btnSave" value="Save" data-inline="true" data-theme="b" data-icon="arrow-r" data-iconpos="right" />
157. </form>
158. </div>
160. </section>
161. </body>
162. </html>

DOM Event Triggers - What Order?
[4Replies]
- 15-Oct-2011 06:44 AM
- Forum: jQuery Mobile
Hi JQMers.

I am trying to get a handle on what event code to place where in the DOM firing sequence.

Here's some very basic code I've written to test one idea - that being to "jump" to a different div "page" than the 1st one in the list. Yes, I know I could use [class="ui-page-active"] within the [data-role="page"] div, but for the sake of this exercise I wanted to use $.mobile.changePage().

So here's my index.html document:
1. <!doctype html>
2. <html>
3. <head>
4. <title>index page</title>
5. <meta name="viewport" content="width=device-width, initial-sacale=1">
6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
9. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
11. <script type="text/javascript">
12. var debug = true;
13. </script>
15. <script type="text/javascript">
16. $(document).bind( "mobileinit", function() {
17. if (debug) alert("$(document).bind(mobileinit) triggered");
18. });
19. </script>
21. <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
23. <script type="text/javascript">
24. // document.ready is fired *after* the page has loaded
25. $(document).ready(function () {
26. if (debug) alert("$(document).ready() triggered");
27. $.mobile.changePage("#page2");
28. });
29. </script>
30. </head>
32. <body>
34. <div data-role="page" id="page1">
35. <div data-role="header">
36. <h1>Page1 Header</h1>
37. </div>
38. <div data-role="content">
39. <a href="#page2">go to index.html#page2</a>
40. </div>
41. <div data-role="footer">
42. <h2>Page1 Footer</h2>
43. </div>
44. </div>
46. <div data-role="page" id="page2">
47. <div data-role="header">
48. <h1>Page2 Header</h1>
49. </div>
50. <div data-role="content">
51. <a href="#page1">go to index.html#page1</a>
52. </div>
53. <div data-role="footer">
54. <h2>Page2 Footer</h2>
55. </div>
56. </div>
58. </body>
60. </html>
As you can see I've:

a) inserted a javascript block with a global variable to control the alerts() ... it's in a separate js block for aesthetics only, so please don't critique me on code style :) I just want to clearly show the placement of js blocks in the jQuery/JQM flow of things.

b) a js block *before* the JQM js (necessary for mobileinit - but I don't yet know what else should go in at this point - hence why I'm trying to build this trigger-alert style framework that I'm hoping others will help flesh out).

c) a document.ready() function that is fired once the page is fully loaded (is fired when the "internal" page is loaded - as far as I know links to external resources like images etc happen after the document.ready() function. For example, if I had a reference in my content block to say http://someotherdomain.com/img.gif, document.ready() fires before these external links have been loaded.

Now, for this test, I want to jump to an internal page out-of-sequence (ie. #page2). So I've used $.mobile.changePage("#page2"); inside the document.ready() event.

Ok, so the jump occurs ok.

Of course it occurs to me that I should put this jump code into the page1.pagebeforecreate() event as we don't really want any page displayed yet until I've jumped to the page I want displayed. But does "jumping" out of the beginning of a page creation (and therefore all subsequent events, like pagecreate() and pageinit(), won't be triggered) cause any issues re: the DOM being in an "unstable/incomplete state?

I look forward to your thoughts on this topic.

I have ready the RC1 API documentation and don't quite understand all that is said re pageinit, mobileinit, using pageint instead of document.ready() etc etc etc. Lack of clear and concise examples just exascerbates my clouded mind :)

Cheers, Mark

JQM 1.0 RC1 and SSL
[2Replies]
- 12-Oct-2011 06:59 PM
- Forum: jQuery Mobile
Hi all.

I have a website with a premium SSL installed. Works just fine (ie. normal behaviour - green bar shows up in broswer's address bar when visiting any page using https://, across all desktop browsers I've tested FF7 IE9 Chrme Safari, including my iPhone4 and iPad2 which shows a green padlock and the name of the domain at the top of the Safari browser window).

But if a web page on my domain contains the standard JQM CDN links in the header (http:// not https://), the green bar (on desktops) or the green padlock (in iPhone or iPad) does not show. Therefore I'm presuming that https:// isn't enabled, and more importantly, the visual clue for the user isn't displayed.

Does anyone have a work-around or fix for this?

Happy to send screenshots to anyone if needed for clarification.

These are my headers:
If I change these to using https then other issues start to arise (ie. browser prompts to confirm mismatched cert to domain name etc and the JQM page no longer displays correctly as if all html tags have been removed from the document, just leaving text behind).

Many thanks in advance.

Mark.

Response title

Attachments

jQuery Forum

Activity Trend