Bringing Metawidget to JQuery Mobile
Hi guys, Thanks for all the great work you do on JQuery Mobile! I'd like to announce the new release of Metawidget (3.7) adds support for JQuery Mobile. This allows you to easily create dynamic User Interfaces for JQM applications. It supports the full Metawidget pipeline of pluggable Inspectors, WidgetBuilders, Layouts and more - so you can scale from simple UIs to complex, enterprise apps: Here's a simple (but complete) example. It creates a JavaScript object, renders a UI, and saves it again (the
Aspect Ratio/Screen Size Issues After Transferring Site Between Servers
I transferred my jQuery mobile website to a client's server and the CSS no longer displays correctly. The buttons, header/footer, and all that display as they should, but the text and everything appears small as if viewing the mobile site on a desktop, when viewing on a mobile phone. To view the before and after, go toL junxion.rosasfreelancedesign.com/mobile and http://www.thejunxionbar.com/mobile The latter mobile site does not display correctly, yet the code is the exact same. Any thoughts on
jquery mobile photoswipe need refresh
I am setting up a jquery mobile photoswipe, but for some reason it won't start unless refresh the page. here is the page with button link to photoswipe page: http://xuanyinwen.com/mobile/examples/remax.htmafter click on the photoswip button, I need to refresh the page tot get photoswipe start but if I open the photoswipe page straight away, it work ok. how can I fix it please
Override custom "selectmenu" plugin
I'm using v1.3.2 of jqm. Upgrading to 1.4 is not an option(I know the feature I want is in there now, it's not stable enough yet though, and in my tests is going to require a bunch of changes on my end I don't have time for right now). I'm trying to add in the listview filter ability to select menus. Here's an example of what I'm hoping to end up with: http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/ As far as I can tell, if you do the following(note the data-native-menu set to
Strange borders around a search box and submit button.
I am using Jquery mobile to create a mobile app. When I create an input box with a submit box I see a strange border-like graphic around it. Please see the attachment <div class='unit' style='margin-top: -26; margin-left: 0px; width:400px;'> <form action="restaurant_search.asp" method="get" style="width:100%; "> <fieldset class="ui-grid-a" style="width:100%; "> <div class="ui-block-a" style="width:25%; "><input type="search" name="search-mini" id="search2" data-mini="true" /></div> <div
Append - HELP
Hey Guys, I am having a small issue with using the append function. My problem is I am trying to implement a favourites category on my jQuery Mobile website. I am using append to add to the favourites list. The problem is I have 2 different pages for the favourite function, when I click on a favourite button from the first page which I will call 'buy' the favourites should be added to a new page called 'sendFavourites'. This is what I have come up with I'm not sure why this isn't sending to the 'sendFavourites'
What happens in background when opening new pages?
All, Relatively new to JQM, I try to find documents on how the following works. I have a simple webapp. Using standard links (a href) I jump to the second page withinh the same html-page. From this second page I jump to a php-file. In this php-file I can jump to the first page again. When I do this the first page appears, but hangs. What I am looking for is good docu where is described what happens exactly in my pages. Or maybe there is a way to follow what happens internally. Hope anyone can point
jquery mobile checkbox size
hi, How to increase the checkbox size in jquery mobile regards, kathir
jQuery Mobile time input format
Hello, I'm using a time input on jQuery mobile. When I pick a time from Android on a Galaxy S4 (probably the same problem with iPhone), the default format of time is HH:MM:SS. I would like to display only HH:MM (no seconds). I use this code : <input type="time" data-clear-btn="false" name="time-1" id="time-1" value=""> From a computer (google Chrome), the default format is HH:MM. Is it possible ton configure a time input format ? Regards, JR.
background problem
Hey there, I tried to add a background to my jQuery Mobile Site, if you click on the links it will show to background for about half a second and then it turns back into white, why is this happening? Danielsfotos.com/persio best regards
Open a excerpt my blog page
Hello, I have wordpress blog, and i want create a webb app with jquerymobile, but instead of opening the entire home page, I'd like to open only a portion (that says read more) and then clicking on read more, go directly the selected article. Thanks. This is my example: http://jsfiddle.net/GFqt6/11/
Images Not Working on jQuery Mobile Site
The site in question is at http://www.simplecozygifts.com. I am using version1 .3.2 of jQuery Mobile. I created the jQuery Mobile code using the Dreamweaver CS6 template. I have created a banner graphic for the site in .gif format and placed it on the page and added CSS to have the image re-size to 90% width and height in order to make it responsive. All files are uploaded but the image does not show on the page...only a box with the Alt text is displayed where the graphic should be. How do I get
Trouble with a basic memory leak
Hi All, I hope someone can shed some light on this. I'm working on a mobile app using jQuery Mobile with jquery 1.10.2. This app is phonegapped and shortly after installing on various mobile devices noticed that memory usage would rapidly go through the roof. After days and days of tracking through my code I'm fairly convinced there is a bug in jquery leading to Detached DOM elements. My last and final test I built a *tiny* web page - no included scripts, no jquery, just simple html (the simplest
Best method to disable interaction for a period of time?
Hi folks, I have to download a good sized amount of data to the browser as Application Cache (Cache manifest, not local storage) so that the site will function offline. The initial download takes about 30 seconds and I don't want the user to start interacting with the site until it's finished. This is a dynamic site that will change daily, and will need to be refreshed at the browser level each morning before they go offline. What would the best method be to implement something like this?
Color swatch collections for jQuery Mobile?
Anyone know of any color swatch collections out there for jQuery Mobile? (besides the 5 default ones). I know that ThemeRoller is available, but I'm not the best at creating color palettes, so was just wondering if anyone else has already done this? Ideally, it would be nice to have at least 15 or 20 different color schemes to choose from, instead of the standard 5. I know about Graphite, but it only has 8 different color schemes. Plus I don't really care for how Graphite styles the elements (not
Active shadow color and Themes
I am trying to find a way with ThemeRoller to change the blue shadow color that appears when a list item is pressed/focused of the Theme a. It would seem that JQM use the color defined in the last theme created. I am using the 1.4.0 -rc.1 version Thanks, Claudio
How to redirect the user from an external server page back into the app built in jquery mobile?
I am developing an ecommerce app in jquery mobile packaging it in phone gap. Now i want my users to come back into the app after paying in the page hosted by some gateway. It is taking them in the return_url specified in the account. I want to create a link in the return_url page that they can come back into the app to shop again?
Hiding li-elements (with a link) within a listview
Hi folks :) I am trying to hide an li-element (with a link) within a listview. Trying to hide a normal li-element works fine but when there is a link inside the li-element, the link icon remains visible. Here is the code (just click hide/show in the header): http://jsfiddle.net/qHxk9/embedded/result/ Is it my fault or a bug? Regards
How to pop the history stack (URL) when using programmatic page change?
I have a multipage setup with a 'page depth' like this: Page 0 Page 1 Page 11 Page 12 Page 13 etc. If I walk thru the pages in the same order but in different ways then the outcome is different depending on using 'a href' or $.mobile.navigate. I perform this walk: Page 0 -> Page 1 -> Page 11 -> Page 1 -> Page 12 -> Page 1 -> Page 13. If I use 'a href' to navigate between the pages and then go backwards using history.back() from Page 13, then I get this path:
Manual reload necessary before input button works
All, I have a small webapp with an index page. The index page has a button "Login customers", which starts up a new page. On this new page the user can enter id and password and click the "login" button. however, initially the button does not respond, but after manual reloading it does work. It seems to be that javascript is not loaded. A related problem is probably: at first my added "Back" button is available and works. After the manual reload however it has disappeared. It seems to be related.
Split Button Lists: Using same anchor link for multiple tasks
Hello All, I'm creating a dynamic Split button list. The lists second anchor link will be used to add and remove a particular list item to its own personalized list(displayed in another page), like a bookmark. <a data-icon="info" href="#" id="ID_1" onClick="add_remove_fav('ID_3');"></a> I'm facing two issues here:- 1) Issue of using same "anchor" tag of split button list to add and remove a particular list item from personalized list. This anchor tag will be required to handle two operations:- add
How to update status in a footer bar that is persistent across all pages?
Hi folks, I've got a persistent footer bar at the bottom of my pages, and I want to be able to update the "onlineIndicator" on any page. I realize that it's a no-no to use the same ID's for multiple elements. Can someone tell me what the best method would be to do this? I've got a function that updates the element, but it does not update the status on pages other than the first page. $("#onlineIndicator").text("Status here"); <div id="statusBar" data-role="footer" style="text-align:left;"
Custom made ajax vs JQM default ajax page loading mechanism
Hi, I made a file which fetches data via PHP+MySQL and shows it on the page through $.ajax. The thing is that when I have data-transitions added to a link leading to that page the content from database doesn't load (it loads only after a page refresh). When I add data-ajax="false" to the link (which means I disable the transitions and default JQM ajax loading) everything works as new. How do I do it so I have transitions and my custom $.ajax loading at the same time? Maybe there is a way to activate
Spam
I havea comments page on my site. When I converted the page to jQuery Mobile, spam comments from bots vastly increased. Why?
Change theme of split button in list view
Hi, I have used JQM split button list view. I have fill up data dynamically in this list view. I want to differentiate data using theme. Is it possible to change split button them dynamically ? Like first list split button theme is a and second list split button them is b I want to use only two theme in whole list view. this theme set dynamically as per condition. Thanks, Hardik
Using trigger('create') and checkboxes
I've got some code that injects HTML into the DOM and uses trigger('create') to update the UI: displayDom.html(html).trigger('create'); For my first test, a simple paragraph and a button, this worked fine. For my second test I had a set of checkboxes. The UI looked perfect (screen shot - https://www.evernote.com/shard/s3/sh/9c5ffb14-e50b-4840-82c1-f41ed23cf433/5f0be6fd780c50df110815fc7a8a9a1f) but I couldn't actually click to select a checkbox. Any ideas for what could be wrong? This is the HTML
Jquery mobile only in dialogbox
Hi, can i use this library/style only in dialog box or only in exactly box/div ? regards
listview trigger('create') not working with jasmine-jquery mobile.
I have developed an app with jquery-mobile. Now I am trying to setup a jasmine framework for it. In original code, I am creating a listview dynamically. After appending items to `ul.list`, I am calling `ul.list.listview('refresh');` This is working as expected in main app. I have added different UTs, to check behavior of different events on this list. So every time I am calling populate function to load this list. The general structure of my jasmine code is: describe("List behavior", function()
Problem refreshing Widget
Hi, I'm having a problem refreshing my Widget that is created via javascript (meteor framework): <div> <div>Output: EXO-01.1</div> <select id="flip" name="." data-role="slider"> <option value="Off">Off</option> <option value="On">On</option> </select> </div> In order to get the widget rendered, I tried: $('[data-role="slider"]').trigger('create'); or $('[data-role="slider"]').trigger('refresh'); But none is working. How can I make sure the Widget is refreshed/rendered? Thanks,
looking
Hello guys Im looking for a menu plugin. (Look on image down below to see what i mean). When you press on the little thing left-above, the menu will appear (you can see the menu on the right side of the image). Does anyone know what kind of plugin this is or do you know a plugin that looks the same as this one? Tell me please! Im also new on Jquery mobile, so is it easy to do? It has to be a easy plugin or something:) Thanks for helping me!
DateBox/Flip Mode always shows up as normal text input
As you can read in my caption, the DateBox always shows up as normal text input and even after I refresh the page there is no change. I did the following imports: (I have to summarize them here, because I'm working on a JSP project and I did most of the imports via <%@ page import="" %> ) <!-- jQuery and jQueryMobile Files --> <link rel="stylesheet" href="css/jqm.css" /> <script src="js/jq.js"></script> <script src="js/jqm.js"></script> <!-- DateBox Files --> <link rel="stylesheet" href="css/mydate.css"
Mobile Application Security Testing
Mobile Developers...Help Us! Two graduate students need your help and will give you a chance to win a $10 Amazon Gift Card for 5-10 mins of time. Please complete this 10-question Survey Monkey survey about mobile software development and security testing preferences. We appreciate your help! Survey closes Dec. 6th. Gift card will be sent to the winner by Dec. 10 www.surveymonkey.com/s/BGG5YWD
Capture scroll event on a particular jQuery Mobile Page
How to capture the scroll event on a particular jQuery Mobile page? Page: <div id='pg_remote-address-book' data-role='page'> <div data-role='content' id='pg_remote-address-book_content'> <ul data-role='listview' id='ul_address_list'> </ul> </div> </div>On pagebeforecreate, dynamically loading items inside the unordered list for ( var i = 0; i < 100; i++ ) { $("#ul_address_list").append("<li>"+i+"</li>"); }Capture Scrolling $('#pg_remote-address-book').scroll(function () { console.log('scrolled');
When the element is created the click is fired
When the system exec this code, the event click is fired. What's going wrong? $("#box-btn").html(""); $("<a>").prependTo("#box-btn") .attr("href", "#page3") .attr("id", "final") .attr("data-theme", "a") .attr("data-transition", "flip") .attr("data-role", "button") .html("Final"); $("#page2").page("destroy").page();
jQuery Mobile Web Development Essentrials: Second Edition.
Review Copies Available for 'jQuery Mobile Web Development Essentials- Second Edition' by Raymond Camden and Andy Matthews. A book packed with examples that will help you create brilliant mobile optimized websites.Feel free to check out the book page for an overview. If interested in receiving a copy you can reply back or simply email me on priyankapinto@packtpub.com with the following details: 1. Name and email address. 2. Where you will be posting your review (Blog/Website/Amazon/Goodreads/Google
How do I fix my data-filter going from 1.2 to 1.3?
Making a demo of this app I used JQuery 1.8 and JQM 1.2. Now that I want to get it ready for production I bumped the versions up and my data-filter stoped working. I have a listview: <div id="listPlaceHolder" data-theme="a" data-role="listview" data-filter="true"></div>After fetching some data I'm adding an accordion to it using handlebars: <script id="event-template" type="text/x-handlebars-template"> <div class="dataitem" data-role="collapsible" data-inset="false" data-collapsed="true"
Cache?
Hi, i've built an application with jqm 1.3.2 and it works very nice. I rember, I had problems with the scroll-position after history.back() but could solve that relative simple by setting an option data-dom-cache. After setting this option all cached pages remembered there scroll-position, the states of expanded collapsibles and so on. Very nice behaviour! But now there is one page in my application that doesn't remember anything and I got now idea, where to search for this bug. Every page uses the
Loading with Overlay over the whole page
Hello, How can i configure the loading wiget to show a dark overlay behind the loading gif over the whole page? Thanks for replays. best reguards, Kevin
mixing JQuery Mobile with JQuery UI widgets... don't ?
Forgive me if this seems like a silly idea to begin with, but to "tide me over" while certain JQuery Mobile widgets do not exist yet (calendar, tabs etc.) I thought I'd just load up JQuery UI and bring those widgets in from there. It was not pretty. Are the two not supposed to co-exist ? Wouldn't it be nice to leverage JQ UI widgets in JQ M applications ? Or is their CSS / js base too different to make that practical ? Or - should it work and I just screwed up in which case I will try again :)
If data-position="fixed" is used; pinch zoom not working on iPhone (iOS6)
Using jquery-1.9.0.min.js and query.mobile-1.3.0-beta.1.min.js Noticed if data-position="fixed" is used (for navbar in my case), page cannot be zoomed using multitouch on iOS 6. So had to avoid using fixed positioned toolbars. Any idea to overcome this issue?
Next Page