How to toggle jQuery animate between different elements?
I have three boxes which on click animates to left+200. But I would like the click animate to toggle so that when one box is animated, the other which was previously active gets back to default.i.e.left-0 Here is a link to JSfiddle http://jsfiddle.net/92cuF/ I thought of one way but I don't know how to go about it:/ Create an empty Array. On clicking box A add to Array and animate it. If i click on box B, remove box A from and re-animate to default i.e.left-0 and add box B to Array and animate it.
jQuery conflicts..
Hello, I am working to build wordpress theme from scratch, I installed Js script to my vertical Menu, and plugin to my slideshow, The two work correctly when I installed it without my style.css and my theme built.. But when I integrated it to my theme it does not work together!! :( I don't understand where is the problem? is it related to my style.css, php files or jQuery conflicts? could you help me please.. Sam
Photoswipe problems on Galaxy S3. Anyone with the experience?
I just created my first app using jQuery Mobile and Phonegap. I used Photoswipe (www.photoswipe.com) to set up two galleries on the app. When I view the site in Chrome it all works fine. When I install the app on a Galaxy S2, it all looks fine. But when I install it on a Galaxy S3 (with Cyangenmod) I seem to get this big black box in on top of the pictures of Photoswipe. (see attachment) Does anyone have experience with using Photoswipe? Any tips? Also, When running the app through Phonegap Builder
jQuery Mobile background does not cover the whole page
Hey there, I`m working on my first jQuery Mobile Site for our restaurant. But there is a recent problem, that the background is not covering the whole page. As you open the page persio on your desktop PC, you`ll notice that problem. Hope you can help me. Cheers Daniel
IIFE
Hi, I am new to jQuery. Can some one explain me the following code? Especially why call to function message() second time also produces 42? Thanks Soundararajan var x = 42; console.log(x); var message = ( function(x){ return function(){ console.log("x is " + x); } } )(x); message(); x = 12; console.log(x); message(); //*********************************** 42 x is 42 12 x is 42
what is difference between .next().index() and .next.index() ?
pls see this fiddle http://jsfiddle.net/jakecigar/SS3U2/2/
jQM 1.4 has 250ms delay to beforefilter - why?
I had noticed that filter performance in 1.4 had seemed sluggish compared to 1.3 and earlier. It appears that a 250ms delay (verified by inspecting the source JS) has been introduced. As described here: http://api.jquerymobile.com/filterable/ The filterable widget reacts to the change signal by reading the value of the input after a short delay and iterating... Can anyone shed any light on why this might be? It gives the appearance of being far less responsive because of the delay.
How to create a responsive menu like JQM Demo Page?
I'm new to JQM and am looking for information on how to create a responsive menu like the the one on the JQM Demo's page. Specifically, I would like to build a navigation menu that has the following features: 1. Supports sub-level menu items 2. Is displayed/hidden when the screen is a certain size 3. When the menu is hidden, a menu icon is displayed in the header Ironically, I've peeked thru all the demo's and haven't found a demo that meets the above feature requirements. Thanks for any pointers.
Accessing pluing on events
Hi :) I have a simple plugin, who add a click event on a handler. Here is the code : [code](function(window, $) { var TableColumns = function(element, colsJSON, handler) { this.table = $(element); this.handler = handler; this.handler.on('click', function(event) { // HERE I WANT TO ACCESS this.table }).bind(this); } $.fn.tableColumns = function(colsJSON, handler) { return this.each(function(index, element) { new TableColumns(element,
dynamically set a sprite background-position in table cells
Hello, I'm trying to dynamically set the "flags sprite" background-position: for each country based on their "id". I've tried a bunch of different statements like if/else, while loop, etc. with no luck. The code marked // ISSUE is where I am now. Thank you, t6s //capture json data and render table rows and data $(document).ready(function(){ $.getJSON( "https://s3.amazonaws.com/reuters.sochi.medals/medals.json", function( data ) { $.each(data, function (i, val) { var sort_gold = data.sort(function(a,b){return
Add attribute not working
Hello everyone, I am having some trouble adding an attribute in jquery to a select many checkbox in primefaces. I done this function so far: $("div.ui-chkbox-box").live("click", function(){ $parent = jQuery( $(this).parents(".ui-selectcheckboxmenu-panel") ); var classes = $(this).attr("class"); if(/ui-state-active/i.test(classes)){ var temp = $parent.attr("id").replace(/\:/g,"\\\\:"); var compId = "#" + temp.replace("_panel", ""); $id
Why the number of the beast?
Why is jQuery using the number of the beast as its logo? The jQuery logo is simply Vav-Vav-Vav (that's 666 in Hebrew) rotated 180 degrees.
How to control the flow in page transition
I bind some callbacks to the pagebeforeshow and pageinit events. My pages are accessible directly so I need to do some initialization stuff in the init and also in the beforeshow if a transition back occurs. We are using a REST backend so we also need to fetch some data within those callbacks. How can I make sure that the beforeshow event does not trigger after the init is completely done ? I would need to do something like this: $(document).on('pageinit', function (event) { event.preventDefault()
Finally a way to track/debug jQuery events in most browsers.
There is a new project that provides a way to track triggering of events and event handlers. https://github.com/intervalia/triggerTracker Use triggerTracker to see what is being triggered and what function is handling the event.
Google Chart Data table Nor working
<script type="text/javascript"> var data = '<%=jSerializer.Serialize(ObjList)%>'; google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() { var tabledata =new google.visualization.DataTable(); tabledata.addRows(data.length); tabledata.addColumn('datetime', 'Timestamp'); tabledata.addColumn('number', 'DataValue');
Refresh when loading image
Hello, I have a problem when I have modified an image and asked AJAX to reload it. Below is the code. In a php procedure, I create dynamically a map of a different French area (called "department"). According to values found in a cookie several parameter are retrieved by the procedure. It could be : - department name - map size, - - colors Because the user has no button to trigger the refresh, this is done on an interval time basis. Everything works fine except when the department name
Retrieve and Manipulate with Particular Elements from External Website
I have a question regarding using jquery. I would like to load page from another website (e. g. www.15min.lt), and retrieve only elements which starting "div". Later on, I want manipulate these elements in the next operations of JavaScript+JQuery like calculate how many times a specific word (e. g. "15") is in the code of that website (i. e. www.15min.lt). Than output results in my website. I tried several functions, like .load(), .html(), but haven't got the described result.
How to use jQuery to modify css style of an option element?
Is there a way to modify the CSS style of an option element? One of the option elements are too long and I can't find a way to limit the width from CSS
How to append content to draggable list?
Hello together, I am quite new to jquery. What I would like to realize is a simple, draggable content slider. When the last slide is reached, new slides shall be loaded from a server function. The first slides shall be removed so that always a constant number of slides is in the slider. The simpliest and best static slider which I found so far is this one: http://jsfiddle.net/M8ydk/1/ From my point of view, only the dynamic adding of the next slide and removing of the first slide is missing. I tried
Page controls moving after Toggle()
Hi All, I'm just starting to learn using jQuery with ASP.net MVC. I was exploring the Toggle() method to show/hide a div. I was able to implement the toggle feature, but when i toggle the div, controls on rest of the page also move after toggle. What if i just want to toggle the div without affecting rest of the controls on the page. I tried using ''display: none;" and "visibility:hidden" but did'nt get expected result It would be really helpful if you guys can jolt down some steps or redirect me
My jQuery dialog won't open in the same place each time
I have a jQuery dialog in an asp.net MVC 4 app that opens with it's contents as expected but the first time it is an inch? lower on the screen than the subsequent openings. Each subsequent opening occurs in the same and preferred location higher up the page. This is a not yet complete fix for a worse problem where subsequent openings of the dialog, after being dragged, failed to center the dialog, and also introduced scrollbars and added empty space at the end of the page of the same size as the
jQuery UI accordion not working
I have been working an example from Lynda.com showing how to use the accordion widget, but cant get to work. <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script src="jquery.js"></script> <script src="jquery-ui-1.8.23.custom.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> <script> window.onload=function(){ $("#accordion").accordion();};
Cannot append Table Rows to dynamically created Table Rows
Hi, i am looping through a JSON response and creating and table with an image in each row. When the user clicks on this icon, i start another ajax call and get the child results for this row. I see the result in the console when i do a console.log. But i am not able to do an .append on the .closest("tr"). Whats is wrong here? Here is my code: $(document).ready(function () { var url = location.protocol + "//" + location.host + L_Menu_BaseUrl; var JSONService = url + "/_vti_bin/GPExt/GPService.svc";
Help with chat code
Hello I am writing a chat application using XMPP... http://www.arialboundaries.com/chatting signin: mary@blah.im mary You add a user to chat with (alotofmath@gmail.com, which is me), and then chat. I hit a snag; the Javascript I am writing is not registering the enter key; it should work that, if you enter text, and press enter, the message should be recorded in the chat window. $('.chat-input').on('keypress', function (ev) { window.alert("I'm here"); var jid = $(this).parent().data('jid');
How to make page of jQuery UI axis:x horizontally draggable list scrollable
So below is a diagram that describes what my site looks like. Each list item is horizontally draggable, which works fine, but on multi-touch it is hard to scroll because only the body ( the white area in the diagram ) can trigger scrolling. Although the list items are horizontally draggable, when you move a finger down on the list-items, it interprets that as a horizontal drag because rarely are those vertical flicks 100% straight. I am using jQuery UI for the draggable interaction. How can I make
Popup - Strange partial opacity in background
Well, I have some problems with popup. In some pages there is no any problem. In others, the opacity background (overlay) of popup is applied partially. See the picture in annex. This is really strange, because i search in another page without this problem, and html is the same (looked for unclose tags). see my html: <script id=dtl_product_establishment type="text/x-handlebars-template"> <div data-role="header" class="put-panel" data-position="fixed" data-tap-toggle="false"> <h1>{{establishment.display_name}}</h1>
Issue on Adding Tooltip to jQuery UI Slider on Hover using Bootstrap Tooltip
Can you please take a look at this Demo and let me know why I am not able to add the Tool tip to handler on hover? $("#slider-range").slider({ range: true, step: 5, min: 100, max: 500, values: [150, 300], slide: function (event, ui) { $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); } }); $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1)); $('.ui-slider-handle').hover( function () {
My navigation is not consistent in all browsers
Hi Everyone, I'm very new to jQuery. I have an issue with my navigation not showing up correctly in browsers, namely IE and on mobile devices. Here is the URL http://di-giovanna.com/ And I have my .css style sheet below. Thanks for your help in advance!! @charset "UTF-8"; /* CSS Document */ * { margin:0px; padding:0px; border:0px; } #slideshowContainer { width: 900px; height: 273px; } .slideshow { height: 273px; } .slideshow img { } #nav { list-style-type:none;
Passing parameter to server - needed for sql-statement
Hello, JQuery-version: 1.10.2 JQM-version: 1.4.2 I want to send some data from the mobile to the server for generating the next page (after clicking a link). For example there is a site with an <ul> containing some suggested dates and they all reference to the same page, namely view. The content of the page - where the user is going to visit - depends on the <li> he has chosen. I realized that by appeding a parameter like "?id=0", but I have problems with popups and during my search I found out
how to display tab another page using jquery ui
i am struggling to read external page using tab,but it's cannot working any one can help me?
scale images with window AND do not allow saving of images
Hi, I have used this code to disallow copying and saving of image from a slideshow. But I can't get this to work in combination with that the images also scale with the window size when made smaller. Any help please anyone...? Eddy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title>
how to DRY the function
function addContentFormHelp(baseUrl) { if (!baseUrl) baseUrl="../.." $.each($("[name*='content']").prev(":not(:has(img)):not(div):not(span)"), function (key, elt){ $("<img class='ttc-help' src='/img/help-icon-16.png'/>").appendTo($(elt)).click(function(){requestHelp(this, baseUrl, 'content')}); }); $.each($("[name*='[template]']").prev(":not(:has(img)):not(div)"), function (key, elt){ $("<img class='ttc-help' src='/img/help-icon-16.png'/>").appendTo($(elt)).click(function(){requestHelp(this, baseUrl,
Focus issue Youtube popup
Hi Everybody, I'm building a small application for my son, who - due to his handicap - is incapable of using the computer with a standard mouse. Because of that I'd like to navigate trough the application with the use of the so called MakeyMakey, an Arduino based microcontrolller. (www.makeymakey.com). The idea: Using predefined search queries displayed as images and positioned on top of the page, my son is able to choose and display a maximum of fifty movies related to the predefined query. He
Trying to understand developer tools
I am in need of tools to be productive using jQuery and I am wondering if there is a "one size fits all" tool like Visual Studio does for ASP.NET. A few questions below...... Can you write jQuery and debug with the same IDE (Google Chrome, Sublime, BBEdit....etc) This maybe a Microsoft term but do any developer IDE's have intellisense or something similar Has anyone used Visual Studio to develop jQuery or is it better to use another tool I have read some stuff online like JSense https://jsense.codeplex.com/
Accessibility
Is jQuery version 1.10.4 accessible (keyboard, screen reader)? Please advise. Thank you, AJ
Use jQuery.when() in a widget without losing callback context?
I'm struggling with using $.when() inside a Widget Factory widget. The widget needs to make multiple AJAX operations, then trigger a single callback. The callback is one of the widget's public methods. I do something like: var promises = []; if (test) { promises.push( $.ajax({...} ); } if (test) { promises.push( $.ajax({...} ); } if (promises.length) { $.when.apply(this, promises).done(this.widget_method); } My problem is that the callback's context isn't the widget instance like
cannot get country dropdownlist loaded using ajax and php
I CANNOT GET THE COUNTRIES LOADED INTO THE COUNTRY DROPDOWNLIST CAN SOMEBODY HELP ME <HTML> <HEAD> </HEAD> <STYLE> #SRCHORDERS{ position : absolute; top : 100px; left : 20px; width : 100px; } </STYLE> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <SCRIPT> $(Document).ready(function(){ var COUNTRYCOD = 0; $.ajax({ type : "POST", url : "http://localhost/AJAXPHPMYSQL/GETCOUNTRIES.PHP", success : function(COUNTRIES){
Find children then appendTo
Hi, I'm having an issue with finding the first child of a container then removing it from that container, and appending it to a new container. I have 3 containers with 3 elements, but they all append to the first container. I'm not sure if it's because my entire structure is poorly created, or if I'm misusing ".children". But I was wondering if anyone could give me a hand understanding what I'm doing wrong. In the end each element should shift to the next container. http://jsfiddle.net/mmbVr/ $(document).ready(function()
Help with image gallery counter
Hello, I was wondering if someone could help me with adding an image counter to this gallery. http://tympanus.net/Tutorials/ResponsiveImageGallery/ something like image 2 of 16 Thanks
Any way to know how far a user has scrolled in a div?
I have a div that has a fixed height (and a max-height) and I give it the css attribute: overflow-y:scroll so it has a scrollbar when there is a lot of content. I do have a lot of content, and it would be nice to be able to tell the program, perhaps when the user clicks a button, just how far he has scrolled in the div so far. Is there any way to do this? Thanks
Next Page