Response title
This is preview!
- Screen name: PPetree
- About Me: http://www.about.me/phil.petree
PPetree's Profile
8 Posts
19 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- 04-Apr-2017 01:13 PM
- Forum: jQuery Mobile
I'm using the classic JQM theme which is contained in mytheme.css.- <link rel="stylesheet" href="jquery.mobile/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="mytheme.css" />
<script src="jquery.mobile/jquery-2.1.4.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>
The relevant HTML looks like this:- <div id="homePage" data-role="page" data-content-theme="b" data-theme="b">
<div class="ui-grid-solo">
<input type="button" id="my_id" class="alert" data-theme="e" value="My Button">
</div>
</div>
I've tried several things to change the color of my_id to darkorange including leaving out the data-theme and setting the .css as follows:- #my_id .ui-page .ui-content .ui-btn .ui-btn-inner
{
color : black;
background :darkorange !important;
} - #my_id .ui-btn {
background: #ffa500 !important;
background-image: -moz-linear-gradient(top, #ffa500, #ffa500) !important;
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffa500), color-stop(1, )) !important;
color: black;
text-shadow: 0px 0px 0px ;
font-size: 40px;
border: none;
}
I've also tried changing the color via jquery and still nada- $('#shooter').parent().find('.ui-btn-inner').css("background-color", "orange !important");
Everything else is perfect... just one button with a needed color change... So, what's the trick?- 27-Sep-2016 09:42 AM
- Forum: jQuery Mobile
I have a popdown menu in the header. On iOS it works perfectly. On Android... well... if you push the menu button some random number of times the MIGHT eventually popup where it's supposed to. It does always popup (generally on the opposite side of the screen) and when its up none of the selections are clickable but instead just dismiss the menu.Here are the files I'm including:- <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.min.css" />
- <script src="jquery.mobile/jquery-2.1.4.min.js"></script>
- <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>
The code looks like this (straight off the jqm site):- <div id="header" data-role="header" data-theme="b">
- <h1>My Cool App</h1>
- <a href="#popupMenu" id="menu" data-rel="popup" data-transition="slidedown" data-position-to="#position-header" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-right ui-icon-bars ui-btn-icon-right ui-btn-b">Menu</a>
- <div data-role="popup" id="popupMenu" data-theme="b">
- <ul data-role="listview" data-inset="true" >
- <li><a href="settings.html" rel="external" class="ui-icon-gear">Settings</a></li>
- <li><a href="about.html" rel="external" class="ui-icon-info">About</a></li>
- <li><a href="login.html" rel="external" class="ui-icon-lock">Login/out</a></li>
- <li id="location"><a href="location.html" rel="external" class="ui-icon-location">Location</a></li>
- <li><a href="alerts.html" rel="external" class="ui-icon-alert">Alerts</a></li>
- </ul>
- </div>
- </div><!-- /header -->
This is what it looks like to the user:And of course, this is what it should look like and what it looks like on iOS:I've also tried this in numerous browsers (IE10. Chrome and Firefox) and there are no issues.. only on Android devices (i.e 4.2.2 >).Any ideas?- PLEASE DON'T SEND ME LINKS TO DIALOG TUTORIALS, THAT'S NOT WHAT I WANT!This should be a rather simple question. I create a popup and that popup acts as a confirmation box WITH options (which is why confirm() isn't applicable).Essentially this is a form within a popup and the 'X' acts as a cancel operation (which returns a FALSE), and the "OK" button acts as a submit which returns TRUE when pressed.
- <a href="#popupConfirm" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
- <div data-role="popup" id="popupConfirm" data-theme="b" data-history="false" data-dismissible="false">
- <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
- <p>I have a close button at the top right corner.</p>
- <p><a href="#" onclick="$( "#popupConfirm" ).popup( "close" ); return(TRUE);" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Send Now!</a></p>
- </div>
So, my question is how do I detect when the 'X' is pressed and/or does that automatically bubble up as a 'FALSE' return? What happens to the submit, is that returned as a TRUE? And the settings within the form?Sorry but the popup docs are just not clear about that.Thanks!P.- 04-Sep-2012 05:14 PM
- Forum: jQuery Mobile
Straight, raw... using it as a local page within a phonegap/cordova app (cordorva 2.0.0) but the cordorva libs are not loaded on this page:Load and run this page and the collapsible extends beyond the side of the viewable area... convert it to a dialog and load it and the collapsible extends beyond the side of the dialog box.- <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Width Test</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.min.css" />
<script src="jquery.mobile/jquery-1.7.1.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script>
</head>
<body id="widthTest">
<div id="widthPage" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Width Test</h1>
</div>
<div data-role="collapsible" data-collapsed="true" data-inset="true" data-theme="b" data-content-theme="b">
<h3>Collapsible</h3>
<div class="ui-grid-solo">
<div class="ui-block-a">
<a href="#" data-role="button" data-theme="e">Test Button 1</a><br>
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-block-a">
<a href="#" data-role="button" data-theme="e">Test Button 2</a><br>
</div>
</div>
</div> <!-- end of collapsibles -->
<div class="ui-grid-solo">
<div class="ui-block-a">
<a href="#" data-role="button" rel="external" data-theme="e">Another Button</a>
</div>
</div>
<div id="widthtest-message"></div>
</div><!-- end of page div -->
</body>
</html>
- 29-Aug-2012 01:07 PM
- Forum: jQuery Mobile
Hi All!I want to trap the back button on my index.html page so that users will know when they're exiting the app vs sending the app to the background.I have code that works by trapping the back button, checks the page and if it's the index page, prompts to exit and cancels the exit if necessary. The problem is, when I navigate to another page the back button no longer works at all.At this point in the development, this is a multiple page model so each page is in its own seperate file and to me, document.addEventListner should terminate when a new page (document is loaded).Here's the code:- document.addEventListener("backbutton", function(e) {
- if($('.ui-page-active').attr('id') == "main");
- {
- if(confirm("Really exit blah blah?\n\nIf you do, you will no longer receive messages!") )
- {
- device.exitApp();
- }
- else
- {
- navigator.app.backHistory();
- }
- }
- navigator.app.backHistory();
- }, false);
- 23-Aug-2012 05:11 PM
- Forum: jQuery Mobile
I'm getting a list of items back via json and displaying those items just fine... none are static, all or displayed dynamically.What I want to do now is bind a taphold event to popup a delete menu and a swipeleft/swiperight event to load a new page and display the entire item (instead of just its header).The items/headers are inside <li> and those are nested inside <div data-role="collapsible"> elements.I've read a dozen articles and there seems to be all sorts of issues witht this: all sorts of events bubbling up the dom etc, bind doesn't work with dynamic elements etc. etc. and the code to fix all these issues seems like cutting off the leg to fix a hang nail.What's the right way to implement a .bind("taphold", popupDelete(event) ); so that I know what element was clicked and not get all the issues that seems to come with this event???- 23-Aug-2012 04:58 PM
- Forum: jQuery Mobile
I'm using jquery.mobile-1.1.0.min.js and cordova-2.0.0.js (phonegap).
In my setup for my $.ajax call I set my params like this:
- success: onFetchOK, // saves everything to the database
complete: function(jqXHR, textStatus) {
// show everything in the database
showAllHeaders();
},
error: function(xhr, textStatus, errorThrown) {
alert("onFetchFailure: There was an error retrieving messages: \n"
+"xhr: " + xhr.statusText
+"\nstatus: " +textStatus
+"\nerror: " +errorThrown.message);
$('#fetch-result').html(textStatus);
},
The function onFetchOK gets 18 message headers back from the server, each message header has an id, subject and a date/time and these get stored in the webdb using the phonegap webdb storage API.
If I drop and recreate the message table and run the app fresh, the ajax complete: function gets called once for each of the 18 messages I receive so 342 message headers gets displayed (18x18+18).
No where in my code other than this one $.ajax complete: does showAllHeaders(); get called.
I placed an alert inside the showAllHeaders() and that alert gets triggered 19 times.
To narrow this down further I placed a loop counter inside my $.ajax success: onFetchOK() like this:
- var loopCount = 0;
// process each message
$.each(json.messages, function(index, msg)
{
// save each alert before displaying it
webdb.addAlert(msg.msg_id, msg.title, msg.when);
loopCount++;
});
alert("loopCount = " +loopCount);
When this alert is called it shows "loopCount = 18" and this is called/displayed only once.
If I exit the app, reload it and no new messages are pulled from the server then 18 message headers are displayed, which is exactly as it should be.
So, it appears that my complete: function() is being called repeatedly... once as it should and then 18 more times (effectively once for each message header retrieved).
Anyone have any idea why this would be?
- I'm trying to implement the datepicker and I have two fields on my form: Birthdate & Lived here since?In my header I have:
- <script type="text/javascript" src="javascript/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="javascript/jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="javascript/jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="javascript/jquery/ui/jquery.ui.datepicker.js"></script>
<link type="text/css" href="javascript/jquery/themes/ui-lightness/jquery.ui.datepicker.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
The html looks like this:
- <tr>
<td>Date of Birth MM/DD/YYYY<br>(Restrict kids from some areas)</td>
<td><input type='text' id='datepicker' name='dob' maxlength='12' /></td>
</tr>
<tr>
<td>Lived here since?</td>
<td><input type='text' id='datepicker' name='since' maxlength='12' /></td>
</tr>
When I click on the 1st date field (birthday) it mostly works... I say mostly because it doesn't appear to be pulling in that css as the widget is pretty spread out and has no borders etc.When I click on the 2nd date field (here since?), absolutely nothing happens.Surely this supports multiple date fields on the same form so what am I doing wrong?Thanks,Pete - <script type="text/javascript" src="javascript/jquery/jquery-1.4.2.js"></script>
© 2013 jQuery Foundation
Sponsored by 
and others.