Radio Buttonset Scaling
Hi, I'm trying (for the first time!) to create a Radio Button set. The body text is scaled using a pretty standard "body { font-size:62.5%; }" The buttonset which is created has unequal button borders. The line which separates adjacent buttons appears wider (2px) in some places than others. Has anybody else come across this? Is there a fix? The default body text size looks perfect, if a little large, with a 1x seperator. Any help much appreciated. Andy
[jQuery] removing style tags and script tags
Hello all, I have a webapp displaying email which can sometimes contain HTML message bodies. I use jquery's .ajax method to grab an HTML message body and then put it into a div tag. Problem is if the HMTL contains style or script tags I get unwanted results. I've tried $( html ).find( 'style' ).remove(). This will remove the the actual <style> and </style> tags but still leaves the style text itself inside. I tried several variations but I just can't seem to get this to remove the actual style text
Fullscreen background and Cycle Plugin
Any suggestions on how to create a simple slide-show type site using the cycle plugin with a full-screen background? I am nearly there - http://unsustainabledesign.com/clients/backspace/ Currently I am using the following plugins fullscreen image plugin - http://nanotux.com/blog/fullscreen/ cycle plugin - http://jquery.malsup.com/cycle/ The issue I have is if you resize the window, make it as large as possible, and move from section to section and re-size the window the image does not properly re-size
BlackBerry OS 6 input value duplicates on orientation change
I don't see this issue in the forum and am not able to test on the jquery mobile demo page, as my test phones don't have outside access to the internet. This is only happening on the BlackBerry Torch (OS 6) that I know of. If you enter a value into a text input and leave the keypad active and change the orientation, the value you just entered in the field duplicates. It duplicates the whole value. So, if you change the orientation again, it quadruplicates the value. This does not happen when the
Animate BackgroundPosition Y-Axis = no work
heyo, me be having some issues with jquery animate. im trying to create a navigation menu that apon mouseover, the background image animates with a negative y value. apon mouseout, the div will animate the background position back to zero. Simple enough ay? thats what i thought. When i roll over the divs with the bg image, they do not animate, it appears like a simple background change. in other words, there is no tween or movement, just ...new position. INCLUDES <script src="javascript/jquery-1.3.2.js"
Clear text box after autocomplete
I'm trying to clear the text box after the select event has fired. The following code does not work: $("#conditions").autocomplete({ source: availableTags, minLength: 2, select: function(event, ui){ $('#conditionList').append("<li>" + ui.item.value + " <a href='#'>[Remove]</a></li>" ); $('input#conditions').val(""); // <- This does nothing } }); Any ideas on how to get this to work? Thanks, David
[jQuery] Cycle Plugin Adds Inline Styling to Slides / How To Center Slides in Container
I'm trying to center my slides in the slide container, but I'm having issues. I have 'a' links as my slides, each containing a single image. What I want is for the link and the img to be the same size, based on the width of the image, and then centered inside of the slide container. I've included my css below. All of my code for '#slideshow a' is being overwritten by inline styles added by Cycle. How can I get it to center? http://derekperkins.com/seatability/super-product-page/ #slideshow
jquery-mobile slider does not support "step" attribute
Are there any plans to support the "step" attribute for the slider control? For example, to record swimming pool water pH, I want a slider that goes from 6.0 to 9.0, with steps of 0.1. The min and max attributes are supported, but the jquery-mobile code is using a percentage scale from 0 to 100, and ignores the "step" attribute. Also, the number in the accompanying text box only uses integers.
jQuery - Create table from JSON data
I'm trying to update a table based on the results of a database query returned via JSON. My goal is to show the progress of a queue, removing entries that have completed. Firstly I need to populate a table with the results of the JSON. I have: <HTML> <HEAD> <TITLE>Table Update Test</TITLE> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> setTimeout("updateTable();", 10000); function updateTable() { $.post("test.pl", {}, function(result) {
Access-Control-Allow-Origin on local file system
Hi, I create a jquery mobile web this work great on web server, but when I run this on local filesystem (file://), when i change from one page to another, I have this error. XMLHttpRequest cannot load file:///C:/Users/Wvista/Documents/test.hml. Origin null is not allowed by Access-Control-Allow-Origin. I know that this is a problem with permission, but is strange because all document are on same directory. David.
jQuery Mobile on MyTouchSlide 3g, problem with back button
I've been following the jQuery mobile project quite excitedly as I have an application that I need to port to a mobile version. However, since the alpha 1 release until the most current alpha 3 there has been a major problem with the back button. Whenever I navigate off of the landing page to a sub-section, i cannot navigate back. Pressing the back button in the mobile template or on my phone causes it to go back to the last page I was looking at before jQuery. It is not catching the back event
Changing default theme
Alpha 2 looks awesome! I have a question about changing the default theme from c to something else (like a or b). I can do this manually, by setting the theme of the page. However, submit buttons and the like, which are being generated by my webapp render in theme c regardless of what I set the page at... Is there a way in the init to tell it to use a different default theme, like: $(document).bind("mobileinit", function(){ $.mobile.theme = 'a'; });
How to sell App made with jQuery mobile?
Is there any way to transform web application written with HTML/PHP/jQuery mobile to a native iPhone app?
Why is my cycle plugin showing the background between images?
I've used the cycle plugin on several Wordpress sites and it works great, except that when I run it the background is visible between transitions. Instead of a smooth fade between images, there is a long pause between images. Even when I use the default values, there is still a noticeable delay between the slides. $(document).ready(function() { $('.slideshow').css("overflow", "hidden").cycle({ fx: 'fade', sync: 1, speed: 2000, timeout: 3000, delay: -2000, }); }); The current site
jQuery mobile and iframes to load external websites
I'm using some kind of modal window with an iframe to load external websites into my webapp. If somebody clicks an external link, the modal window will pop-up and the source of the iframe changes to an URL. In my example i'm using Google as an external URL: <a href="http://www.google.com/" rel="external" data-ajax="false">Link to Google.com</a> My modal window: <div id="modal"> <header> <span class="close">Close</span> <h1>External webpage</h1> </header> <iframe id="external" src="about:blank"
DateRangePicker (Filament Group) in a modal dialog doesnt work! Any kind of help will be appreciated deeply.
Hey Guys, I needed the functionlity of a datepicker which can let user choose a specific date/date range in the easiest and most intutive way, hence I chose DateRangePicker plugin from Filament Group. I used it, customised it and everything worked fine. Then the ui of my little hobby project changed and i needed this daterangepicker on a modal dialog and w00f !!! It doesnt work if the modal is set to true for the dialog but I have to have this dialog box to be modal(true). Can anyone please help
data-role style lost after .load()
hello, after a reload of a div by using .load() the data-role mobile style is lost :-( i use this code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="../js/jquery.mobile-1.0a3/jquery.mobile-1.0a3.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/jquery.mobile-1.0a3/jquery.mobile-1.0a3.js"></script>
Allowing Users to Change Data-Theme
Sorry in advance if my code looks idiotic. I'm new to javascript, but trying to learn! I would like to have buttons on my mobile page that, when clicked, dynamically input their value (a, b, or c) into the data-theme's value and thus change the page's theme. I'm sure this is ridden with errors, but does anyone know how I can do this? <script> var themeStyle = data-theme.value $("button").click(function () { $(themeStyle).replaceWith(button.value); }); </script> </head>
[jQuery] Cycle Plugin - Can't Get Pause To Work
I am using the cycle plugin, but for some reason I can't get the pause feature to work. I am showing a hidden div, and when I do, I need to pause the slideshow. Here is what I am using: $('#artistCycleParent').cycle({ fx: 'fade', speed: 3000, timeout: 5000, pause: 1, next: '#artworkNext', prev: '#artworkPrev' }); // Pause the cycle $('#pauseButton').click(function() { $('#artistCycleParent').cycle('pause'); $(this).hide();
Ajax Error Handling Breaks Everything
I've noticed that when jQuery mobile attempts to load a page and either times out or an error occurs on the back end (500, 404, etc) it displays the "error loading page" message but then everything on the page breaks. For the most part attempting to click any of the jQuery formatted links on the page doesn't trigger any action, only clicking on actual data-role=none links seem to do anything. Is there any way to override the default jQuery mobile ajax error handling?
Nested list header themes/data-position=fixed/list data-themes...how?
I can't seem to apply data-themes or data-position=fixed to the headers of a nested list or data-themes to the list items, even with listview("refresh"). I think it's kind of...odd...that the nested lists don't inherit data-themes or other settings from the parent. I'm not sure how usable that is. As for the header attributes, I'm trying to set them with: $(".ui-header").attr("data-position","fixed"); $(".ui-header").attr("data-theme", "a");The attributes are appended, but they have no effect.
Binding events to buttons in a dialog
What is a good programming pattern for binding an event to buttons that are dynamically loaded via a dialog? For example, I'd like to bind the 'click' event to a dialog submit button when the site loads. Since the button is not yet present in the DOM, the binding never occurs. Is there a defacto standard for managing this type of problem with this framework?
Jquery Mobile Francophone
Bonjour à tous, En cours de développement de mon site en version Jquery Mobile sous Wordpress MU, j'ouvre ce topic en Français (en espérant que les administrateurs le conserve) afin que la communauté francophone puisse échanger sur ses problèmes pour la mise en place de sa WebApp.... Pour information voilà ce que je suis en train de mettre en place : 1-Blog sous Wordpress MU et Buddypress (existant) 2-Un Blog en sous-domaine sous Classipress (existant) 3-Le développement d'un thème avec le framework
jQuery Mobile Slider widget doesn't seem to handle fraction steps
If I set the "step" attribute of my original input element to something like "0.5," the slider will only take minimum steps of 1. Anyone else have this problem or create a fix?
Post data not showing at the process script.
I've been having great difficulty with this simple script. From every thing I've read this should work. $(document).ready(function(){ $(".add_to_profile").css("background-color", "yellow"); $('a.bookmark').click(function (){ var addedbookmark = function (data) { var divreturn = 'div.return-'+ data.nid; var divbookmark = 'div.bookmark-'+ data.nid; $(divreturn).html("bookmark added"); $(divbookmark).html('<a href="remove_bookmark/'+
jQuery mobile and asp.net
As a asp.net developer I've been playing around with jQuery mobile Alpha 1. Alpha 2 breaks my asp.net postbacks and I was thinking about how best to use asp.net and jQuery mobile together and wondering how others use (if at all) asp.net together with jQuery mobile? (MasterPages, postbacks, form submission, viewstate, etc., etc.)
validClass doesn't work [Validate]
Hi, I'm trying to use validClass option on validate() function but don't seem to work... simply hide de errorElement my code: var validator = $("#registerForm").validate({ onkeyup: false, errorClass: "invalid", validClass: "valid", rules: { //.... } }, errorElement: "em", errorPlacement: function(error, element) { if ( element.is(":radio") ) error.appendTo(element.parent().parent());
datepicker plugin and jQuery UI 1.8.2 theme not compatible?
I'm using Keith Wood's datepicker jQuery plugin v.4.0.2 (not the jQuery UI datepicker) with jQuery 1.4.2, and I want to use the jQuery UI Cupertino theme v.1.8.2. I reproduced the example on this page http://keith-wood.name/datepick.html under the Layout/Style tab. The inline example worked, but the popup example failed. I tried many permutations and combinations of loading .js and .css files, none of which worked. Would someone please point out the error of my ways? Code snippet and screenshots
Add an attribute to prevent particular pages from caching
I ran into circumstances where I don't want certain pages in my app to cache. I think there should be an attribute that can be added to any div tag with date-role='page' such as data-cache="false" which would prevent that page from caching. For my solution, I added a 'pagehide' binding in the dom ready event of the root index page for the app: $j("div[data-role*='page']").live('pagehide', function(event, ui) { if ($j(this).children("div[data-role*='content']").is(".command-no-cache"))
IE8 & .change function on a form select not working
Having an issue with the .change functionality on a form selector in IE8 which I have not been able to figure out, and is now driving me insane. When the select is change to an item with a value of 1, it is supposed to set the values of two textboxes to blank. Eg; $(function(){ $('#status').change(function() { if (this.value == 1) { $('#datetime_hasrecord').val(''); $('#description').val(''); } }); }); <form> <select id="status"> <option>...</option> <option>1</option>
Access violation exception in IE
Hey guys, i have a strange error. With the following code i got the exception "Unhandled exception at 0x40044440 in iexplore.exe: 0xC0000005: Access violation reading location 0x00000018." after clicking on the link. <!DOCTYPE html> <html> <head> <title></title> <script src="jquery-1.5.1.js" type="text/javascript"></script> </head> <body> <div style="width: 100%; max-height: 400px; overflow: scroll;"> <table> <tr> <td> test
Multiple executions of script loaded in data-role="page" with pageshow event
I have script that is loaded in the data-role="page" area of my page. It contains an event that runs on pageshow ('#id').live('pageshow',etc) when i load the page the first time is fine, if I load it the second time from a link in the same parent page it executes twice. Any ideas
Redirecting the back button if the "back URL" is xyz.com
I am trying to capture the back button and redirect if it is a certain URL, if not just go back like a normal back button. I've never really messed with the history except for something like this: <a href="#" onClick="history.go(-1)"> Anyone have an example using this plugin: http://www.asual.com/jquery/address/ , or any other plugin that might achieve this? any direction will help thanks
Is there an offering to SMS in the same way TEL works?
Hi, in order to make the smartphone make a phone call we just put tel in the href e.g.: <a href="tel:55555555">555555555</a> is there something similar for SMS? if not, how can I have my application send an SMS using the phone rather than a 3rd party gateway? thanks Matt
Jquery Dialog Overlay problem when dialog is bigger than page content
I'm stuck at a problem and I don't know the answer. After a lot of debugging I figured out what went wrong, but I don't know the answer. When I use a basic Dialog, set modal to true and the content of the dialog is bigger than my viewport, the overlay isn't calculated correctly. The height is wrong, therefore I get a vertical scrollbar. My guess is that since I have suddenly a vertical scrollbar I also get a horizontal scrollbar. I tried a clean html file with only standard css and js files from
Problem with linking when running offline with application cache (manifest)
Hi, I'm developing a web app that will be placed and started from home screen on the iPhone and will need to work offline. I've added a application cache solution using a cache manifest file which lists all the files I need to run the web app offline. I've stripped the solution down to just two files: index.html and page1.html (and the js and css for jQuery to work). When specifying the files in the manifest I got a problem since the jQuery Mobile adds a hash to the link as in: index.html#page1.html
Theme Roller interchange
It would be nice if the theme roller schemes could create an interchange of basic colors to be passed between the original browser and the mobile version. (If they are not one tool in the end that is.)
Need dialog to extend past vertical viewport
I'm using a single jQuery UI dialog on a page of mine. The page has numerous buttons that can trigger the opening of that dialog with a click event. Prior to opening the dialog, I want to reposition it so the top of the dialog DIV appears at the same top offset as the button (basically covering the button). Here's my problem: let's say that the dialog DIV has a fixed height of 500 pixels, and the "open" button appears right near the bottom of the viewport. When I click the button, there isn't enough
Autocomplete with custom data and display
Using this source code I've faced the challenge: custom data displays fine when there is an only "autocomplete" text input. I have two and both of these works as autocomplete, but only second works with custom data. I think that problem is in this function: .data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; Tell me please, how to fix this?
filtering by multiple selected tags / classes
Hello, I've been searching all over the web and through these forums and haven't been able to find a solution to my question. I have an ecommerce site and want to create a filter with a list of keywords that the user can click toggle to combinations of search terms. For example, some of the terms would be: male, female, walking, standing, youth, adult, elderly, etc. The products that correspond to these terms have class attributes and would be either shown / hidden or have their opacity reduced
Next Page