Search jQuery

jQuery Forum

Screen name:
bradycolton

bradycolton's Profile

20 Posts

25 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Replace Default Loading Message with CSS Spinner
[1Reply]
- 16-Apr-2012 06:49 PM
- Forum: jQuery Mobile
What would I add/change in the header to disable the default loading image/message and display the CSS below instead? Any help with this would be much appreciated.

CSS Spinner Code:
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <style>
6. html, body {
7. background: #fff;
8. text-align: center;
9. }
11. div.spinner {
12. background-color: transparent;
13. position: absolute;
14. left: 50%;
15. top: 50%;
16. margin-left: -25px;
17. margin-top: -25px;
18. width: 50px;
19. height: 50px;
20. display: inline-block;
21. }
23. div.spinner div {
24. width: 12%;
25. height: 26%;
26. background: #000;
27. position: absolute;
28. left: 44.5%;
29. top: 37%;
30. opacity: 0;
31. -webkit-animation: fade 1s linear infinite;
32. -webkit-border-radius: 50px;
33. -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
34. }
36. div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}
37. div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
38. div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
39. div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
40. div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
41. div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
42. div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
43. div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
44. div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
45. div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
46. div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
47. div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}
49. @-webkit-keyframes fade {
50. from {opacity: 1;}
51. to {opacity: 0.25;}
52. }
53. </style>
54. </head>
55. <body>
57. <div class="spinner">
58. <div class="bar1"></div>
59. <div class="bar2"></div>
60. <div class="bar3"></div>
61. <div class="bar4"></div>
62. <div class="bar5"></div>
63. <div class="bar6"></div>
64. <div class="bar7"></div>
65. <div class="bar8"></div>
66. <div class="bar9"></div>
67. <div class="bar10"></div>
68. <div class="bar11"></div>
69. <div class="bar12"></div>
70. </div>
72. </body>
73. </html>
Header Code:
2. <?php
3. // Load Config Database File
4. require_once("config/config_database.php");
5. ?>
6. <?php
7. // Test for iPhone
8. $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
9. if ($browser == true){
10. $browser = 'iphone';
11. }
12. // Test for Android
13. $browser2 = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
14. if ($browser2 == true){
15. $browser2 = 'Android';
16. }
17. ?>
18. <meta name="viewport" content="initial-scale=1.0">
19. <meta name="viewport" content="minimum-scale=1.0">
20. <meta name="viewport" content="maximum-scale=1.0">
21. <meta name="viewport" content="user-scalable=no">
22. <meta name="viewport" content="width=device-width">
23. <meta name="apple-touch-fullscreen" content="yes">
24. <meta name="apple-mobile-web-app-capable" content="yes">
25. <meta name="apple-mobile-web-app-status-bar-style" content="default">
27. 
28. <link rel="apple-touch-startup-image" media="(device-width: 320px)" href="images/startup320x480.png"> 
29. <link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="images/startup640x920.png"> 
30. <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="images/startup768x1004.png"> 
31. <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="images/startup1024x748.png"> 
32. <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="images/startup1536x2008.png"> 
33. <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="images/startup2048x1496.png"> 
35. 
36. <link rel="icon" href="images/icon57.png">
37. <link rel="shortcut icon" href="images/icon57.png">
39. 
40. <link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/icon57.png"> 
41. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/icon72.png"> 
42. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/icon114.png"> 
43. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/icon144.png"> 
44. <link rel="apple-touch-icon-precomposed" sizes="android-only" href="images/icon57.png"> 
46. <meta name="format-detection" content="telephone=no">
47. <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css">
48. <link rel="stylesheet" href="css/DWMobile.css">
49. <link rel="stylesheet" href="css/TabularTableStyle.css">
50. <script type="text/javascript" src="javascript/jquery-1.6.4.min.js"></script>
51. <script type="text/javascript" src="javascript/jquery.tablesorter.js"></script>
52. <script type="text/javascript">
53. $(document).bind('mobileinit',function(){
54. $.mobile.loadingMessage = 'Loading...';
55. })
56. </script>
57. <script type="text/javascript" src="javascript/jquery.mobile-1.0.1.min.js"></script>
58. <script type="text/javascript" src="javascript/RGraph/RGraph.common.adjusting.js" ></script>
59. <script type="text/javascript" src="javascript/RGraph/RGraph.common.core.js" ></script>
60. <script type="text/javascript" src="javascript/RGraph/RGraph.common.context.js" ></script>
61. <script type="text/javascript" src="javascript/RGraph/RGraph.common.annotate.js" ></script>
62. <script type="text/javascript" src="javascript/RGraph/RGraph.common.tooltips.js" ></script>
63. <script type="text/javascript" src="javascript/RGraph/RGraph.common.zoom.js" ></script>
64. <script type="text/javascript" src="javascript/RGraph/RGraph.common.effects.js" ></script>
65. <script type="text/javascript" src="javascript/RGraph/RGraph.common.key.js" ></script>
66. <script type="text/javascript" src="javascript/RGraph/RGraph.line.js" ></script>
67. <script type="text/javascript" src="javascript/RGraph/RGraph.common.key.js" ></script>
68. <script type="text/javascript" src="javascript/RGraph/RGraph.modaldialog.js" ></script>
70. 
72. 
73. <script type="text/javascript">
74. $('#Tabular_Current_Page').live('pageshow',function(){
75. $('#myTable').tablesorter({widgets: ['zebra']});
76. });
77. </script>
78. 
80. 
81. <script type="text/javascript">
82. $('#Tabular_Single_Page').live('pageshow',function(){
83. $('#myTable').tablesorter({widgets: ['zebra']});
84. });
85. </script>
86. 
89. 
90. <script type="text/javascript">
91. $(window).bind('orientationchange',function(){
92. // Main Chart
93. if($('.ui-page-active').attr('id') == 'Chart_Page'){
95. var canvas = document.getElementById('thisCanvas');
96. var context = canvas.getContext('2d');
98. context.clearRect(0,0,canvasWidth,canvasHeight);
100. var canvasWidth = -32 + $(window).width();
101. var canvasHeight = -79 + $(window).height();
103. $('#thisCanvas').attr('height', canvasHeight);
104. $('#thisCanvas').attr('width', canvasWidth);
106. RGraph.RedrawCanvas(canvas);
108. }
110. // Sensors Chart
111. if($('.ui-page-active').attr('id') == 'Sensors_Chart_Page'){
113. var canvas = document.getElementById('thisCanvas');
114. var context = canvas.getContext('2d');
116. context.clearRect(0,0,canvasWidth,canvasHeight);
118. var canvasWidth = -32 + $(window).width();
119. var canvasHeight = -116 + $(window).height();
121. $('#thisCanvas').attr('height', canvasHeight);
122. $('#thisCanvas').attr('width', canvasWidth);
124. RGraph.RedrawCanvas(canvas);
126. }
127. });
128. </script>
129. 
131. 
132. <script type="text/javascript">
133. $(window).bind('resize',function(){
134. // Main Chart
135. if($('.ui-page-active').attr('id') == 'Chart_Page'){
137. var canvas = document.getElementById('thisCanvas');
138. var context = canvas.getContext('2d');
140. context.clearRect(0,0,canvasWidth,canvasHeight);
142. var canvasWidth = -32 + $(window).width();
143. var canvasHeight = -79 + $(window).height();
145. $('#thisCanvas').attr('height', canvasHeight);
146. $('#thisCanvas').attr('width', canvasWidth);
148. RGraph.RedrawCanvas(canvas);
150. }
152. // Sensors Chart
153. if($('.ui-page-active').attr('id') == 'Sensors_Chart_Page'){
155. var canvas = document.getElementById('thisCanvas');
156. var context = canvas.getContext('2d');
158. context.clearRect(0,0,canvasWidth,canvasHeight);
160. var canvasWidth = -32 + $(window).width();
161. var canvasHeight = -116 + $(window).height();
163. $('#thisCanvas').attr('height', canvasHeight);
164. $('#thisCanvas').attr('width', canvasWidth);
166. RGraph.RedrawCanvas(canvas);
168. }
169. });
170. </script>
171. 
173. 
174. <script type="text/javascript">
175. $('#Chart_Page').live('pageshow',function(){
176. // Start Canvas Size Setup
178. ResizeCanvas();
180. function ResizeCanvas()
181. {
182. var canvasWidth = -32 + $(window).width();
183. var canvasHeight = -79 + $(window).height();
185. $('#thisCanvas').attr('height', canvasHeight);
186. $('#thisCanvas').attr('width', canvasWidth);
188. delayedloader();
189. }
190. // End Canvas Size Setup
191. });
192. </script>
193. 
195. 
196. <script type="text/javascript">
197. $('#Sensors_Chart_Page').live('pageshow',function(){
198. // Start Canvas Size Setup
200. ResizeCanvas();
202. function ResizeCanvas()
203. {
204. var canvasWidth = -32 + $(window).width();
205. var canvasHeight = -116 + $(window).height();
207. $('#thisCanvas').attr('height', canvasHeight);
208. $('#thisCanvas').attr('width', canvasWidth);
210. delayedloader();
211. }
212. // End Canvas Size Setup
213. });
214. </script>
215. 
217. 
218. <script type="text/javascript">
219. $('#Map_Page').live('pageshow',function(){
220. Initialize_Map();
221. });
222. </script>
223. 
225. 
227. 
228. <script type="text/javascript">
229. function createNumberOfReportsCookie() {
230. var name = "NumberOfReports";
231. var value = $('#ID_NumOfReports').val();
232. var days = 365;
233. if (days) {
234. var date = new Date();
235. date.setTime(date.getTime()+(days*24*60*60*1000));
236. var expires = "; expires="+date.toGMTString();
237. }
238. document.cookie = name+"="+value+expires+"; path=/";
239. }
240. </script>
241. 
243. 
244. <script type="text/javascript">
245. // Set Chart Line Shadow Cookie
246. function createChartCookies() {
247. var name = "ChartLineShadow";
248. var value = $('#ID_LineShadow').val();
249. var days = 365;
250. if (days) {
251. var date = new Date();
252. date.setTime(date.getTime()+(days*24*60*60*1000));
253. var expires = "; expires="+date.toGMTString();
254. }
255. document.cookie = name+"="+value+expires+"; path=/";
257. // Set Chart Line Size Cookie
258. var name = "ChartLineSize";
259. var value = $("input[name=LineSize]:checked").val();
260. var days = 365;
261. if (days) {
262. var date = new Date();
263. date.setTime(date.getTime()+(days*24*60*60*1000));
264. var expires = "; expires="+date.toGMTString();
265. }
266. document.cookie = name+"="+value+expires+"; path=/";
268. // Set Chart Line Color Cookie
269. var name = "ChartLineColor";
270. var value = $("input[name=LineColor]:checked").val();
271. var days = 365;
272. if (days) {
273. var date = new Date();
274. date.setTime(date.getTime()+(days*24*60*60*1000));
275. var expires = "; expires="+date.toGMTString();
276. }
277. document.cookie = name+"="+value+expires+"; path=/";
278. }
279. </script>
280. 
282. 
283. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
284. <script type="text/javascript">
285. function Initialize_Map() {
286. var markers = [];
287. var iterator = 0;
288. var map;
290. var image = new google.maps.MarkerImage('images/smallmap7.png',
291. // This marker is 20 pixels wide by 32 pixels tall.
292. new google.maps.Size(13, 31),
293. // The origin for this image is 0,0.
294. new google.maps.Point(0, 0),
295. // The anchor for this image is the base of the flagpole at 0,32.
296. new google.maps.Point(6, 15));
297. var shadow = new google.maps.MarkerImage('images/smallmap7_shadow.png',
298. // The shadow image is larger in the horizontal dimension
299. // while the position and offset are the same as for the main image.
300. new google.maps.Size(29, 31),
301. new google.maps.Point(0, 0),
302. new google.maps.Point(6, 15));
303. // Shapes define the clickable region of the icon.
304. // The type defines an HTML <area> element 'poly' which
305. // traces out a polygon as a series of X,Y points. The final
306. // coordinate closes the poly by connecting to the first
307. // coordinate.
308. var shape = {
309. coord: [1, 1, 1, 20, 18, 20, 18 , 1],
310. type: 'poly'
311. };
313. <?php
314. echo "var neighborhoods = [";
316. // Make a MySQL Connection
317. mysql_connect($db_hostname, $db_username, $db_password) or die(mysql_error());
318. mysql_select_db($db_database) or die(mysql_error());
320. $query = "SELECT * FROM sensors LIMIT 100";
321. $result = mysql_query($query) or die(mysql_error());
322. //let's get the number of rows in our result so we can use it in a for loop
323. $numofrows = mysql_num_rows($result);
325. // keeps getting the next row until there are no more to get
326. for($i = 0; $i < $numofrows; $i++) {
327. $row = mysql_fetch_array($result);// get a row from our result set
328. ?>
330. <?php
331. echo "new google.maps.LatLng(";
332. echo $row['S_LATITUDE'];// puts sensor Lat
333. echo ", ";
334. echo $row['S_LONGITUDE'];// puts sensor Long
335. echo ")";
336. if ( $i < ($numofrows-1) ) {
337. echo ",";
338. }
339. }
340. echo "\n];";
341. ?>
343. var Center_Map = new google.maps.LatLng(32.7878, -97.1778);
345. var mapOptions = {
346. zoom: 10,
347. center: Center_Map,
348. mapTypeControl: true,
349. mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT},
350. mapTypeId: google.maps.MapTypeId.ROADMAP
351. };
353. map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
355. for (var i = 0; i < neighborhoods.length; i++) {
356. setTimeout(function() {
357. addMarker();
358. }, i * 69); // Delay between drops
359. }
361. function addMarker() {
362. markers.push(new google.maps.Marker({
363. position: neighborhoods[iterator],
364. map: map,
365. shadow: shadow,
366. icon: image,
367. shape: shape,
368. draggable: false,
369. animation: google.maps.Animation.DROP
370. }));
371. iterator++;
372. }
373. }
374. </script>
375.

