Alpha 1.0a4.1 button bug?? - active theme applied and remains
Hi, If you run up the following page (updating the reference links as required), you'll notice that when you click on a button, it stays blue. Revert back to version 1.0a3 and the issue is not present. I had problems with 1.0a4 so can't say whether the problem's there as well. Also, ie9 working much better - but one of the themes (c I think) comes as an unreadable blue. cheers Matt <!DOCTYPE html> <html> <head> <title>Active button bug</title> <%-- <link href="../Styles/jquery.mobile-1.0a3.css"
Alpha 4: [iphone] viewport not resizing with meta viewport height=device-height + virtual events
The viewport in alpha4 isn't resizing at all after an ipad/iphone (ios 4.2) rotation. Everything is fine on android. The problem arises when height=device-height is used with width=device-width in the meta viewport. Is this actually the right behaviour or is it a bug? Alpha4 also suffers from double tap problems that have been solved in beta-pre. The whole virtual event thing seems to be buggy in beta-pre, for example: pagebeforecreate event is fired before a 'vclick' event bound to an anchor.
Help with "Go to Top of Page" functionality
I am developing a mobile site where a page can have lots for content. I would like to have an image on the bottom of the page that goes to the top of the page. I have been playing with this sample code below but the issue that I have is that the footer navigation does not refresh. It stays on the bottom of the page. Any help would be greatly appreciated. Thanks. $("#backtotopimg").live("click tap", function() { $.mobile.silentScroll(0); });
solved: bind to taphold: "this" does not reference as expected
Hi I have a listview where every li-element has an href with an id: $.getJSON("Projektliste.php?callback=?", function(data) { $.each(data, function(key, value) { $("<li><a href='Projekt.html?id=" + value.id +"' rel='external' id=" + value.id + ">" + value.PrName + "</a><span class='ui-li-count'>" + value.AnzBeob + "</span></li>").appendTo("#Projektlisteneintraege"); }); $("#Projektlisteneintraege").listview("refresh"); }); I try to open a menu when the user tapholds a list-item: $('div').bind('taphold',
device testing
have you guys found an alternative to Device Anywhere for testing your applications? Is there something open source? How are you testing?
JQ Mail on JQuery Mobile intro page, how to get this layout?
I'm referring to the image on this page: http://jquerymobile.com/demos/1.0a3/#docs/pages/../../docs/about/intro.html I can make out JQ Mail as the app name in the image. I would like to have the viewing pane on the right for large screen displays, only the listview for small screen displays. Is there any documentation on this, or is the image just an artist's rendering of a make-believe app?
Radio button controlgroup leaves buttons in the down state
I've noticed that the buttons created in the Radio button controlgroup remains in the down state when you click on another button in the group. Inspecting the className of each of the buttons, I noticed that the selected button has ui-btn-active and ui-btn-hover-b, the untouched button has ui-btn-up-b, and any clicked on buttons have ui-btn-down-b. So whenever a button is clicked, it's set to ui-btn-down-b, and never changed back to ui-btn-up-b, leaving the button in the down state. Is this expected
small buttons?
http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html The docs have small buttons... if i use the same markup, I end up with full width buttons... they are not using grids on that page or anything... i'm trying to check in firebug which css rules are responsible for that... but i'm failing. Any hints to get small buttons like that doc page?
getJson iphone4 issue
I am in the middle of building this website for mobile/iphone well everything seemed to be going all ok, built a page using json data using the getJson function all ok on my 3G iphone, but when viewed on my colleague iphone 4, the code did not show? There was no error nothing just did not run the code within the getJson function. MY CODE: //-- this log will show on both iphone 3G and 4 console.log('begin json '); //-- the log and code within will not show in iphone4 safari mobile but
Alpha 4 fixed header not working on internal linked page
Fixed header (data-position="fixed") is invisible once page has loaded on internal linked pages in iPhone app During slide in animation, the header is visible, but once animation stops the header disappears. Header appears correctly during page scrolling Thanks
Multiple Submit Buttons vs Enter to submit form
I'm having trouble setting the default submit button AND complying with jquery-mobile styling/markup best practices. a simple login form, and i want to have the layout: email: ___ pass: ___ [forgot pass] [login] so to get that on the buttons and jquery-mobile i must use: <fieldset class="ui-grid-a"> <div class="ui-block-a"><button name="action" value="forgot" type="submit" data-theme="c">I forgot</button></div> <div class="ui-block-b"><button name="action" value="login" type="submit" data-theme="b">Log
enable page transition ONLY for dialog?
documentation for page transitions is: ajaxEnabled (boolean, default: true): jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible. If false, url hash listening will be disabled as well, and urls will load as regular http requests. but it should read: "if false, this will disable every page transitions and it will not be possible to force link clicks and form submissions through Ajax" I was really hoping that the default behaviour would be to not use
How to manipulate collapsible element programmatically.
Hello. I can expand and collapse this by clicking the element. <div data-role="collapsible" data-collapsed="true" id="TestCollapsible"> <h2>title</h2> ... </div> However, I need to manipulate collapsible element like following: $("#TestCollapsible").collapsible("expand"); I could not find such a method. Any help would be greatly appreciated.
Refresh dynamic listview with image did not render properly
Hi I have a listview like the one at the bottom of http://jquerymobile.com/demos/1.0a3/docs/lists/lists-inset.html . I load my images and content dynamically and refresh the listview. But the content did not render properly. I found out that I had to remove the "find('li')" at the _itemApply function of mobile.listview. Now it works. The find("li") did not apply on my listview because the item was the li itself! Is it necessary to first apply the find("li")? Beat
Form w/ NO AJAX
How do you specify that a form will not be handled by ajax. <form action="/login/mobile_login" method="post" id="logform"> form is directed to login controller in a rails app, controller redirect to /mobile/menu in alpha 1 after form was redirected to /mobile/menu in alpha 2 end up at /mobile#/login/mobile_login, which is not a valid url what appears to be displaying is /mobile/menu#reports
inline search input and submit
Hi, Just recently started using jQueryMobile / jQuery (also a newbie at web development) and have tried to set an inline search input alongside a submit button, but have had no success so far. I've tried: - Have the two inputs into a DIV tag with 'data-inline=true' . Have the two inputs into a DIV tag with 'data-inline=true' .and the 'fieldcontain' data role. Mark each input with 'data-inline=true'. The only result so far is to have the submit button inlined. The only way to control the width of
Ajax Navigation, URL and Page elements issue in a4.1 demo
Hi, I am working with sample project to analyze the Ajax Navigation, and URL behavior in jquery mobile. I found one strange thing , not sure that it is a problem or not. I tested it in Firefox 4. To check this issue, Go to jQuery mobile Demo page here: http://jquerymobile.com/demos/1.0a4.1/ 1. click first item under overview - "Intro to jQuery Mobile" from the listitem view. 2. now once that page is loaded, click home on top - right corner. this will show you home page again. 3. Do this for 6-7
Creating new Swatches for a JQuery Theme
Hello: I was wondering if there is a tutorial / post / wiki / article that talks about how I can add more swatches. O have looked at the CSS, and I am sure that I can look at the classes with -a etc appended to them. However, I wanted to check-in to see if there was any documentation on it, before i chase this.
Alpha 4 - positioning problem in listview (with sytle="float:left;")
The following demonstrates a problem in which the text for the second <li> element is displayed below the space allocated for it in the list. <div data-role="page"> <div data-role="header"> <h1>Test jQM</h1> </div> <div data-role="content"> <ul data-role="listview"> <li>Correct place</li> <li><div style="float: left; color: #aa00ff;">Wrong place</div></li> </ul> </div> </div> Screen shot:
Image Slider Control , smooth scrolling
Hi All, I have created one page having two image sliders horizontally. its tested on iPhone and iPad , works well. though browser fallback needs to be developed. I checked different posts in this forum about image carousal, but when i test it on mobile devices, its very slow and animation/sliding is not as smooth as desired. I also tried creating one as explained here in my previous post. this particular approach does not have animation but sliding is easy. this kind of image slider can be found
Scrollview Frozen on IOS
Hi All, We're starting to develop a video mobile app for tablets and the layout is a very simple Scrollview on top of a native video player. We are using 1.0a4.1 1. standalone scrollview with our dataset on a blank page works perfectly on an ipad2 2. same scrollview with same dataset placed on a full screen video player freezes completely and looks like we placed a static image over a video player (but the underlying video and player works fine) 3. The same scrollview and video player that froze
Selectmenu (select box) widget still useless... can anyone else verify?
In jQM alpha 2, the selectmenu widget for creating nice select boxes was basically unusable to me because it contained really bad bugs that caused javascript errors with the hashtag page tracking and had a lot of display bugs as well. Specifically the biggest issue was when you had a select box with several option items... it creates a full-sized page that acts as a dialog to display the option menus as opposed to when the list is short and it generates an overlay on the same active page. My original
Cant exit/go back in web app from video
I have a mobile web app that has a list of m4v videos. I am using the meta tag that removes the address bar. On the iPhone, when I click on the m4v, it opens in the native player and I can hit the “Done” button and takes me back to the page. On the iPad, when I click on the video, the screen goes black and begins playing. I can scroll the video as if it was embedded on a page. If I full screen the video, the native player takes over and when I hit the “Done” button, it just takes me back to the video
AJAX or nothing form handling with Alpha 2?
According to the docs I should be able to override default ajax form handling with this: $(document).bind("mobileinit", function(){ $.extend( $.mobile , { ajaxFormsEnabled: false }); }); But when I do that, not only does the ajax form handling stop, but the form itself becomes inoperative. Clicking submit does nothing, and the href attribute of the link created by jquery mobile goes to "#". The form method and action are set, and everything worked fine under Alpha 1.
Long select history problem after dialog close
Hi all, The problem I ran into can be demonstrated with the default demo for selects page: http://jquerymobile.com/demos/1.0a3/#docs/forms/forms-selects.html the second demo is of a select with many options, so that the options list is opened in a dialog (nice feature, btw). The problem is that after choosing an option the dialog closes (as it should), but not cleanly, so that pressing back goes to an empty page instead of to whatever was the previous page. I think that the problem lies in the ui-state=dialog
Calling changePage twice
When I call changePage twice or try to change to a page that is already showing I get a blank page. Right now I just guard this by looking at activePage. I just not sure why this guard isn't in changePage. Matthias
Bug in .val() on select with jQuery Mobile?
Hi all I'm having a problem with `.val()` and jQuery Mobile. This is my code in total. The attempt to set the value of the select as Quietest is not working: it selects Balanced. <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
defacto dynamic content page guide
If you slog around long enough, you can put together bits and pieces about creating a jqm app with dynamic content. I am wondering if anyone has found a defacto style guide to how to do it. - load up an app - update date from an ajax/json call - create new pages as a result of ajax/json coming back - update earlier page after ajax/json call - etc
bug in "change" event on select menu with multiple
i tried to add a "change" event on select menu, but the event dont execute when the first item of the list was unchecked. You can see this bug in this page http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-selects.html execute in JS console the code Copy code $('#select-choice-10').live('change', function () { console.debug($("#select-choice-10").val().join(",")); }); and try to select the multiple select menu with states: 1) check the first element 2) check other elements 3) uncheck
Hash navigation problem
I have a weird problem with internal pages linked with hash. I have two pages (divs) which are called with links like this: <a href="#ma_options" data-icon="gear" data-iconpos="notext" data-role="button"></a>And the pages looks like this: <div id="ma_options" data-role="page" data-theme="c" > <div data-theme="a" data-role="header" class="ui-bar-a ui-header" role="banner"> <h1 tabindex="0" role="heading" aria-level="1" data-theme="a">{% trans 'Django administration' %}</h1> </div>
4.1 - back button still in blue....
hi, I made a simple webapp with the 1.4.1 <div data-role="page" id="cabinet" data-theme="b" style=" background:#BBBDBF;"> <div data-role="header" > <h1>Vinay Matériel</h1> </div><!-- /header --> I click on the back button, when I come back to page id"cabinet" the back button is still in blue. This issue "work" with the demo (theme valencia) Regards
Footer popping into the middle of the screen
I'm having an issue where if I go from a screen to a screen that is longer, the footer will pop in to the middle of the page. Any ideas as to what's causing this, and more importantly, what can be done to fix or work around it? Thanks
jquery mobile slideshow
I like Jonathan Snook's simple slideshow: http://snook.ca/archives/javascript/simplest-jquery-slideshow It works perfectly.... That is *until* I try to use it with the jquery.mobile css file. Of course I need that css file for my mobile site. They just don't seem to be compatible. As soon as I remark that stylesheet out it works again. Anyone else run into anything like this? Who has a simple slideshow that works with jquery.mobile's css file?
don't redirect on form submit
i would like to know how to stay on the same page after submitting a form. is there a simple override in jquery mobile, or do i have to do something like this: $("#myform").bind('submit', function(event){ event.preventDefault(); //ajax handling here using .get() or something //update page content });
ChangePage not working in WIndows Phone 7
I have 3 pages, home, settings and help . I am using anchor tags and a javascript function to switch pages. One example is given below to switch from home page to settings page. I have the following anchor tag in the header of home page <a onclick="load_settings()" data-icon="gear" data-inline="true" >Settings</a> and a corresponding function function load_settings() { $.mobile.changePage($("#settings")); } This works fine in IE9. It does not work in Windows Phone 7. The home
Cannot remove header back button
I am using jQuery mobile to build a demo project for class. I have created a navbar at the top and when I click on an item in the navbar, a back button is automatically generated and placed under the navbar. This back button extends out the bottom of the navbar, making my navbar look funny. I have applied both data-backbtn=”false” and data-nobackbtn="true" to the header div and neither one fixes it. You can see the problem at http://filmfriendapp.com. My code is as follows. <div data-role="header"
Custom Icons
Hello Everyone, I am having a few problems adding custom icons to my Mobile Website created with jQuery Mobile. Here is the code I have used: .ui-icon-custom { background: url("images/buttonIcons/phone.png") no-repeat rgba(0, 0, 0, 0.4) !important; } The result seems to work - but the icon seems to be displayed below the button? Many Thanks, Joel
load javascript when div opening
Hi experts, Hi use this example for my phonegap application: http://wiki.phonegap.com/w/page/36868306/UI-Development-using-jQueryMobile When I click on the button Recent Alternatives it will open the content of <div data-role="page" id="recent">. How can I load a javascript function when this page opened, like div data-role="page" id="recent" onload="test()">. Unfortunately, this isn't working. Anyone have ideas?
JQuery mobile localization
anyone have any idea about how to use jqm localization. I try localization of javasciprt I worked on the desktop brower but it doesnot work in android. BTW anyone have solution about javascript scrollview like native android market list . koni
swipeleft + doubletap issue
i'm developing an iphone web app and i would like navigate a catalogue with swipeleft and right and also zoom a product with double tap i've implemented fine swipeleft and right but can get to work doubletap (i aso tried Raul Sanchez plugin) is there a way to do it? the link: www.caterinagambardella.com/app/ thanks ivan no answers?
Next Page