Full-Screen Page Loading Widget
Is it possible to customize the page loading widget so that (i) it shows a dark backdrop over the screen (like a Dialog) ? (ii) supports a back / cancel button that returns the user if they wish to abort the load process? For (i), would this CSS do the trick, or is there a better way ? .ui-loader { padding-top: 40%; width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; margin-left: 0 !important; margin-top: 0 !important; } thank you.
How to prevent duplicate click-type events?
I have an ongoing issue with users clicking on buttons and intermittently generating duplicate events. I've been using a variety of events to catch the clicks sooner rather than wait the 300 msec (like vmousedown), but this most recently happened with a vclick event. Since it's obvious that neither jQuery or jQM is doing anything to prevent this, and it's also not a bug in those due to the uncommon nature of it (I can replicate it now and then, but it takes lots of attempts to catch it once), I'm
Required form field support
Anyone wondering if the JQM team has any plans on supporting/gracefully degraded the html5 required property on form fields? I use alot of popup forms here and there and having a built in tooltip for required fields (or other failed validations) would kick ass. That could be something like this: <input type="password" id="password" data-validation-message="Please enter a password with more than 6 characters, 1 number and 1 capital letter" pattern="^.*(?=.{7,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d@!#$%^&*+-=]).*$"
changing jqm css style from a function
Hi JQM Gods- I'm stuck and I hope you can help. I'm new to development and I'm not quite sure where my thinking is wrong here. In my header toolbar I have two buttons for select lists. I've figured out how to put a pointer on top of the select list popup that points to the button tapped. I can't figure out how to change the position of the pointer when the user taps a different button. I added a line in the .ui-popup-container:after style that aligns the arrow under button 1 (left:90px). To align
Dialog close button triggers click on item behind it.
I have a dialog box (not a popup) with some fields and two buttons styled like so: <a data-role="button" data-inline="true" data-transition="none" href="#" data-icon="check" data-iconpos="left" id="saveEdit">Save </a> <a data-role="button" data-inline="true" data-transition="none" href="#" data-icon="delete" data-iconpos="left" id="closeEdit">Cancel </a> When one of them is clicked, a click event handler closes the dialog:
big problem to use event "touchstart"
hi ! i try to make a website by using openlayers for a map on my HTC-Desire. My source you can find in my develop-example. there i inser following source map.events.register("touchstart", this, function(e) { alert("touch start"); }); but if i touch simylar on the screen (map) the message will not show. may the wrong event i want to call ? did i use "tab" ??? could you help me? regards Jan :-)
Loading message? What am i doing wrong?
I have never got the Loading message to work. Well, at least not using the docs method to invoke it. What am i doing wrong. $( '#mypage' ).live( 'pagebeforeshow',function(event) { //Old method...does not work. $.mobile.showPageLoadingMsg("a", "Wait getting data.", false); //New method (1.2)...does not work. $.mobile.loading( 'show' ); }); Also, i am still using "live" instead of "on" (in the event). Why? Because when i use "on" nothing happens=does not work. Have no clue why that
Jquery call wont work after page calls itself
Kind of hard to explain. But with the website here: http://beerportfolio.com/mobile/ the button on the top left opens up the side bar navigation. When a user puts in the login information the page calls itself with this code: <h5>Sign In</h5> <form name=\"input\" action=\"index.php\" method=\"post\"> User Name: <input type=\"text\" name=\"user\" id=\"user\" /> </p> Password: <input type=\"password\" name=\"password\" id=\"password\" /> <div class=\"blank-divider\"></div> <p> <input type=\"submit\"
Adding require.js to jquerymobile template.
If I'm using the CDN files of jquery&jquermobile...how would i implement require.js Any steps or examples would be helpful. thanks. this is from the docs: http://jquerymobile.com/test/docs/pages/backbone-require.html
Using vmousedown to switch background on a button not working.
I'm trying to toggle the classes on vmousedown and vmouseup. It works ok one time per page div, then it stops working. I've tried $(document).on and delegate, though I'm not sure which element to tie it to. Is there a better way to just change background colors? $( '.logout').live('vmousedown',function(e) { $(this).addClass('ui-bar-c'); } $( '.logout').live('vmouseup',function(e) { $(this).removeClass('ui-bar-c'); }
Can i have multiple views?
Hi, I want to develop a website using PHP MVC and JQuery mobile. My Question is "Can I create different view files for different devices?"
Hiding div onload jquerymobile
Hi, I have a list that I want to hide when the page loads. My problem is that I need to refresh the page to have my ul hidden, because it's not on the first loading. How can I get rid of that ? If needed, here's my code. <script src="/jquerymobile/js/jquery-1.7.1.min.js"></script> <script type="text/javascript">$('#mypage').live('pageinit', function () { $('ul.my-list').hide(); $(".menu-icon").click(function () {$("ul.my-list").toggle();});});</script> <script src="/jquerymobile/js/jquery.mobile-1.1.1.min.js"></script>
JQueryMobile Listview border doubling up
Hi All, For some reason all of my list views whether rendered programatically or just through adding the elements in straight HTML seem to have a double border. It seems as though there is a slight gap which is causing the border bottom and border top to appear as a 2px width border instead of 1px. Any ideas on how to resolve this? Thanks
jquery mobile listview data only display when touch on the screen in Android (Samsung Galaxy Note)
Hi Guys, I encountered an extreme weird problem on Android device where the data in listview will only display when i touch on the screen. I am using jqm 1.2, phonegap 2.1, eclipse juno 4.2.1, and samsung galaxy note. Below are the code: <div data-role="page" id="sent_receipt" data-title="Sent Receipt" data-dom-cache="true"> <div data-role="header" class="header" data-position="fixed" data-tap-toggle="false"> <a id="a_sent_receipt" href="#search_receipt_option" data-icon="arrow-l" class="ui-btn-left"
Anyway to make listview right to left?
Hello there, I was wondering if there is anyway to make an unordered list with a count bubble something like this <ul data-role="listview"> <li>Points<span id="points" class="ui-li-count">10</span></li> </ul> i tried modifying the css file making all floats to right instead of left but it didn't work. Thanks in advance
png 24bit transparency fix
Hi all! I have 24 bit .png images in my web app. They have outglows and shadows which look in android (2.2) and dolphin browser to have edge lines around. I guess it's png banding problem with 24bit png images. Is there any fix for these browsers?(in opera mobile looks like normal).
Using floating numbers with jQuery Mobile slider
Hello jQuery Community, I'm currently facing a problem regarding the jQuery Mobile Slider. I modified the Slider a bit. I am using an array with values the slider can take. For example: [220, 250, 500, 900] If you slide to 245 the slider will automatically slide to 250 because it's the nearest value. While this works great with integers I'm having problems with floating numbers. For example if I take this one: var m2 = [19.5, 16.5, 14.5, 15, 10, 13]; my slider behaves in a strange way. When instantiating
Popup not appearing the 2nd time (1.2 beta)
Hi, I have a problem with the popup in version 1.2.0 beta: The popup itself is inside my index.html: .... <div data-role="page" id="landing"> <div id="popupBasic" class="ui-content" ><a href="#" style="float:right;" onclick="$('#popupBasic').popup('close');">close</a><div id="popupText"></div></div> ... </div> I have different pages which are loaded afterwards and some of them have links which should open the popup: $(".popupOpener").attr("data-position-to","window").attr("data-rel","popup"); $(".popupOpener").attr("href","#popupBasic");
JQM - Text within input not showing
Hello, I'm using jqm 1.2 stable, and i'm having this issue with the input that's showed up on top of a list (the filter input); and with regular <inputs> i use on different forms. On my android i tap them to type some text => the keyboards shows up but when i try to type something the input field doesn't update as I type the characters. Ive another app on this phone i previously developed with 1.1.x series and this issue isn't happening. Is something im doing wrong? or maybe some weird bug? Thanks
Postal Code Validation in JAvascript
Hi, I need to check the postal code is h2b3f4 But i worked as h2bfff and so on... For Eg: first three character is below the searchwords and next three character is anything. this is i worked. But now i want first three character is validated form search words and next three character is 3G3 That means Number Letter Number... Please any one help.. to change my below code Below code: function doSubmit(myform){ searchWords = ['h7l', 'h1h', 'h8t' ,'h1g','h1j','h1k','h1m','h1p','h1r','h1s','h1t','h1v','h1w','h1x','h1y','h1z','h2a','h2b','h2c','h2e','h2g','h2h','h2j','h2k','h2n','h2l','h2m','h2p','h2r','h2s','h2t','h2v','h2w','h2x','h2y','h2z','h3a','h3b','h3c','h3e','h3g','h3h','h3j','h3k','h3l','h3m','h3n','h3p','h3r','h3s','h3t','h3v','h3w','h3x','h3y','h3z','h4a','h4b','h4c','h4e','h4g','h4h','h4j','h4k','h4l','h4m','h4p','h4n','h4r','h4s','h4t','h4v','h4w','h4x','h4y','h7m','h7n','h7r','h7p','h7s','h7t','h7v','h7w','h7x','h7y','h8n','h8p','h8r','h8s','h8t','h8y','h8z','h9a','h9b','h9c','h9e','h9g','h9h','h9j','h9k','h9p','h9r','h9s','h9w','h9x','j7t','j7v','j7w','h7g','h7e'];
$.mobile.changePage after some operation on next page! How?
Hi, i have a little problem (i hope). In a my script when the user click on a link to page2 i need to do some operation before the transition. How i can? Follow my script: $(".team-link").live("click",function(){ var id_team = $(this).attr("id"); var where = "id_team="+$(this).attr("id"); $("#page3 .page-add-player").attr("title", id_team); var team = $(this).attr("title"); $("#team_page .team_page_header h1").html(team).attr("title",id_team);
Simple parameter passing to dynamic pages
A question that often comes up is how to pass parameters to some dynamic page. I'm using a rather loose definition of "dynamic page". By that I mean a page that has some content creation done in Javascript (whether or not the page was originally provided by a server). Typically, parameters are passed in the URL as a query string. Then you have to parse the query string, and it also looks ugly in the URL bar of desktop browsers. Why go to all that trouble? Such pages usually have a pagebeforeshow
Button to switch between mobile and desktop site
Hi guys, For the first time ever, I'm putting together a completementary landing page using Jquery Mobile. Still getting to grips with the framework but I have a question that I coudln't find the answer to anywhere. First off there is one thing I'm not quite understanding: Is the Jquery Mobile page hosted in the root directory on the site and when the user enters our site he goes automatically to the mobile site (if he is on a mobile device)? And then my main question, is there a way for my users
Youtube iframe in jquery mobile + phonegap build
Hi everyone! I'm using an iframe to embed a youtube video in an app for android/iOS developed using jQuery mobile and phonegap build. Testing it on my browser works fine. On my device (android) I see the video thumbnail, but when I click on it the screen goes black, I see the controls (play, forward and backward) and the video doesn't start. I'm checking that the video is avaible for mobile http://gdata.youtube.com/feeds/videos?alt=json&fields=entry[link/@rel='http://gdata.youtube.com/schemas/2007#mobile']&max-result=10&category=Music&q="+mySong
Dialogs: padding and scrollbar issues when adding a data-role="content" section
Is anybody else experiencing strangeness with padding and scrollbars in Dialogs? See the attached screenshot. If I put a data-role="content" <div> surrounding the content, the dialog is shortened and I get a scrollbar. If I leve out the content div the dialog appears correcty. I didn't set a page height for the dialog. Any idea why it is short? As well, unless I add padding to the page <div>, the top of the dialog is cut-off. This is regardless of whether or not I use a data-role="content" section.
missing version info in css file
Up to version 1.1.1 there was the version number shown in the css-file created by themroller. I was using this information in a system of mine where different users could use different versions of jQuery Mobile. I need the version number to know which version of the structure and core files I need to load for each user. Now in version 1.2.0 this information is not given in the css-file anymore. I could make the users input the version they are using - but this is imho to unreliable. Could I PLEASE
Storing and Setting Expanded property on dynamically created Collapsible blocks
I have a page that is dynamically creating Collapsible blocks from a dataset. Depending on the results returned, the page can create 0 to many collapsible blocks. The Dataset contains 2 Datatables, Table(0) contains the value for the Collapsible Blocks header, and the data to be displayed within the Collapsible block lives in Table(1). The code looks something like this: <% For x = 0 to myDatatable.Tables(0).Rows.Count - 1 %> <div data-role="collapsible" data-mini="true" data-theme="a">
Headers and Footers with <li> click transitions
Hello, So I'm new to JQuery mobile, and so I'm still trying to firmly grasp how it deals with pages. What I'm trying to do is have an unordered list <ul> with list items <li> under to make a kind of hierarchy menu. I have a header and a footer in the page that I want to stay even when the user clicks on one of the list items. What JQuery mobile is doing is creating a new header with a title of clicked list item, and then showing subsequent lists. What I want to do is keep that original header and
jQuery undefined in 1.2 stable jquery.mobile.js
I have updated jquery.mobile-1.0b2.js to jquery.mobile-1.2.0.js. I am getting jQuery undefined error. In the previous beta version, I have modified the js as (function(jQuery) { // beta version code here.. })(custom.jquery); where custom.jquery is defined as custom.jquery = jQuery.noConflict(true); in the jquery.js I have done similar wrapping in the stable 1.2 js and got the undefined error. Without wrapping also got the same error. Please advice me
problem with URL in buttons
Hi all, I want to use some buttons to navigate between different websites. <a data-role="button" href="./index1.php" data-icon="plus" data-iconpos="left" data-transition="slidefade"> if I use this, and test it on my iPhone, the output is without my stylesheet. If I do a reload of the page, it works. I found out with IE, that the site will be shown as http://www.domain.com/subdir/menu.html#subdir/index1.php where is the reason of that and how can I get a "normal" working link? thanks for your help
Browser back button won't work after form submitted with post method
Hi all, here is my problem: I have a website where the user have a landing page selecting his language preference. (page1) He then goes on an identification page where he supplies some infos via a form post (page2) When on page 3, if the user click the browser back button, its sending him back at page1. On mobileinit, I've setted the following: $.mobile.ajaxEnabled = false; $.mobile.pushStateEnabled = false; $.mobile.hashListeningEnabled = false; Its acting that way in ios6 on safari. If I try the
using jqm 1.2 with phonegap 2.0 , cant open popup
hi, i cant open any popup, i did the same thing on the demos on JQM web site. am getting exception that the self.options.container .one(self.options.closeEvents, $.proxy(self._close, self)); is undefined. can anyone help please?? i removed the follwong from the popup widget, open method: // if ($.mobile.popup.active) { // return; // } and this from the init of the popup widget: //history: !$.mobile.browser.ie thanks
Why is my dynamic data loading and refresh not working?
Hello, I want to use jQuery load to load external data on my page and then let jQuery Mobile run over it again to apply themes etc with a trigger. The data is loaded fine, but it is not reskinned properly. I just put a small example together to demonstrate this, as my entire project is too big. I have a.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test</title> <link rel="stylesheet"
How to change font size in a navbar footer?
Hi, I wanna change the font size of my navbar in the footer area. The problem is that it can't display the hole text and it ends always with "...". atm my code is this: <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="left"> <ul> <li><a href="" data-icon="home">Home</a></li> <li><a href="" data-icon="gear">My Settings</a></li> <li><a href="" data-icon="plus" >Invite Friends</a></li> <li><a href="" data-icon="refresh">Synch</a></li> </ul> </div> </div> Can anybody
nested page problem
hi , I want to use nested page in my application, so I create a page container as my home page, the container has a fixed header and fixed footer, and the footer has a navigation bar.The html is like below. <div data-role="page" id="container">--home page <div data-role="header" /> <div data-role="content" id="contentcontainer">--content page container <div data-role="page" id="contentpage1" /> <div data-role="page" id="contentpage2" /> </div> <div
jQuery Mobile 1.2 loading message problem
Based on JQuery Mobile 1.2 spec, I used $.mobile.loading('show') method to display wait spinner whenever user tap on listview. My list items were displayed in full mobile screen. It works fine except two items positioned within the area the loading message WILL be displayed. Seems the loading message block the tap event. However if I click once more on the item, it works fine. Anyone encounter this case?
Autodivider Features - group & count
Hello. I noticed in the autodivider 2 things: - you can't count the elements you have in any divider. - if your list have not ordered, you can get more dan 1 divider with the same value. Then I deside to make some fixes in the core code adding 2 flags. Adding "autodividersCounter" flag, you can count all elements you have in any divider. With "autodividersGroup" flag, the autodivider will group all elements that matches with the same autodivider value. Is so easy to use them, just do something like
jquery mobile page scrolling
hi I am using jquery mobile for my application. I want to make page in wich data-role= content div shold be scroll when it is overflow and header footer div's should be fixed. means only content should be scroll.I have aleredy seen the cubiq-iscroll plugin.this plugin is good but not working in all platforms its only working in i-phone . can any one help to make page like this
JQM 1.2 dialogs slow to open
Hey Guys. I've started experimenting a bunch with the 1.2 dialogs and popups. On my iPhone 4 running 5.1, it takes about 1.5 seconds on average to open dialogs. This is pretty consistent with any dialog no matter how much UI it contains. Also, I get the same behavior whether it's a button with data-rel="popup" and the anchor pointing to the popupid or just a $('#mypopup').popup('open'). I always turn off the transition and almost always have postionTo set to window. I haven't done really ANY digging
FullCalander in Android Simulator
I am new to mobile development. My goal is to include a FullCalendar into JQueryMobile. I have followed this guide but when I run it with the Android Emulator, it loads the event dialog page with input text "title" and "color" like the image below. How can I make it load a full calendar view first instead of an event dialog? I have copied all js & css. Here is my index.html code <html> <head> <link rel='stylesheet' type='text/css' href='resources/css/jquery-ui-1.8.13.custom.css'/>
Next Page