Need help asap. Jquery mobile. Not taking $ . need to get this asap. Help plz
below is my html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>pal.html</title> <meta name="generator" content="BBEdit 16.0" /> <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 src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <link rel="stylesheet" href="navigation.css" /> <script> $(document).on( "mobileinit", function()
cannot remove 'tap' event handler
Hi I faced a problem with 'tap' event. Steps to reproduce: Attach an 'tap' event handler to some element Remove attached handler by event name ('tap') or by namespace Attach new 'tap' event handler to the element Click on element Expected: second handler is invoked Actual: both old and new handlers are invoked Example: http://jsfiddle.net/W7P5r/ Here you can see, that after clicking on "click" button one cell is added to the grid, but after clicking on "tap" or "tap.namespace" button two cells are
put a message in select menu
how to put a message in select menu? I guess it takes a trick because the events do not show any default possibility.
JQM 1.3 RC1 posting back duplicate form data fields with empty values
With JQM 1.3.0 RC1, and also "the latest", when I do a first visit or hard refresh on a page, and enter data, the form data being submitted will not only contain the correct fields and values it's supposed to, but it will also contain an extra empty copy of the fields which is interfering with my model binding. Like this in desktop Windows 7 Chrome developer tools Header/Form Data results: DisplayText: DisplayText:231 BooleanExpression: BooleanExpression:231 submit:submit-value or DisplayText=&DisplayText=231&BooleanExpression=&BooleanExpression=231&submit=submit-value
Popups with long content
Hello, I am trying to use popups (not dialogs) with the stable 1.2.0 to show some long content. There are 2 problems I am looking the answers for: 1. When I am using the default data-position-to="origin", the popup appears fine next to the origin, however when I start swiping up and down, the popup changes its position to the center of the screen. I'd like the popup to stay where it opened and doesn't change position when scrolling via a swipe. Is this possible? 2. I am using data-transition="slideup" and
My screen drags unexpectedly on iPhone listview
I wonder if anyone has encountered this issue. I have some iPhone users that when they go to touch their screen on a page that I have a listview, their entire screen moves to the left. They can touch (swipe) to move it back, but I'm afraid Apple might turn down my app based on this. I'm not even sure how to even search for a solution for this (believe me I've tried and come up empty handed). I'm not sure if this is a JQuery Mobile issue or a PhoneGap issue or what. Please any help with this would
Button tiling
Hi Guys, I am new to jquery mobile so i need help regarding using buttons in jquery mobile. I need to include back button in header like mentioned below also the text 'Home' in center .I need to tile this image .But i dont see anywhere tiling this image.Can you please help on this. Thanks Nikhin
Dialog rounded corners on top
Yesterday I posted a change in behavior between 1.2.0 and 1.3.0 that inhibits rounded corners on controlgroups.. Today I found a somewhat similar issue with dialogs <div data-role="dialog"> <script> // This script prevents rounded corners on the top // because rounded top corners relies on this selector in structure.css // .ui-corner-all > .ui-header:first-child // why the :first-child pseudo-class ?? // script was placed here because script in head is not eval'd
Cannot disable anchor link in Internet Explorer using JQuery Mobile.
Im disabling a link on a page using the following html and javascript code: <a href="" id="name" data-role="button">linkname</a> $("[data-role=button]").attr("enabled", false); $("[data-role=button]").addClass("ui-disabled"); This work fine in chrome and firefox. In IE the button looks disabled but it is still possible to click the link and it fires. How do I solve this problem?
Keep Panel Open
What would the best way be to keep the panel open in jQM 1.3? I'd like to do so if the screen is large enough, such as a tablet or desktop. One thought would be to just call the open() method for each page load but that would display the animation as well. I would like to make it "look" like a seamless transition. Thanks for any suggestions!
controlgroup's rounded corners change between 1.2.0 & 1.3.0 (beta and rc)
nutshell: in 1.2.0 you could have some "extraneous" div containers around inputs and labels and you'd still get rounded corners in controlgroups however, in 1.3.0 beta and rc : no rounded corners: example: my form framework outputs html like this: (any of the bold div containers break rounded corners) <div data-role="fieldcontain" > <fieldset data-role="controlgroup"> <legend>Checkboxes!</legend> <div class="some_extra_container"> <div class="some_extra_container">
Jquery plugin or framework
Are there any jquery plugins or framework available for bringing about responsive web design. A website that I create should dynamically detect the device size and orientation and change its display and layout and be responsive. Does jquery support any plugins for this ?
Jquery Mobile
This is my below html. i want to implement Swipe gesture. But when i try to run in FF, i am getting Error loading. Please tell where im going wrong: <!DOCTYPE html> <html> <head> <title>Test</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.4.3.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> <script>
[jquery.mobile-1.3.0 beta] Table: Column Toggle with gridview asp.net
Hi, I try to adapt this plugin with my gridview in asp.net. But I've got a problem on the columns.. button. I never see the popup appear. Then, I look into firebug and the popup changed class to "...hidden" to "...active". All the properties seems to be correct but I d'ont see the popup. I add in the document.ready the "data-priority" on my header". Anything else, when I take the html source code of my table generated by my gridview, I put it in another page and it works well..I don't understand.
show hide content
hi i want to show hide the contents on button click pls guide me i am new to jquery mobile <!DOCTYPE html > <html> <head> <title></title> <script src="cordova.js"></script> <script src="cordova.js"></script> <script src="jquery.min.js"></script> <script src="jquery/jquery.mobile.js"></script> <link href="jquery/jquery.mobile.css" rel="stylesheet" /> </head> <body> <div data-role="page" >
JQuery Mobile Datepicker
Hi, I'm trying to build a phonegap/JQM app where I need the user to input a date. On the JQM form's demo there are no references to date picker. On the web I've found some info about a datepicker for JQM (here: http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/) but it seems that it is not available on the latest version which I'm using. Is there a datepicker for the latest version ? Where can I find it ? Thank you! Luis
Dynamically change the properties of a button in the header?
Hi, Im relatively new to JQM so please forgive any stupid questions I might ask! This is a page from my site. I want to programatically change the right button to pass an argument to the javascript function editCustomer(). how could I do this? thanks <div data-role="page" id="page-customerDetails"> <div data-role="header" data-position="fixed"> <h1>Customer Details</h1> <a href="#" onclick="history.go(-1);" data-transition="slidedown" data-icon="arrow-l">Back</a>
JQM 1.3 Panels - data-init="open"?
Hi, In the JQM 1.3rc1 documentation I read that opening a panel automatically is done by callign the method open(). While this is straight forward enough, I would like to suggest a property like data-init which would take 'open' and 'close' (default). I really like the simplicity of the 'data-'-properties used elsewhere. RC1 is out there, but maybe better late than never... Thnx! Jasper
JQM 1.3rc1 - Open method for panel not run after using the browser's back button
Hi, While testing the new panels in JQM 1.3rc1 I ran into this problem. I use the following code to open a panel and that works just fine: $( document ).delegate("#panels", "pageinit", function() { $( "#leftpanel2" ).panel( "open"); }); However, after that I follow a link in my site to another site (in another domain) and then use the browser's back button to return to my siteAfter returning, the panel init script is not run again, which causes the panel not to open again
Triggering an event with 'click'
Hi, Im trying to get a function to fire after a button click in the header but it doesnt seem to be working. any ideas what im doing wrong? <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>INSITE touch</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css"
Page Displacement on Swipe
I thought that jQuery Mobile included the page displacement on swipe by Default, but i'm working on a new site and I'm unable to get it to work. I'm using the jQm multipage template as a model (see here:http://jquerymobile.com/demos/1.2.0/docs/pages/multipage-template.html) for this site and the only thing that differs is the swipe events defaults have been modified. The new settings can be seen below: $.mobile.defaultPageTransition = 'slide'; $.event.special.swipe.horizontalDistanceThreshold = 150;
Panel box shadow
I have a listview element in a panel and noticed that the box shadow does not go over the listview. It starts where the listview ends about a third the way down the panel. This makes the effect look broken.I have tried to play with z-index but got no results. .ui-panel-display-reveal { box-shadow: -5px 0 5px rgba(0, 0, 0, 0.15) inset; }
Is this Possible - Dynamic Listview/Trigger Submit Buttons
HI all, i am very new to JQM. I am trying to see if the following is even possible with JQM before starting any development. Any help/input is appreciated 1) Dynamically populating the listview from the database and having "Approve, Reject" buttons on the list view - I think we can do this 2) Clicking on those button should approve the data that is on that line by passing value which are on the same line.
Why are popups disrupting my layout?
Basic description of my jQM page from top to bottom: Header bar containing a button and a popup that is opened by clicking the button. An area containing between 1 and 4 HTML5 canvases. Canvases can be added/removed and are resized dynamically to fill the middle part of the window with no spaces between them. A div containing a few buttons and a slider. Everything is in the correct position and dynamically resized when the window is resized. Before the button is clicked, everything is fine. When
Panel not scrolling past page content?
I've been searching through these forums most of the day but can't seem to find anything on this issue: Laying the foundation for a new site using jqm with 2 panels (left/right) and main content with a fixed header. Right now there is no real data, just simple, random text. I've set everything up using the standard methods as described in the jqm docs. The right panel is fixed and the left panel has a listview. When I have basic data on the content page everything scrolls fine, however when I
Issues with jQM 1.3.0 and "listview" widget
I just upgraded one of my apps to jQM 1.3.0 and the app immediately failed. The error: Uncaught TypeError: Cannot read property 'options' of undefined I am using a listview component in the broken page. When I remove the attribute data-role="listview", my app runs fine. Does anyone have similar issues? Thanks, --appcropolis
Photoswipe problem
Hello, if someone here is familiar with Photoswipe I would be very happy to receive help. I try to implimate Photoswipe to my mobile website since two month and I can`t get it to run. If you open my page you will notice that the thunbs are among each other. But they should look like these http://www.photoswipe.com/latest/examples/01-default.html . If I press F5 they will order themselves into the correct form, but If someone who enters the page, doesn`t know that, it will confuse him. On the other
Where is my data-back btn?
Hello, why am I not seeing a data-back-btn here? http://poure.eu/mobil.fitness-rodgau.de/aktuelles.html Thanks
toggle switch slide to trigger a JS function
in jqm, this is a working toggle switch: <form name="BRAND" > <select data-role="slider" name="MODEL" id="test"> <option value="off">sedan</option> <option value="on"> sportster</option> </select> </form> and this is a way of making the switch trigger a function slidestop triggered at the end of an interaction with the slider. Includes drags and taps. $( ".selector" ).on( 'slidestop', function( event ) { ... }); how to connect them? I have tried using this <script> $( ".selector" ).on( 'slidestop',
data-url not respected when using back button and page redirects.
My pages redirect to a login page if they require authorization. I use the data-url attribute to show the correct url. It works fine here. However, If after successful login the user pushes the back button, I do not let them see the login page again, but redirect them back to the home page. In this situation data-url fails and the home page shows the login url instead of the home page url. Is this a bug? Any ideas how to fix this?
[SOLVED] replace radiobutton with jqm toggle switch in a <form>
I have chosen to replace radiobuttons with a toggle switch, but it somehow does not translate. What's wrong? original: radiobutton <form name="BRAND" > <input type="radio" name="MODEL" value="1" checked /> <input type="radio" name="MODEL"value="2" /> </form> toggle switch. <form name="BRAND" > <select data-role="slider" name="MODEL" > <option value="1">sedan</option> <option value="2"> sportster</option> </select> </form>
Dynamically Populating Select Control
Hi, I have found problems with dynamically populating a select control, the simple logic I use works fine in standard JQuery but not in JQueryMobile. The code is as follows: <!DOCTYPE HTML> <html> <head> <title>Select Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css"/> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
navbar width issue when in header and has >= 3 buttons
There's an issue in the JQM css that causes the navbar to exceed the width of the rest of the page on mobile devices when the navbar is in the header and contains 3 or more buttons. This results in a thin white line to the right of the page when viewed on a mobile device. I fixed it by canging ".ui-navbar ul" overflow from visible to hidden (line 1920 of jquery.mobile-1.3.0-beta.1.css). It would, I think, be a good idea for this change to be made in the next release. <!DOCTYPE html> <html> <head>
Pages not directly in the body but inside other elements
Hi there! Please consider the following code fraction... <body> <div id="page1" data-role="page">..... </div> <div id="page2" data-role="page">..... </div> <div> <div id="page3" data-role="page">..... </div> <div id="page4" data-role="page">..... </div> </div> </body>As you can see, page3 and page4 are under div element, whereas page1 and page2 are directly inside the body. There is a specific reason I have to follow this structure. I'm using the following
javascript animation doesnt play after ajax call
So i have a project where I am creating an interactive product guide aim for ipad. I created using adobe edge animate to add some interactivity to it but now i need to link about 4 of them off a central menu document. The problem is that the javascript created by edge animate wont play when i load the page by ajax. It works fine when I load the documents without ajax but Id prefer to keep the flow of things that is created by ajax. Any one have any ideas and what to do? Here's the site demo
button text updating
jquery mobile 1.2, jquery 1.7.2... I have an <a> tag that is essentially a phone number, and this is in the data-role="content" div of the page <div style="float:left;"><a data-theme="c" data-role="button" href="tel:" id="nvphone"></a></div> that gets set by a call to JavaScript, lets say GetPhoneNumber(). I am using $(document).on('pageinit', function() { var navph = GetPhoneNumber); $('#nvphone').changeButtonText(navph); }); // found this funciotn online..... (function($) { /*
How To Add Jquery Mobile To a page
Our website is built on a content management system called dotcms. I’m working in a dotcms version 2.2 environment and I’m logged into the administrative portal and am testing a new JQuery mobile page. The language I use to write our widgets, for the site is velocity and both the dollar-sign (“$”) and the hash mark (“#”) are on every line of code depending on whether I’m referring to a variable(all variables start with a “$”) or issuing a directive(directives all begin with a “#”). So when writing
Localized jquery mobile application - Need inputs.
All, I'm building a localized mobile application in which I'm using a unicode font and have created numerous json files, At a rough estimate my "JSON" files comes around 25 MB. I just want to know, is there any way to optimize the size of files when we use localized unicode fonts?. Can anyone share your thoughts here?. Thanks, Dave
panel and navbar
Hi I cant get panel and navbar to work together. the navbar you be below header. But when I add panel the navbar jump down? http://jsfiddle.net/Ym5Jw/ the documentation says it should be above header.. works fine if I add navbar inside header.. but dont want to do that, then it look difrent and dont like that look Im trying to get it to look like this... but panel not added on this one http://jsfiddle.net/hT2Gw/
Help regarding an unknown version of jquery mobile
Hello, I am new to Jquery Mobile and have just started working on a project which was built by someone else. That developer included following Jquery Mobile JS file: http://jquerymobile.com/branches/tables/js Can someone point me to a minified, production version of this file? I've tried all jquery mobile versions in place of above file but it breaks everything. Application only works if above mentioned file is included. Any help will be highly appreciated. Nasir
Next Page