Size of font
Hi: I have inspected the document, and I don't find any font-size selector to modify font-size of buttons ... where are they ? :P The computed style for one of them is: -webkit-background-clip: padding-box; background-attachment: scroll; background-clip: padding-box; background-color: #EEE; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FDFDFD), to(#EEE)); background-origin: padding-box; border-bottom-color: #CCC; border-bottom-right-radius: 9px; border-bottom-style: solid; border-bottom-width: 1px;
button's down arrow not displaying correctly on iPhone 4
Hi, on iPhone3 the down arrow for a button appears correctly. However, on an iPhone4 only a few dots of the arrow appears. Any ideas? thanks Matt
How to use document.write with jQuery Mobile
I'm building a mobile site using jQuery Mobile, and I need to include widgets that use document.write. When I test embedding the widget code in a page using a collapsible content block, the widgets overwrite the entire page. I'm aware that any document.write that doesn't fire inline (after the doc is done loading) actually calls window.open, which I assume is where the issue is coming from. Here's a sample of the widget code: <script> var x = someDate; var y = someOtherDateVar; document.write(<script
JQM Alpha 3 with google maps
Can anyone show me some pointers in implementing google maps. I am using JQM Alpha 3 with a C#.net backend. I looked thru several posts but all of them seem to be half answered. not sure which one really works. Appreciate your help !
Button links not working after login on Motorola touch with Android v1.5
I am testing a proof of concept on a client of mine. The owner has a BlackBerry OS v5+ and installed Opera Mini and its working like a charm. On the other hand, one of her employees just purchased a Motorola touch that came with Android v1.5 and its native browser is working but after she logs in the top buttons I added on the toolbar stop working. After she installed Opera Mini and navigated the application it does not show the framework's styles. Example: <a href="/Controller/Action" data-theme="b"
Mobile apps saved to home screen on iPhone may run 2 to 2.5 times slower than in Safari browser
Hi folks, I took a look and I did not find a post on this so hopefully this is not a repeat. Take a look at this article http://www.theregister.co.uk/2011/03/15/apple_ios_throttles_web_apps_on_home_screen/. Essentially, mobile apps launched from the home screen do not take advantage of the Nitro javascript engine. I know that this is completely relevant to work that I have been doing in jQuery mobile so I hope some of you find this useful. Take care :)
datagrid
how to create datagrid using jquery mobile..? any trick or plugin??
JQueyMobile and direction:rtl
I want to create a JQueyMobile app, which has Right To Left layout. Is there any configuration, to make all page transitions moving the opposite way from the default ?
is there any way to make the 'back' button always go to same pages?
to be more specific, i find that when navigating through the app sometimes the user may take certain paths which cause the back button to behave strangely. i guess really it is behaving by popping things off its stack, but it seems to me it would be far simpler just to have the back button as a static link always directing the user back to the same place(s). Am i missing a fundamental point here? edit: i thought about this a little more. it seems to me that the fundamental difference between a
Can i Use This JQuery for Low End Mobiles?????
Hi to All, i am new this forum.i have a one Question can any one please Answer me. can i use this Jquery for all mobiles means by using this can i build the Web pages for Low end mobile that they dont support the touch screen?????? if not can u please tell me how build the web pages that should be supported by all( low end aand hight end)mobiles????? what are all the mobiles supports the this Jquery?? Thanks&Regards, Ramakrishna Rayudu.
Problem with data-icon=""
Hi this is my first post here, since i just started to use this fantastic framework! As always when you get into something new i got my first problem :) When i try to apply data-icon= to the button, for example a href="index.html" data-role="button" data-icon="delete">Delete</a> it doesn't work... I am pretty sure that it used to work some day ago but now i can't manage to display any icon on the button. In addition also data-iconpos="notext" doesn't and it display always the text... I don't know
Better support for dynamically creating/update DOM elements
I've created a rich data communications library in JavaScript for my company. It models our Java based Component API as a remote API in JavaScript. This is great because I'm able to write sophisticated web applications just out of JavaScript, HTML and CSS. Just about everything can be written in the client. With faster JavaScript support for the client, this seems to be the current trend of web development. In particular, this approach works well when developing a truly open web app for a Smart Phone
Header:How to fix all the text in the header
The system does not display all the text in the title. It displays Calculate a Pr... instead of Calculate A Price. I used the same logic in a new page, and it displays all the text in the title. My page has multiple page/header/content/footer in a page. I don't know that caused the problem. Here is my code: <div data-role="page" id="divMainPage" runat="server" > <!-- divMainPage Begin --> <div data-role="header" data-theme="b">
How do I hide the back button?
How can I hide the back button in the header? I've got my own navigation.
mobile image viewer
I've got a product page that has an image on it. I'd like to be able to click that image and load alternate views of the product in some type of image viewer that is navigable with either <next> and <prev> buttons or via swipe. Has anyone been working on something like this or can anyone help guide me in the right direction? Ideally... I'd like the image to open in a dialog container that overlays the current page... but a separate page would probably be fine as well. Here's what I've been working
Expand/collapse a collapsible-set
This is rather a simple question but I can't seem to figure out what to call if I want to expand a div and then not allow one from expanding. For example I have the following HTML code: <div data-role="collapsible-set" class="ui-collapsible-set"> <div data-role="collapsible" data-collapsed="true" class="ui-collapsible-contain" id="dumb1"> <h3 onclick="goToFunction()">Go to another Place </h3> </div> <div data-role="collapsible" data-collapsed="true" class="ui-collapsible-contain">
Bug in select menu form
Hi, I find a bug that you can reproduce with the JQM demo http://jquerymobile.com/demos/1.0a3/#docs/forms/forms-selects.html clic to Select a state, many option to show, so it's create a new dialog page. The URL become: http://jquerymobile.com/demos/1.0a3/#docs/forms/forms-selects.html&ui-state=dialog I clic on Alabama, this close the dialog page but the URL still: http://jquerymobile.com/demos/1.0a3/#docs/forms/forms-selects.html&ui-state=dialog and if I try to clic to the back button..... the Ajax
header toolbar height
I know I can set the height via CSS, but why is the height of the header toolbar not a fixed value? Rather, it's based on its contents. That seems odd.
What is the best way to detect all useragents which can handle JQuery Mobile?
Hello, we developed to mobile versions of a website, the pretty one uses JQuery mobile, while where is a very basic fallback version with simple HTML/CSS for older mobile systems. Now my question is, how can I find out the useragents which can handle JQuery mobile? I want to do this with PHP, something like this: $user_agent = $_SERVER['HTTP_USER_AGENT']; $browser = get_browser(); if(preg_match('/iphone/i',$user_agent) || preg_match('/android/i',$user_agent) || preg_match('/webos/i',$user_agent)
How to refresh a page with a transition effect ?
Hello everyone, I have a single html file called "refresh-with-transition.html". This html file is made of a single inner page called "template". This "template" page is made of buttons. Those buttons link the page itself : while reloading the page I would like a transition effect to occur. Why ? That's because the content of the page is suposed to be updated while refreshing. I say supposed because I am not focused on this update part so far but only struggling with the transitions See my (unsuccessful)
Dialog with a changePage call
I have a search button on my pages that the user can click anytime. I POP a model dialog box collecting their search parms. When the click the search button on the dialog, my function calls $('.ui-dialog').dialog('close'); $.mobile.changePage( "#search-page", "pop" ); this code works correctly but the screens transitions are strange, First the dialog box is removed and the original page is shown, then the POP of the search-page is shown. If I remove the dialog(close) call, the transaction
Retaining state in each tab?
Hi I can build an app with a tab bar at the bottom of the page, but each tab of the app always starts from the beginning when I click it. In a full app, after I've drilled in a few screens in one tab, I can switch to another tab and switch back, returning where I left off. Is there a way to get this behavior in jqm? Do I need to somehow rewrite the links in the tab bar? Brad
[solved] jQM PHP form MySQL plus redirection after submission
I have a PHP form which makes a mysql record. The process itself works perfectly but not the redirection after sending. The URL of the form is: http://www.domain.xx/seafoodguide/sharkpledge.php After submission, the URL is: http://www.domain.xx/seafoodguide/sharkpledge.php#/seafoodguide/sharkpledge.php? Can anybody help me with this. Has this something to do with AJAX? Do I need to switch off Ajax for the form page? that would not be nice. Cheers Ralph Here the form: <form action="<?php echo $editFormAction;
Backbutton not working in iBBDemo2 Simulator
Hi all.. I am a newbie to jquery mobile. Backbutton not working in iBBDemo2 Simulator. I tried run the jquery mobile demo itself. But still back button is not working. have any idea about this?
Google Map JQM Fusion Tables
Hi, all. Updated my app (still in beta) with alpha3 framework. This change forced me to make a new layout as i didn´t success in getting the auto complete to work in a dialog as with previous versions. The function seems quite alright now, although i find the map itself sometimes slowing up, clogging and eventually crashing. I would love to have some feedback and/or ideas about the UI and/or the code. And please tell me if you experience problems with it. http://newspapermap.com/USmobil.html regards
Problems with jQuery Mobile alpha 3 with jQuery 1.5 (only non-WLan)
Hi all, I have a strange problem and hope you can help me. I am using jQuery Mobile 1.0 Alpha 3 together with jQuery core 1.5 as proposed in the documentation. Everything works fine under most setups except for iPhone 3GS with iOS 4.3 using 3G. I only get a blank screen. If I connect with the same phone via WLan everything is fine. I have tried some things and found out that switching from jQuery 1.5. to jQuery 1.4.4 does the trick. So here are the setups I have tried: iPhone 3GS: jQuery 1.5 via
jQuery Mobile post to a html/php page from a data-rel='dialog' link
Hi, The title says it all really. Anyone explain to me how you can pass variables to a page thats being displayed in a dialog? I'm basically trying to display an elarged image when someone clicks on a dialog link. Instead of making multiple pages with 99% markup the same, I jkust want to pass the image name and change the src of the img tag. Basic stuff but this has stumped me with jquery mobile. Cheers for your anticipated help Update: So many people views, yet no one replied :( . Looking
jQuery.tmpl gives error when fiering with mobileinit
I hooked a function to the pageshow event and my tmpl method gives an error. Any clues? $(document).bind("mobileinit", function(){ // Home page $('#home.ui-page').live('pagecreate', function(event, ui) { getDimensions(); }); }); getDimensions is basicly a ajaxcall which puts stuff into the template but I get an error when I call the appendTo method. Pages are automagically loaded with ajax in jQM. $('#dimensiontemplate').tmpl(dimensionlist).appendTo('#dimensionlist');
Navigates rather than executing
Hi, I'm using following code to detect location and update accordingly. If I put this code in separate js it works perfectly, however when I put this inside html file (which improved the performance of site drastically), it navigates to index.html rather than executing the call back function show_map. Please help. $('#btnLocationUpdate').live('click', function (e) { alert('updating location'); // this works perfect if (Modernizr.geolocation) { // from here,
Improper Loading UI
Hi, I'm using data-theme="e". Previously, using this theme I could see loading UI (normal rectangle with loading screen) with same theme i.e. Yellow color. However, now I'm getting black rectangle without the animation. I don't understand what I've made wrong in my code. Please help.
PlayBook: jQueryMobile trying to A HREF='next.html' hangs in 'Loading'
Hello, I have a very simple PlayBook app using jQueryMobile to demonstrate this issue. Just hitting the Next button to go to next.html, it just hangs there showing "Loading" and the CPU goes high, any ideas what I'm doing wrong? index.html <html> <head> <title> test</title> <meta id="viewport" name="viewport" content="width=device-width" /> <link href="jquery.mobile1.0a3.min.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.5.min.js"></script> <script src="jquery.mobile1.0a3.min.js"></script>
Odd issue with selector caching
I've got a simple jqm demo that shows off paging of search results. You can see it here: http://www.coldfusionjedi.com/demos/march132011/index2.cfm If you search for "e" you will get a lot of results. The Prev/Next buttons work fine, but what I'm playing around with is swipe left and right events. I thought it might be cool if you could paginate using swipe events. In my index2.cfm file I added the following simple code: $(document).ready(function() { $('#searchPage').live('swipeleft swiperight',function(event){
Slider with dynamic value issue
Hello, I'd like to create a slider with dynamic value. How do I refresh UI to show selected value? My example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
Hide Url bar not working?
I was told that JQM hides the url by default, but doesn't seem to be working on my site. Is there some trick to this? I've been reviewing the sites at http://www.jqmgallery.com/ and noticed that http://m.untappd.com/ was one of the few that did this. I've tried many of the scrollTo examples with no luck. thanks!
JQM : Touch optimized iPhone-like Horizontal Slider control (screenshots)
Hi, Recently I was working on jQuery mobile and thought of creating a control that looks similar to the one on iphone while you go to app store. since jquery moblie supports touch events, I optimized slider script to support swipe left-right events. Test swipe left and swipe right events on following URL. it works grate on mobile devices. However sliding easing is not smooth. I'm sure any jQuery master will modify script and make it work properly. Here is the test link Demo : jQuery Mobile - Slider
Problem running jquery plugin validate after ajax call to page.
I have a form page that I wish to validate with the jquery plugin validate found here http://docs.jquery.com/Plugins/Validation Now the problem if I link to the page this is on using the rel="external" so that the page is not called via ajax it works fine (IE <a href="http://localhost/index.php?id=2" rel="external">Add</a>) but if I link to it using the default ajax link (IE <a href="http://localhost/index.php?id=2">Add</a>) then the form is not validated and is just submitted as normal and since
CSS problems!
Hi, I would like to say that I'm brand new user to JQM (actually I started y-day) and if you think my question for dummy one it propably is but this tool seems to be great and I already have my first issue. Take a look at this... http://n.totuhov.com/example/ after a couple of taps on my iPad i got the "Option5" menu with completely different CSS than mine but not when I load it as normal webpage... http://n.totuhov.com/example/option5/ then when I started to build the content of the webapp I continue
How to display the Confirmation for delete the same as drop down.
When the user clicks on the delete button, a confirmation message box is displayed to confirm the delete.The confirmation looks crooked on the phone. How do I change the style sheet so it would look the same the drop down. Here is the style sheet for the confirmation: #confirmModalContainer {display: block; position: absolute; top: 312.5px; margin-top: -88.5px; left: 256.5px; margin-left: -182px; font-family:Calibri, Verdana, Arial; font-size:16px; text-align:left; background:#fff; border:4px
nested lists and bubble count
Hi list, I have search forum for "ui-li-count" but nothing answered my question. I managed to create a listview with a count bubble element but when trying to add nested listviews the count bubble disappears. I have tried to wrap the listview with a "ui-li-count" and it seemed to work but nested listview title page is named the number of the count bubble ('10' for example). <div data-role="page" data-theme="d" id="channels"> <div data-role="header" data-theme="d"> <h1>TITLE</h1> </div>
Jquery Mobile to Build a Mobile Supported Web App
We are looking to build a web app that should be easily accessible from mobile devices. The primary use will be through web browsers, however it would be great if it can be used from mobile devices / tablets as easily. We are currently looking at Sencha Touch and JQuery Mobile. Leaning towards JQM, since Sencha Touch limits us and our customers to the WebKit universe. The real question that we have: Can we start building a full fleshed web app with JQuery Mobile, or there are limitations for "desktop
Next Page