How to Clear/Destroy <canvas> on header button press
[0Replies]
- 15-Mar-2012 02:26 AM
- Forum: jQuery Mobile
I need to some how clear the <canvas> in my jQuery Mobile site. It seems to stay in memory so when I so when I go back and forth between the two pages using (slide transitions) it is still showing the drawing.

<div data-role="header" data-theme="b">

<a href="chartsensors.php" onclick=(clearcanavscode) data-transition="slide" data-direction="reverse" data-role="button" data-position="inline" data-icon="arrow-l">Charts</a>

<h1>Test</h1>

</div>

<canvas id="thisCanvas" class="ui-bar-c ui-corner-all ui-shadow" style="text-align:center; background:#FFFFFF; padding:0;">[Your Browser doesn't support HTML 5]</canvas>

How to limit Header Text?
[4Replies]
- 14-Mar-2012 04:59 PM
- Forum: jQuery Mobile
How do I limit the amount of text to be display in header before "..." is displayed?

I would like to display less text before "..." so the text doesn't go behind the button on the left.

Mobile Safari "Web App" Mode page Refresh?
[3Replies]
- 12-Mar-2012 04:01 PM
- Forum: jQuery Mobile
The following line works fine in the regular Mobile Safari browser:

<body onorientationchange="document.location=window.location;">

But seems to ignore it when in the "Web App" full-screen mode.

Any idea how to reload the screen on change from portrait to landscape?

Help with grabbing current screen size...
[3Replies]
- 11-Mar-2012 08:22 PM
- Forum: jQuery Mobile
For some reason the JavaScript code in my project is grabbing the document size from the transitioning page (previous page) rather then the page that it is executed on. This makes the <canvas> bigger than then the screen since the previous page has a long list which requires scrolling. Any suggestions how to delay the JavaScript from executing until the page is fully loaded? Thanks for any help.

<!DOCTYPE html>
<html>
<head>
<?php
// Test for iPhone
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true){
$browser = 'iphone';
}
// Test for Android
$browser2 = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
if ($browser2 == true){
$browser2 = 'Android';
}
?>
<?php if($browser == 'iphone'){ ?>
<title>iPhone</title>
<?php }elseif($browser2 == 'Android'){ ?>
<title>Android</title>
<?php }else{ ?>
<title>Desktop</title>
<?php } ?>
<?php
// Load Header File
require_once("config/header.php");
?>

