Fixed (persistent footer) funky transition issue
Hey Guys. I've stumbled across a minor problem relative to fixed/persistent footers and transitioning. I'm testing on IPhone only for now. And this might only happen on iphone considering it's related to scrolling the browser beyond it's boundaries. Anyway, if you add a fixed and persistent footer to the page: <div data-role="footer" data-position="fixed" id="siteFooter" data-id="siteFooter" data-transition="none" data-tap-toggle="false"> Then, if you scroll the browser up (which is down with the
More strip constant at the bottom of ui-content div?
I'm creating a simple iOS/Android app and the client wants a small strip at the bottom of the ui-content div right above the footer that basically only appears if there's more content to scroll in that section. Basically, a simple gradient (using CSS3 properties). Being new to JQM, I'm wondering what the best approach is to accomplish this. Or maybe someone can point me to another forum post, tutorial, etc. that would offer a solution to this. Key is if there's no content to scroll, the strip does
$.mobile.loading('show') usage
I wrote the following code to load data. During the loading, I would like to show the loading spinner using $.mobile.loading('show'). $(document).bind('pageinit', function() { $.ajax({ url: 'http://testserver/data', type: 'GET', dataType: 'json', beforeSend: function() { $.mobile.loading('show') }, complete: function(jqXHR, textStatus) { $.mobile.loading('hide'); } }); });The spinner is not showing
Can't navigate between internal pages without refreshing page
I have one html document with several internal pages, but I can't seem to figure out how to navigate between pages without refreshing every time. It works one way (I navigate to the home page, I then am able to navigate to an internal page) but when I hit the back button, I can't open anything else. I'm definitely a beginner when it comes to this, so I may need to be walked through this on a very basic level, if possible! Thanks in advance for the help!
Jquery mobile ui-btn-active in navbar dynamic page.?
I've been trying to get this to work for 4 days now, with no luck. I have a very simple jquery mobile app. The app has a header, content and footer. The footer is being generated dynamically (footer.tpl), like same opencart footer template because it is always the same and I don't want to have its HTML in every page. my footer.tpl code given below div data-role="footer" data-position="fixed" data-theme="h"> <div data-role="navbar" data-grid="d" class="nav-glyphish-example"> <ul> <li><a href="index.php"
Popup displayed within the content
Hi, Am using JQ 1.8 and latest JQM and am encountering an issue with the popup functionality, whereby the popup content is being displayed in the page content area and when the button is clicked to display the popup, some text comes through from items displayed beneath it. I have checked and double checked that the popup is located within the calling page and all is how it explains in the docs, so I am completely stumped and wondered if anyone has come across anything similar before. A page where
JQM conditional form validation working, but not on mobile...
Hi, I am having a problem with my jqm form not working properly in mobile browsers (iPad 1 Safari, Android Dolphin) but working as expected in desktop browsers (Chrome, Firefox, Safari & IE9 on Win7). The form starts by asking the user how they would like to be contacted (email, sms, and/or post), then updates fields to be required based on this selection (validation is via the validationEngine.js plugin). An example of the form can be seen here. The logic of the script is that it checks to see if
Pagebeforecreate fires twice?
I´m hooking up my buttons with this code: $( '#startpage' ).live( 'pagebeforecreate',function() { console.log('pagebeforecreate started'); console.log('hook btns'); $("#info").on('tap',function() { $.mobile.changePage('pages/info/info.html'); return false; }); Problem is that is seems to fire twice and that is a problem (since i "hook" up the buttons). I also have this on the page and i think that the $.mobile.ChangePage will make the event fire
$.mobile.changePage shows 'to' page, but then sends back to 'from' page
Hello everyone, I'v been playing around with jquery mobile and I have to say that i like it. I have came across this issue - I have two pages and I have connected to the 'swipe' event and I am trying to go from one page to other. It works fine, but after few swipes it starts to behave weird. I am on page1 and I swipe to page2 which shows up and then it seems like changePage is triggered immediately again and takes me back to page1. Could anyone give me advice what am I doing wrong? Here is my code
What Could Be Possible causes of extremely slow keyboard in IPAD Phonegap APP
One of the bugs that have cropped up in an app I'm working is the following: 1. Page one has a login popup - enter your login information. This page works fine no keyboard slowdown 2. The second dialog on the next page has the user enter some more details and is invoked via a standard JQM popup link. 3. Now the inputs in this new popup have become next to unresponsive and completely unusable - the ipad keyboard sticks and key strokes have a major delay between keystroke character and showing up in
What to do about URL's with page anchors?
Since jquery mobile hijacks the # sign for it's own purpose, is there a way to still process a URL that has a page anchor in it? I ask because people post these types of URL's all the time on some of my sites linking to comments or different posts (in a forum), and they need work. URL example: http://www.mysite.com/index.php?page=mypage#anchor
ASP ImageButton not firing click event code in code behind
I have been working on a site in VB.NET and JQM - and all has been going OK. Now, I am trying to include a standard Image button using a tag such as: <asp:ImageButton ID="btnYear" runat="server" ImageUrl="~/images/buttons/year_btn.gif" /> and in the VB code behind file there is a click event similar to the following: Private Sub btnYear_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles btnYear.Click Session("TimeFrame") = "YEAR" do other code End Sub When
iScroll does not work when touchstart event using time
Hai friends, iscoll using my project(jquery mobile) that time textbox is not editable mode. so i used touchstart event. but iscroll does not working.. so pls help,.. code : --------- var selectField = document.getElementById('name'); selectField.addEventListener('touchstart' /*'mousedown'*/, function (e) { e.stopPropagation(); }, false);
refresh page to load content & css correctly
Hello I have tried to host jquery-mobile locally and CDN-hosted but it doesn't solve the issue. I have to refresh the browser so the content is shown correctly (css and scripts). Couldn't find a solution on the forum and I want to avoid installing another script that refreshes automatically. When I take out the jquery-mobile content (script + css) the html pages load and function correctly. Any hep is much appreciated! see: www.topswitzerland.ch
Persistent header broken in long pages when back in history
Hi to all, this is the case: i've 4 pages all in one single html file. the first three pages are categories-subcategories-subsubcategories listviews (i use changepage instead of href). The fourth page displays item details. Transitions is set to none and on pageshow i launch an ajax() call to asp page. Results are injected with append() into the ul (first 3 pages) and a div (details page). Header and footer are fixed and persistent. I use jquery mobile latest via cdn and jquery-1.8.2.min.js and
jqplot chart is not displaying in my jquerymobile page
i am preparing a jquerymobile app, in which i want to insert a jqplotchart, so that i wrote code for that. but now problem is chart is not being displayed in my page. javascript i written: $(document).bind("mobileinit",function() { // go to server for chart data $('#pagePlotChart').live('pageshow',function() { $.get("mygraphdata", function(data){ $.jqplot('plotChart', data,{ title:'My Chart', axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, axes: { xaxis: { label:"Day", pad: 0 },
buttons not styled in jQM popup launched from code
I posted this question on SO too, but probably this is a better place to get an answer. I'm using jQM popup to 'alert' users of something. For example, I make a $.ajax() request and if there's something wrong with the response I shoot a popup. Something like this: <div data-role="popup" id="popup"> <p id="popupMsg"></p> </div> $("#popupMsg").html(msg); $("#popup").popup({ history:false, overlayTheme: "a" }).popup('open'); It all works fine, but If I change the popup to include a button, this way:
Select element - sorting
Hi, I have on my page <select name="select-choice" id="select-choice" > element with some options values, for example <option id="cityA" value="cityA" class="remove">Paris</option> I have two questions - at first I would like sort this elements alphanumeric. I am using this code try{ $("#select-choice('option[class*='remove']'").remove(); }catch(e){ alert('Error when sorting'); } After sorting I can see alert with error message, but elements are removed! IntellijIdea show
Updating a list
I've written some JQuery code to continuously poll my server for a list of items. When the server responds, I remove all the items from the list on my page and add the new ones from the server in. This causes a few problems with the user interface. When the list is updated, the scrollbars move back up. Also, if you click and hold one of the list items, the button state resets when the list is updated. Does JQuery / JQuery mobile provide something to help with this? My server doesn't support sessions,
Intercept jQuery Mobile Ajax load before pages are extracted
I have some data that (for complex reasons) is only available to the decorator that wraps around the <body> tag. I'm currently adding that to the <body> tag as a data attribute. I need to copy that data to the individual page divs, and I can't figure out the best way to do that. One thought was to intercept the AJAX load before page div(s) are extracted, and manipulate the DOM to copy the data attribute from the <body> to the page divs. Is this possible? Can anyone suggest the best way to do this?
Collapsible Autodividers
Good day all. I am pretty new to jQuery/Mobile and did not see this mentioned anywhere. Is it possible to collapse with autodividers? Or do I need to create this manually? Thanks in advance for any information.
Elements on page flicker in SIZE between page loads
When I say flicker I'm not talking about the typical white page flash between two pages...this is different. When switching from one page to another while testing on an iPad 2, the entire page (all elements, images, etc) flicker to a large size for about .1 second then go back to the normal state. This isn't a temporary quirk, it happens on every page between every load. I can't actually show any code at this time (without getting in trouble), but I'm hoping some people have ideas. Anyone have some
Jqm high res icon support on iPhone 4s
I'm building a web app using jQueryMobile (primarily) - exclusively for the iPhone 4s, and I'm having the following issue: The icons that are included with jQueryMobile are not displaying properly (not displaying in High Resolution) on an iPhone 4s with retina display. All the custom icons I've used do display properly in high resolution format, but the default icons are not loading in high-res. I've verified that this is not just my imagination, as I can see that the file that is getting loaded
IS there any solution to back button issue?
I have a simple page setup with links to a second page. It is using window.location=page.php, to move to the new page. First time the link is click, it goes to the second page. Everything works correctly. When I click on the back button, it returns to the prior page as expected. Everything looks OK. When I click on any link, the correct page loads and displays for about 2 second. Then the content of the calling page is displayed. The URL in the address bar still shows that page that was called. Starting
Styling Dynamically Added Content
So I've looked online in this issue, but can't seem to find the answer. Let me explain my problem fully. I'm trying to dynamically add content to an <ul> and have it all formatted correctly. What I'm inserting to is this: <ul data-role="listview" id="localStoresUL" data-autodividers="true" data-divider-theme="d"> </ul> I have a list item somewhere else that is clicked and loads this up with data, and I am doing that with the following code: $("#localStores").click(function() { Customer.getLocalStores(13,
Display of two labels, two text boxes and one button in single line
I want to display two labels two text boxes and one button in a single line.Is this possible in Jquery mobile. Will the alignment be proper while viewing on Mobile devices. Kindly advise with a sample code
Touch grab and drag
I have a webpage with a crop box to edit an image. On a normal webpage, you can grab a corner or edge of the crop box with the mouse cursor and drag it around. However, on mobile devices (e.g., Iphone, Ipad), I am unable to grab the crop box as the screen only accepts taps (akin to mouse click) and the touch and slide resizes the webpage instead of dragging the crop box. Is there a way to code this programmatically so that the crop box (border or corner) can be grabbed with a fingertip and dragged
jQuery Mobile - Swipe Up, Down, Left, Right
On a project my team is working on, we need swipeup and swipedown functionality. I have written a short blog entry in how to accomplish that currently using jQuery Mobile 1.0a2. http://developingwithstyle.blogspot.com/2010/11/jquery-mobile-swipe-up-down-left-right.html
Android Help - What's realistic/How to test
Hey Everyone. JQM grades Android 2.1-2.3, 3.2, 4.0, and 4.1 at an A level. But, don't the devices have a huge impact on that? I have my application working well with iPhone 4 hardware and higher (any OS 4 and higher). But, as I start to get my hands on some Android devices I'm seeing alot of things not working. HTC (Verizon on Wifi - Sense 2.1, Android 2.3.4) The click delay doesn't seem to work so scrolling the window activates everything (I give the device a 6 out of 10 on scrolling capability
how to add Radio Button color ?
here is the code: <fieldset data-role="controlgroup"> <legend><strong>DIAGONAL INSTALLATION ?</strong></legend> <input type="radio" name="radiobutton" id="radio-choice-1" value="1" /> <label for="radio-choice-1">Yes</label> <input type="radio" name="radiobutton" id="radio-choice-2" value="2" checked="checked" /> <label for="radio-choice-2">No</label> </fieldset>
On Android 2.3 (not tested on other version), the size of the feature icons is not correct
I am experiencing the same issue that is described in Ticket #3227. http://trac.osgeo.org/openlayers/ticket/3227 The ticket has the following comment:: For the selection is, the ticket #3207 will probably solve this issue. The other ticket consists of multiple patches. My questions are: Are patches for the ticket #3207 indeed solve the problems with ticket #3227 if yes Do I need to take all the patches for ticket #3207 Can you please guide me how to install the patches If not, Are there any work around for
popups "popupafterclose" event fires off twice?
I noticed that popups will fire the popupafterclose when you close the popup AND when the page is switched to another page (when the popup is already closed). Should it be this way?
Overlay panels popup on each page
Hello, I'm trying to implement an overlay panel popup for menu navigation on each page of my application. But I can't succeed on this implementation. Do you have a best practice to share ? Regards
checkbox and anchor on a div collapsible
Hello ! I'm beginning with JQuery Mobile and already have a first question. I've created some collapsible div inside collapsible div ... etc as shown below : <div data-role="collapsible-set" data-theme="b" data-content-theme="d">'; <div data-role="collapsible"> <h3>Test 1</h3> <div data-role="collapsible-set" data-theme="b" data-content-theme="d"> <div data-role="collapsible"> <h3>Test 1_1</h3> <div data-role="collapsible-set" data-theme="b"
most iphone-like ui preset for jquery
Hi I was directed here from Getting started. Here's my question. I have written a simple application which I would like to eventually place in apple store. Knowing their restrictiveness in terms of the visual side, I want to give the app a look possibly iphoneish. Are there ready presets likening the www to iphone/ipad? thanks W
input type submit vs image
I am porting an application to jquery mobile but am having problems with form submission. When I use an input type='submit' button, the name and value of the button is sent to the host but when the input type='image' button on the same form, the name and value is not sent when the form is submitted. I have tried with data-ajax both true and false and the result is the same. I guess I can use the 'data-icon' attribute of the submit button, but I think that limits me to the sprites provided. Can someone
How to make first column is fixed for data table, and how to disable search & sort features in DT?
I am creating a jquerymobile page with datatable concept. I have a doubt that how to get first column is to be fixed in datatable?? and i dont need search & select number of pages options which are default by Datatable. because i have only 3 rows & 2 columns of data exactly which i want to display like shown bellow image.. can any one tell me how to do it? actually i have seen this link.. http://datatables.net/release-datatables/extras/FixedColumns/index_column.html but i am not getting how to do.??
JQM Page Content Size Issue (iOS)
So I'm a real novice when it comes to Jquery Mobile developement and I was wondering if anybody out there could help me understand one small aspect of the JQM library. My problem is related to page content and the iOS keypad in particular. I have several pages with content that varies in size. For example, on one page I have five input fields and the next page I have only four. When I use the iOS "next" button to navigate between different fields and I end up at the last field, the footer appears
[Solved] jquery mobile popup leads to different page on close
Hello everybody, I am new to jquery mobile and I have following problem: I have 2 pages in two different html files - root page and settings page - in my root page i display popup, but when I close popup by escape or clicking outside popup I am redirected to settings page. Could anyone please tell me what am I doing wrong? EDIT: After some digging inside jquery js I have found out solution - I have to set history option of popup to false and then it closes normaly. Here is code of my root page:
how to detect Safari on IPhone using jquery
Dear all, Recently, I have used jquery in my related tasks, I want to detect Safari mobile on IPhone and I have found this reference http://api.jquery.com/jQuery.browser/ I applied this code to my app and test on Iphone with three browsers Safari, Chrome, Mercury and it give the identical result, CODE ///////////////////////////////////////////////////////////////////////////////////// <!DOCTYPE html> <html> <head> <style> p { color:green; font-weight:bolder; margin:3px 0 0 10px; } div { color:blue;
Next Page