I'm having a bad time with the buttons in KendoUI. When I debug with Ripple, I can see the buttons, but when I try on my phone (an Atrix with CyanogenMod7), the buttons just does not show!
Here's the code I'm using:
<div data-role="view" data-layout="listado-layout" id="main-update" data-title="Actualizar Base de Datos">
<ul data-role="listview" data-style="inset">
<li><center><input type="button" onclick="updateDB();" value="Actualizar"></input></center></li>
</ul>
By the way, I'm making an application with PhoneGap, and I cannot see the buttons from the browser or phonegap.
This looks like a bug in Android's browser - a button in a transformed element looses its default styling and has only black text on transparent background and looks like it disappears. As a workaround you can use data-role="button" to use the Kendo UI Mobile styling, like this:
<li><center><input type="button" data-role="button" onclick="updateDB();" value="Actualizar" /></center></li>
Related
As a preface, I am using PhoneGap. When I click on a Category Title, I have taken that title and set it in sessionStorage. Now, I want to set the "back" button of a new PhoneGap page (which displays some information contained in that category) to that Category Title. The HTML code is shown below. To be specific, I want to change the text of the "a" element within the "header" element.
I guess a part of my question is, does the fact that I am using PhoneGap change how I can access the anchor tag? I've been trying to set the back button text right after the Category has been selected/clicked on. I have tried multiple things like:
$("adviceBodyNavbarHeader a").text(sessionStorage.getItem("catTitle"));
but I can't quite get it working, and it is getting quite frustrating =/
<div data-role="view" id="adviceBody" data-title="Advice Body" data-show="GetAdviceBody" data-transition="slide">
<header data-role="header" id="adviceBodyNavbarHeader">
<div class="navHeader">
<a class="nav-button" data-view="adviceTitles" data-align="left">Back</a>
<span id="adviceTitle" class="navTitle"></span>
</div>
</header>
<ul id="advice-body" data-role="listview">
</ul>
</div>
Your selector is wrong. You try to select a html element called adviceBodyNavbarHeader.
What you want to do is this: $('#adviceBodyNavbarHeader').text(sessionStorage.getItem("catTitle"));
Hope it helps.
Edited my post due to late brain inactivity.
Using a jQuery Mobile button like:
<ul data-role="listview">
<li><a data-role="button" href="#" id="test">Test</a></li>
</ul>
I am attaching a tap handler like this:
$('#test').on('tap', function(event) {
event.preventDefault();
window.console.log('do something useful here');
});
The problem is that either preventDefault is blocking the JQM css changes to buttons like ui-btn-down/active/up/etc. or just adding the tap handler at all is preventing them. So it doesn't quite feel right to the user cause there is no visual impact of clicking the button.
Is there anyway around this problem? Perhaps manually assigning the classes in each handler - though that seems heavy handed.
Instead of preventing default actions of a link, you can use the button element:
<div role="main" class="ui-content">
<button id="test">Test</button>
<br /><br />
<input type="text" value="" id="output" />
</div>
$('#test').on('tap', function(event) {
$("#output").val(new Date());
});
jQM styles the button the same way, so there is no real difference.
Working DEMO
Upon further testing, my premise for this question was wrong. The issue appears to be the duration of the tap itself. If you tap too quickly the classes don't get applied, but a few ms longer and they do. I am closing this question.
This is my first time using the jQUery Mobile popups. I've found documentation here and here. How I'm looking to create the following:
Now according to the doc's, the following code should work:
Open Popup
<div data-role="popup" id="popupBasic" data-dismissible="false">
<p>This is a completely basic popup, no options set.<p>
</div>
But given the code above I still keep getting the stock standard popup:
Any idea what I am doing wrong?
data-dismissible means whether you want the popup to close once clicked outside it. The default value is true, if you set it to false, you have to add a button with data-rel="back" to close it, jQM wont add a close button dynamically/automatically.
Change your markup to the following.
<div data-role="popup" id="popupBasic" data-dismissible="false" data-theme="c" data-overlay-theme="a">
<p>Click button to close this.</p>
Close
</div>
Note that data-theme and data-overlay-theme are different, the latter changes the color of the popup's overlay.
Or, you can close it programmatically.
$("#popupBasic").popup("close");
Demo
I have very little experience with CSS.
I'd like to style the default JQuery Checkboxes to move the checked icon from left to right.
I have used my badass Paint skills to illustrate what I'm looking for.
So I'm not asking for someone else to do the job, just some pointers in the right direction.
What would be the best way to achieve this ?
Thank you !
jquery-mobile v1.0 has a custom data attribute that you can use to adjust icon positioning. This includes checkboxes, radio buttons, nav bars, and other elements.
Documentation:
http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html
To create the checkbox you've drawn in your question above, your code would be:
<input type="checkbox" name="checkbox-name" id="checkbox-id" />
<label for="checkbox-id" data-iconpos="right">I agree</label>
Notice that data-iconpos is applied to the label. That's because jQuery Mobile styles this element heavily to act as the UI element in the front-end. In other words, with this attribute, you're positioning the checked/unchecked icon to the right side of the label.
Note: If you attempt to workaround this attribute and add class="ui-btn-icon-right" to your elements, jQuery Mobile may drop those classes when the page renders.
Try looking at the rendered output after jQuery Mobile parses your code using Firebug.
You will be able to see the structure and classes added to the form element. The class names added by jQuery Mobile are pretty strait-forward to understand.
--UPDATE--
Here is the HTML from firebug for the jQuery Mobile documentation for check-boxes:
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-label" role="heading">Agree to the terms:</div><div class="ui-controlgroup-controls">
<div class="ui-checkbox"><input type="checkbox" class="custom" id="checkbox-1" name="checkbox-1"><label for="checkbox-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-controlgroup-last ui-checkbox-on ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">I agree</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span></span></label></div>
</div></fieldset>
</div>
Notice the "ui-btn-icon-left" class, I'd play with that, you may not just be able to change it to "ui-btn-icon-right" but you can play with the structure. I've done this for other elements however I have not tested with check-boxes.
This is now part of JQM using the standard APIs by setting data-iconpos="right"
See http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition for more details
There seem to be some problems with tabindex in several browsers so I want to work around these issues using javascript/jquery. Specifically FF3.5 (Mac) doesn't accept tabindex or focus on links at all. I have jquery 1.3.2 and js-hotkeys 0.7.9 running on my website.
I have 4 forms on 1 page which I can switch between using a link. Now when the page loads I what 1 of the links to have the focus using it's id. Then I want to be able to tab between each link to display each form.
Stripped down code looks like this:
HTML
<nav id="postNav">
<ul>
<li class="Nav1">1</li>
<li class="Nav2">2</li>
<li class="Nav3">3</li>
<li class="Nav4">4</li>
</ul>
</nav>
<form class="postForm" id="post1">
</form>
<form class="postForm" id="post2">
</form>
<form class="postForm" id="post3">
</form>
<form class="postForm" id="post4">
</form>
Jquery
$(document).ready(function(){
$("#postNav ul li a").click(function(event){
var postOptionSelected = $(this).parent("li").attr("class").substr(3);
$("form#post"+postOptionSelected).show();
$("form.postForm:not(#post"+postOptionSelected+")").hide();
event.preventDefault();
});
});
This isn't a Firefox issue. It's a system setting for Mac OS. In System Preferences, Keyboard & Mouse, and Keyboard Shortcuts, there's a Full keyboard access setting that allows users to configure whether they want Tab to enable changing keyboard focus to text boxes and lists only or to all controls. It is set to text boxes and lists only by default.
Safari on Mac OS has a setting in Safari, Preferences, Advanced, Press Tab to highlight each item on a webpage to override this behavior.
I think you forgot the "Form" after "post":
$("form#postForm"+postOptionSelected).show();
$("form.postForm:not(#postForm"+postOptionSelected+")").hide();