Draggable touch screen
I've got a couple of sites with draggable elements, having just got a touch screen laptop I would like them to work with that, please consider the following: The example on https://jqueryui.com/draggable/ works fine, I can drag the little box around with my finger. The Source from the above, cut and pasted, doesn't. All my draggables work perfectly with mouse moves. All the buttons on my sites respond to a tap. So can anyone tell me what I'm missing?
Javascript div manipulation (Client-Side)
So I am new to javascript/jquery and I would love to have your guidance. I started managing divs and pages by this code: $(window).on('hashchange', function(e) // On Change Page
{
DisableAllPages(); // Disable all divs
EnablePage(); // Enable the div we specified
});
function EnablePage()
{
var fragment = window.location.hash; // Get the fragment we are in
fragment = fragment.substring(1); // remove first substring (#)
fragment = fragment.substring(1); // remove first substring (/)
$("."+fragment).css("display",
Rendered HTML has no ID associated with the dialog buttons
This is the JS displays a standard 'OK' dialog using jQueryUI: function genericPopupDialog(dialogTitle, dialogBody, closeButtonText, dialogWidth, parentContainer) { parentContainer = parentContainer || "#bodyDiv"; $("" + parentContainer + "").append($("<div id='genericPopupDialog'>" + dialogBody + "</div>")); $("#genericPopupDialog").dialog({ autoResize: true, autoOpen: true, width: parseInt(dialogWidth), maxHeight: 500, title: dialogTitle, modal: true, closeOnEscape:
not getting full string of attribute using IE and SharePoint
I am having trouble getting the full string of an attribute when using IE to use jQuery in a 2010 sharePoint site. fiddle: https://jsfiddle.net/vhabhsrosed/cox10emu/ attribute = "action" in the following. In jsfiddle it's ok but on my works website it only brings back the following: docsethomepage.aspx?ID=71485&List=b0068804-01a5-41a6-953f-b3d3e75b3619&FolderCTID=0x0120D5200022E7569C62963E469B62F73D4190A3B0080400D01D5D9D296D7B459DAB318E3E054F9C&RootFolder=%2Fsites%2Flocalresearch%2FPhoenix%2FProjectManagement%2FInitial%20Others%20PHX%20adfas
How to create a function for this code?
Hi, My code looks like this: var firstInput = $('#user-login-form :input:enabled:visible:first'); firstInput.focus(); firstInput.addClass('dirty'); firstInput.prev('label').addClass('dirty'); $('.js-signInButton').click(function(e){ e.preventDefault(); $('#edit-email').focus(); var firstInput = $('#user-login-form :input:enabled:visible:first'); firstInput.focus(); firstInput.addClass('dirty'); firstInput.prev('label').addClass('dirty');
Creating a draggable div using jquery
Sorry, really new at this. So I used the jQuery UI to create a draggable div, like so: <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div>I've also implemented the jQuery UI button, and I want the button, when clicked, to create a duplicate div, like so: $(function() { $( "input[type=submit], a, button" ) .button() .click(function( ) { $( "<div id='draggable' class='ui-widget-content'><p>Drag me around</p></div>" ).appendTo( "body" ); });
Need help extracting values from several lists
Given the following html, how would I get the numbers in parenthesis into an array? So I'd like my array to be {404493,404504} <div class="current-config popup-panel featherlight-inner" > <div class="dyn-conf-content"> <h3 class="left-align production-color">Current Configuration</h3> <p class="dimensions cc-highlight"> <span class="config-label">W × D × H</span> <span class="dim-inches">32.9" × 34.6" × 48.4"</span><br> <span class="dim-metric">836mm
Using jQuery, Please provide code that will remove placeholders:
<divclass="class-replace"> <p> <a href="http://[SITE].com">[NAME]</a>©[START]-[CURRENT].All rights reserved </p> </div> And replace it with content on page load: <divclass="copyright"> <p> <a href="http://foobar.com">FOObar</a>©2011-2013. All rights reserved </p> </div>
Open Panel to gray out caller page content
Hi, I'm not sure if I am using the correct terms for the question I am asking. In page content, I click a button/link to open a Panel it can be in any data-display value. When the panel appear, I would like to caller page content to be gray out or technically cover it with gray overlay. How I can do that? Is there any existing built-in attribute I can set or I will need to do this with my own js/jquery? Hope my explanation is clear enough. Thanks.
QUnits for JS directly accessing UI components
Hi, I am trying to add Qunit tests for our MVVM based UI application. I planned to have separate tests.html which will have Qunit test fixtures and acts as test report page. So I am focusing on testing the view models (JS files) of the application. But I have some parts of js files expecting the actual UI components to be present, especially jquery selector calls such as $('#xyz'). How can I test this code, can you please guide me. The reason I didn't put qunit DIV in main application index.html
Same code run for document ready and multiple event
I have a code which will run when document ready and some event occurs. In this case I use same code multiple time. But I want to know that, is there any other way to use my code one time and code will run when document ready and event occur. I have also another question that is it possible to run code when any changes come into document. Here is my code. $( document ).ready(function() { var main_content = $(".main_content").outerHeight(); var sidebar = $(".sidebar").outerHeight();
Not Able to Access Data in a Complex JSON Format
Can you please take a look at This Demo and let me know why I am not able to access to data in detail option of the JSON? what I would like to do is loading the firstName , lastName, and ageinto the list for each object. var data = { "events": [{ "date": "one", "event": "", "info": "Copenhagen", "detail": [{ "firstName": "Sally", "lastName": "Green", "age": 27 }] }, { "date": "two", "event": "", "info": "Copenhagen", "detail": [{ "firstName": "Sally", "lastName": "Green", "age": 27 }] }, { "date":
Including a jQuery panel ruins visibility of html elements while scrolling on mobile
i cant for the life of me understand it but heres a link snoblifetest.myshopify.com when i add the markup for a panel...external or internal elements will disappear while scrolling on any phone...without even opening the panel... heck...the mere presence of data-role="panel" causes it... as soon as i remove the code below...mobile scrolling performance returns to normal...very strange <div data-role="panel" id="mobilemenu" class=" panel" data-position="left" data-display="reveal" data-theme="a"></div>
JQuery Zoom question?
Hi guys, I have a web page, on this web page I have couple of images. When user clicks on the image, image disappears and the UL tag displays. (I am using this plugin http://jquery.malsup.com/cycle/) Here is the HTML: <div id="right4" class="pics"> <img class="img-center" src="images/smart-agriculture1.png" width="168" height="168" alt="Akıllı Tarım"/> <ul class="solutions-ul"> <li lang="tr"> <i class="fa fa-caret-right"></i> Gübreleme </li> <li lang="tr">
Append a jQuery variable to a event click function
I have a script that processes some Json data to produce a graph using HighCharts. The Json data has three elements: [{"name":"Room","data":[343,405,406,407]}, {"name":"Temp C","data":[50,50,50,50]}, {"name":"UniqueID","data": ["GLAZH03431464336298","GLAZH04051465483111","GLAZH04061464783558","GLAZH04071465484869"]}]In my script I have the following: $(document).ready(function() { $.getJSON("temp_chart.php", function(json) { $.each(json,function(i,el) { if (el.name=="Room") categories = el.data;
Dynamically created CheckBox -- Can't set/clear
I have a simple html table. I take one of the cell and change it into a checkbox with the following code: Stemp = $td.eq(i).text(); // get loaded wanted value if(Stemp == 1) $td.eq(i).html('<input type="checkbox" class="btnCHK" checked>'); else $td.eq(i).html('<input type="checkbox" class="btnCHK">'); The browser displays the cell now as a check box and allows me to change it's value (checked/unchecked). At time I need to clear the checkbox with code ... here is the issue --- nothing I do will
How to remove one image file from input file multiple JavaScript
i have five input type file to choice image for upload,but when i click remove one image all image was delete,i just want to delete one image that i click <body> <table> <tr> <td> <img id="uploadPreview1" src="no_image.jpg" /><br /> <input id="uploadImage1" type="file" name="p1" onchange="PreviewImage(1);" /> <a href="" onClick="delete(1)">Remove</a> </td> <td> <img id="uploadPreview2" src="no_image.jpg" /><br /> <input id="uploadImage2" type="file"
How to make AJAX calls - Elgg
I'm trying to make an AJAX call in elgg, but I've been unsuccessful so far. What could I be doing wrong, or what am I missing? Thank you all in advance. Elgg version 2.1.1 start.php // in myplugin_init()
elgg_register_ajax_view('forms/myplugin/add'); default/forms/myplugin/add.php <div>Successful AJAX call</div> default/object/my_ajax_plugin.php <div class="myplugin-form-container">JQ Here</div>
<script type = "text/javascript" language = "javascript"> var Ajax = require('elgg/Ajax'); var ajax =
Jquery zoom on cycle?
Hi guys, I have a web page, on this web page I have couple of images. When user clicks on the image, image disappears and the UL tag displays. (I am using this plugin http://jquery.malsup.com/cycle/) Here is the HTML: <div id="right4" class="pics"> <img class="img-center" src="images/smart-agriculture1.png" width="168" height="168" alt="Akıllı Tarım"/> <ul class="solutions-ul"> <li lang="tr"> <i class="fa fa-caret-right"></i> Gübreleme </li> <li lang="tr">
Trouble selecting element's children in class .click() handler.
I'm running into some trouble trying to toggle the items in a list that are children of the div which was clicked. When clicked, some of the divs show/hide just their children, while others show/hide a strange combination of all divs in the 'collapse-trigger' class. https://dpaste.de/62tF
easy Autocomplete
hi you all. i've read this jquery ui document: https://jqueryui.com/autocomplete/ <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> it's very easy... but a question: how can i insert in the select also the value?
Weird Issue with jQuery Datepicker
I'm facing a weird issue with the jQuery datepicker. The datepicker works perfectly on my localhost; however when I put my files on the server - the datepicker loses styling when I shrink the browser to simulate mobile width. Here's my jQuery - $("#resumeBirthday").datepicker({ yearRange: "1930:2000", prevText: '<i class="fa fa-chevron-left"></i>', nextText: '<i class="fa fa-chevron-right"></i>', changeMonth: true, changeYear: true, dateFormat: "dd MM yy", maxDate: '0'
Problem with relationship between variables
Hi guys, I'm pretty sure this question has been asked before but I couldnt find anything even though I tried alot of different descriptions for my problem. So this is what I do. I have a js-File that basically looks like this abc = function(){ var initialStartTime = new Date(); return{ init: function(){ currentAgenda = ...//something from localStorage initialStartTime = new Date(currentAgenda[0].startTime) }, updateAgenda: function(){
Enable Disable
Hey, I am a newby in JQuerry. I want to disabled item1 when item 2 is null and nable it when it have a value. I use it if ( $( "#P1_NEW" ).length ) { $("#P1_NEW_3").attr('disabled','disabled'); }else{ ("#P1_NEW_3").attr('enable','enable'); } It work when Item2 is null--> item1 go disabled wehen item2 has a value--> Item is not Enable. Can you help me. Thank
How do I detect where in the webpage a user clicks?
There is a website I found (see: http://genius.com/web-annotator) that can tell where in a webpage the user has clicked. For instance, if you have a poem in your webpage: Now listen to what the good book says And it made good sense to me Talking about reaping what you're sowing And people trying to be free And you don't know what "good book" means, then you can click on it. and 'genius.com' knows that you've clicked on it (or highlighted it). How would you do this with Jquery? I could see using
Override svg icon data url color
Hi Sir, I wonder is it possible to override at some point the color of svg icon set in css data url format? I'm not looking for changing original CSS value. Can be dynamically or inline. I tried many options such as fill but can't get it to work. I think I am doing it wrongly or maybe it is not possible? When looked into jquery mobile css, one of the svg icon data uri is something like .ui-icon-action:after { background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20style%3D%22fill%3A%23FFFFFF%3B%22%20d%3D%22M9%2C5v3l5-4L9%2C0v3c0%2C0-5%2C0-5%2C7C6%2C5%2C9%2C5%2C9%2C5z%20M11%2C12H2V5h1l2-2H0v11h13V7l-2%2C2V12z%22%2F%3E%3C%2Fsvg%3E");
Autocomplete display v value
I have replaced a drop-down box on a form with a text field and added autocomplete. This works fine and when I post the form, the value is saved. However, with a drop-down box I can add a value which is returned by the post, rather than the displayed text. Is it possible to do this with the autocomplete? I know you can use an array of objects with label and value properties but this doesn't seem to work in the same way. Thanks.
Sortable not working in IE11
Hi there, i have a problem with a draggable table of mine. I want to be able to drag the <tr>s. Everything works fine on Chrome but IE11 gives me the error Object does not support the property or method "sortable" Basically the html looks like this <table class="standardTable" id="agendaPreviewTable"> <thead id="agendaPreviewHead">....</thead> <tbody id="agendaPreviewBody" class="ui-sortable"> <tr class="ui-sortable-handle" style="display: table-row;"></tr> <tr class="ui-sortable-handle"><td
Bootstrap modal open onClick or onLoad and it takes the user at the top of iFrame because due to .scrollTop() issue with Safari and IE
You can see, the problem is in line 34. from Plunker - http://plnkr.co/edit/xjnCWE?p=preview, The .scrollTop(), When not given any value, should return current scroll position. When the parameter is passed into the function, it will scroll to given pixel on the element. And it does, in any other browser. In safari, it passes 0 for some reason… Therefore it’s scrolling up to the top… I am not entirely sure how to solve this issue… Other than hack of course. Works perfectly on Chrome & Firefox BUT
Add class and atrribute when JQuery Validation return invalid result
I use Materialize CSS to make a form. In framework have the form validation, but because it can't detect incorrect validation so much. So I found JQuery Validation plugin. I think its good to integrate with Materialize CSS. In Materialize CSS have 2 HTML classes and 2 HTML attributes to tell validation which user input. When **correct**, Materialize CSS will add valid class at input field (<input>) to make a green `border-bottom` and add data-success="[valid-text]" attribute at input field label
Months not displaying round year on dropdown menu.
My issue is that the dropdown menu of the months is only displaying the remaining month of the year and not the whole 12 months. This is the code to initialize the calendar: initializeDatePicker:function(){ $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd' }); $(".datepicker").datepicker({ minDate: 0, maxDate: '+1y', beforeShowDay: function(date) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#arrDate").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat,
ajax sessions
Does jquery perform the ajax associated http / tcp session or is that passed to the browser to accomplish? Is it assumed that the ajax call closes the tcp session at the calls completion (I see an open for ajax but no close)? I ask because .... My jquery application is being used by a micro running my own web server. As of today, I limit the number of open sockets (tcp connections) to 3 for performance and resource concerns. When Chrome opens a page on my web server -- it automatically open 3 sockets
Div click doesn' work?
https://jsfiddle.net/jsfiddle135/sn06tuur/16/ ============ Explanation ============ //##### Question1 - HIDE $(".forgetc").css({'z-index', -5}); $(".forgetc").hide(); // This doesn't hide. function display(mode){ if(mode=='forget'){ //SHOW $(" .forgetc").css('z-index', 5).show(); //hide $(" .fmenu").css('z-index', -5).hide(); }//if return false; }//END<<<<<<,funciton display $("#forget").click(function(){ display('forget');
iframe not appearing in div in IE and Firefox. Works fine in Chrome
I am almost positive the issue is me! We are using Collegenet's online calendar service and in order to get their "spud code" which is actually an iframe, to appear in IE and Firefox, we needed the following code in our template: $(document).ready(function() { $(".navbar li a").click(function() { $(".dropdown-open").hide(); $('iframe').css('height','4000px'); }); }); The code appears fine in Chrome. I am attempting to use similar code on another template but am not have any success. Below is the
jquery with events
I have a table td with an attribute of 'btn' to identify the button when the click event occurs. The event object appears to be a javascript object and the only way I have been able to retreive the attribute value is with the following code: var zz = event.currentTarget.attributes.btn.nodeValue; Is the an easier way using jquery? Thanks. Joe
jQuery validate, how to include input field that is outside the <form> attribute
Hello, I am using the jQuery validate plugin (available here: https://jqueryvalidation.org/) and it is working as expected. Now i want to add another input field to the form, but it is outside the <form> tag. I am using the HTML 5 attribute "form" to indicate it is part of the existing more info here: <form> https://www.impressivewebs.com/html5-form-attribute/ example: <input type="text" class="form-control" name="x" form="originalForm"> Can anyone tell if it's possible, and how i can include those
Returning bool in ajax request
Hello All, I have a common ajax method like the one below, function callService(url, data, success, failure) { $.ajax({ url: requestUrl, method: "POST", contentType: "application/json; charset=utf-8", dataType: 'JSON', data: { model: JSON.stringify(model) }, success: successCall, error: failureCall }); Now somewhere else, I am using the above method function getTheData() { callService(url, data, newFunction, function (error)
How to capture browser close event in jquery smart wizard
Hi There, I'm new to jquery. Need inofrmation on smart wizard. We are using https://github.com/mstratman/jQuery-Smart-Wizard and would like to know how to capture browser close event ? Thanks in advance !
Change td to type button
I am dynamically building/modifying a table. I have been unable to change the td attributes such that a button is displayed instead of text data. I've tried multiple things to no avail. Can someone point out the proper method for jquery to accomplish this? Thanks. Joe
Acquire attr from selection
In the html file I have several lines similar to: <th class="col-PT" data-ro="yes" data-jhide="no">PT</th> I want to be able to extract the attributes data-ro and data-jhide with a script. In a function I have the following line of code: var $th = $('th'); I get the length of $th and it's correct and I look at $th with the debugger and it an array of 6 th elements. I perform the following: var aa = $th[0]; to get the first element of the array (actually performed within a for loop). My question
Next Page