I am writing my first JQuery script, I'm using the CDN and I'm not seeing any button images. I will paste the code below.
<html lang="en"> <head> <meta charset=UTF-8" /> <title>View Source</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"> </script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script> </head> <body> <div id="home" data-roll="page"> <div data roll="header"> <h1>Home</h1>
Resize the image to fill screen when users rotate mobile device
Hi, How do I resize the image to fit the phone screen when users rotate between portrait and landscape modes? I want the image width to be about 100% of the screen width and maintain the aspect ratio. Thanks
Combine jQm with Backbone.js / ember / Spine / AngularJS / ... ?
Hi, what do you think about using one of the mentioned MVC frameworks together with jQuery Mobile? Some tried to integrate Backbone.js and there is a "proof-of-concept" with ember. Seems to me like most guys use jQuery Mobile w/out those libraries / frameworks. What do you think about it? Is there any experience (good/bad) you can tell us about? -- hgoebl
JQM + PhoneGap app won't rotate to landscape on iOS
Does anyone know what would cause this and how to fix it? It rotates fine on Android. Thanks!
Using larger icons (30x30) in listviews?
Hello, I've found those icons I'd like to use in listviews. The icons have got a size of 30x30px. If I use the class "ui-li-icon" for the images, they gonna be resized to 16x16. <ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="b"> <li data-role="list-divider">Menu</li> <li><a href="/link1"/><img src="/images/icons/icon-mail.png" class="ui-li-icon" alt="" />Link1</a></li> </ul> If I don't use that class, the item will have a double height. How can I fix that problem?
JQM -display different html pages based on values in dropdown
Here is my code -http://jsfiddle.net/aVkgp/201/. I have a menu bar with 2 dropdowns in header - one dropdown to left and one dropdown to right. Now , left-dropdown has 5 options in it and right-dropdown has 5 options . I want condition somethign like this - if (left dropdown=="LD1") && (right dropdown=="RD1") - create an link to 11.html if (left dropdown=="LD2") && (right dropdown=="RD2") - create an link to 21.html if (left dropdown=="LD2") && (right dropdown=="RD3") - create an link to 23.html
Keep same layout for iPad when users rotate
Hi, Is there a way to prevent iPad to change the layout when user rotate it? I want to keep iPad in landscape mode even if user rotates it to portrait. Thanks
Content of page cut
Here you should see 2 identical pages. One of them will be cutted when I scroll down. The rounded end of the last listview element is not visible. I have no idea where the error is. Do you?
Error when calling popup("open")
I have a very simple single page JQM on Cordova(PhoneGap) app I'm "prototyping". In my index.html, I have this basic layout: <head> <script type="text/javascript" src="script/cordova-2.0.0.js"></script> <script type="text/javascript" src="script/jquery-1.8.0.js"></script> <script type="text/javascript" src="script/jquery.mobile-1.2.0-alpha.1.min.js"></script> </head> <body> <div id="homePage" data-role="page"> {content for this div} </div> <div id="nestedPage1" data-role="page"> {content
File input + mini-gallery widgets for jQM 1.2.0
Hello, I just finished a file input and a mini-gallery widgets for jQuery Mobile 1.2.0 I tested tested them on : Android 4.1 Internet Explorer 8-9-10 Chrome 23 iOS 6.0.1 Every feedback is welcome, Have fun
Slider stuck on Nokia Lumia 900?
I've discovered a problem on my mobile project when using Nokia Lumia 900 - Windows Phone 7.5 - IE 9. It turns out that the Sliders does'nt work as expected with this particular setup - You can, however, fill out the textboxes manually, but only move the sliders if you tab on the slider rail. I use the following setup on my website (I've tested both with, and without ajax enabled/disabled): <script src="/scripts/jquery-1.8.2.min.js"></script> <script> $(document).bind("mobileinit",
How to put html link in a carousel image jquery mobile?
I have developed an application in JQM using carousel effect. I want to make those images hyperlinked. I want to put html link inside those images so that when you slide and see those images, by clicking on that image it will navigate you through one html file. Below is my code, instead when i use this code the sliding is not taking place but the links are working fine. <!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta name="viewport" content="initial-scale=1.0,
How to override widget functions or extend
Hi, I'm looking for best approach to override widget functions. For example I was trying to override changePage function like this. I was looking to implement a condition check around active.url code. I'm also looking to override selectmenu with dialog box where i need to position close button to the right corner. $.mobile.changePage = function(){ }
Jquey mobile listview
Hello, i tried to generate list view dynamically in SUP.when i request for the first time it is working fine.when i come back from the screen and again calling the same screen list view is not loading it is displaying plain text.Code which i am using. function customBeforeNavigateForward(screenKey, destScreenKey) { if (screenKey == "Start" && (destScreenKey === "Screen1")){ var htmlOutput = ''; var firstChar = ''; var approverName ='xxx' ; var
Buttons not displaying as expected
Hi all, I'm trying to get some buttons working, but they are not looking as expected. Any ideas why? I've just cut and paste some examples from here : http://jquerymobile.com/test/docs/content/content-grids.html Code <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.min.css" /> <script src="jqm/jquery-1.8.2.min.js"></script> <script src="jqm/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" > <div data-role="content"> <fieldset
JQM Drop downs in header and event handling
Hello i am trying to make a JQM Webapp with 2 drop downs in menu bar something like - Menu 1 Title of Page SubMenu 1 ------------------------------------------------------------------------------------------------------------------------------- Menu1 has 5 Main options and Menu2 has 5 sub options , like if user selects a option from [First Menu ] 5 options will show up in Submenu1 and there will be an HTML page for each submenu. [so total there will be 25 pages]
Can i do image sliding (Carousel) in jsps for mobile?
I need to design a jsp page for mobile where i need to put some images and these images has to slide one after another with the swipe of the finger (carousel feature). can anyone tell me how can i do that?
dialog and load() in ie8
I have a page (test.html) with a link to a dialog (dialog.html), that then loads a listview (list.html). This works in all browsers except ie7 and ie8. If I then make the dialog a separate page (test2.html) it loads the list fine in ie7 and ie8. Any suggestions/solutions? - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Two minimal/simplified examples that represents my problem: https://zero3.dk/guru/testing/test.html https://zero3.dk/guru/testing/test2.html
Data-ajax true jquery mobile
I tried to try Data-ajax true and then link to another HTML file.. when the HTML file load via ajax.. content not load, and any js script not working.. any advice for me..? please help me..
Buttons select but do not perform their action
The following behaviour is observed in my jQuery Mobile 1.2 app in Chrome and also when deployed as a PhoneGap (Cordova 2.2) app on iPhone and Android: About 10% of the time, when I click a button, it highlights the button but does not perform the appropriate action. A good example is my navigation button bar because I'm not doing anything special: <div data-role="footer" data-position="fixed" data-id="navbar" data-tap-toggle="false" data-theme="c"> <div data-role="navbar"> <ul>
Default icons different color on iPhone/iPod from default
Simple story, can't figure out what the problem is. I built a custom theme and set the default icon color to black. Looks fine on tablet, but my iPhone and iPod are showing white icons instead. I figure there's a media query somewhere, but can't find it. Another weird thing: the icons in the navbar are still default and they're still black. So they're both on the same page, but display different color icons.... Anyone else having this problem or know what might be causing this issue?
jquery mobile.js only works when I refresh page
I am using jquery.mobile-1.2.0.min.js, I have link in home page to inner pages. But some times inner pages animation not working, but when I am refreshing the page its working. Please help me. I will explain, there is some link on the home for navigate to inner pages. See the link- http://www.topswitzerland.ch/index.html And inner containing data in several rectangle boxes , when we click on the filtering tab on the top area of page, that's not working. It means no result. But after we press the
Swipe through multiples pages
Hi all, I'm working on a web app which have 3 pages. There is the possibility to swipe from these 3 pages, but there is a problem if I swipe too much. Here is an example: http://jsfiddle.net/phillylovepark/gZNQZ/1/ If I swipe until page 3 and then swipe back until page 1, during the swipe between page 2 and page 1, the web app will swipe from page 2 to 1, then go back to page 2 and finally show page 1. This is very strange because the problem appears only after 4 swipes. Has anyone already faces
Problem with iframe scrolling using data-role="popup"
I'm fairly new to JQuery, and I'm now using it just to get a popup functionality in a page where I need to show the content of other web pages inside popups. The problem is that in Safari, on an iPad with iOS 6.0.1, the JQuery popup seems to break somehow the iframe scrolling. Here are the relevant code snippets: JQuery imports: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script
Attaching scripts directly to DOM elements
Is this a really bad idea? I'm currently working on a pretty complicated mobile/web app based on jQuery Mobile, which pulls in pages using AJAX, and uses it's own system for caching/removing pages. I've recently found myself wanting to be able to attach a script directly to a particular element in a page, which isn't something that's currently possible. (When I say page here, I really mean a jQuery Mobile <div data-role="page"> element, being loaded via AJAX, rather than a full, "real" page) As it
Iframe load not in _blank window why?
My webapp http://androidtools.androidcodex.ch have an iframe at bottom but the iframe load in the frame and not in new window (whit mobile device). Computer works but Smartphones and Tablets not? Why? Thx
JQuery Mobile select in listview, binding with Knockoutjs
I have an issue when I'm trying to use a select in a JQM listview. I have a listview to list a couple of computers and in every listitem the user are able to make some changes to the computers via dropdownlists. I'm using knockoutjs to bind viewModels to the view. Here is my listview: <div data-role="page" id="page1"> <div data-role="content"> <ul id="editComputerList" data-role="listview" data-inset="true"> <li data-role="list-divider"> <div class="row"> <div class="column"> PC </div> <div class="column">
Hi I am using jquery.mobile-1.2.0.min.js, and its only work when the page refresh
Hi my name is Pavi and I am new on this. I am using jquery.mobile-1.2.0.min.js and I have link on homepage to navigate to innepages. See link http://www.topswitzerland.ch/index.html Inner page http://www.topswitzerland.ch/swiss_watches.html When click on the inner page it perfectly going on that page and in that page containing some data's , thats displaying with animation. But some times the animation(you can see when you click the link) is not working. When I am refreshing the page its working.
Searching a Rental Form
Dear Forum, I am searching a solution where users can see several products in categories, see the price, image and description and then choose which items he would like to rent. So a user should be able to rent camera x and a lense y and he see at the end the price and can choose the rental date from and to. after that he recieve a confirmation email and the rental company too. Can somebody help me to find a solution? The other thing is, it should be easy to manage the rental items..add new items,
Jquery Mobile 1.2 Popup Question
I want to open a popup window when a given page loads. I have tried the following code?: <script type="text/javascript" charset="utf-8"> $("#testView").live('pageinit',function() { $('#popupBasic').popup("open"); }); </script> <div id="popupBasic" data-role="popup" data-theme="a"> <p>Your changes were successfully saved.<p> </div> I get the following error when the page loads "activePage is undefined". The error is located on line 7109 "currentIsDialog = activePage.is( ".ui-dialog" );"
Problem with virtual viewport size on Windows Phone 7
So I recently started making SlideShare mobile compatible with Windows Phone 7 browser. I am having issue with virtual viewport width property of the browser. By default, I use this meta tag for setting the device width and setting the initial and maximum scale <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> This works fine in iPhone 3GS (320x480), Devices with 480x800px resolution and bigger tablets but doesn't work in Windows Phone 7.
Windows Phone 7 JavaScript doesnt work
I have created a mobile Application with ASP.NET MVC 4 and jQuery mobile. It works fine on Android and i Phone but there are different Problems when running it on a Windows Phone 7 . The Java Script on Checkboxes doesnt work... has anybody an idea ... The Site is Qr-Joker.de....the Problems are on the Login/Register Page...
Page doesn't refresh unless I use data-rel
I am setting up JQM for the first time for an internal business app and having an issue with page refresh. I have a page that grabs a still from a webcam when the page is loaded so the page has to refresh every time its loaded or the web cam images will be stale. If I use a link like in #1 the page refreshes normally and reloads the images but I don't get the fancy effects with page transitions. If I remove rel=external if does not refresh the page and the images are not reloaded. I am using
Native App ? Jquery Mobile + PHP + mySql ? JSON ?
Hello folks, I am totally new to jQuery Mobile, native apps and JSON issues. So forgive me if this question is so simple to you guys but I could not find any answer to my specific question at anywhere since now. What I have learned so far is: A native iOS app could be written with jQuery Mobile + HTML5 and can access to phone specific things (like cam, gps etc.) with Phonegap and can be compiled with it to put on the AppStore. My scerio: I will have a website where I will sell some sort of boutique
Help how to stop video
hi, I am using jquery mobile , when I close popup, the video continues to play... have any solution? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aplic. Web de jQuery Mobile</title> <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(e)
white Space after the content
I cannot remove the white space appearing after the content, my Jquery code was too long however i did manage to reproduce the problem with a less code : http://jsfiddle.net/uQC9U/ . i have tried this : http://stackoverflow.com/questions/1170048/solution-for-extra-space-in-div-element and http://stackoverflow.com/questions/11908635/jquery-mobile-bottom-space . <html> <head><link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <script src="http://code.jquery.com/jquery-1.6.4.min.js"
suddenly dialog shows only black page
Suddenly all my dialogs are not showing. The background is turning black but the dialog is not showing. When I click the back link in the browser, the URL changes but the page does not. I used the web inspector to make sure the markup was being rendered and it seems it has. This change is happening for all my dialogs and I have not changed them. I have now stripped out all by the most essential js code and it did not change anything. I just don't see anything wrong and I am not sure where to
Problem using jquery mobile themeroller
I'm having an issue using the jquery mobile themeroller. I created a theme using the themeroller, downloaded it, and added it to my project as instructed. Unfortunately, something has obviously gone wrong in the process. Here's an imgur gallery with a screencap of the result and of my code: http://imgur.com/a/GyOZj And here's the themeroller link: http://jquerymobile.com/themeroller/?ver=1.2.0&style_id=20121130-101 Any help would be appreciated, thanks.
Magnifying glass icon in <input type="search" ...> does not appear
I'm hosting the jquery libraries locally. The magnifying glass icon does not appear in search boxes on my site - it's just a whitespace. But the icon does appear when I view the Form Gallery in jQuery Mobile Docs using the same browser. What's the problem here?
Question about file upload
Hello, I'm working on a project using jquery mobile, and need to support file attachment in my application (being accessed via url on mobile device). I tried to use jquery.fileupload.js and jquery.iframe-transport.js for file upload, it seems to be working fine. But would like to get confirmation if these plugin can be used for jquery mobile. Appreciate your input!
Next Page