</head>
<body>

<?php
// Get Sensor ID Arg and Store Variables
$id = $_GET["id"];
$id_table = "s".$id."_0";
?>
<?php if($browser == 'iphone'){ ?>
<body onorientationchange="document.location=window.location;">
<?php }elseif($browser2 == 'Android'){ ?>
<body onorientationchange="document.location=window.location;">
<?php }else{ ?>
<![if !IE]> <body onresize="document.location=window.location;"> <![endif]>

<?php } ?>

<div id="Chart_Page" data-role="page">

<div data-role="header" data-theme="b">

<a href="settings.php" data-transition="slide" data-direction="reverse" data-role="button" data-position="inline" data-icon="arrow-l">Settings</a>

<h1><?php echo $id; ?></h1>

</div>

<div data-role="content">


<canvas id="thisCanvas" class="ui-bar-c ui-corner-all ui-shadow" style="text-align:center; background:#FFFFFF; padding:0;">[Your Browser doesn't support HTML 5]</canvas>

<script type="text/javascript">
// Start Canvas Size Setup
var thisCanvas, canvasHeight, canvasWidth;

SetupCanvas();

function SetupCanvas()
{
thisCanvas = $('#thisCanvas')[0];

ResizeCanvas();
}

function ResizeCanvas()
{
canvasWidth = -32 + $(document).width();
canvasHeight = -79 + $(document).height();

$(thisCanvas).attr("height", canvasHeight);
$(thisCanvas).attr("width", canvasWidth);

}
// End Canvas Size Setup
</script>

</div>
</div>

</body>
</html>

How to set Flip toggle switch Default to "ON"
[1Reply]
- 09-Mar-2012 12:48 PM
- Forum: jQuery Mobile
How would I modify this code to set the Flip switch to default to the "ON" position?
```
<label for="flip-a">Select slider:</label> <select name="slider" id="flip-a" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> 
```
How it is now:

How I would like the default to be:

Need help getting the active radio button value
[2Replies]
- 09-Mar-2012 02:11 AM
- Forum: jQuery Mobile
I am having a difficult time getting the active radio button value from the a fieldset of radio buttons.

How do I get only the value from the active/checked radio button?

Here is the code I have so far:

HEADER CODE


<script type="text/javascript">
// Set Chart Line Size Cookie
function createChartCookies() {
var name = "ChartLineSize";
var value = $('#radio-choice-1').val();
var days = 365;
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
document.cookie = name+"="+value+expires+"; path=/";

// Set Chart Line Color Cookie
var name = "ChartLineColor";
var value = $('#radio-choice-11').val();
var days = 365;
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
document.cookie = name+"="+value+expires+"; path=/";
}
</script>


PAGE CODE

<?php
if(isset($_COOKIE['ChartLineSize'])) // Check if cookie "ChartLineSize" is set
{
$ChartLineSize = $_COOKIE['ChartLineSize']; // If cookie "ChartLineSize" is set, store the value in PHP Var
}
else // If cookie does not exist
{
$ChartLineSize = 2.5; // Set PHP Var "$ChartLineSize" to 1.1 (Default Line Size Value)
}
?>

<?php
if(isset($_COOKIE['ChartLineColor'])) // Check if cookie "ChartLineColor" is set
{
$ChartLineColor = $_COOKIE['ChartLineColor']; // If cookie "ChartLineColor" is set, store the value in PHP Var
}
else // If cookie does not exist
{
$ChartLineColor = "black"; // Set PHP Var "$ChartLineColor" to 25 (Default Slider Value)
}
?>

<div data-role="page">

<div data-role="header" data-theme="b">

<h1>Chart</h1>

<a href="settings.php" onclick="createChartCookies()" data-prefetch data-transition="slide" data-direction="reverse" data-role="button" data-position="inline" data-icon="arrow-l">Settings</a>

</div>

<div data-role="content">

<TABLE width="100%" style="font-size: 16px"><TR><TD><B>Line Shadow:</B></TD><TD align="right" style="width:100px"><select name="slider2" id="slider2" data-role="slider"><option value="off">Off</option><option value="on">On</option></select></TD></TR></TABLE>
</BR>
<div align=center>
<label><B>Choose line size:</B></label>
</BR>
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1.1"<?php if ( $ChartLineSize == 1.1 ) {echo "checked='checked'";}?>/>
<label for="radio-choice-1">Fine</label>

<input type="radio" name="radio-choice-1" id="radio-choice-2" value="1.5"<?php if ( $ChartLineSize == 1.5 ) {echo "checked='checked'";}?>/>
<label for="radio-choice-2">Medium</label>

<input type="radio" name="radio-choice-1" id="radio-choice-3" value="2.0"<?php if ( $ChartLineSize == 2.0 ) {echo "checked='checked'";}?>/>
<label for="radio-choice-3">Large</label>

<input type="radio" name="radio-choice-1" id="radio-choice-4" value="2.5"<?php if ( $ChartLineSize == 2.5 ) {echo "checked='checked'";}?>/>
<label for="radio-choice-4">Extra Large</label>
</fieldset>
</div>
</BR>
<div align=center>
<label><B>Choose line color:</B></label>
</BR>
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-2" id="radio-choice-11" value="blue"<?php if ( $ChartLineColor == "blue" ) {echo "checked='checked'";}?>/>
<label for="radio-choice-11">Blue</label>

<input type="radio" name="radio-choice-2" id="radio-choice-12" value="red"<?php if ( $ChartLineColor == "red" ) {echo "checked='checked'";}?>/>
<label for="radio-choice-12">Red</label>

<input type="radio" name="radio-choice-2" id="radio-choice-13" value="green"<?php if ( $ChartLineColor == "green" ) {echo "checked='checked'";}?>/>
<label for="radio-choice-13">Green</label>

<input type="radio" name="radio-choice-2" id="radio-choice-14" value="black"<?php if ( $ChartLineColor == "black" ) {echo "checked='checked'";}?>/>
<label for="radio-choice-14">Black</label>
</fieldset>
</div>

</div>
</div>

How to store value of jQuery Mobile slider in cookie.
[1Reply]
- 06-Mar-2012 01:27 AM
- Forum: jQuery Mobile
<!DOCTYPE html>
<html>
<head>

<?php
// Test for iPhone
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true){
$browser = 'iphone';
}
// Test for Android
$browser2 = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
if ($browser2 == true){
$browser2 = 'Android';
}
?>

