Element left top positioning in javascript
Hi, I need to know the position of left and top of box inside the window. I got the output for whole window. I need exact position of box in the window.
How to follow a hyperlink in a div, and have page show in same div?
Hi all, quite a newbie here. Recently started converting my semi-dynamic php/html webpage to a full-blown dynamic ajax page. Currently have: $(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('#menu a, #name a, #contact_us a, #item a, #text a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.php #pagearea';
Out of my depth with autocomplete problem (Source: URL)
I am trying to build a simple autoComplete functionality for a website. This scary looking URL is my Web Service to query > https://primo-instant-apac.hosted.exlibrisgroup.com/solr/ac?&facet=off&fq=scope:()+AND+context:(B)&rows=10&wt=json&q=<Search Characters> The search string in the URL is 'q' i.e. if q=cancer, I get back this JSON: {"text":"cancer research","score":12.60096}, {"text":"cancer biology","score":12.593915}, etc. up to 10 results. So 'text' & 'score' hold my returned search results.Now
Shorten a piece of code.
Is there a way to shorten a piece of code like this. https://jsfiddle.net/j8w5qwta/218/ I was thinking if it would be possible to combine these two lines somehow: $("#page2").find("[data-blue] div").eq(2).addClass("ui-disabled"); $("#page2").find("[data-red] div").eq(2).addClass("ui-disabled"); Thanks in advance.
Swap dragged element during drag event.
Hello, at first I will describe my problem, so that everybody can understand it better and/or maybe someone can provide a much better solution for my main problem. Problem: I have a list of plain elements (items) within a sidebar panel, which I want to drag into a grid (gridstack). "gridstack" is working with jQuery UI internally. To be able to drag an item onto the grid from the outside, the item it must have a special elements structure and must be a draggable(). My sidebar items have a very different
Script from external file still firing even if the element is empty
I have 2 html files 1. main.html
2. external.html - contains script tag
external content will be loaded to main.html once a user click the button using jquery.load function Now my problem is if the user click twice the load button, the functions inside the external.html fires twice also even if i emptied the div element in main.html i tried empty()and html("")functions to clear out the content of the div but still no luck. this is my code http://plnkr.co/edit/XLZGquoebTTHahgJWNOk?p=preview
Cannot customize the error message
Hi, Using Jquery Validation plugin , I am trying to put a custom message but it doesn't work, It takes the default message "This field is required". Here is my Code: $(function() { $("#MainContainer").wrap("<form id='myForm'>"); $("#myForm").validate({ rules: { EmployeeName: "required" }, messages: { EmployeeName: "Please enter EmployeeName" }, }); });
Asynchronously load the contents of a div
I'm looking for a way to asynchronously load the contents of a whole div. I'd like to delay the loading of everything in the div. Right now, everything is loaded all at once and it's not bandwidth efficient. https://codepen.io/anon/pen/GENGJW
TypeError: scroll is not a function
Hello, I am trying to implement a support widget (Freshdesk) on my site: http://www.reservesinsight.com. It doesn’t work with my Wordpress theme and it seems to be connected with the way one-page scrolling has been implemented. Note: I get it to work in other themes when I switch to for example Twenty Fifteen etc. In the browser Development Console I can see the following error when I click on the Freshdesk widget (the grey Support tab to the left of my website): TypeError: scroll is not a function
go to Search WITHOUT VIEW ANY OTHER PHP GENERATED LISTVIEW GETTING Problematic FIRST SHOT
When enter App... live in real Device or in Ripple emulator if go to Search WITHOUT VIEW ANY OTHER PHP GENERATED LISTVIEW GETTING Problematic FIRST SHOT when go to another page with Listview all OK as second shot... when re-enter Search list view again AFTER VIEWED another list view Search List view is OK like lat two shots... well??? success: function(results) { if ( results[0] ) { var list = self.config.recent, items = []; self.createH2new(rec.data_polis); var i, len = results.length, row; //alert("len2");
How to detect which side a selectmenu will open at? (Solved)
I'm using selectmenu widget. And I'm setting the collision to "flip" because I want to flip the selectmenu to the opposite side when there is not enough space below the trigger. The code is like: $('#my-select').selectmenu({ position : { my: 'left top', at: 'left bottom', collision: 'flip' }, ...... }); And when the selectmenu is flipped to the opposite side, I need to apply a slightly different style on it to make it look well with the trigger. I checked the class names of the selectmenu
Using show of jqueryui make bad position?
hi, as yyou can see on my demo site nenez.cf aftre you log in with steamopenid in the seciton contacto, a show form appear but in the animation have like bad position ?
How to reset the position of draggable list items?
https://codepen.io/nemrod3/pen/wpEarj I tried to make a "reset" button in the above example but it doesn't work. List items aren't resetting correctly and they lose the "draggable" property too when you try to reset draggable Div elements to their original position you can use something like: $("#id").css({"left":"0px","top":"0px"}); but this trick doesn't seem to work with list items. Anyone has an idea how to fix this?
Can’t change div-Tag after load()-response
Hello alltogether I have a problem with my html-JQuery-Ajax project. I have an empty div-Container. <div class="form-group" id="UserDiv"> </div> In this div-Container with the id=“UserDiv” i will load a select field of users, which is generated by a php script. This is the jquery-Function of the call: function loadDiv(){ $("#UserDiv").load("../includes/UserProwalus.inc.php", function(response, status, xhr) { if(status=="success"){ alert(response); $("#UserDiv").html(response);
How to hang up events to points of Range Slider
Hello everyone! Using jQuery IU I made Range Slider and I need to send form data when points are changing values on slider line. Unfortunately whatever I hang up on these point nothing happenes. I seems like there is no points but they are. Can anyone help me with this? Thanks in advance!
Setting Enddate for Datepicker
Hey guys, I'm really new to this so please excuse me if this is too easy, I just integrated the Date picker with a start and end date. Now I want the end date to be set automatically to 7 Days after the StartDate, once that is selected. For now, it looks like this. Any help is appreciated!(excuse my English) $( function() { var dateFormat = "mm/dd/yy", from = $( "#from" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths:
trying migrate to jquery.mobile-1.4.5 a nested listview
I am trying this I have a nested listview[only first li tag is having nested ul tag]... jquery.mobile-1.3.2. and trying migrate to jquery.mobile-1.4.5 but BOTH LISTS SEEM IN RIPPLE EMULATOR - HOW hide the inner list....? <body> <div id="home0" data-add-back-btn="true" data-back-btn-text="Back" data-role="page" data-title="Polis Town Guide"> <div data-role="header" data-position="fixed" data-id="vs_header"> <h1>Polis Travel Guide</h1> </div><div data-role="ui-content" id="wrapper"></div>
jquery auto refresh mutiple divs at different intervals
I have tried the following for jquery auto refresh of multiple DIVs at different intervals for each div. But the refresh is happening only for first div and other DIVs are ignored. Can anyone help me for a solution? $(document).ready(function() { $(".div1").load("load1.php"); var refreshId = setInterval(function() { $(".div1").load("load1.php"); }, 8000); $(".div2").load("load2.php"); var refreshId2 = setInterval(function() { $(".div2").load("load2.php"); }, 9000); });
Using serialize to send value to querystring
Hi, I am trying to send value form a html Form by submit to the next page in query string. The values are submitted fine first time, but if I again try to add another value to already added values, I get %20 and %3D etc. in values retrieved. I am using asp to retrieve these values from query string and append to form fields with radio buttons. How to remove this encoding using serialize. The code is given below in form submit. $(document).ready(function(){ $("#form1").submit(function(event){
my first script for scrolling to bottom of text in textarea
Through my index.php the file scripts/LM_info.js is loaded. The file jquery-3.2.1.min.js resides in both the index.php location and the scripts-dir. It is intendend to scoll a textarea (<TEXTAREA name=\"LM_archive\" ...) to the bottom. The script: <script src="jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ var $textarea = $("LM_archive"); $textarea.scrollTop(99999); }); </script> //<script type="text/javascript"> //var textarea = document.getElementById("LM_archive");
Unable to retrieve table header values using jquery
Hi I am unable to retrive the content of my html table using the below jquery.Please help $("#save").click(function(){ var tbl = $('#timeTable tr').map(function() { return [$(this).find('td').map(function() { return $(this).html(); }).get()]; }).get(); console.log(tbl); });
append an element to a container, why this selector?
I am testing a js that allows adding texts to a container and then animates it through greensock. Looks like the creation of every new text is made through var txt = "Hello World!"; var ele = "#canvas"; var i = 8; var particle = $("<div />", {id:"particle"+i}).addClass("particle").text(txt).appendTo(ele) ; spawn(particle); // this function animates the just-created particle element (the text Hello World!) inside #canvas But, what is code in line 4 doing? Apparently it creates the new element, but
Selectmenu goes of the page, how to fix?
Hello. div.ui-selectmenu-menu goes of the page if Selectmenu is near the right edge of the window. Here is the demo with some fix that I've tried: https://jsfiddle.net/rh6gjkpt/ Here is the expected behaviour: Ie. I'm trying to align that div.ui-selectmenu-menu on the right edge of the Selectmenu. But for some reason I don't get expected behaviour first time when I open Selectmenu. When I close and open it againt, then it works.
Loader widget halfway down the page using fakeFixLoader jqm 1.4.5 Solved
On older phones, the loader widget shows, but is half way down the page off the screen, you have to scroll down to see it. It seems to calculate the screen position incorrectly. fix Add this to your "mobileinit" or (function($){..}(jQuery)) $.mobile.loader.prototype.fakeFixLoader = function() { var activeBtn = $("." + $.mobile.activeBtnClass ).first(), scrollTop = this.window.scrollTop() || $("html").scrollTop() || $("body").scrollTop(); this.element.css({top: $.support.scrollTop
Using both dpDate and dpCompare class
watermark is custom jquery applied to the input box. I finally resolved my issue. Ended up not using classes in my fields and instead added the rules to the validate call. Works like a champ. I've assigned both of the above as classes on the both of my datepickers, however only the dpDate validation works. Not certain what I've got wrong with this. Any assistance would be appreciated. Below are the versions I'm working with. jQuery Validation Plugin 1.9.0 DatePicker Validation 1.0.1 Jquery 1.7.1
We want to see the view source code file. (search.php) ?
Link : http://jqueryui.com/autocomplete/#multiple-remote
How do I add parameters to autocomplete call?
I currently use Autocomplete with Coldfusion to run a DB2 Stored procedure. The user starts to enter a part number and autocomplete returns a list of matching part numbers. This works fine but I now need to add a couple of parameters to the query and have no idea how to change the autocomplete call to achieve this. I will admit that while I think jQuery is brilliant but I find it all very confusing and don't understand it enough to go beyond very basic usage. Here's what I have now; In the page where
Manually click on all items of autocomplete result.
I am using autocomplete jquery. I type something in autocomplete textbox, it search more than one item by ajax call. I want to trigger manually click event on all items of result.
fill input from select not working
Hi ! I want to fill an input type=text from a selected value, there is no js error on the page but my code is not working, input keeps empty I have tried with name or id : same result thank you <script>jQuery(function ($) {$("select[name='selectGroupIds']").change(function() { $("input[name='jform[user_ids]']").eq($(this).index()).val(this.value); }).change(); }); </script> <input type="text" name="jform[user_ids]" id="jform_user_ids" value="" class="inputbox"> <select id="selectGroupIds"
error : jQuery ui.sortable prevent drop with connected list (with nested sortable lists) - jsfiddle included!
I'm getting the following javascript error when trying to use "beforeStop" function on a jquery .sortable list which contains nested sortable lists: "Uncaught TypeError: Cannot call method 'removeChild' of null" Based on other sites I've seen, it might be because my items actually have nested sortable lists under them...and when trying to cancel the sortable, it doesn't like the nested list. Aside from throwing the error, it still seems to work fine, but I'd still like to avoid the error. I've
jQuery autocomplete multiple _renderItem
I would like the suggestions that autocomplete gives me not only appear in the dropdown below the input field. So I want to show the current suggestions in two containers. $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.land ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.jurisdiction ); //$( "#project-id" ).val( ui.item.value ); $( "#project-description"
get value input inside append
hi everyone, i've some problem when using append I have no idea to call the value input and dataset in the append HTML <div class="row form-group"> <div class="col-md-12"> <select class="form-control category_id" name="jumlah" id="entity" required> <option value="1" selected="tr">---- 1 Data ---- </option> @for($i=2;$i<=10;$i++) <option value="{{$i}}">---- {{$i}} Data ---- </option>
Programmatically trigger resize event [Solved]
Hi. I'm working on a scheduler. I create div block on a mousedown event, then I call resizable() method on the block. The block transforms into a resizable block, and I can manually mousedown the ".ui-resizable-s" element to resize the block. Ok, cool. I want to merge this two mousedowns. I want to create the div, to resizable() it and I want to start to change its' proportions immediately. So, I expect the code looks like var block = $("<div/>"); block.resizable(); block.trigger("start"); but it
Javascirpt - remove rows dynamically after 2mins
i am calling a webapi using get method which will give json data and i am display as a table from that data. the code which i have given below is working fine. i got around 25 rows(dynamically" of data when i fit the service. this webpage will be refreshed using signalR. when any changes in DB immediately it should reflect in the webpage. my question is if "" + item.TakeupType + "" value is "Completed" or "cancelled" this row background should change to gray color and after 2mins row should be remove
Set Value Select Option data-
Hi Friends how to set value, searching by data-idperson here my fiddle: https://jsfiddle.net/jamiguel77/v7hz7a0w/ Any Advice? Thanks
Getting a button to target a particular set of items
Hello. I'm (trying) to build a simple flashcard page. The HTML is currently hardcoded with unique IDs. Using the following jquery with for loops I can successfully flip the individual cards, but the code I've written for the 'Toggle all items per section' button targets all the sections no matter which button I click. I've been struggling with this for a stupid amount of time and wonder if any one could point out my error. JS (function($) { // Toggle all items per section (THIS DOESN'T WORK) for
ajax json response from PHP not recognized
PHP server: $result = array(); //declare empty array $result['error']=''; $result['result']=1; $result['crud']='E'; echo json_encode($result); =================================== AJAX $.ajax( { url : "xxxx.php", method: "POST", data : value, dataType : "JSON", success: function(response, status, xhr) { var crudType = response.crud; var dataResult = response.result; if((crudType == 'E') && (dataResult
Clone page but vertical scrollbar appears momentarily on transition.
Hi, I have added a updated fiddle as although I can clone a page after the initial clone subsequent calls to clone the original page displays a vertical scroll bar on transition. https://jsfiddle.net/j8w5qwta/216/ Can anyone help? Thanks.
Using jquery to filter list
I've got a series of divs generated by a wp_query loop, each loop pulls through an individual post contained in a custom post type. Each div contains a few bits of information - yep this is on wordpress haha. So we have a page where all of these posts are listed and at the top of the page I have a few dropdown inputs. I'm trying to use jquery to update the list of divs to only display the ones that contain the information chosen in the dropdowns - ideally running each time the user changes an input.
Customize jQM close button on multiple selectmenu dialog
I am trying to change the close button on a jqm dialog to something other than X. The reason that I want to modify the icon is that the close button leaves the user confused as to whether his selection will be cleared or not (since it is a multiple select). I need to change it to a Done button. The selectmenu has data-native-menu = "false" and my jqm version is 1.4.2. I have tried changing the buttonMarkup on pagebeforeshow and on pageinit without success.
Next Page