How to filter select in jquery mobile 1.2.0
I have a long list in select box. I want to filter select in jquery mobile . Can you help me? Thank you so much.
Can't get / set collapsible property 'collapsed'
Hello, according to docs this should tell me if a collapsible is collapsed: var collapsed = $("#MyCollapsible").collapsible("option", "collapsed")but I always get the value of the data-collapsed attribute set in the original HTML, not the current state. And this should set the state: $("#MyCollapsible").collapsible("option", "collapsed", true) // or falsebut has no effects. Instead I'm doing this way, and it works: var collapsed = $("#MyCollapsible").hasClass("ui-collapsible-collapsed") $("#MyCollapsible").trigger(collapsed
When the “panel” is enabled for mobile, and then we click on the back button of mobile. Now I am redirected to the previous page, instead of this only the “panel” should get hidden.
When the “panel” is enabled for mobile, and then we click on the back button of mobile. Now I am redirected to the previous page, instead of this only the “panel” should get hidden.
Linkbutton with text on image
Hi, I have a linkbutton with an image. <a href="#cancel" data-role="button" id="cancel"><img class="cancelIcon" src="xxx.png")"/></a> css: .cancelIcon { width: 32px; height: 32px; padding-left:15px; padding-right:15px; padding-top: 0; padding-bottom: 0; } Now I would like to set numbers in the center of the button and the image should stay underneath the text. The text should stay separat and should not be included in the image, because the numbers should change by the time
pixelated rounded corners on buttons
the button on the left is the default jqm button: <a data-role = 'button' ... >. the button on the right has been modified : <a data-role = 'button' style = 'background-clip: border-box;' ... >. In firebug I found that these classes, .ui-corner-all, .ui-btn-corner-all, are affecting the <a>'s, and that the classes include a style background-clip:padding-box;. QUESTION A - is my solution the right solution? QUESTION B - what is the best way to implement the style over-ride? ... I
jQuery mobile listview with element wrappers
Hi all, Currently we are facing a problem when we use jQuery Mobile in combination with some wrappers for SEO purposes. For example we are trying to create a nice nested list for the navigation. However the first nested <ul> element has two <div> wrappers around it. Somehow it seems jQuery mobile doesn't really like those two wrappers. Check: http://jsfiddle.net/4PAUv/ for live example As you can see I removed the two wrappers from the second nested <ul> and it works, but now the html is incorrect
Help subsequent page requests do no make new ajax calls
I've done some reading and looking around but can't seem to find an answer to this. I have a multipage layout with 3 page sections I am trying to make a mobile app out of for phonegap. I have an index page, a memberlist page, and a membersdetail page. On the homepage is just a button that shows the memberlist page. This page makes an ajax call out to a web server and fetches html code which I then insert into the page div. This works fine. Then there is a link for each listing to view that members
How do I get the form response to load into a different div?
I am testing out my first jqm + jquery app and I can get this form to submit fine, but when it gets submitted, I want the page to change to the descriptions div. It's not doing that right now. I tried to add action="#descriptions" in the form but that didn't work either. <script> $(document).ready(function() { $("#testForm").submit(sendForm) }); function sendForm() { $.post('http://www.myurl.com/mobile_test.cfm', $("#testForm").serialize(), function(data,status){ $("#descriptions").html(data) });
PowerPoint Presentation in JQuery Mobile
Got a PowerPoint presentation in a regular webpage: http://gmjones.org/accountantsinadr_hmrc.php I can convert each of the slides into image files or pdf files easily. How do I set up an equivalent presentation in JQuery Mobile?
How to hide the next button after getting all the pages ?
Hi,how to hide the next button if page is last page then not need to show next as this is last page.can anyone help me. My code : // Next page $('.next').on('click', function () { var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id; $.mobile.changePage(next, { transition: 'slide' }); });
Panel open problem
Hello, I have put a button into the header to open a panel <a id="shownavbutton" href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a> And that's how it is called $("#shownavbutton").on("click", function() { $("#mainnavpanel").panel("open"); });This works fine, but when I click a link inside the panel (it is the navigation panel), the panel is closing, the new site is loading through Ajax - and after that the panel won't open again by clicking the "bars"-button.
New loaded page with its own script
Hello everyone, I have a dynamic page that depends on the previous one. This page is loaded into the dom by jquery after a form submit. I need some jquery code to handle the second page but i don't know how to organize it: putting the js code in a separated file with its own $(document).ready didn't work cause also the previous page had its own js file with a $(document).ready function associated. On the other hand, putting all the code in only one js file doesn't work either cause the elements that
Flexslider2 responsive Images?
Hi everybody, I´m using the Flexslider on my responsive webside with the carousel-view: http://flexslider.woothemes.com/basic-carousel.html It works fine, but is there a solution to avoid that images didn´t get cropped? So only images apears fullsize. Maybe some dynamic margin between the pictures depending on displaysize?
JQuery Mobile - Problems with aligning in listview using absolute and relative positioning..
Hi there.. and thanks for reading my post.. The problem is quite simple actually, and VERY easy to describe.. but.. i just dont get it right ! In the listview, i have one block which spans the whole listview item like this : .jqm-listview-container { position: relative; } and inside i have one block to the left : .jqm-listview-box-left { margin-right: 105px; } and one to the right : .jqm-listview-box-right { position: absolute; right: 0;top:0; width: 70px; text-align: right; } ... which gives a very
During transition between html files in jquery mobile a blank page is showing
Hello , I built a Jquery mobile application where I used only data-transition attribute to link a html page to another one.The issue is that I faced some problems when i reach the page that I am linking to: the format is messed up. However if I add the rel="external" attribute to the anchor tag I reach the html page I want to go to with a good format. The problem is the last solution for the first problem creates another problem which is the data-transition attribute will be automatically disabled
Selects will not open a dialog on only one page
I have a multi-page document in which I have several dynamically populated selects, and although the source appears identical between each of them, only one pages items does not open the <a href="#ddlName" > dialog. The dialog href is properly named and all other items I could check against working examples seem consistent. However for these broken large selects - Instead the dialogs appear over the current page and I can read the text of and interact with the buttons in the page as if
Options that are dynamically set to 'disabled' via jQuery are not working in JQM
Hello. I am utilizing the following code as part of my JQM application: <script type="text/javascript"> $(function () { var selects = $('select.magic-select'); $(selects).bind('change', function (evt) { var newVal = $(this).val(), oldVal = $(this).data('old-val'); if (newVal != 0) { $(selects).not(this).find('option[value="' + newVal + '"]').attr('disabled', 'disabled'); } $(selects).not(this).find('option[value="' + oldVal + '"]').removeAttr('disabled'); $(this).data('old-val', newVal); }); });
jQuery Mobile and phonegap Localization
Hello, I have a Jquery Mobile application wrapped in phonegap. I am using JQM 1.3.1 with jquery 1.9.1 and Phonegap 2.1.0. This is a crossplatform application. There is a requirement to implement Localization ( Internationalization or Globalization ) for this application. I will have to have a button that will allow the change in the Language used by the application, say, from English to French or Arabic etc. I found that the datebox plugin can to configured to display date and time in any language.
jquery mobile popup passing query string
I am using jquery mobile. Is it anyway pass querystring to jquery mobile popup. <a data-transition="flip" href="PostingDetails.cshtml/' + item.PostingID + ' <div data-role="popup" id="loginpopupMenu" data-history="false" data-position-to="window" data-history="false" data-ajax="false" class="ui-content"> @RenderPage("~/Account/Login.cshtml?PostingID=") </div>
Changing the text in a hyperlink?
Hi, I am trying to change the text in a link. I have managed it with the following code on a button, $('#sauce .ui-btn-text').text('freestyle'); <a href="#home_page" id="sauce" class="ui-btn-right" data-theme="b">Save</a> but on the second use the button loses it styling? Can anyone help?
How to show/hide a switch?
When activating a switch, I need to put another switch visible this is my code: <script> $('#page1').on('pagechange', function() { $('#youthere').change(function(){ var slider_value = $(this).val() if(slider_value == "on") { //activate 2° switch } else { //desactivate 2° switch } }); $('#active').change(function(){
Cookies plugin
Is there any tutorial about jquery cookies? Im creating a mobile apps using javascript,html css and jquery mobile and having a web service SOAP..Thanks for those who will help..
site search function
Hi, how can i change the site search with my options??? Is there a way to read out the <li> stuff from a seperate file??? Wich files i ONLY need for a working sitsearch like that??? thanks a lot Heiko
HTML list of 28 items and AJAX page transition problem
I have a list of about 28 itmes with auto dividers. The list loads perfects, and I can then click on each list item, and have it load a new page, with phone number and email items...All the pages were copied from an original working page, with nice transitions...the problem is, as I am testing, I have found a bug. If I load all items in order going down the page consecutively, about half way down the page, when I hit the back button to go back to the list...animations just stop working, only when
tools for online purchase solutions compatible with jquery mobile
has anyone explored the possibilities of implementing online purchase technologies into html+jqm, something which would also remain intact after converting the whole into android and ipad app? pls share
Problem with AJAX Navigation
I adapt my website with Jquery mobile. This is a really nice tools, but I have a problem with ajax navigation system. When I load the website from the main url, it's works fine, but if I access to the website from article url and i back to the main url my page is broken (no content). Exemple: Works fine : http://dev.tobefun.net:9600/fr/ViewSwitcher/SwitchView?mobile=true&returnUrl=/fr/ (choose a video and back to the home listbox). Doesn't work : http://dev.tobefun.net:9600/fr/ViewSwitcher/SwitchView?mobile=true&returnUrl=/fr/media/football-goal-of-65-meters (click
data-native-menu="false" and window.location not working
Hi i have drop down box , im redirecting page on onchange event of dropdown but i noticed it is wokring only IE adn not in FF and chrome.if i remove data-native-menu="false" then it is working fine on all browsers. here is my code: <asp:DropDownList name="country" ID="ddlCountry" runat="server" class="country" data-native-menu="false" style="white-space:normal"; onchange="javascript:window.location.href=this.options[this.selectedIndex].value;" > </asp:DropDownList>
pageload ajax not showing
how to debug ajax pageload on change page, I often faced not showing page somehow?
how do I managed to drag the image to the side?
coloquei uma imagem no meu aplicativo, mas só consigo move-la para cima e para baixo. não consigo move-la para lateral.
Popup Dismissible refuses to work .... :o(
Hi, I have defined a popup in html as such: <div id="FloatingMenuBox" class="d18dc5cd-e6ac-382c-02df-848250117ad6 FloatingPopupMenu" data-dismissible="" data-role="popup"></div> in my code I have: _menubox.GetElement().popup({ dismissible: false }); _menubox.GetElement().popup('open', { x: box_x, y: box_y, transition: LoadGlobalV("menutransition") }); The options x,y and transition all work as expected. However, whatever I do, the popup refuses to be indismissible. Anyone any idea's ???
Hash in the URL has gone
The following piece of code works fine with jQM 1.2.1 and jQ 1.8.3 hmiActionLoadPage.prototype.execute = function (wgtId, params, strAction) { // change the page var theUrl = params.length > 0 ? params[0] : null; if (theUrl !== null) { $.mobile.changePage(theUrl, { transition: 'none', changeHash: true }) } this.done(); }; I can change page in my web app the #PageName is appended to the URL, but when I upgraded to jQM 1.3.1 and jQ 1.9.1 the #PageName is not yet added to the URL. To
floatbox.js works on first page or after reloading page in browser
Hi all, I would like to use floatbox (http://floatboxjs.com/) on my mobile web app. It works well on the first page (index.php). But it doesn't work on subsequent pages (i.e.: page2.php). To make it work on page2.php I need to refresh the browser page manually. But this isn't a solution (on a mobile web app you cannot reload a page). After refreshing the page2.php the floatbox works. But then it doesn't work anymore in the first page (index.php). I already tried to load floatbox js and css file on
css problem with Column Toggle
Hello, I'm trying to dynamically load content of the table on button click, in a.html i have: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>table-columntoggle demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
Changing a Radio Button to a Checkbox on the Fly
Hi jQuery Mobile World, I've been using and loving jQuery mobile lately. I've been using it to build a quiz tool, and I've run into something I haven't been able to solve. Hoping someone can help or offer advice. My quiz tool needs to switch from a "multiple choice" question, to a "select all that apply" selection. I'm using radio buttons for the default as they're perfect for multiple choice, but when there's a question that needs more than one option selected for a correct answer, the radio buttons
Filter from a select menu
Hi I have a listview that is styled with jQuery mobile that is being pulled in dynamically via googles API. It has a data-filter true attribute applied and that works well. I have added a dropdown menu above the listview, that ideally, i would like the user to select an item and then it filters/searches the listview content for that word and refines the list accordingly. For example, in the dropdown, one of the options is Vet Nurse, I have configured the export value as 'VN1'. In the body of some
On Iphone, when I load the page and change the orientation to landscape for the first time, google map doesn't take the entire vertical space.
On Iphone, when I load the page and change the orientation to landscape for the first time, google map doesn't take the entire vertical space. I am using google map api version 3, jquery mobile 1.3.1 and jquery 1.8.3 I use this viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no" /> This is the code in general: <div data-role="page" id="mapPage"> <div class="ui-grid-solo"> <div class="ui-block-a"> <div style="height:100%;width:100%;">
jQuery Mobile listviews and linked-listviews
Hi, Recently I've noticed a couple of strange behaviours with the jQuery Mobile listview widget which I cannot put my finger on, so I'm hoping some of you know. Is it possible to have a non-linked listview widget a data-icon? (i.e. each li item without an <a> tag in it)? The reason I ask will become apparent in the second point. I've had to redefine some of my lists due to performance issues. Before, I had a linked listview widget (i.e. each item contained an anchor/<a> element inside it), with an
asp DropDownList + ie 10 not expanding
Helllo, I'm using ASP.NET + jQuery Mobile. I've heard that is not a good mix but I like it. I've just run into a problem that I don't know how to solve: asp:DropDownList doesn't work with Internet Explorer 10, it doesn't expand, actually It expands if you click the dropdown twice but that shouldn't be the normal behaviour. Does anyone have any idea? Thanks! <asp:DropDownList data-theme="a" ID="ddlMenu" runat="server" data-ajax="false" OnSelectedIndexChanged="ddlMenu_SelectedIndexChanged" AutoPostBack="true">
Passing a variable using multipage template
Hi everyone! I am passing a variable called ID from one page to the other of my multipage jQuery Mobile application. So my link would be: <a href="#detailsPage?id=' + test.id + '">click me</a> When I click I simply get on #detailsPage but I get no information about the final part of the link ?id=3 (e.g.) I have read many different answers and problems about this topic from users that solve it in very different ways. The thing that scares me is that often they speak about bugs or fix to implement
How to start with the jquery mobile?
I am new to the jquery i have plan to build the app in the mobile using jquery so can you guide me in this pls
Next Page