<?php if($browser == 'iphone'){ ?>
<title>iPhone Menu</title>
<?php }elseif($browser2 == 'Android'){ ?>
<title>Android Menu</title>
<?php }else{ ?>
<title>Desktop Menu</title>
<?php } ?>

<?php
// Load Header File
require_once("config/header.php");
?>

</head>
<body>

<?php
if(isset($_COOKIE['NumberOfReports'])) // Check if cookie is set
{
$NumberOfReports = $_COOKIE['NumberOfReports']; // If cookie is set store the value
}
else
{
$NumberOfReports = "25"; // Set Default to 25
setcookie("NumberOfReports",$NumberOfReports, time()+3600*24); // Set a cookie that expires in 24 hours
}
?>

<div data-role="page">

<div data-role="header" data-theme="b">

<h1>Tabular</h1>

<a href="settings.php" data-prefetch data-transition="slide" data-direction="reverse" data-role="button" data-position="inline" data-icon="arrow-l">Settings</a>

</div>

<div data-role="content">

<div align=center>
<label for="slider"><B>Number of reports:</B></label>
</BR>
<div align="left" style="width: 340px;">
<input type="range" name="slider" id="slider" value="<?php echo $NumberOfReports; ?>" min="5" max="100" step="5"/>
</div>
</div>

