When I use "slide" back to the former page ,Chrome displays blank.
I am developing a mobile web app .To imitate the native app swipe effect，I used the "slide" of transitions to change the page, but I have found when the program runs in Chrome , it will display blank after the page2 swipe to the page1 , this issue only appears in Chrome, and the other transition effects are normal . My code is following, and my English is poor, I don't know whether I express myself clearly. <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
Page navigation goes back to first page then desired page
I am developing a simple application in JQuery Mobile for use by messengers as they complete orders or update order notes. This is a single page with 5 separate data-role="page" divs. Operation is like a wizard. User logs in, enters the order number being worked and either updates the order notes if not completed or select complete to enter that data. Each page makes an Ajax call to to the server to pull back specific data. The issue I am having is that when moving to the Complete Order page the
Jquery Tabs - Using Inernal URL links
I'm using Jquery mobile in my website and tabs navigating didn't work well when adding URL in tab instead a #div tag. I need to change the tab on swipe event. <div data-role="tabs" id="tabs"> <div data-role="navbar"> <ul> <li> <a href="#one" class="ui-btn-active" data-ajax="false" data-href="#">ONLINE</a> </li> <li> <a href="#two" data-ajax="false" data-href="#">SPECS</a> </li> <li> <a href="another-page.html" data-ajax="false" data-href="#">LOCAL</a> </li> </ul> </div> <div id="one"></div> <div
changePage “jumps” back to old page on android
I've a big problem with a jQuery Mobile Application: I'm using custom functions (they are triggered by onClick) to switch the page with currentPage. It only happens on Android-Devices with the integrated browser (not Google Chrome). iOS and Chrome works nice. After clicking on an element, the animation started but just before it ends, it switches back to the old page. After a half second, it switches back to the new. I made a movie of the bug here: http://www.youtube.com/watch?v=sXxvVUxniNg Thank
page under div container but not body
Hi, can I add the page (data-role=page) div under another div, as my testing result, seems the page div must be the direct child of body. I want to know is there a way to make the page div under another div, that's I can do some stylish setting on the parent div. I don't want to set the style on body. Can I?
JQM 1.4.5 how to pre-enhance radio buttons group?
I'm using jQuery 1.11.0 together with Mobile 1.4.5. Most of the load time in my pages is spent to enhance JQM Radio buttons. After some performance tests, i noticed that providing pre-rendered markup as advised in the JQM documentation will speed-up my pages, and effectively i was able to reduce the render time of this pages to 25% of the original. This is my markup: <div class="ui-field-contain" data-enhance="false"> <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"
JQuery Mobile Back Button on Chrome displays blank page
I'm using JQMobile 1.3.2 with the back button plugin, set via markup data-add-back-btn="true" attribute in the header The problem is persistent only in Chrome on desktop ((I am running version 43). Problem: When I press Back button the browser displays the page for a second then displays blank page. Refresh fixes the problem but that's frustrating. Has anyone experienced this problem and how did you fix it. Do you know if this is Chrome issue or jquery issue or yet something else.
loss of collapsible-set/collapsible functionality within pop-up
I am using the jQuery method .clone(true, true) on a pop-up element triggered by a map position toggle. The primary presentation elements within the DOM of this popup have been given data-role="collapsible" within a collapsible-set. Once this content is cloned to the pop-up when toggled (all content does appear), the expand - collapse functionality of the "collapsible" containment is completely lost. And I'm at a total loss now as to how to ensure that functionality persists. The documentation is
Jquery mobile scroll to top of page on page load
Hi everyone I have done extensive research on creating a solution for my problem, all forum posts just dont answer my question. Im using an iPhone 5 to test my web app. Everytime i load a new page dynamically from my CMS i find that if i scroll to the bottom BEFORE the page fully loads then i get scrolled to the top of the page when the page has completed loading. This is highly unwanted as i could only imagine that when my listviews are long this would be highly annoying to any user thats half
Uncaught TypeErrors on page change
I'm loading a PhotoSwipe gallery inside a (virtual) "page" using jQuery mobile: i4ideas.webfactional.com/gallery.html (No external dependencies, all libraries loaded so you can view the source or grab the page) The issue is that the gallery doesn't seem to close on page change and it throws errors each time. This is the console log of: Loading the page Opening first gallery Clicking back button Opening second gallery .. so apparently, Gallery #1 never closes and Gallery #2 is loaded twice.
Navigation problem with chrome
I am building a little math app using jQuery and jQueryMobile. The transition "slide" works with all browsers except chrome [the page actually disappears and is blank.] I tried very many version combinations but none worked without breaking the design. This only happens with chrome - works perfectly with Firefox and IE. What could be the cause? Is there a solution?
After jQuery mobile pageShow silentscroll, page jumps to top
Hi! We have a basket page, where there are the products, and then the shipping methods. This is a jQuery mobile site. What I want to achive, that if a shipping method selected, then if there is a page reload, jQuery mobile jumps to a div to the shipping methods. Here is the code, what scrolls to the shipping methods. This is an inline script. $(document).on("pageshow", function (e, ui) { $.mobile.silentScroll($('#kosar').offset().top); }); Expected result: on page refresh, the window scroll to the
jQuery 'playing'
Hello, at the mobile webiste www.jvp-gmbh.de , I have placed the Slider.js (You have to use your smartphone if you want to visit the mobile version) The Slider is working. How I can use the 'previous'; 'next', 'stop/play' button as it is shown in the example 'playing' at http://www.slidesjs.com ? <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="Robots" content="index, follow"> <meta name="Description"
How to make a Submit button also open an image in a lightbox?
I need an "Add to Cart" button to both submit the form and then display an image for 2 seconds (item added icon) in a lighbox, then have the lighbox close automatically. Exactly how do I do that? (sorry, I'm very new to jQuery and site development in general) ---Frank
How do I create an image link to open a page in a panel?
I know how to do this with a Panel Button but I can't seem to do it with any other link type (text or image). Please help. ---Frank
Dynamically create pages with jquery mobile and ajax'd json
I am looking to dynamically create pages with jquery mobile. I've ajaxed in a bunch of post (via JSON) and displayed part of the post (post image & post title) on my main page. When a users clicks on the title, I want to hide the main page and display the entire post content (html, images, etc) on it's on page. When user hits a button, I want this new page to disappear and the main page to reappear. What is the best approach here, using jquery mobile? What methods should I be using? Are their any
Anyone know how to shrink an input box?
I'm working on a cart mock-up and have much of it the way I want. However the input boxes refuse to shrink and stay within the table data cell aligned with the title "Quantity:". Instead it drops down a line and extends full width. I have all sorts of inline code in the first 3 tables to make the darn thing behave but none work. I used element inspection tools to temporarily make size adjustments to the box and they worked using padding, height, width, and margin adjustments, but still the box would
JQM 1.4.3 tabs not working as expected
To whom it may concern, I'm currently testing JQM 1.4.3's tab feature and I've ran into a few issues so I wanted to see if there's a fix for this or if it's just me doing something wrong. My first issue is that I want to have the first tab button highlighted on load but when I click between the other tab buttons, the first button remains highlighted until it's clicked again. What I'm doing is just programmatically clicking the button on load. Not sure if this is the best solution but I don't know
parent and child div not expanding
I had a create an application using jquery mobile framework.In dat i had bind my data dynamically from the database and appending it to a child div inside the parent div.But My problem is my parent div and child div not expanding according to the content.I had paste my code here. html part <div id="div_tempfl" data-role="header" data data-theme="f"> <!--<h3 id="tempnameheaderh3"></h3>--> <div id="divtempflinner" class="div_tempfl_inner"></div> </div> css part #div_tempfl
How to change row height in responsive table and.......
How can I change the row height of a responsive table? There is a lot of wasted space between lines. Also, how can I make this input box smaller (4-5 characters is all I need) and have it display in line with the "Quantity:" heading? See my test page here: http://m.publicmissiles.com/cart2.aspx Thank you! Frank
history.back(); to empty page
Hello guys! I'm using jQuery mobile for a while now and i bumped into a problem that i have never seen before. I'm using phonegap to make my project an native app on some devices when i call history.back(); it will go back to the page and then jump to an empty page (or let's that page hide). I'm using jquery mobile 1.3.2 and i know it's solved in 1.4.5 but i can't just upgrade to this version because i did alot of curstom changing in the 1.3.2. So i hope that one of you guys knows how i can fix this.
controling authentication using jquery mobile
Hi. I'm new on hybrid apps. I try to develop a hybrid app using jquery mobile. I try to make a login form and post it. I think that post username and password using ajax. How i can keep logged-in user data on my application. And how i can control a page is shown or not to user by his authenticate state. I hope, i can explain my issue. Can anyone give me an idea? Thanks in advance.
can I use the jquery ui component in jquery mobile?
Hi, I am a beginner of jquery mobile programming! I want to know the relationship between the jquery ui and the jquery mobile. If I use the jquery ui widgets in a jquery mobile project for handset, did them will conflict? Thanks a lot!!!
French Characters Corrupted on Form Submit
Hi All, Long time lurker, first time poster. Would it be possible for someone to please help me out. I have a guestbook in jquery mobile that also needs to be in french. upon form submit of any of these french characters: "áàäãâùæçéèêëîïôœùûü«»ÜÛÙŒÔÏÎËÊÈÉÇÆÄÂÀ" it automatically replaces the entry with these characters: âùæçéèêëîïôÅ�ùûü«»Ã�à Pages are encoded in UTF-8. For test purposes, try pasting: "áàäãâùæç" in the last text field and hit submit. Any help is greatly appreciated.
Any jquery library that takes care of viewports?
Hi, I created a website for a client that insisted on an image that is now causing problems on tablets. You can see the image at: www.zionism101.org. Its a temple, with one column on the left, one column on the right, and content in the center. So I put in a meta-viewport tag, and it is better, but people have to swipe their fingers together on some of the tablets to get everything to fit. Is there some jquery command or library that can figure out the zoom that is necessary given the tablet?
Download builder give JS error
Hi, I tried to download a custom copy of JQM 1.4.5 but the builder gives a JS error as follow: XMLHttpRequest cannot load http://amd-builder.jquerymobile.com/v1/dependencies/jquery/jquery-mobile/1.4.5/?baseUrl=js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://jquerymobile.com' is therefore not allowed access. And nothing happens just the loader. Regards; Sam
1.4.5 collapsible set scrolling bug
Hey all, I don't suppose anyone can help me out with what I believe to be a bug with the latest 1.4.5 JQuery Mobile version. I recently updated a project from 1.3.2 to 1.4.5 and have found that on iOS mobile devices (tablets are iPhones) that the native browser scroll feature does not work if I start by pressing on the accordion (open or closed). Any ideas on how to get back the 1.3.2 functionality (I cannot go back up the previous version). Thanks, Anthony.
Heaber back button issue/bug in IE
I have a Back button in my jQM app header. It had an issue not aligning with Header text in IE11 so I added some CSS style =" margin : .5em 0 ; " Now I test my app in Chrome and this code makes back button to move lower. If I remove it Chrome shows button correctly. < a data-role ="button" data-control-type ="panelbutton" class ="ui-btn-left" data-theme ="h" data-rel ="back" href ="#mainPage" data-icon ="arrow-l" data-inline ="true" data-iconpos ="notext" data-position ="left" style =" margin : .5em
JQuery Mobile multiple level (3 or 4 levels) Nested Listview with JSON Data
Can anyone provide me a simple demo of jQuery Mobile, 3 to 4 levels of dynamic nested listview/treeview that takes in list details from nested JSON data present in the same HTML file? Just 1 or 2 ul/li will do, I will try my best to figure the remaining myself! I am new to both JSON and jQuery. I have spent plenty of time going through several examples in order to get this done. These are a few links that I have tried to follow but failed as I do not know how to convert another version of jQuery
jQuery mobile page change and page position
I have a strange problem with jQuery mobile. I tried to search for it, but all the results are about how to scroll to somewhere. My scenario: On the main page, we have a bunch of products. This is a list of them, and these products are in divs. Nothing special. So, there are the header with logo and basket icon, some other things, like search, and then the list is coming. If I see the very top of the page, and see the first product, and click on the product's link, then everything is ok on the product
recommendations for jQuery mobile based booking system
Hello all! - pleasure to meet you. I'm interested in commissioning a booking system that would allow mobile and web users to book and pay for services online. The mobile experience is of key importance, and I like jQuery mobile so thought id start my research here. I'd be grateful for any recommendations you may be able to give thanks
how to changes the font size depending on the screen resolution of devices automatically ?
hi,everyone, i am using jquery mobile to create app for both ios and Android. i hava no idea how to changes the font size depending on the screen resolution of devices automatically .
Using media queries to change icon path at start of the mobile app
Hi , I'm a newbie in hybrid mobile / html development , i'm developing an mobile app using JQuery Mobile, where i have lots of images on the screen. i have different buckets of images for different resolutions like mdpi, xhdpi, xxhdpi etc.,. In android based on the screen resolution the bucket is choose and the corresponding images is taken from it. I wanted to have a similar feature for hybrid mobile app also, when i did my research all led me to 'css media queries' but none of them address the
Jquery Mobile Popup Vertical Scroll Problem
I have to create a popup div with some contents from database using ajax post.my popup is working properly,but when i am scrolling my popup div from bottom to top then the contents of the div goes outside on the top section.I have to test my application on geny motion emulator(Android version Jelly Bean).It works latest versions.But not working on lowest versions like jelly bean.i am attaching my popup image here. see the red mark above.And Also css property of top,left,right,bottom not working,when
need manually refresh jquery mobile linked page
0 down vote favorite I follow the tutorial and example of JQuery mobile to implement a menu. For the page itself, it works. But when I click a link, the new page (different html page) shows without the menu. I have to manually click "refresh" button of the browser to make the menu visible. What is wrong? Any information would be appreciated. Thanks in advance. My two pages have the same css, js.. as follow. The differences between these two pages are the word"test1" and "test2" <!DOCTYPE html> <html>
where do i put the code
I’m trying to make my already existing website, mobile friendly. Where do I put the code to make this happen?
How to call Javascript in Jquery Mobile Multipage Template?
Hi, I have a jquery mobile app (which is multipage tempalte) and external javascript needs to be called inside the index.html page. Its working for normal html page and not working multpage template. Please guide me.
how to expand all nested elements in filter
I am trying to create a script that will open both the parent and child that matches a search. What I want to achieve: http://prntscr.com/7gnnti Notice how the search matches children in both parents, and both parent and child are expanded. Here is the code that I have so far, which only expands the parent: http://jsfiddle.net/fishinapond/zr3aoh2r/1/#&togetherjs=xaNrc0NQNm
Check if Popup is open then close it
I am using Jquery Mobile for my Applicaion . In my page i have 5 popups as shown above <div data-role="popup" id="one" class="ui-content" data-theme="a"> </div> <div data-role="popup" id="two" class="ui-content" data-theme="a"> </div> <div data-role="popup" id="three" class="ui-content" data-theme="a"> </div> My requirement is that , On click of the device backup button , how can i check if any of the popup is open , close it I have tried
fixed bottom footer help
Hi all, I am using jquery.mobile-1.4.5 and working on a fixed bottom footer currently as listed below... It works ok - but there is space between each button... Q: Is there a way to have each button auto width to fill so there is no empty space? --------- <footer data-role="footer" class="ui-barNAH" data-position="fixed" data-theme="a"> <div class="ui-grid-c"> <div class="ui-block-a"><a href="#" rel="external" data-role="button" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home">Home</a></div>
Next Page