Is it possible to go back to specified page id in jQuery mobile?
Suppose I have 4 pages with this page IDs: pageA -> pageB -> pageC -> pageD There can be an event in pageC and pageD that can make the application go back to pageB, the problem is that depending on the page I'm currently at I should call history.go(-N) where N is the number of pages that I should go back. For example if I am in pageD I should call history.go(-2), in case of pageC history.go(-1) to keep history consistently. How would you do that in jQuery Mobile so that history would contain: pageA
Cache my application
Hello everybody, I've got a question and I didn't find anything with google, so I would need your help I would like to cache my application, which contains a google maps iframe and a list of news, retrieved by RSS, to keep these informations for an offline use. I read many tutorials about creation of a manifest and changing the .htaccess file, but in the case of my mobile application, I don't need any server so I don't have a .htaccess file. So I thought about javascript localstorage, it's nice for
How to make menu equal android's menubutton ?
How to make this ? Plugin ? I dont know to make with popup position
jQuerry Mobile Panel Error
I am implementing jquery mobile panel into my site. All works fine until I decide to visit the same page twice, then the panel icon (data-icon="bars") does not open the panel. It does not respond. It works when I manually reload the page. I believe it has sth to do with the cache or ajax :-( Please help. Recap: 1. I tap the panel icon & it opens side panel. I go from page_a to page_b. Next, I go back to page_a and try to go back to page_b again (data-icon="bars") does not respond any more. I need
Getting Current Page Problem
Sorry Guys, but i really have a problem with understanding how i can get access to the current page. I want JQM to change a style by clicking an element. (clicking ALWAYS the element in the ACTIVE PAGE, cause i am not interested in previous or next pages) First of all i fire this: $(document).on("pagecontainershow", function() { loadClickEvent(); }); So, this should load the Click event on every page that occurs... This is the related function: function loadClickEvent() { // only way
RSS Thumbnail code
Hi With respect to the following code.Jquery mobile rss feed and Thumbnail how do I add? Rss feedlist how do I make a horizontal listview? help me, Thanks <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi" ></script>
Duplicate value parameter
Hi. I'am using JQuery Mobile and have one problem now. I'am use this code: <div class="button" <input type="submit" value="sign in" /> </div> But browser generate this code: <div class="button"> sign in <input type="submit" value="sign in" /> </div> Where does the extra inline text sign in?
problem using global var
Hello, my problem is more a javascript problem but you helped me well until today so I would like to submit it to you : I've got this function (it is with the network information plugin of cordova) : function onDeviceReady() { conn = checkConnection(); test= 3; } and in another script (used later in the html page), I just wrote alert(test); and the result is "undefined". I saw on many javascript tutorials that declaring a variable
Form processing onClick isn't being activated if I come from another page with jQuery Mobile
Hey all! I'm creating a website that uses lots of forms and jQuery Mobile. I'm having a problem where if I'm on a page with jQuery Mobile and I go to another page with jQuery Mobile, then on the page that I go to my form isn't being processed onClick. In this post I'm going to be talking about two pages, Reports.php and DataManipulation.php. By the way if I refer to files or ids or classes that aren't in this post, be sure that I have them because I do, I just wanted to keep this post shorter. Can
Icons are not visible on Mobile site updated to 1.4.2
Hi, I updated my old theme and site from earlier version to 1.4.2. It seems to have worked well, except for the icons. I am viewing the site on iPhone running iOS7.., but they are not showing up when using a desktop browser as well. upgraded mobile site Suggestions are helpful. I have read a couple of posts, and I believe I am loading the files in the proper order... but I could be wrong... Thank you.
How to keep the submit text from showing with jQuery Mobile
I'm working on a website that has a submit button and forms and such. On this website I'm using jQuery Mobile, but to keep its stylesheet from interfering I'm using some jQuery. This is my jQuery to keep jQuery Mobile's stylesheet from interfering (I call it Normalize.js): $(document).on('pagebeforeshow', 'html', function() { $('body').removeClass('ui-mobile-viewport'); $('body').removeClass('ui-overlay-viewport'); $('div').removeClass('ui-page-theme-a'); $('div').removeClass('ui-btn');
Panel buttons not styled.
Hi, I am having trouble with my buttons looking like simple anchors in my side panel. The panel markup is placed before the div 'data-role="header": business.html <div id="infopanel" data-role="panel" data-position="right" data-display="overlay" data-theme="a"> <!-- panel content goes here --> <h3 id="panel_heading"></h3> <p id="panel_description"></p> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">Map</a> <a href="#" data-role="button">Coupon</a>
how to divide a page into parts?
As I can split a jquery mobile page to make a menu like this:
JQuery Mobile: Scroll effect transition to same page anchors
Slight novice here, so please bear with me! I am using this technique to link to anchors within the same JQuery Mobile page: http://dev4theweb.blogspot.ie/2012/07/anchor-links-and-jquery-mobile.html and it works. What I cannot get working are any of the solutions out there for smooth scrolling to these anchor tags. Has anybody figured this out? Thanks.
center a ul in a div
Hi, It is a silly question but I am not able to solve this issue. I have a ul list in a div , in the <li> I am putting images with a float left. (see attach). The issue is I cannot center the list in the middle of the div, i have always the gap on the right. I think it is beacause of the float:left but how can i do? <div data-role="content" style="padding:0px;margin-left:0%"> <ul id="Gallery" style="margin:0;padding:0;height:50%;"> <!--class="gallery" --> <li style="list-style: none;padding: 0;
Share - Public panel for multiple pages
Hi friends, I'm almost new to jquery mobile,and i got a little issues with my pages and their panel: I have a right panel inside a page looks like <div data-role="page" id="home" class="ui-responsive-panel"> <div data-role="panel" data-position="right" data-position-fixed="false" data-display="reveal" id="my-right-panel" data-theme="b"></div> </div>and the panel show up when swipeleft event fires. Later I add another panel <div data-role="page" id="pageAbout"></div>Because the right panel is
Using JQM Flip Toggle Switch for submitting two different status informations
I like to use a jQuery mobile flip toggle switch to submit two status informations to control the two status of a relais. Instead of using: <input class="scene_btn" type="submit" onClick="request('key=1')" value="on" data-theme="d"</input> <input class="scene_btn" type="submit" onClick="request('key=2')" value="off" data-theme="d"</input> I'd like to use a JQM flip toggle switch, to switch on and off a relais. <form> <label for="flip-1">Flip toggle switch:</label> <select name="flip-1" id="flip-1"
Launch a native navigation application
Hi everybody, I googled about that but didn't find exactly what I would like. Actually, I want to create a link, containing coordinates of a place, which opens your native navigation app and make the route from where you are to the place. So I can use a Cordova plugin to geolocate the user but I don't know how to launch the app and make the route. Thank you !
can i put button in the middle of the toolbar
the toolbar can has two buttons,one left,one right,but i although want to put buttons in the middle of the toolbar,how to do that?
when i user local js,css file,the html in browser has no style
when i user local js,css file,the html in browser has no style,but when i user the cdn url,every thing is right <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="js/jquery.mobile-1.4.2.css" /> <script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script> <script type="text/javascript" src="js/jquery-2.1.1.js"></script> <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
Form redirect using javascript doesn't work if I come from a different page
Hey all! This is my first post, so hopefully it'll be good (and don't go too hard on me)! I'm creating a website that uses jQuery Mobile because its transitions are awesome! I have two pages that I'm working on (I have other pages, but they aren't part of my problem) Homepage.php (this is the full page): <!DOCTYPE html> <html> <head> <title>Gordmart MIS Homepage</title> <link rel="stylesheet" href="css/jQuery.css"> <link rel="stylesheet" href="css/Main.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
Questions about some events for some components
Hello, Actually, I have to create an application for smartphone but I hesitate between a web-mobile or mobile application. For example, I have to create a page with different labels or buttons. For example, when I touch the screen with a finger to a label and that after, I move the label to the right, the label comes red and if I move the label to the right, it comes green. Or also, If I touch the screen on a button and that after, I move my finger to the right or to the left, I've a new page that
Dynamic List loses styling on second update.
I have a listview that is populated dynamically - the first time it runs fine with the correct styling but when the user selects the page again it loses its styling with the list displaying as ordinary hyperlinks. I am using jquery-1.7.1 & jquery.mobile-1.4.2 The markup looks like this, $('#container_update').empty(); for(n=0; n<=5; n++){ $('#container_update').append('<li><a href="#nextPage">The value '+n+'</a></li>'); }; $('#container_update').listview('refresh'); Thanks, Paul.
Need to center image inside ui-block grid
This shouldn't be hard but i can't seem to get an image to center align within a grid block. I have tried a number of css properties with no avail. My basic layout code: <div class="ui-grid-b"> <div class="ui-block-a"> <a href="#"> <img src="assets/img/iNews.png" /> </a> </div> ... Is it possible to make an image center align horizontally within each grid block? Eventually this will
Working with JQuery Mobile and Google Maps API V3
Is it just me or is JQuery incompatible with Google Maps API? I am running JQM v1.4.2 and I cannot get a google map to load up for the life of me - it just won't work. However, when debugging my code, I peeled back all the layers of JQM and found that Google Maps display when there is no JQM present. Is anyone experiencing similar issues? I get the feeling that Google has changed something and JQM does not like it. If anyone has any working examples I would be super keen to hear from you. Ryan
How To Catch Page Hide in Version 1.4.2?
Hi: I am trying to use version 1.4.2. In the old version, I can just do $(document).on("#pageid", "pagehide", function(){ $("#pageid").remove();}); when I close a dialog and make sure the div is removed from the DOM. Now it is deprecated and I am supposed to use $(document).on("pagecontainerhide", function(){}); but this gets triggerred on every page transition, even before the dialog page is show. I want to attach a function to the event this "#pageid" gets hidden. How can I do that? thanks a lot
juery slider is loaded only after page refresh
In jquery mobile image slider is loaded only after page is refreshed by ctrl+f5. my code is- <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var i = 0; var image = new Array(); // LIST OF IMAGES image[0] = "images/home-images/wmx1.jpg"; image[1] = "images/home-images/wmx2.jpg"; image[2] = "images/home-images/wmx3.jpg"; image[3] = "images/home-images/wmx4.jpg";
Dynamically populating a JQuery Mobile panel
Hi, My page uses dynamically created collapsible divs based on a Category Name. The collapsible content inside the div is a 'listview' that I populate. I need to use a dynamically updated panel, however, I do not know how to pass a variable to the panel. The variable could be either a string or the 'listview' item itself which I could retrieve the string from the listview item's text. The variable will be used to update the panel information. I simply need to get the "value.name" from the active
Problem with rss feed
Hi everybody, today I've got a problem with rss feeding, here's my script : <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://www.cndp.fr/crdp-limoges/index.php?id=155&type=100"); feed.setNumEntries(30); feed.load(function(result) { if (!result.error) { var container =
How to make a collapsible menu header link to a page in panel?
Menu header is not going to link given in header portion. <div data-role="collapsible" data-iconpos="right" data-inset="false" data-ajax="false"> <h2 style="margin-top: -12px; margin-bottom: -12.5px;"> <a href="cloud-erp.html" style="text-decoration: none;">Cloud ERP</a></h2> <ul data-role="listview" id="submenu"> <li style="margin-top: 12px;"><a href="cloud-crm.html" data-transition="flip"
Popups, Dialogs, Pages Hide Problems, Workarounds
Hi All: I am trying to move to the new Version 1.4.2 and have encountering some problems, some of the problems the older version also has. I would appreciate any comment, etc. (1) Popups Popups cannot open popups. I understand this is a restriction of the older version and I read somewhere that this restriction will be removed. but somehow it is not removed. I like to have a popup (for example, a user login), and if an error occurred, another popup comes out and displays the error. Now it is not
How to restyle button (link or input of type button) on version 1.4.2?
here is my problem, i have a link <a data-enhanced="true" class="my-button ui-btn ui-btn-left ui-icon-back ui-btn-icon-left ui-btn-inline" data-rel="back">Back</a> now i want to restyle it with a different background color and foreground color, so I have .my-button {background-color:blue !important; color:red !important; } but somehow the "important" does not make the browser use the color i specified for my-button. I see that the link inherits a lot of classes such as
Cannot close dialog page, $.mobile.back() does not close my dialog.
Hi: I used the old version 1.3.2, when i do $(elem).dialog("close") it works. Now I am trying to move to version 1.4.2 and dialog widget will be removed. so i am trying to use the new method to create and close dialogs. Here is my code var dialog = $("<div data-role='page' data-dialog='true'></div>").appendTo(document.body); var header = $("<div data-role='header'></div>").appendTo(dialog); var content =$("<div class='ui-content'></div>").appendTo(dialog); var temp = $("<div style='text-align:center'></div>").appendTo(content);
jquery mobile multiple page, tinyscrollbar missing bar
I try to implement tinyscrollbar (tinyscrollbar.js) into jquery mobile with data-role=page. On the first page it works perfectly fine. but on the second page, the bar is missing. until i clicked on inspect element. I tried tinyscrollbar_update(), update(0), slideToggle().promise()... non works. They all give me different kind of errors. <div class="scrollbar1"> <div class="scrollbar" style="height: 200px;"> <div class="track" style="height: 200px;"> <div class="thumb" style="top: 0px; height: 32.6530612244898px;">
Jquery Mobile vsdoc intellisense
Dear friends, I'am working with JQM on visual studio 2012 and I curious to know if somebody know where can I get an intellisense file for JQM js functions? Thanks in advance
Keypad overlaps text input fields
I have developed android app using jQuery mobile 4.1.2 and phoneGap. In this app, I use textarea, which is behaving weirdly. Whenever keypad comes up, the textarea wont automatically move up so that user can see and type. The textarea will be behind keypad with some part visible on dragging it up. Also the page jumps as and when the user types. I have tried <preference name="android-windowSoftInputMode" value="adjustResize" /> and also <preference name="android-windowSoftInputMode" value="adjustpan"
I have code that works fine in jqm 1.0 but breaks using 1.4.2
This is from a book I'm reading "jQuery Mobile up and running" by Maximiliano Firtman 2012 I've been using jqm 1.4.2 to run the book examples and they've worked fine till now. The example I'm working on now works great using jqm 1.0 but totally breaks in 1.4.2. This is the code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel ="stylesheet" href ="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
how to clear div content when reload page?
I using IBM Worklight. index page I have a button when I click then show data on #test content then I change page to another page and back to index page #test data is not clear. How to clear content to initial every reload page this is index.html <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>index</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <link rel="shortcut icon" href="images/favicon.png">
Remove first page or login page to deal with Android back button
In my jquery mobile app (Cordova), I have the index.html that is basically artwork. Depending on if the user has logged in or not, they are sent to one of two pages via changePage. The problem I have is the dumb back button on Android devices. It takes you back to that first default index.html. On iOS i can control it by not adding a back button to the home page. Does anyone have any suggestions? I've tried variations of the changeHash but the problem lies in the index.html because it is loaded by
unexplainable event bubbling JQuery Mobile
I'm getting unexplainable event bubbling in my code... i've lost 3 days trying to work it out. I've posted another similar question but i solved that problem with using off() before on() event. error occurs when i navigate back and forth between page 4 and 5. after exactly three times I get redirected back from page 4 to page 5. On the next try i dont get redirected, but the try after I get a redirect from 4 to 5 once, next try again. then one time nothing, then 3 times, etc... I have a home button
Next Page