Help With Collapsible Content
Good Morning!! First off, thank you for your help!! I am a volunteer for a Minor Hockey Association, trying to set up a webpage for our volunteers, and overall I really have absolutely no idea what I am doing... I was able to piece together the below by reading through forums and tutorials, but I have hit a wall and really need some help. Here is what I have so far: <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>**** Volunteers</TITLE> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
Re-enable disabled radio buttons
I have a 3 rows of radio buttons with the last two items disabled. Is it possible when a button is pressed to uncheck any checked items but to maintain the state of the two disabled buttons? https://jsfiddle.net/gb3f7v8k/115/ For example on rows 1,2,3 they would all become unchecked bar the 1st and 2nd button in each row. Thanks.
jQuery Mobile, HTML to PDF generator through the mobile app
Hi, I am new to jQuery mobile and i am working for HTML to PDF generator through the mobile app, I have already used couple of plugins like HTML2PDF, here I am getting iText issue. Please help me.
Visible list view length from another page.
Hi, is it possible to do the following? I have two pages, on the first one is a list view with four items but on the second page I want to find out how may items (the length) from this list view are visible from page-2. (initially 4). https://jsfiddle.net/vs2jfqaa/119/ Then if I hide one in page two and repeat the process it will give me the length of 3; Thanks in advance.
Help
How to make jquery mobile compatible with Meteor?
Form being redirected but elements not being posted in mobile web-pages built using jquery-mobile
Just discovered that jquery-mobile interferes with HTMLs File Uploader's functionality. Refer to my post on StackOverflow. Only solution I could find on my own was to remove the jquery-mobile file from the web-page. Has any one else encountered the same problem and whether some other solution is available? The version I am using is 1.4.5.
1.5 Timeline?
Hi jQuery-Team, Since your last blog post is already half a year old (http://blog.jquerymobile.com) and there are no recent meeting notes on https://meetings.jquery.org/category/mobile/ either, could you give as a brief update concerning the timeline of version 1.5 and the future of the project? Greetings
Cloning a page and event on click.
Hi, I am trying to clone a page, change the require ID's etc, then have one of the links call a function. I have include a brief example in this fiddle - https://jsfiddle.net/vs2jfqaa/17/ But I can't seem to get it the ID that is changed to (btnDuplicate_2) to do anything? Thanks in advance,
How to set hover/active pseudo style to element?
My jQM app doesn't have input device such as mouse or tap sensor, only arrow keys. So the buttons should first show the active/hover state programmatically, then user can hit enter to confirm the click, where click event is triggered. I've tried $('#radio' + radioIndex).trigger('hover'); and $('#radio' + radioIndex).trigger('mouseenter'); which didn't work. Do I have to refresh button? How? From Chrome Developer Tools I can see that what I want is actually pseudo style :hover or :active. But it doesn't
How to ask jQM to hide tab targets?
I have one or more tabs which later from javascript I will substitute to one of tabs. But I don't want to show those tabs by default. Of course I can manage their visibility from code, but then I have to keep states and do all kind of magic. My question is whether there is a way to ask jQM to hide tabs that are not mentioned in navbar? <div data-role="page" id="settingsPage"> <div data-role="content"> <div data-role="tabs" id="tabs"> <div data-role="navbar"> <ul> <li><a href="#one" class="ui-btn-active">Tab
Messed up tabs
HTML <div data-role="page" id="settingsPage"> <h2>Settings</h2> <div data-role="tabs"> <ul data-role="listview" data-inset="true" class="tablist-left"> <li><a href="#loginLogoutTab" data-ajax="false">Login</a></li> <li><a href="#aboutTab" data-ajax="false">About</a></li> </ul> <div id="loginLogoutTab" class="ui-body-d tablist-content"> <h1>Press OK to login</h1> </div> <div id="aboutTab" class="ui-body-d tablist-content"> <h1>About this app, bla bla</h1> </div> </div> </div>There is no javascript
API can only be initiated by a user gesture event handler
Hi, I am trying to play an html5 audio in a vmousedown handler in chrome on Android, but it says "API can only be initiated by a user gesture event handler". The issue is, obviously, that I am doing in an event handler and responding to a user gesture. The code is like below: <a id="btn1" data-role="button" data-inline="true" data-mini="true">Play</a> <audio class="audio" id="audio1"></audio> <script > $("btn1").on("vmousedown", function() { var a = $("audio1")[0]; a.play(); }); </script> Any idea?
Select not working after POST action="#"
The following example should reproduce the problem. The switch works after loading the page After hitting the send button, the switch does not show any element anymore. Tested on Chrome, Android and IOS I guess I do fall for some super easy error here. Please help me. I'm running it on a FLASK server. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>title</title> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
How to pass php string variable into javascript code using jquery mobile
Well my first post could be a doozy or it could be something so simple that it will make the pros eyes roll. So let me start by saying that I have "tinkered" with javascript as little as possible, but now I want to make an app that is mobile/responsive and so I MUST learn more javascript. My code practices with js are probably going to be atrocious so please feel free to offer tips/pointers there as well. The app I am developing creates an "Army List" of models for players to use in a miniatures
Fullcalendar mobile
How can I use the Fullcalendar in mobile version with the events drag-drop and click/doubleclick? Using the library JQuery-mobile is not enough or is it?
How to scroll in inactive page from code?
I have multipage jQuery Mobile app. First page contains container div with number of child divs, which can be scrolled programmatically using .scrollLeft(...). Now when user navigates to second page and want to go back to first page, I need to scroll container programmatically before he can see first page. This doesn't happen, because container scrollWidth is 0, while the page with that container is not an active page. Question - how to scroll divs in inactive page from code? This is sample code
can see other pages at startup
I have a single html file with lots of pages. At startup I can see for a about a second the other pages in an unformatted layout then it shows the first page just fine. how do I prevent it from showing content from the other pages (that one second at startup). I tried adding display:none to all pages but that messes up the way jquery mobile works. doing that will make page changes always hidden. any suggestions. thanks, Peter
Why different behaviors on Safari desktop / iphone and when application is added on Iphone desktop?
Hello ! Could someone tell me why I have different behaviors on Safari desktop / iphone and when application is added on Iphone desktop? In my application I perform a calculation to adapt one value to be displayed: var Cal = 101; /* (value normally retrieved from my db) */ var G_DepEnerg = 2938.52 ; var PcCal = (Cal / (G_DepEnerg / 100)); var NumPCal = Math.round10(PcCal, -1); /* Using https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/round#Utiliser_Math.round()*/
Getting the last enable radio button bar the last.
Hi, is it possible to get the last enabled radio button prior to the last item? https://jsfiddle.net/gb3f7v8k/108/ For example, I want it to ignore the fifth radio button, so instead of returning the value 5 it would return the value 2 as this is the last enabled button prior to the two that are disabled. Thanks, A4.
JQM - multi page, changing pages is auto selecting a text input
I have a very basic jQuery Mobile site in early stages, built off the multi-page template from the jQuery mobile documentation. My first page is a basic login form, with a registration link going to a second page. When I navigate to that second page, my <input type="password" placeholder="password" > is being autofocussed on page load. I have absolutely no idea what I'm doing wrong. Any assistance or advice would be greatly appreciated! Thanks :-)
jquery.mobile source video
<video width="350" controls> <source src="../videos/t.mp4" type="video/mp4"> </video> </div> how do i convert this to a link so i can upload videos to hosting site reduce space only use link i am trying to create an app with phonegap but it say app is too large.
ui-focus issue on popups with fiddle example
Hey all, If I create a popup that is long enough to require scrolling, and have a checkbox or radio buttons towards the bottom of the page (low enough that it requires scrolling down to get to), then selecting the checkbox/radio button forces the dialog box to scroll to the top, but doesn't select the checkbox/radio button. It also sets focus on the first element on the page (which I think is what is causing it to scroll back to the top). In fact, even if the checkbox/radio button is near the top
Need to make one button orange but theme overrides all attempts!
I'm using the classic JQM theme which is contained in mytheme.css. <link rel="stylesheet" href="jquery.mobile/jquery.mobile.icons.min.css" /> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" href="mytheme.css" /> <script src="jquery.mobile/jquery-2.1.4.min.js"></script> <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script> The relevant HTML looks like this: <div id="homePage" data-role="page" data-content-theme="b" data-theme="b"> <div
jquery.mobile-1.4.5.min.css overides my style
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> <link rel="stylesheet" href="css/index.css" /> <script type="text/javascript" src="js/index.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> i can not get any kind of style on my pages buttons
Dynamic Search Input Placeholder
Hello ! I try to set the placeholder of a search input dynamically without success ! Please have a look on what I try to do on Fiddle Thanks in advance
How to properly center the text?
I'm trying to center the text in the middle of JQM page, vertically and horizontally. Using 1.4.5, default theme. In my .css I have: .splashDiv { position: absolute; top: 50%; height: 50%; width: 100%; text-align: center; padding:0; } HTML <div class="splashDiv" data-role="page"> Please wait... </div> The result is: The text is vertically centered only if I remove `top: 0` directive in developer tools(although not perfectly centered).
empty after submit
i need help my submit button i need to empty contents after the button is clicked. http://plnkr.co/edit/SgkLADYEPD9QUTvekFB0?p=info ok
seperated code not working
i have just seperated my code into their correct locations html, css, js in webstorm, but now the code does not work. and my submit button how can i empty page after use. tryed its not working. https://jsfiddle.net/daisys77/odu2w3wo/13/
PageContainer "ChangeHash: false" updates browser history
As a newbie to JQM Page Container, I am wondering if my understanding of this feature is incorrect. Please help. I am using the foll code in JQM 1.4.5 with Apache Cordova: $(":mobile-pagecontainer").pagecontainer("change", CurentPageUrlWithSuitableQueryString, { allowSamePageTransition: true, changeHash: false, transition: "slide", type: "post" } ); In my code, On clicking any collapsible Divider on the displayed page, I go to JQuery (and via above code ), I go again to the current page with a suitable
jsfiddle code need help jq mobile pages css codes
heres my code i created compulsory to use multipage method jquery mobile i can not get the css code to work on my ui-login and ui-signup pages. my input box and buttons are showing up large on the andriod emulator and no colour.,etc . can some one help fix this problem. i spent days trying everything with no success. i still need to connect other pages to this index file also I have the same issue button etc are showing up wide.. so first i need to fix issue with css thank you www.https://jsfiddle.net/daisys77/s4b6hv2m/3/
add avatar image in a container
i would like to add an avatar image to my page in a container. how would i go about doing this. <img src="img/j.jpg/" alt="Avatar" class="avatar">
multipages jquery mobile background image help
i have jquery mobile index.html that conatins many pages page1,2,3,4,5 etc. my problem is i cant get different background image on each page. hi can you please tell me what i am doing wrong.thank you this is the code i have used. it oesnt work no background on the page i decide to put it in. some of my code <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"> <script
input field on "link-field"
Hello, is it possible to place an Input-Field (type=number) on an "link-field" (<a href="...)? If yes, how to achieve this? Thanks in advance, Afox PS: I already tried something like this: http://stackoverflow.com/questions/796087/make-a-div-into-a-link The problem is that if I try to click into the input-field to change its value, it´s like i clicked the link.
jQuery mobile, range slider and slidestop event
Good day, I was trying for a while to get the slidestop event to fire with HTML code like so: <label for="tempslider">Temperature</label> <input type="range" name="tempslider" id="tempslider" value="95" min="90" max="135" /> and JS like: $("#tempslider").on("slidestop", function(event) {console.log("temp value stop at " + $(this).val() );});But it simply would not fire. Finally I found a sample code snippet that used a variation of 'on' which attached to a parent object, like so:
jQuery Mobile sites who pass render-blocking JavaScript & CSS in above-the-fold content tests
You know any? Below are several prominent jQuery Mobile sites that fail: Here's some that fail: https://developers.google.com/speed/pagespeed/insights/?url=http://www.menshealth.com/ https://developers.google.com/speed/pagespeed/insights/?url=http://www.cbssports.com/ https://developers.google.com/speed/pagespeed/insights/?url=http://streaming-unlimited.com/ Here's sites which may use jQuery Mobile: https://publicwww.com/websites/%22ajax.googleapis.com%2Fajax%2Flibs%2Fjquerymobile%2F1.4.5%2Fjquery.mobile.min.js%22/
Confused over simplest of things....
Relatively new to jquery and confused over a simple thing here; I am developing a single html file multi page webapp. I have a number of 'pages' defined using data-role="page" and an id, each with a header and footer. I have buttons inside and can navigate between them using buttons with; <a href="#menu" data-role="button">Home</a> What I am trying to figure out is how to go to a page without using a button - following some event. I started to use .mobile.changePage("#menu"); which seemed to work
jQuery Mobile XSS Attacks Issue
Hi everyone, any solution found for the security issue presented here? http://www.securityweek.com/jquery-mobile-can-expose-websites-xss-attacks
If I check whether the document is ready, jquery mobile doesn't work anymore
Hey, I have a problem with JavaScript/Jquery/Jquery Mobile: I want to build a Sidebarnavigation, I am using slidr. If I check whether the document is ready or not with $(document).ready or document.addEventListener('DOMContentLoaded', function(){}) my buttons turn into normal html buttons, if I don't use $(document).ready or document.addEventListener('DOMContentLoaded', function(){}) the buttons looks like jQuery Mobile buttons. In both ways that: $('#navigation >#navtag>#menu').click(function(){alert("H");});
Using JQuery Mobile and JQuery Plugins
For mobile hybrid apps, it is common to use Apache Cordova/PhoneGap with jQuery Mobile. And jQuery Mobile depends on jQuery commonly used on web sites for desktop browsers. For some UI elements, like carousel/slideshow/gallery, we may need some additional third party plugins/components. Are there jQuery plugins specially optimized for mobile platforms? Do we have to look for those plugins specially designed for jQuery Mobile and for mobile platforms? Is it safe/recommended to use any jQuery plugins
Return location of last disabled button.
Hi again, I know how to find the first disabled radio button but how do I find the last disabled button? https://jsfiddle.net/gb3f7v8k/53/ In this case I have a row of buttons but two are disabled, therefore how would I search and return the index of the last disabled button? Thanks.
Next Page