scrolling a realtive number of pixels
Hi, $.mobile.silentScroll(coordY) scrolls to the absolute position coordY. I would, however, like to scroll a relative number of Pixels. In other words, to add some pixels to the actual scroll position. To do so I could either: - read the actual scroll position (how?), add some pixels and use silentScroll(...) - use a command like $.mobile.silentScrollRelative(deltaCoordY) (does it exist?) Any help would be greately appreciated.
How to add admob to my jquery mobile site?
Hi, I want to add admob in my jquery mobile site. suppose i want ad in add mob mean, i created add mob in my gmail account.. I created.. now i want pub id.. how to get it?? please explain
Synchronous request timed out
Hi Folks, I am working on jquery mobile with Phonegap! I am having jquery ajax calls where in I am getting data and populating the UI. There is one URL which is taking 30 seconds to get the data. When I am hitting the url using ajax call, I am getting Synchronous request timed out error. The exact log I am seeing in my log is: WebUrlLoaderClient(986): Synchronous request timed out after 10 seconds for the 2th try! I tried to increase the timeout of the ajax call as shown below, but still I am getting
Possible to show last two pages side by side on larger viewport/screen sizes?
Using JQM for the first time and attempting to build a web app which has the standard 'single column' view on smaller viewports but a double (or even treble) column view on larger viewports by using responsive web design CSS. Is this possible with JQM? I can either have all the JQM 'pages' in a single HTML page or AJAX'd in (if that makes any difference)? For example: // 'mobile view' #page-1 page header list item list item list item list item // 'tablet+ view' #page-1 #page-2
prevent text area from being focussed when div is displayed
I have div, which is set to "display: none" via css. When a user pushes a button I make the div visible via .show(). The problem I'm having is that my iPhone 4S automatically focuses on the text area within this div when I show it and the iPhone's keyboard is displayed on the screen. Should using .show on the div bring the text area into focus? It doesn't seem like it should to me. Here's the div, with display set to none: <div id="message_sender" style="display: none"> <label for="messageText"><strong>Message:</strong></label>
Custom select menu options not positioned under select
I am trying to use the custom select menu and finding that the options are displayed in a location far away from the select menu and label. I am using the custom select menu inside a dialog - not sure if that is what is causing the issue or not. I have the following code: <div data-role="fieldcontain"> <label class="ui-input-text">Contact</label> <div class="ui-div-contain"> <select name="user" id="user" data-native-menu="false"
form elements in lists not theming
I have a list being generated and feed into a jquery mobile page via json. Each list element contains two select lists and each list has the data-role="fieldcontain" set. I'm also using: $('#qualslist').html(data); $("#qualslist").listview('refresh'); To add the list of the page and refresh it. This is theming the main list as expected, however the select lists aren't themeing, they just look like standard list elements. the json looks like: "<li data-role=\"fieldcontain\">GCSE Additional
Using fixed footer with Jquery mobile + phonegap on android
I am building a phonegap app for Android using jquery mobile and having some trouble with fixed footers. Please see the HTML code below. <!DOCTYPE HTML> <html>
<head>
<title>Test</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js">
</script>
<script type="text/javascript" src="js/jquery-1.7.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
Stop update of URL
Hello, I am trying to make a JQM app but I seem to have ran into some trouble. I've created a form to allow for login. I set the action to 'login' but when I post the page with a simple button the url changes to http://baseUrl/login I guess this is expected from a JQM-point-of-view but for me it looks very ugly. Is there some way I can prevent it from updating? I don't care about back-button functionality. [edit] Maybe I should add that it really is the login that bothers me the most because the
ipad css
http://jsfiddle.net/rajkumart08/GRPe4/embedded/result/ how to make this div movable in css when the width of the browser is expanded... since it does not work properly in ipad...
Help with Hover Effect on Touchscreens and Mobile Devices
I recently added a circle hover effect to the homepage of my website using a Circle Hover Effects with CSS Transitions tutorial I found online. However, I just realized that the effect doesn't seem to work at all on touchscreen/mobile devices- it just appears like a regular image (i.e. no flipping, linking to another page, etc.). :( In the tutorial comments, one reader suggested using jQuery Mobile to fix the problem, but seeing as I have zero experience with Java/jQuery I'm not sure what to do!
Play video once at page load
I need to play a video when someone first visits my JQM page. The video should play, then when finished the JQM page is displayed. I was using the following snippet which used to work fine with a previous version of jquery: <!-- / Play video on load --> <script type="text/javascript"> window.onload = function () { setTimeout('delayer()', 50); } function delayer() { window.location = 'http://vid.ly/1u5m6m '; } </script> When using:
New to jQM - need help with refresh
I'm new to jQuery Mobile, so hopefully this is a really easy answer. I've built a simple php page that uses jQM to show a list of links (using the <ul> <li> format). Each <li> link uses a standard html anchor tag to go to load a different page. However, the page that is linked to does not use jQM. (It uses a javascript plugin that isn't compatible with jQM). When this page loads, the plugin doesn't register because the page still seems to think it's under jQM control. If the user refreshes
how to retrieve data from database based on postition in phonegap?
I'm displaying the alphabets in a grid view,whenever i click on each alphabet it has to display the corresponding words of that alphabet,for that i could able to get the position of each alphabet,so how can i retrieve or pass the data from database? here is the screenshot of that Copy code var a2zArray =['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; $(document).ready(function() { createA2ZGrid(); }); function createA2ZGrid(){ var rowElem='';
Differences beetweer .trigger 'refresh' and 'updatelayout'
Hi, in starting programing whit jquery mobile and have a dude about update items created dinamic i use .trigger('create') for make this alive but have a dude about using triger 'refresh' or 'updatelayout' what i must used? Thanks forward.!
Popup to Display Error Messages
Hi, I would like to have a popup to display error messages in my app. I would like to write a simple function like: function error(msg){ ... } to configure and show the popup. However it seems like the popup div that to contain the error message has to be placed on each page of the app to make this work. If I just make one popup error div, it is only specific to the page it was placed on. Is there any way I can create a simple function like this without created a popup error div for each page
button 'refresh' and hover
below is html <div data-role="content"> <div style="width:250px"> <input type="button" data-theme="e" value="data-theme='e'" id="testButton1"/> </div> <div style="width:250px"> <input type="button" data-theme="b" value="data-theme='b'" id="testButton2"/> </div> </div> changing the button theme as below $("#testButton1").buttonMarkup({ theme: "b" }).button("refresh") (This code can be directly tried from chrome/ff console) it changes the theme.. but when I hover the button it returns to old theme.
click the image, the image to the full use of the screen size and describe the story using jquery mobile
Hi, I have some images that is related to my project. For Eg : I have four images, that these four images having some text also. When i click the image, the image to the full use of the screen size to show the photos with a small 'i' icon which then will show a small pop up that describe the story. Please any one give sample.
Content no longer selectable after using persistence header (on iOS)
Hi everyone, When making a persistence header, using data-id="name-it" and data-position="fixed" on my multiple page, the content is no longer selectable (on iPad/iPhone). When I remove the data-position and data-id it works fine. Also, (using persistence) when I tap once in the content area on an iPad, the header/footer/li text goes bold, until tapping it again. www.michaelmaasdam.nl/mobile/test/ Does anyone know what I'm doing wrong? I'm new to jQuery so I would really appreciate your help!
jquery mobile doesnt prevent scroll in windows mobile
As in JQM even a single click is Ajax call...in my application when user click on any link a process indicator appears on screen...when processing indicator appears then user should not scroll the screen and background area should not be clickable i.e it should prevent from click. i have written code: disabelScroll() { $(document).on(scroll,function(event){ event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); }); $(document).on(scrollstart,function(event){
JQuery Mobile - how to set up a loading page before website loads
I have a FirstPage.html on my website. While the website loads (FirstPage.html loads), i want to display a WelcomePage.html for at least 5 seconds (even if the FirstPage.html finished loading). Can anybody please help!
jqm trigger('create') issue
I have a situation where I am generating a list from an AJAX call then switching to the page. When I do this, I get the following error: TypeError: parentPage[0] is undefined (line 5189 of jquery-mobile.1.1.1.js) [Break On This Error] parentId = parentUrl || parentPage[ 0 ][ $.expando ], This is the code that does the ajax call and loads the DIV: function handleGetReports(data) { $('#recentReportsText').html(data).trigger('create'); $.mobile.changePage("#recentReportsPage", { changeHash:true});
Problem with arabic language
Hello everybody, i create native app with jquery mobile and android webview , When I get a text copy of the page When pasting in message Each word is written twice. please help me
Event pagebeforeshow fires twice - v1.2 and v1.1.1
I have pagebeforeshow setup within the page in the following manner: $(document).bind('pageinit', function () { $("#xxxx").on("pagebeforeshow", function(event, data) { console.log($(this).attr('id') + " " + event.type + " prevPage: " + data.prevPage.attr("id")); $('.ui-title').text("xxxx"); getxxxx(); }); }); The getxxxx function fetches some data from server and updates a div. Now on each navigation to the page I see that its being
icons disappeared
All of my icons suddenly disappeared..... Again. When I used jquery mobile 1.0.1, same thing happened. To fix it, I just downloaded the new version, 1.1.1 and started over. Whatever the problem was, it was fixed. Now again, same thing. But I'm not starting over. Anyone have any ideas? I'm just developing and previewing on a pc with windows 7, but in an emulator the icons were missing as well. www.Expression-web-tutorial.com/mobile thanks! Kelly
1.1.1 click events and dom elements
Has anyone faced this issue of the wrong element selected on the click event in Phonegap, JQM and android. Facing this issue where if i click an element in listview the next element gets selected.
Buttons in header do not always display as inline
The documentation says " Each button is typically an anchor element, but any valid button markup will work. To save space, buttons in toolbars are set to inline styling so the button is only as wide as the text and icons it contains. " but that does not always seem to be true. I have this markup: <!DOCTYPE html> <html> <head> <title>jQuery Mobile button test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
popup() : cancel the onclose event changePage ?
When I close the popup it appears to call changePage again. Is there any way to cancel this behaviour? Part of the problem is that the resulting changePage call does not seem to call pageShow. Typically I clear map icons on pageBeforeChange and then set a '.one()' handler to redraw the markers when pageShow is called. So when I close the popup() the markers are erased but not redrawn. Thanks! Edit: I am calling $page.popup('close') directly, not using data-rel="back" - but I guess it shouldn't matter.
Is it possible to show a page other than the first one in the DOM by default on a multi-page template?
Title says it all really: <div data-role="page" id="foo"> ... </div> <div data-role="page" id="bar"> ... </div> Any way to make "bar" show first without navigating to page#bar ?
Are thresholds available on swipeleft or swiperight?
I'll explain the issue. I have a list where each li has a swipeleft AND swiperight event attached. Both actions do different things. I'm getting the age old iphone HD screen issue where the threshold for the horizantal movement is too low at only 30px. BUT it seems that only the swipe event can have this threshold set... not the swipeleft or swiperight event. Is this correct? If so, how do i acheive what i am looking for? I have already tried setting the thresholds in my mobileinit method and i'm
Searchfield in data-role=header div defective on iPad
When using a searchfield outside a div, it works correctly. Even when placing a search field inside a div that has no datarole it works correctly. But as soon as one places a search field inside a div of type data-role="header" it breaks. The x at the right side is outside the field then and too far off. <div data-role="header" data-theme="f"> <input type="search" data-theme="d" name="sfield" id="sfield" /> </div> Any idea how to fix
popup() (alpha) with dynamic listview not working
I cannot seem to get the new popup() to work with a dynamically generated listview. When I try to run listview() on the <UL> I get errors in firebug: When I try $page.page(); I get "Node cannot be inserted at the specified point in the hierarchy" When I try $mUl.listview(); I get: "c[0] is undefined" Here is a jsfiddle link of the approximate code. The offending lines I tried are commented out in function displayPopup(): The problem is that the listview is not formatted. http://jsfiddle.net/jjunkin/rh55X/30/
Changing theme or color of radio button dyanmically
hi I am developing application using Jquery mobile in which I want 1)to change theme or color of radio button when radio button is selected. it possible or not in jquery mobile 2)I want to change the position of bullet of radio button which is by default displaying on left side.I want to display this on right side. I have Tried for both but its not working can any one solve this problem .
[SOLVED] Programatically modifing collapsible content title
Hi all, I'm trying to programatically modify the title (i.e. the h3 tag) of a collapsible section via $('#elemTitle').html(...). After the change, collapsibleElem.collapsible({refresh:true}) is called. The title indeed updates but it's not styled as a collapsible element title. The body of the element can be successfully modified. Thanks in advance :)
jQm running on top of a client side MV* (MVC, MVVM,...)
I have been working on a project for the last few months with jQm. We came to a realization that based on our end goals for this project, it would make sense to use a framework to segregate the model from the view logic. This was our starting point on researching a MV* framework or a library that would help in that regard. The following is some reading that I've done (these are overviews, so it's a nice way to start) http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/
how to access database from within beforeShowDay : datepicker
I am trying to access the booked dates from database inside beforeShowDay function. The problem is that 1) i am not able to return "return [true,"",""];" inside daystomark. 2) if i write return statements, they are executing before the database access. Can anyone help me? $('#calendar').datepicker({ ..... beforeShowDay : daystomark }); function daystomark(date) { var da = date.toString(); var subdate = da.substring(4,15); datesbooked = "" ; bookeddates(function(datesbooked) { var markeddates = datesbooked.split(",");
touchOverflow: what now?
So, I developed an entire site using touchOverflow to achieve a "responsive" design that adapts well to devices of varying sizes, but now touchOverflow is being discontinued? Where does this leave me, exactly? This capability was, frankly, the most appealing aspect of jQuery Mobile, and was/is used to build jQm's own documentation pages... do I need to start freaking out now, or has this functionality been preserved somehow moving forward?
I've inserted HTML into the handle of a jQuery Mobile Slider, but I can't seem to get links to work normally. Is there a way to do this?
It appears that both right- and left-clicks are disabled when 'mousing' over a slider. Anyone know where to turn that off? Is that enough? I've even gone down the road of floating a DIV over the handle when I want the links to appear, but that seems like a silly route to take, especially since the cover the handle and prevent further use of the handle.
how to implement custom filter like list filter?
Hello - I want to implement a search page in jQuery Mobile. At the top of the search page I want to include search criteria filters like the one provided by the framework for the navigation list. However, I want the search criteria filters to make ajax calls to a lookup web service as opposed to filter a predefined list. So how can I implement the look and feel of the list search filter but built as a stand-alone control that lets me make custom ajax calls?
Styling autofill dropdown on Search Input
Hi All, hope this hasn't been discussed before, and it's entirely possible I'm not searching the right thing! I'm using an input type of "search" which nicely pretties my search field. It keeps a history of what I type, and when I start typing the same word again it will do an autocomplete-type dropdown (at least in FF and Chrome it does). I'm guessing it's just the browser doing this, it's not an autocomplete. Is there some way to nicely style this dropdown, or possibly remove it altogether if
Next Page