Page Layout, Slide-out Menu on Left Scrollable Content on Right
I am rather new to JQuery Mobile. I've seen many examples of layouts that are very close to what I want, and I have tried to adapt these without success. Maybe someone out there can point me in the right direction. What I need is as follows. 1. Slide in, out menu on the left with about 12 items, so never has to scroll vertically 2. Content on the right that will be rather long so will have to scroll vertically 3. I don't want the navigation on the left to scroll with the content on the right: I want
Issue with .attr when using .each
Hi, I have a snippet of code which locates all .widgetItems objects within a DIV column (#widgetColumn_x). See below how I fetch these using jQuery, which works fine as I have tested the outcome of this line alone and it was as expected with the correct length each time. The problem is that I'm trying to access each child node's id attribute but I get undefined each time. In the DOM the id attribute is present. Am I doing something wrong? I'm very new to using jQuery for this sort of thing, previously
Issue with find with optgroup when label has a +
I have this code: $(this).closest('.filter') .find('optgroup[label=' + text + '] option') .prop('selected', true); This works fine, except when text contains a + - in that case everything from all the optgroups are matched, instead of just the ones from the group specified. Does + cause some special behavior? I tried escaping it with \, but I got the same results. How can I make this work properly when the label as a +?
Search long lists, data-filter="true" - how to integrate ajax server-side
I've built an app that uses the <ul> data-filter="true" and it does a great job of client-side search. I generate my list items with a $.getJSON call to a PHP/MySQL server. All good - the search works when the list is small. The problem is my app may have a very long list, in the many thousands of <li> results. I only need to display ~50 results, but I'll need then to search server-side. Can someone point me to a technique to integrate the current data-filter in jquery mobile and/or add an
jquery php button click change div ajax
I am having trouble with including swapping two different images which have multiple functions based on jquery so that on mouse click event the div content will change to the new image sequence - one image spins and the other zooms but they should not appear at the same time - I would like to just call a jquery include ajax php ? as this would be easier so the content is called inside the div on the button click if that makes sense - is this possible - I have some messy script if anyone can help
JSONP question XML response
I have my jQuery code on server1 which is trying to call a servlet on server2. The servlet returns XML data. Since they're both on different servers, I guess I cannot use the $.ajax call. I need to use JSONP but my question is, since the response i'm receiving is XML, can I use JSONP in the first place?
How to get value from textarea (beginner q)
I have a php-page where I have a textarea I use to update a database table with. The form pretty much looks like this: <form action="page_edit_save.php" method="post"> <ul> <li> <textarea name="content" id="content" rows="15" cols="62"> <?php get_page_content($id); ?> </textarea> </li> <li> <input type="hidden" name="id" id="id" value="<?php echo $id; ?>"> <input type="submit" id="submit_page_edit" class="buttons" value="Edit page"> </li> </ul> </form> The page_edit_save.php pretty much looks
Mobile CSS gets lost after using ajax to update content
I'm using jquery mobile for my site and its working great, but I have one page that has a series of <select> menus that update via ajax. As soon as that div updates, all the mobile styles go away and I'm left with regular select pulldowns. How do I apply the mobile css to these? I was trying something like this, but without success(it gives me an error): $("select").live("change", function(){ $("#options").load("/products/mobile-product-options.php", $("#product_form").serialize()); $("#options").live(
Applying imediate change to font size
Hi! :) It's obvious that I have a problem and I need some help :) I'm currently creating a fancy web app that allows users to drag and resize stuff... and it's on the resizing stuff that I'm having problems. Previous note: My fancy web app uses ratios - the size of an element is shown depending on the ratio. Setting an image size with css("width") and css("height") works "out-of-the-box" but using css("font-family") doesn't work "out-of-the-box" - it only shows the new value after I changed the slider
$(#selector) Query
Hi guys , I'm new here , and I'm stuck with a problem using jQuery , I need your help I'm controlling some elements with same class and ID's . but they are repeated in different containers . and I would like to control these elements in each container that has an ID one per one (those containers have ID's like ( c1 ,c2 ,c3 ) and I would like to make the number beside (c) controlled by (If) statement to go through those containers to control their elements .. meaning $("#c1 #img").hide(); I
how to perform jQuery live filter on divs and not list items?
i am trying to filter outputted database entries where each entry has the following structure: <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY"> <img src="path/to/image.jpg"> <div class="class4"> <h4>some text here</h4> <!-- this is what i want to search in --> <div class="class5"> <span id="date">date: MM/DD/YY</span> <span id="id_one">text</span> </div> <div class="class6"> <span id="id_two">text</span>
jQuery-ui sortable and droppable list
I'm trying to achieve a folder like application. I asked this question a couple days ago on stackoverflow.com (here) This is in short what i want to do.(Think of it as grouping in photoshop) <li>Folder1</li> <li>Folder2</li> <li>Folder3</li> <li>Folder4</li> <li>Folder5</li> The list above should both be sortable and droppable. This means if you drag one folder into the other one this will happen: <li>Folder1</li> <li>Folder2</li> <li>Folder3 <ul> <li>Folder4</li> </ul> </li>
Pager with Previous/Next
Hellooooo, Building a new site using jQuery Cycle for a slider. The design has both a pager and next/prev buttons. Found an example of using both, but the design calls for them to be all in one row. The number of sliders is dynamic as well (can add as custom post types in WP) so I can't just absolute position them. Design looks like... Got the pager part working. jQuery looks like... jQuery('#slider-inner') .before('<div id="pager">') .cycle({ fx: 'fade', timeout: 1000, delay: -2000, pause:
jQuery Autocomplete Plugin
Hi experts, I have to implement jQuery Autocomplete plugin with a jQuery Virtual Keyboard plugin. I have checked the autocomplete plugin and it is being used keydown, focus, etc. events. So what I have done is I trigger (jQuery trigger() function) keydown, keyup, change, focus functions each time when a button is being pressed from virtual keyboard. But still it is not returning any results. Is there any ways which can be used trigger autoomplete plugin when I user virtual keyboard. Note: Autocomplete
Autocomplete not working
OK it's about 10 hours of trying to get a basic Autocomplete woking and I'm feeling like about the biggest dope in the history of the internet right now. Page: http://AgilityEvents.net/administration/EventForm.php?action=add (You need to use the full URL) Datasource: http://AgilityEvents.net/webservices/clubInfo.php (Try ?term=RACE to see a sample result set) From what I 'see' using FF Web Developer Tools, nothing is happening when I enter characters in the targeted <input> ... in other words, it
Trying to show/hide things with a <select> menu
I have a <select> menu for my support tickets that asks you what your issue is. Depending on what you pick, it is supposed to display a form related to that issue. For example, if you choose "Report a Bug" the bug report form should be displayed. Well, I cannot get it to work. Here is what I have: The page links to an external JavaScript file that has this in it: $(document).ready(function() { $('div.hidden').hide(); }); And this is the code in question: <script type="text/javascript"> ("#showhide_form").change(function()
jquery transit rotation: jquery vs windows versions?
Hi all, I have Windows XP at home and Windows 7 at work. I developed a page at home using rotations with jquery transit. I started out with jquery 1.8.3, but that didn't work, so I switched to 1.7.2, and that works fine. On Windows 7 the page no longer works! Is anyone aware of a compatibility matrix between versions of windows and versions of jquery + transit? or is it some problem with the code? Below is the relevant extract of my page (it does work in XP, not in 7). Secondary question: is there
HTML CSS Jquery Javascript in mobile App
I have developed an app using java script css & jquery where my app displays a sequence of images. coded every thing and which is working good on my laptop, now i just copied the code in to my mobile sd card and opened the index.html file where i could is the first image of my app and with no (div link) link ..... and i don't know if my jquery written is perfectly working on my android mobile... can some one help me how to make the links visible and move fwd .... Thanks in advance :) :) !!!!!!!!
will immediate child selector be deprecated?
there is a note on: http://api.jquery.com/child-selector/ Note: The $("> elem", context) selector will be deprecated in a future release. Its usage is thus discouraged in lieu of using alternative selectors. I need this feature and in irc channel i got another solution: context.find(">elem") What i am wondering is since $(selector,context) won't be deprecated(will it?) and ">elem" can be used in .find(), why $(">elem",context) will be deprecated? Thank you~
Styling Content Loaded from Ajax
I've created code that loads multiple images from an html file using Ajax into a div in another html file. I have code written to enlarge the image using mouseover() and make it smaller using mouseout(). This code worked prior to removing the images and loading them through Ajax. I would also like to style the image so they're all the same size before the mouseover/mouseout functions are executed. Any ideas on how to accomplish this? Here is my code from the main html file. <!DOCTYPE html>
scrollLeft works but scrollTop doesn't work
I have the following HTML with CSS .container { overflow: scroll; } etc. <body> <div class="container"> <div id="markers"></div> <img id="map" src="/img/map.jpg"/> </div> </body> map.jpg is very large and I want to scroll to a fixed position like this: $(function(){ console.log($('.container').scrollTop()); $('.container').scrollTop(1000); console.log($('.container').scrollTop()); console.log($('.container').scrollLeft()); $('.container').scrollLeft(1750); console.log($('.container').scrollLeft());
Ken Burns effect with jQuery UI ?
Hello, Does jQuery UI include Ken Burns effect? Ken Burns effect allows a zoom in/out effect on a picture. Thanks, Chris
Slider Function malfunction
I'm currently working on this on JS Fiddle and something seem to be wrong with an every time you run it, you must click on the middle links before it starts to work or before the third link works. You must also click on the third one before the first one works
jQuery.sortable floated element issue..
I want to implement a thumbnail 'drag and drop'. However, it is not easy. Sample Site This is difficult to explain in words. Please take a look at the my sample page. The middle area is a grid type, and the right area is a list type. <ul style="list-type:none;width:500px;" id="middle" class="connectedArea"> <li style="float:left;width:180px;height: 120px">..</li>...</ul> <ul style="list-type:none;" id="right" class="connectedArea"> <li style="width:180px;height: 120px">..</li>…</ul> $('#middle,
Problem with Toggling Two Checkboxes
Hi, I am trying to change a css dispaly property of div by selecting and unselecting a checkbox following this script: <td> <input type="checkbox" id="c1" name="cc" /> <label for="c1"> <span> </span> Display : None </label> <input type="checkbox" id="c2" name="cc" /> <label for="c2"><span> </span> Display : Inline </label> </td> and the jquery is: $('input:checkbox').change(function(){ if($('#c2').attr('checked')){ $('#casradios').css("display", "block"); $('#c1').attr('checked',false);
Use Javascript to go to an "external" page and handle "back" correctly
I would like to know how to change pages and go back in javascript in a way that is the same as: <a href="someplace.html#somehash" rel="external">Go There</a> <a data-rel="back">Go Back</a> What I've found is that if I do everything in HTML (which I can't in the situation I have now), everything works as I would expect. If I try to just do a $.mobile.changePage('somplace.html'), not all the jQueryMobile screens get loaded. I tried reloadPage=true, but that didn't help. If I do a window.location="someplace.html#somehash"
jQuery mobile
For jQuery mobile, has there been a development for touch based resize, sortable, etc? Like a jQuery UI mobile.
jquery function/script help
hey i want a jquery function/script that retrieve the HTML code source of a given web page.. thanks
Noob question - jquery.js not allowing a plugin to work
I'm using artisteer to generate a web template. It uses the jquery.js to manage the top horizontal menu bar. I'm trying to utilize the "plugin" PicasaViewer 2.0 Its not working. I've trouble shot it down to the jquery.js line of code. If I remove it, Picasaviewer works fine but I loose some formatting to the menu bar. If I keep the jquery in, the plugin doesn;t "grab" the photo galleries from my picasa account. I can't even begin to understand the jquery script and am wondering if someone could
Only show Active Items in autocomplete
I have a question. I have an Autocomplete the is shwing a list of Active people. Is there a way to only show Active people but if they type a name of an Inactive person the name will show in the input box but not in the dropdown list? This is my combo box function (function($) { $.widget("ui.combobox", { _create: function() { var input, self = this, select = this.element.hide(), selected = select.children(":selected"), value
slideto div on page load
I'm probably being thick and missing an obvious way to do this, but using the slideto plugin (http://jesseprice.com/jquery-slide-to-plugin/), how can I execute this when the page has loaded, to slideto a particular div halfway down the page? I'm sure I need to use $(window).load(function() { }but I can't think how to just say to slideto() without an event trigger? Any help appreciated. Thanks, Ed Ludlow
Scrolling not working on chrome browser?
Hello, The jquery scrolling on this page http://kimcolemanprojects.com works on safari,firefox and opera but does not work on a chrome browser, does anybody know why? Thanks very much for any response. Angela
Jquery UI Tab - Adding more tabs should add in same line
Using jQuery UI tab want to display tabs in one line instead of wrapping to next line. While adding new tab dynamically if new tab not fitting on the tab panel, size of existing tabs on the panel should automatically adjust to fit the new tab on same line. Like if open more tabs in Firefox or IE.
flicker/kind of refresh after page being loaded (jqm 1.2, phonegape 2.2)
first the facts: i am using phonegap 2.2.0, jquerymobile 1.2.0 on ios 6 with iphone 5 and iphone 3gs. i have an application which has some local html-files that are supplied in the www folder. from the start/index.html page of the app i open those pages. there are also content which will be loaded via an ajax call that returns json which then will be converted to html and being displayed. the new "fade" transistion looks really nice on both iphones, much better than the old slide transition with
Jquery listview
hello, sorry for my english i trying to display a database result query in a ordered list. but if i add data-role="listview", the result is not displayed with the jquery style (just the basic html orderer list) var lis=""; for (var i = 0; i < result.rows.length; i++) { var row = result.rows.item(i); lis+="<ul data-role="listview"><li><a href="#">'+row.FirstName+'</a></li></ul>'; } $('#mylist').html(lis) $('#mylist').listview('refresh'); <div id="listview"></div>
How to make Tooltip onClick
Hello, I am wondering if it would be possible to open a tooltip from jQuery UI on a onClick event and how one would implement that.
[Tabs component] How to remove a tab but not its div component
Hi all, and thanks for paying attention ! I have a tab component with few tabs leading to the same DIV : $('#ecocalculateur_tab_container').tabs('add', '#ecocalculateur_input_tab', ''); $('#ecocalculateur_tab_container').tabs('add', '#ecocalculateur_input_tab', ''); $('#ecocalculateur_tab_container').tabs('add', '#ecocalculateur_global_tab', '');So tab 1 and 2 share the same content. Then i need to remove the second tab : $("#ecocalculateur_tab_container").tabs('remove', 1);But doing this also delete
Multiple links in listview item - turn off auto-linking
I have a listview with some links inside an <li>. How do I turn off the auto-link-function (generate a button, onclick on complete <li>) to have an unclickable list entry with clickable links inside? Can I force a read-only-list with links inside?
problems using fancybox with jquery?
Hi Guys, I'm using the excellent fullcalender plugin. Rather than using js prompt in my script, I'd like to use content in a div that I style up with css and use some nice graphics. I'm trying to use the fancybox plugin, can anyone please tell me how to the fancybox working and how to pass the value from fancybox to the if statment below it? Currently get error: Timestamp: 07/12/2012 14:49:51 Error: TypeError: $.fancybox is not a function Line: 39 Many thanks $(document).ready(function() {
Can not get my Vaildation too work !!
Am trying to vaildate this datepicker As a { required field } only. When submit is pressed. Help needed with code to Vaildate this datepicker, cant get an error message from it. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script> <script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> <title>Reservations and booking form</title>
Next Page