</div>
</div>

</body>
</html>

Store Slider value into localStorage on push of a button?
[1Reply]
- 05-Mar-2012 09:15 PM
- Forum: jQuery Mobile
Any ideas on how this might be accomplished?

<div align=center>
<label for="slider"><B>Number of reports:</B></label>
</BR>
<div align="left" style="width: 340px;">
<input type="range" name="slider" id="slider" value=" $ValueOfSlider " min="5" max="100" step="5"/>
</div>
</div>

<a href="onclick(localStorage.setItem("Slider", "$ValueOfSlider");)" data-role="button">Set Value</a>

New Slider in JQM 1.1.0rc1
[1Reply]
- 05-Mar-2012 05:46 PM
- Forum: jQuery Mobile
How do I make a slider look like the one in the Announcement of JQM 1.1.0rc1?

http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/

I don't see any options to set here

http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/slider/

that would make the small up and down arrows like the one in the photo above.

Any help on this would be much appreciated.

How do I show the Circular Loading Spinner? (No Text)
[1Reply]
- 05-Mar-2012 12:27 AM
- Forum: jQuery Mobile
As shown when going to any link on this page http://jquerymobile.com/test/

Is there some CSS that needs to be modified?

or possibly some JavaScript?

Like This?

<script type="text/javascript">
$(document).bind('mobileinit',function(){
$.mobile.loadingMessage = " ";
})
</script>

