Page Transition does not work with another HTML page within the same application ....serious issue with JqueryMobile
Hi Guys, I want to use the Page transition feature of JqueryMobile in my application. I have 3 pages in my app. home.html,GetNotifications.html and alert.html. I am using the anchor tags to add these hyperlinks dynamically. My code below :- Note: I dnt want to use rel=external attribute to redirect to another page, I wish to have the transition effect on another page var strLinkSection = "<p><a data-role='button' data-theme='b' data-transition='slide' href='GetNotifications.html'>Notifications</a></p>";
page width on jqm on phonegap app for android
Maybe a newbie question, I'm trying to build a simple app with a 480px wide map for my desire hd android phone, using jqm 1.0a3 but whatever I try it will always show only a 320px wide view (sometimes scrollable, but never just 480px wide with a 1:1 resolution)... This makes my map (which is nice looking when using the same code in a normal phonegap html page) look unsharp in jqm Even without a map I cannot set the size of a bordered div to say 460px and see the full div Any advice? Regards, Richard
Form select options open up in a dialog when placed inside a dialog
The select options open up in a little overlay with a pop transition when placed on a page, but when in a dialog, it opens up as another full dialog. How do I make it open as an overlay? <div data-role="dialog"> <div data-role="content" > <form data-inset="true"> <div data-role="fieldcontain"> <label for="select-choice-1" class="select">Choose shipping method:</label> <select name="select-choice-1" id="select-choice-1"> <option value="standard">Standard:
Grouped checkboxes with inset list ... possible?
I'm trying to create vertically grouped checkboxes that each have a "more info"-type icon on the right, leading you to more information about each item. Basically the same as the iPhone/iPad Wi-Fi "Choose a Network..." combined checkbox/list view in Apple's "Settings" application. Behavior: 1. Click anywhere except on the "More Info" icon and it checks the checkbox 2. Click on the "More Info" icon and it takes you to another view I see support for the "More Info" functionality in the inset list section
What does PhoneGap support mean in Graded Browser Support chart?
In the graded browser support chart (http://jquerymobile.com/gbs/) PhoneGap is similar, but not quite as good, as the Native column. My initial assumption is that PhoneGap uses the default browser for each device, which would mean it doesn't require its own column in this chart. Is this not true? I noticed John Resig mentions PhoneGap "uses WebKit as its rendering engine" in this presentation (http://www.slideshare.net/jeresig/testing-mobile-javascript?from=ss_embed), which would imply the PhoneGap
Theme does not cover whole screen.
On an Ipad the theme does not cover the whole screen area (data-theme="a")
Dynamically loading the list items in a looong ul
Hello people, I have a ul that contains almost 250 list items but i dont want to load all the items at once...only those items that users has scrolled to....suggestions ?
Dynamic data insert into a plain content Div and jquery Mobile
I need a little Help with a call to add content dynamically. I'm trying to load a page that dymanically generates a table into a div with jquery mobile: Taking the date value from the datepicker and I have a routine to generate the url: <div data-role="content"> <form action="" method="post" onsubmit="javascript:getData(this);" > <div data-role="fieldcontain"> <input type="date" name="eventdate" id="eventdate1" value="" style="display:none;" /> <button type="submit"
JqueryMobile/Drop down to display US States
I noticed when I select an US state from the drop down, If I selected Wyoming where it was last state in the drop down , the next time I go back to the drop down again, it only displays 25 states starting from Wyoming, I cannot scroll back to the 1st state in drop down any more. Did I miss out something here? <div id="divByAddress" style="display:inline"> <div id="divByAddressInput" runat="server" style="display:inline"> <p>Enter address,city and state to find
Ideas on absolute positioning of dynamic content in mobile web app?
Hi, I'm currently developing a mobile web app using jQuery Mobile and before I get to far deep I'd like to hear your thoughts about using absolute positioning of dynamic content in a mobile web app! I use it when I need to populate data from database through php and ajax and in this case I think it is convenient to "design" a template page with absolute positioning my divs. I use different class names for all fields I want to replace with my data from ajax using things like: $(newRow).find(".row_header").text(object.NAME);
How to pass params in JQmobile
Hello, I would like to ask: How to pass params in JQmobile? I have got html with params href="game.html?name=Ellisa&sound=1 and on page "game.html" i want to get this two variables: name and sound. I tried it to with: window.location.search.substr(1).split("&") but this cannot works. Thanks for any advice.
Building a dynamic list, refesh not working - help please.
I am looking to learn how to add a dynamic list to my page without resorting to PHP. Currently I have a main page that links to sections in the page rather than individual pages that are loaded. The content I want to update has the container: <div content="dynamicList"> Themed list inserted here </div> I can populate the list fine already but the CSS is not applied and using the refresh() method, just goes to the first section in the page (firspage). e.g, <div id="firstpage"> link
jquery mobile - how to open the selece menu programatically
i'm new to jquery and jquery mobile. hope it's not a silly question. let's say I have a select menu inside a hidden div as below, <div id="divgender" style="display:none;"> <select id="gender" data-theme="b"> <option selected value="Man">Man</option> <option value="Woman">Woman</option> </select> </div> I also have a button in the same page somewhere. when the user click the button, i would like to make the divgender div visible, and open the select list automatically. is
Verizon Droid + JQM + Google Maps V3 API = FAIL
Please help if you know anything about getting a JQM map app working on the Verizon Droid. I am trying to get a geo-centric mobile web app working on multiple devices. I have read in these forums and elsewhere that many of you has had success with this. But when I try the examples listed below, none of them works with my Verizon Droid. The pattern seems to be the load happens and I get some of the Google elements, like the map/satellite button and the "Terms of Use", and even the directions polyline;
Asp.net based JQuery Mobile - basic login form is not working
Hi all i'm just getting used to using jquery and thought I'll try a very simple example I'm going to be building this on asp.net web forms (will move to MVC in the future but not right now) i have a very simple html form but it does not simple to be working the code is below <!DOCTYPE html> <html> <head> <title>Test</title> <link rel="Stylesheet" href="Assets/jquery.mobile-1.0a3.min.css" /> <script src="Assets/jquery-1.5.min.js"></script> <script src="Assets/jquery.mobile-1.0a3.min.js" ></script>
jQuery Mobile and touch-gallery
Hi everybody, I am newbie. I am trying to do my first web mobile site. Everything ok, but I have a little problem to install a fotogallery. I am trying to use this gallery: http://neteye.github.com/touch-gallery.html I think there's some conflict. Example, the loading animation come out and never go away. Does anyone make this gallery work on jQuery mobile? thanks in advanced to everybody
Fixed element of a navbar
Hi: I'm using the navbar, and it automatically fits "n" elements to span 100% of the viewport, so, if I put 5 elements, each element spans 20%. But I need a fixed element of 50px width, and the rest of the viewport, to be occupied by the other elements. So, in my example of 5 ... the fifth element of 50px width, leave "whatever" pixels, and those pixels are divided by 25% for the rest of 4 elements. How can i do this ? ;)
Disable dialog behavior for form posts
I've noticed that a form within a page loaded as a dialog seems to reload the animation. What I mean is - I get an ajax post, as expected, but it's like the dialog goes away and re-appears. Is there a way to disable that? I know I could simply write my own code to handle my form post, but I'm hoping there is a simple solution.
How to get rid of the # in the url?
I keep linking pages with Ajax to get transition and the history back button. So the linked pages getting a URL like this: www.domain.com/#fishing.php in fishing.php, i have several sub pages which I load with Ajax too: <a href="#cyanide" data-rel="dialog" data-transition="pop">About Cyanide Fishing</a> <a href="#dynamite" data-rel="dialog" data-transition="pop">About Dynamite Fishing</a> Now I am getting the page loading error when I try to open one of these sub pages. When I remve the # in the
Select menu: Overlay vs New page. How to create overlay menu in a dialog page?
Hi to All, I try to use a simple select menu on a dialog page. (see example below). If I copy this code to a normal page it renders itself as an overlay. Unfortunately if I copy the _very_ same code to a dialog page it creates a new pop up _page_. Is there any way to achieve the same rendering in a dialog page as in a normal page? thx. (sorry for this formatting. This sample is exactly the same as the demo from here: http://jquerymobile.com/demos/1.0a3/#docs/forms/forms-selects.html ) <div data-role="fieldcontain">
force an animation on a page
Hi, How do I force an animation on a page? I'm updating something on a page, but want it to look like a transition with a slide, even though it's the same page. I tried doing $.mobile.changePage(...) using the id of the page I'm currently on, but it didn't do anything. Thanks
Passing Page Parameters
What is the most efficient way to pass one or many data values between two jquery mobile pages? Does anyone have a working example using alpha 3 with 1.5 (or 1.4.4) jquery core? I cannot get the beforepageshow event to properly fire after listview click using the following code. I am using a listview (with data-filter=true) search with data-identity set. When I click the the item, it returns the correct value via alert. However, I cannot get the "beforepageshow" to properly work in item selection
iPhone/Apple slows web apps intentionally???
I just came across this article... A must read for mobile web app devs... http://www.theregister.co.uk/2011/03/15/apple_ios_throttles_web_apps_on_home_screen/
Cannot call method after changing page
Hello everyone ! I change page A to B, B to C, C to A with a standard href, when I come back to the page A at the end, I cannot call any methods declared in this page. This issue doesn't appear if I set 'rel='external' ' however, this disable animation and I need to keep it... Any idea? Thank you for your help Phil.
Error Loading Page...
I would like to book style application. User will add 'data-role="page' divisions. My script will make a Table of Contents and navigation button. I made index.html as follows and book.js is as follows. book.js will add ID='Pxx' attribute to each page and set next id into each button attribute from the last page. But I run and push button, it shows 'Error Loading Page'. You can reproduce this issue by just these two files. I'm afraid, I make something big misunderstanding about JQM. Can anyone give
Is there any event before the changePage method call?
I need create my data-role='page' element dynamically before the changePage method called. JQM has bind both $('a[href]').click and the 'hashchange' events. And I bind my create method to these two events too. the 'click' event works now but 'hashchange' invoked after JQM's. What can I do? or should JQM trigger a 'beforePageChange' event in the changePage method?
Use tmpl and load data from json
Hello, When I use this code (page = #spectacle) : $('#spectacle').live('pagebeforecreate',function(event, ui){ var movies = [{title: "The Red Violin", proch_date: "1998"}]; $("#movieTemplate").tmpl(movies).appendTo("#test"); }); That's work fine. There isn't problem to load page with Jquerymobile style. But, when I try to load my data from json like that : $('#spectacle').live('pagebeforecreate',function(event, ui){ $.getJSON(url_thnet, function(datas){ $("#movieTemplate").tmpl(datas).appendTo("#test");
Radion buttons won't style properly on second load
Hi, I'm having a very weird problem with radio buttons in JQuery Mobile. I'm populating some radiobuttons with ajax. When I do it the first time it's ok, but any subsequent loads seem to cause problems with the display - each checkbox is displayed separately rather than on a single list. It knows that the buttons are in one group, because selecting one causes the other to deselect. But the styling suggests each is separate. function getWords() { var gig_id = $('#gigs').val(); $.ajax({ url: Nnn.serverLocation+'/words?gigid='+
Simple form on jquery mobile
I am a new user of jquery mobile and Im having issues with submitting a simple "get" request using a form. Following code displays "Error Loading Page" on Mozilla or Safari (haven't tried on a mobile device yet): <!DOCTYPE html> <html> <head> <title>Test Form</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
Nested Scrollviews Swipe - horizontal
The swipe works nice, but I was wondering if anyone has figured out how to make a "prev" and "next" button to go along with this. http://jquerymobile.com/test/experiments/scrollview/scrollview-nested.html The swipe works nice :)
Swipe Event
I've searched the forums and some slightly describe what the JS should look like, but none show the whole implementation. I'm a complete noob to js and was hoping to get some help. All I want to do is implement the swipe left and right feature to move the page forward or backward. I have no idea how to do it. What does the JS look like? What should the html look like? Nothing fancy just loading whole new pages, that's all. Later down the road when I become educated, I'm sure there's probably a way
Where is the showcase site someone announced few weeks ago?
Hi to All, Few weeks ago someone announced and posted _here_ a showcase site to collect and upload links to working online jquery mobile sites. I followed it a few days and more and more submission showed up. Unfortunately I forgot the url, and now I did not even find the original announcing post :-( Could somebody point to this post or the showcase site url? thx.
Click header title, show Dialog
I need to show a dialog when the header title text is touched. My code below captures the click event but i don't know how to programmatically show a dialog. A few things: - i dont want to turn the title into a button. if i wrap the title in an anchor it turns into a button. - ultimately i want to show a pop-up list of pages the user can jump to. Unfortunately, when i substitute the text for a select list, jquery mobile turns it into a button. I dont want a button, i just want text. Can someone
Removing icon from listview
Hey, i tried to find s.th. to remove the arrow icon from a generated list. I create the list during the runtime in this function: html_items += '<li id="staffing" data-role="list-divider">Category</li>'; for (var i = 1; i <= 14; i++){ html_items += '<li><h3><a id="category'+i+'">Category '+i+'</a></h3></li>'; } this._list_staffing.append(html_items);After that i tried to refresh the list this._list_staffing.listview('refresh'); this._list_staffing.children().removeClass('ui-btn-icon-right');
Transitions in cell phone sometimes dont work
Hi all, I have a really weird bug, i have an app developed in jquery mobile, and all works perfectly, but i have a problem with transitions. In my navigator (google chrome) the transition work perfectly but in a real cell phone sometimes the transitions dont work.. i dont know what the reason is... any idea ?? thanks....
Image slider with Cycle and jQuery mobile
I try to use the Cycle plugin with jQuery mobile and it works sometimes but sometimes the Cycle doesn't seems to fire correctly I use the $('[data-role=page]').live('pageshow', function (event) to check if I load content with images that I would like to run cycle on but It seems to work randomly If I load the page with data-ajax='false' on the link it works as I whant I'm trying to wait for all the images to load but it doesn't help Any one have this problem? /jesper
How to automatically display keyboard for textfield on page?
Hi, I've got a page with only a textfield on and I want the focus to be set on the textfield and the keyboard on the iPhone to be displayed once the page is flipped. Any ideas on how to solve this? I've tried the $("#textField").focus(); but the keyboard is not visible by default. Thx, VTM
jquerymobile and chartbeat
Hi, do you have any experience of successful integration of chartbeat inside jquerymobile? i've tried $('#page_3232').live('pageshow',function(event){ try { $('#page_3232').find('div[level="2"] a[href="' + window.location.hash.replace("#", '') + '"]').addClass('ui-btn-active'); $('#page_3232').find('div[level="1"] a[href="' + window.location.hash.replace("#", '') + '"]').addClass('ui-btn-active'); document.title = "My new document title"; loadChartbeat(); var pageTracker = _gat._getTracker("XXX");
Spinning wheel while waiting
I'd like to display a spinning wheel with a semi-transparent background while waiting for an event triggered by a timer. Is there a simple code example I can use? Thanks
Double Tap for "Fixed" Positioning Mode
Is there a way I can override the single tap for the "Fixed" Positioning Mode for displaying header/footers to a double-tap? Or where in the code I can change it? Thnx!!
Next Page