How to use div as a link for internal pages?
Hello everybody! I'm new, so please excuse me if this question was already asked. I would like to use jquery-mobile schema for internal pages accessible via anchor links, but I would like to make my entire div clickable (containing an image, some text - something like a mobile news site). My div data-role=page consists of several smaller css styled divs containing mobile news clips, and these divs need to be clickable anywhere. What I've tried so far: If I use ordinary 'a' links with href to anchor,
Performance Tuning for Multiple Pages
Let say I have three jqm pages, page1.html, page2.html, page3.html. I have specific and generic js that I want to execute on all three (before page create). What is the best performing method to do so? 1. I could just have one big pagebeforecreate function: $('div').live('pagebeforecreate',function(event){ generic js page1 js page2 js page3 js }); 2. I could do three specific pagebeforecreates: $('#page1').live('pagebeforecreate',function(event){ generic js page1 js }); $('#page2').live('pagebeforecreate',function(event){
How to give style to dynamic content?
Hi! I have to re-build the style on dynamic content. I search a function like $(elm).listview('refresh') The generated code is the follow: <div data-role="controlgroup" data-type="horizontal" id="navi"> <a href="#" data-role="button">1 / 18</a> <a href="#" data-role="button" id="navi-next">></a> <a href="#" data-role="button" id="navi-last">»</a> </div> And I update the content of div#navi... I you have any idea ;) Thanks in advance! Ps: be indulgent with my english, I'm french!
two related selects with jquery mobile?
how would i go about linking two related selects? i usually do this with coldfusion code, but doesn't seem to work within jquery mobile. any samples would be greatly appreciated.
jQueryMobile and WebWorks - doesn't seem to work if HTML generated from javascript
Hello, I've been doing development for the PlayBook with WebWorks, and I'm new to jQuery. My question has to do with using jQueryMobile and HTML generated from javascript - specifically on PlayBook. I've successfully used jQueryMobile in the static HTML part, but if I have it dynamically generated from the javascript, it doesn't seem to work (UI looks just like if none of the CSS from jQueryMobile was applied to it). Here's roughly an example of what I have: index.html: <div data-role="page">
Problem with JQM adding CSS to dynamically generated elements
I'm having an issue with adding a select tag dynamically with the appendTo() but the CSS is not being applied. Here is an example of how I'm adding the new select tag: http://jsfiddle.net/UcrD8/4/ Can I add it to an element on the page using something like this method? Copy code .appendTo('#page_1 #select_option_groups.div[data-role="content"]');
How to find the DOM id of selected node after page transition.
I have a series of links which navigate to their own separate page. However, I then decided that before I get to each of those pages, I wanted the user to navigate through a common page, and then continue/redirect onto the individual pages after doing 'stuff' inside the common page (pre-configuring variables shared between all subsequent pages) So initially I had this; <ul> <li> <a href="#option1" data-role="button">Option 1</a> </li> <li> <a href="#option2" data-role="button">Option 2</a> </li>
Collapsible DIVs rendering Blank
Hi, I want to render collapsible regions with dynamic regions. HTML : <div data-role="page" id="version" data-theme="b"> </div> On a button click, my server side code is invoked and data is fetched from server. With that data, I want to create collapsible content inside page id="version" Javascript looks like : function printResult(st){ $("#version").html(getHTML(st)); //calls getHTML } /*------------------------------------------------------------------------*/ function getHTML(raw)
tablet
hi .. I want to start developing an application which runs on the desktop, web, mobile, tablet (androit, blackberries, ipad) simply by 1 time development. I plan to use jquerymobile. for desktop I use jquerymobile which is wrapped with adobe air. and blackberry mobile application method using blackberry WebWorks. and android jquerymobile WebView. there are some questions.. 1.current jquerymobile for tablet and desktop ready to use? 2.can jquery request by socket ? 3.any simple method to switch layout
Detect pinch zoom on an image
Hey guys Basically what i would like to do is reload or rather change the src of an image when is has been zoomed out at particular point? Does JQM support multi-touch events like pinch/zoom? If not, is there a way to achieve this using androids' native browser? I know that this is possible in safari mobile. Cheers
Apply markup enhancements after page is loaded
Hi: We have a list of items in the page that are enhanced after document.ready, as it should be :) But when user scrolls down, ajax loads 10 items more, but we would like these new items to have also the markup enhancements. We have tried calling $.mobile.initializePage();, but it does not work. How can we do it ? Thank you very much in advance
Return false does not prevent transition
I have a search form where I want the results to load dynamically without any page transitions. I am returning false when the submit handler is done but the page keeps transitioning, is there any way to prevent this? Also, some other dynamic content that is loaded from localstore is not being added to the page even the statement is executed.
How do I change a page in jQuery Mobile Dialog?
When I open a dialog (Page B) from Page A. there is a link in Page B that link to Page C. I want that when I click the link, Page B auto close and Page A change to Page C with some transition. But when I click the link just Page B close, whatever href I replaced to the link, that is the same result. I wonder if the dialog just have open and close events, that is really like ALERT. Because, JM have no "drop menu" or "pop menu", I want to use dialog replaced.
click event not binding on android
When I try to bind a click event to a list item using the following javascript: $('body').live('pagebeforecreate', function() { $('#session1').click(function() { $.ajax({ 'url' : '******' + $(location).attr('href').split('?')[1].split('=')[1], 'success' : function(data) { alert(JSON.stringify(data)); } }); }) });The event handler isn't bound until I refresh the page on an android device. It binds the first time the page
best strategy for developing browser/mobile web pages
Just looking for some real world experience. What is the best strategy for developing web pages that you want to be available both in the browser and on mobile? I am developing simple web applications using a web framework. What do people do? Do you just prepare one set of pages and hide particular parts if the target is a mobile device? Or do you develop a parellel set of pages: one for browser and one for mobile? Thanks for your answers as wall as pros and cons. William
Issue when switching pages
I am building my first site using jquery mobile, and am having some issues when switching pages. When I go from my first page to my second (which is longer than the screen) it loads to where the footer is on the bottom of the screen and I am able to scroll down past the footer, but not up to the top to see my header and back buttons, etc. I've tested it in chrome, dolphin browser for android, and on my ipod touch. Now, I'm only in the wire framing portion of the site, so the code may be a little
TextArea in UL doesn't take spacebars?
Hello! I have a problem with JQuery Mobile and I can't figure out what's wrong. For some reason, form elements inside a UL with the data-role "listview" will not accept spacebars - nothing happens when I push it. Taking out data-role="listview" allows spacebars to be typed again. It seems this occurs on multiple kinds of text areas. Any ideas? Ex: (Edited to add complete barebones test page, with template copied direct from docs, and form elements added with as minimal specificity as possible) <!DOCTYPE
A couple of quick styling questions for the mobile realm
Page transitions: How do we eliminate the "loading" between pages message.. and how would you make the transitions happen midpage without having to scroll all the way to the top to have the transitional effect? It looks jerky in any emulator and on my phone.
Why doesn't JQuery Mobile change to the proper URL (nav bar) when clicking on exernal links?
Hi everyone - I just noticed that when I'm navigating around my app, the URL doesn't seem to change. Specifically, I start on a page, default.aspx. I've got some UL listview links. I click on a link, for instance, "product_list.aspx". The page renders with the list of products, however the URL in the Navigation Bar stays as /default.aspx!!! Since I'm using .NET, this causes all sorts of havoc when I try to click on "pager" links (they do a postback to the local page, however, they think the
$.mobile.changePage not working in phonegap
I have found that the $.mobile.changePage("about/us.html", "slideup"); function does not work with phonegap. Any ideas on a workaround?
Form submit from dialog page
Hi there I'm new to jQM and love it so far, I think it's much better than Alpha right now :) However, I ran into an error now that I can't find a solution on the web and I think my code is about right. I open a dialog using a link: <a href="city.php" data-role="button" data-rel="dialog" data-transition="pop">open my dialog...</a>Then on the dialog I have a form, the whole city.php looks like this: <div data-role="page" data-theme="a" id="cityPage"> <div data-role="header"> <h1>headertext</h1>
How to change pageloading() text and color?
Hi, I have tried to find the css to change the font color on pageloading page. It works. But i cannot change the "loading" text. Anybody know what the code is to change the default "loading" text? Thanks!
data-rel="dialog" problem
how do i add data-rel="dialog" to a url that is being redirected or how can data-rel="dialog" take place on load or via url string. i'm looking specifically for use in Wordpress' 'wp_redirect()' function but any help would be great i have a form in a dialog box and I want the dialog to maintaing w/ the thank you message after submitting form. however, a new page comes up and removes the dialog box. how can i fix? the thank you message is sent as a redirect
Alpha 2's secondary page/dialog CSS appears broken (Safari)
I cut and pasted the example page transition code from here: http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-pages.html (specifically the "Complete Single Page Template") into two files, test1.html and test2.html. I then changed the content in test1.html so that it contained a link to test2.html. That all worked fine. When however I changed the three JQueryMobile includes at the top of test1.html so that it pointed to the alpha2 release (rather than alpha1, which the example code still uses),
Date picker plugin link not working
The date picker plugin link on following page: http://jquerymobile.com/demos/1.0a3/#docs/forms/index.html is not working.
Disabled checkbox still selectable?
Disabling items in select boxes works, but when I disable a checkbox, I can still check it. <input type="checkbox" name="cb" id="cb" disabled="disabled" checked="checked" /> <label for="cb">I can still be klicked</label>Anyone else ran into this? Rgs, Frequent
maintain a dialogbox state when passing info
I have a form in a dialog and I want the message (returning from the server, after filling out the form) to display in a dialog box as well . do you know how this can be done?
Main page might be created twice with different data-url when using multiple page-files
Let's say we have two pages in two separate HTML-files: <!DOCTYPE html> <html> <head> <title>Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> </head> <body> <div data-role="page" id="first">
My JQuery Mobile app with phonegap looks GREAT on the iphone emulator.. GLITCHY on android emulator/android phone/chrome
I made a prototype application that looks great in safari and the iphone emulator.. however in chrome.. android emulator.. and android phone it just looks terrible. What should i do here? The links are broken, responsiveness extremely slow. It looks spectacular on my phone's screen (i.e. resolution) but its not functioning nor could i present this. I just copy/pasted my www folder into the eclipse folder. It doesnt have any ios specific anything.. I am using jquery 1.4.4 because 1.5 had some issues.
Resize UI elements
Greetings. What attributes should i use to scale the buttons, sliders, checkboxes, etc..? Thanks in advance
Dynamic Link & Button Click on a different page
Hi all, i have a list view with a dynamic list being created like below. This works fine but, when the page appears, i am not able to click on the buttons on the new page (approveDetails.aspx). What am i missing? Thanks for help. <% Response.Write("<li><small>" & dr.Item(1) & ", " & dr.Item(2) & "<a href= ""#approveDetails.aspx?invoice=" & dr.Item(3) & "&id=approve_reject" & dr.Item(3) & """></a></small></li>")%> approveDetails.aspx (attached) <script type="text/javascript"> function pageLoad()
How to disable horizontal scrolling/panning
I like to disable the panning in my mobile webapp. I found this link: http://www.wilsontu.com/blog/2010/08/16/disable-horizontal-scrolling-in-iphone-web-app/ but this is not working. Does somone know how to disable this in jQuery Mobile? Thanks.
addBackBtn how to turn off
in my, mobileinit I try to set the addbackBtn to false, but think I'm missing something. $(document).bind("mobileinit", function() { $.mobile.addBackBtn = false; }); doesn't work. I'm trying to turn off the auto generated back button. My theme is E but I want all my buttons theme B. I have no problem doing this for the buttons I generate but figured I would add my own BACK button so I could change the theme of the Button to "B" and keep the pages at theme E I do link my scripts as recommended
Safari Gradient
Hello- When using your CSS the gradient does not show in safari. Stranger still, is I remove your code and add in accepted webkit gradient settings and it still wont show or be transparent? Does someone have a fix for this yet? I tried the alternate valencia css and got the same response. Your Code: background: #111111 url('-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#111111))'); Accepted Code: background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#111111));
jQuery Mobile UI more for iPhone?
All the UI components and the overall look shows it as an iPhone app, is there going to be a way to change the UI easily? like options?
set style in loaded page using div or class V 1.03a
This behavior seems effd to me. If I setup a div like so ... <div data-role = "content" data-url = "images_container" id = "images_container"> <div id="images" style="display:none;"> .... </div> <!-- images --> </div> <!-- content --> and then use ... $('#images").show(); The div will show the first time the linked page panel slides into view. However, if I click the back button and then click the link to re-display the page, the div will not display. if I use a class instead
Tiggr interactive HTML prototypes upgrades to use jQuery Mobile version 1.0 Alpha 3
JavaLobby: Tiggr interactive HTML prototypes upgrades to use jQuery Mobile version 1.0 Alpha 3 Create your first mobile prototype: Tiggr
Grouped buttons inside toolbar result in broken layout
The following markup results in a broken layout (tested FF 3.6.15 and Chrome 9.0.597.98): <div data-role="page" id="thread"> <div data-role="header" data-backbtn="false"> <a id="backToBoard" data-direction="reverse" data-icon="arrow-l" data-iconpos="notext">Back</a> <h1 id="threadTitle">Title</h1> <div data-role="controlgroup" data-type="horizontal"> <a id="refreshButton" data-icon="refresh" data-theme="b" data-iconpos="notext" data-role="button">Refresh</a>
Grouped buttons
Hi, Is there a way to group buttons into a 2x2 block? To have four buttons in a neat block, with the aporpriate rounding on the outer corners? If it's not possible natively, is there a guide to using the classes to mimic styling?
DOM loaded after function executes
Hi, I'm developing one jQuery Mobile web site. In this site, I've kept html files and js files separate. So, whenever user clicks on a link corresponding html page is loaded and js is executed. However, I've noticed that, sometimes, function executes before DOM is loaded and thus I can't get desired and predictable output. Any solution for this? Thanks.
Next Page