Thanks,
Brady

Difficulty keeping my Web App in the full screen "Mobile Safari Web App Browser" under iOS
[3Replies]
- 04-Mar-2012 10:11 PM
- Forum: jQuery Mobile
I use the following in the header to make sure the Web App loads in the full screen "Mobile Safari Web App Browser" under iOs

<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;">

<meta name="apple-touch-fullscreen" content="yes">

<meta name="apple-mobile-web-app-capable" content="yes">

The problem is that I have some JavaScript in the Web App that is a few pages deep and It must be called on that page directly, it can not be called or loaded on the first page. The only way I can get the JavaScript to work is by transitioning to the page via "rel=external" which "breaks" out of the full screen "Web App" mode and "data-transition=slide" which keeps it in "Web App" mode wont allow the Java Script to load.

Anyone have the same problem and maybe a work around to keep my "Web App" in the full screen browser?

How to execute javascript after page transition...
[7Replies]
- 28-Feb-2012 01:26 AM
- Forum: jQuery Mobile
The hi-lighted part wont load after a page transition. Any help would be much appreciated. Thanks.

<?php
// Get Sensor ID Arg and store variables
$id = $_GET["id"];
$id_table = "s".$id."_0";
$numofreports = $_GET["numofreports"];

// Load Header File
require_once("header.php");
?>

<script type="text/javascript">
$(function() {
$("#myTable").tablesorter({widgets: ['zebra']});
});
</script>

<body>

<div data-role="page">

<div data-role="header" data-backbtn="false" data-position="fixed" data-theme="b">

<a href="tabularsensors.php" data-transition="slide" data-direction="reverse" data-role="button" data-position="inline" data-icon="arrow-l">Tabular</a>

<h1><?php echo $id; ?></h1>

</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li class="TB_li" data-role="list-divider">Last <?php echo $numofreports; ?> Reports</li>
<li data-icon="false">

<?php
// Set MySQL Connection Login Variables
$db_hostname = "localhost";
$db_database = "somedatabase";
$db_username = "root";
$db_password = "test";

// Make a MySQL Connection
mysql_connect($db_hostname, $db_username, $db_password) or die(mysql_error());
mysql_select_db($db_database) or die(mysql_error());

$query = "SELECT * FROM $id_table ORDER BY T_TIME DESC LIMIT $numofreports";
$result = mysql_query($query) or die(mysql_error());
//let's get the number of rows in our result so we can use it in a for loop
$numofrows = mysql_num_rows($result);

echo "<table id='myTable' class='tablesorter'>";
echo "<thead>";
echo "<tr> <th>Data</th> <th>Date & Time</th> </tr>\n";
echo "</thead>";

echo "<tbody>";
// keeps getting the next row until there are no more to get
for($i = 0; $i < $numofrows; $i++) {
$row = mysql_fetch_array($result); //get a row from our result set
// Print out the contents of each row into a table
echo "<tr><td width='50%'; >";
if (strlen($row['T_DATA']) == 0) {echo "No Data";} else {echo $row['T_DATA'];}
echo "</td><td width='50%'>";
sscanf($row['T_TIME'],"%s %s",$the_date,$the_time);
sscanf($the_date,"%d-%d-%d",$the_year,$the_month,$the_day);
$new_date = sprintf("%02d/%02d/%d",$the_month,$the_day,$the_year);
echo $new_date;
echo " ";
echo $the_time;
echo "</td></tr>\n";
}
echo "</tbody>";
echo "</table>";
?>

</li>
<li class="TB_li" data-role="list-divider">Updated: <?php echo date("m/d/Y H:i:s");?></li>  
</ul>

</div>
</div>

</body>
</html>

How do I to set the footer to not oveflow the bottom of the screen?
[3Replies]
- 11-Feb-2012 05:52 PM
- Forum: jQuery Mobile
I need the header and footer to keep the default 15px from the top and bottom of the page, but not allow the content to extend past the bottom of the screen.

This is how it is now...

This is how I would like it to look...

No matter how many rows are in the table. (Scroll the table between the header and footer)

Refresh page after transition?
[4Replies]
- 11-Feb-2012 02:17 PM
- Forum: jQuery Mobile
This may seem very simple but I need some help to figure it out. How can I refresh a internal page after transition? I just need to reload the page so that the formatting is correct. It doesn't load propery on the initial load.

tablesorter with jQuery Mobile?
[2Replies]
- 07-Feb-2012 12:55 AM
- Forum: jQuery Mobile
Wondering if anyone has used tablesorter with jQuery Mobile. There seems to be quite a few conflicts with the CSS / JS. Any thoughts or ideas on this would be greatly appreciated.

Custom CSS in Jquery Mobile
[2Replies]
- 06-Feb-2012 02:59 PM
- Forum: jQuery Mobile
Where would I add the code below to make sure it overrides the CSS from jquery.mobile-1.0.1.min.css

My page always loads with the jquery.mobile-1.0.1.min.css first then if I refresh the page, it takes on the custom CSS. Any help with this would be much appreciated.

<style type="text/css">
/* Table Tabular Style */
table {
width: 100%;
border-collapse: collapse;
font-size: 0.875em;
font-weight: normal !important;
}
/* TR Tabular Style */
tr {
align: center;
}
/* TD Tabular Style */
td {
width: 50%;
text-align: center;
padding: .25em 0 !important;
border-bottom: 1px solid #ccc;
}
</style>

Loading external pages within a homescreen webapp on iPhone
[4Replies]
- 03-Feb-2012 07:39 PM
- Forum: jQuery Mobile
I'm developing an app for iPhone which make use of jQueryMobile and the homescreen mode, and I have to reference to an external link during the page flow, but after clicking the link, it opens the page in a new safari window, is there a way to do this without opening the page in safari, but doing so within the homescreen app. Thanks in advance.

Need jQuery Mobile with Google Map Example...
[0Replies]
- 30-Jan-2012 11:16 PM
- Forum: jQuery Mobile
I need a jQuery Mobile with Google Map Example that has both a header and footer. Would anyone mind sharing an example or ideas on how to do this.

Thanks,
Brady

Google Map wont show on initial load.
[1Reply]
- 30-Jan-2012 06:04 PM
- Forum: jQuery Mobile
Google Map wont show up on first load, (I have to refresh the page for the map to show up).

Anyone else have similar problem?

Here is my code...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;">
<meta name="apple-touch-fullscreen" content="YES">
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
/* height: 100%; */
position: absolute;
top: 43px;
bottom: 37px;
left: 0;
right: 0;
}
</style>

<script type="text/javascript">
(function() {

window.onload = function(){

// Creating a map
var options = {
zoom: 8,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);

// Adding a marker to the map
new google.maps.Marker({
position: new google.maps.LatLng(37.09, -95.71),
map: map
});

};

})();
</script>

</head>
<body>

<div data-role="page">

<div data-role="header" data-theme="b" data-position="fixed">

<a href="sensors.php" data-prefetch data-transition="slide" data-direction="reverse" data-role="button" data-position="inline" data-icon="arrow-l">Sensors</a>

<h1>102</h1>

</div>

<div data-role="content">
<div id="map"></div>
</div>

<div data-role="footer" data-id="102" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="102tabular.php" data-transition="slideup">Tabular</a></li>
<li><a href="102chart.php" data-transition="slideup">Chart</a></li>
<li><a href="102map.php" class="ui-btn-active">Map</a></li>
</ul>
</div>
</div>

</div>

</body>
</html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend