Having Issue on Snapping Divs to the Top of Page On Scroll
Demo I am trying to snap each div .item to the top of page on scroll when the top of the div reaches in an specific portion of page. right now this is working on div one but stuck there $(document).ready(function() { var windowHeight = $(window).height(), gridTop = windowHeight * .3, gridBottom = windowHeight * .6; $(window).on('scroll', function() { $('.item').each(function() { var thisTop = $(this).offset().top - $(window).scrollTop(); if ((thisTop >= gridTop) && (thisTop <= gridBottom)) { console.log($(this).data('page'));
set value of 2nd Select based on 1st select when both select are in same column : When rows are added dynamically
Dear Sir I have 2 "select" or dropdown in a column based on change of 1st select , I want to set value of 2nd Select or Dropdown refer : http://jsfiddle.net/Prajaktasoftware/n2jhdx4k/46/ ----------------------------------------------------------------------------------------------- in Jquery following staement $(document).on("change","select",function() helps me to get id of 1st " select" statement But I do not know how to set value for the second select -----------------------------------------------------------------------------------------------------
Error in JQuery core
Hello, I am new to JQuery and I downloaded a JQuery core file. When I loaded it into DreamWeaver it told me there is an error in the code. I am hoping you guys can quickly tell me how to fix it! DreamWeaver says that there is a syntax error on the line that says " .catch(function(error){ " Any Ideas? Thank you! jQuery.fn.ready = function( fn ) { readyList .then( fn ) // Wrap jQuery.readyException in a function so that the lookup // happens at the time of error handling instead of callback //
Need to modify jQuery file?
Hello My Web page uses jQuery to show the following lightbox pop-ups: It uses the following scripts: <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script type="text/javascript" src="../src/jquery.flashy.min.js"></script> <script type="text/javascript" src="../src/jquery.flashy.js"></script> <script type="text/javascript" src="assets/js/main.js"></script>How would I begin
scrollTop is not working in iOS mobile
scrollTop is not working in iOS mobile(safari), I have used "var scrollOwnTop = $('body').scrollTop();", getting 75 and 0 if "var scrollOwnTop = $(html).scrollTop();". How will I get the scrollTop value?
Returning page in initial state
I have a button "show form" and hidden form, when i click on a button form appears, after i filled the form i send info in alert. How can i return page at initial state(like just having only one button). Also would be great to hear some tips what can i do better script looks like this $(document).ready(function () { $("#form").hide(); $("#showForm").click(function () { $("#form").show(); $("#showForm").hide(); }); $("#alertButton").click(function () { var name = $("#name").val(); var bday = $("#bday").val();
Autocomplete: Input-Field stays focused after selection
Hi there, this is my first post and I hope you can help me solving a probleme i'm looking at for days now: I do use Autocomplete with jqueryui for searching a json-file on an interactive map. By selection a value, the infowindow for a point shows up. Everything works fine, but one thing: After clicking or touching a list-point, the infowindow shows up but the input field stays focused. Mobile that leads to the problem, that the keyboard stays open and overflows the infowindow. This is part of my
Jquery-UI Spinner. Custom HTML
Hello! I have jquery-ui spinner like this: https://codepen.io/emdm/pen/ZVwOaQ But i want spinner like this (input field is between the buttons): https://www.cssscript.com/wp-content/uploads/2016/10/Animated-Input-Spinner.png?w=331 How can i do?
Autocomplete list passed in from HTML input tag not showing
I am using the followng default autocomplete code passing in a variable that consists of a list of XML filenames, but the list is not showing up in the autocomplete box. The jquery code is also interpreting the variable as a literal instead of the values which are the XML filenames. Can you suggest fixes for both ot the issues?: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete -
I add elements in div with value of input on keypress enter and I want to delete that value by click and here is the problem
here is my code:https://jsfiddle.net/Masoud0X0/d09xkb51/3/ Thanks
Forced to edit link instead of going to link in editable table cell
I have the following code which allows me to edit a cell, but the problem is that when I want to click on the link, it forces me to edit instead. I want to be able to edit only when I click on the pen icon, but I can't seem to figure out how to do it. HTML <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <table border="1" style="width:100px" style="height:99px" style="margin:0 auto"> <tbody> <tr> <td ><div class="row_data" edit_type="click"
Spectrum color picker
Hi, I am using Spectrum color picker plugin from @bgrins in a dialog I create on the fly. My issue is I cannot detect the Spectrum mouse out event when color picker is open. Any idea how to detect mouse out event when color picker is open ?
Delay variable-assigned functions from running till other function done
I have a number of stacks on a page w/ their respective functions. I need to run my stack before the others, or put another way, pause the others till my stack is finished. If this is an example of a variable assigned to a function for another stack that I want to pause. stacks.com_company_product1 = (function() { ... other stack function }); I tried using $.holdReady() to stop all other functions and then release it, but didn't really work. Is there a way to pause those stacks, using their variable,
How to replace native validation with custom validation
I'm already up and running with a custom validation rule, but something odd is going on. First I'll show my code. Here's my input element: <table> <tr> <td class="colLeft"> <label asp-for="Email" class="control-label"></label> <input asp-for="Email" class="form-control" /> </td> <td class="colRight"> <span asp-validation-for="Email" class="text-danger Email"></span> </td> </tr> And
Show only custom dates for DatePicker
I have a datepicker and trying to configure setDate to take in custom dates that i have set. The dates are coming from a database and only these dates should be displayed with the rest disabled. How could i disable all dates except for the ones i have set?
Issues with JQuery Validation - Returning False. (JQuery Steps)
I've found a jQuery-step validation script. When I run the application the validation returns false in onStepChanging (form.valid()). I can't change the step, why?
Why was the global flag disabled for cross domain script type $.ajax requests in older versions of jQuery
I'm using jQuery 1.12 and I noticed my global ajax event handlers (`ajaxSend`, `ajaxStart`, etc) weren't running for `$.ajax` requests with `dataType="script"` and `crossDomain=true`. After some investigation I found that in 1.12, jQuery always disabled the global flag on the request if it the dataType is script and it's cross domain! What was the reason for this behavior? Why was it originally added and why was it later removed? Relevant information: From what I can tell, the behavior was originally
Sortable: start event occurs without matching stop event preventing cursor style from changing back to default
A user reported that after trying to sort a table (that uses the sortable plugin) the cursor remained as the move cursor. When I repeated the issue I noticed that a start event occurred but not a stop event so the style tag that is added to the body wasn't removed. This code shows how the sortable is set up. Sorry I don't have a codepen or similar to show the issue. We are using jQuery v1.11.4. I tried the latest version but the issue persisted. Is there anything wrong with my setup or is this
Create dialog windows using popup widget
I am creating dialog windows in many projects using the popup widget. The problem is that I need to define a lot of code that I think is not necessary. 1. I define configuration and open the popup when an button is clicked 2. In the popup configuration I define click events for the buttons 3. For each button I have to define code to remove click events for all buttons in the window 4. Each button also has code to close the popup Is this a normal way of creating dialogues on jQuery Mobile? HTML:
datepicker not working for dynamically created row/column
Dear Sir Pls referhttp://jsfiddle.net/Prajaktasoftware/o2fbtvwz/53/ data picker is working only for 1st row and NOT WORKING for row created by "AddRow" pls help
Expander content div does not scroll to the top of the page when clicked
I have a simple 'tab' effect jQuery slideToggle, where the user clicks a heading .expander-headingand the next() div .expander-content, expands. I am sadly having some trouble offsetting/scrolling to the top of this .expander-content div on click, however. $(".expander-heading").click(function () { $header = $(this); //getting the next element $content = $header.next(); //open up or close $content.slideToggle(325); $(".site-container").animate({ scrollTop: $content.offset().top }, "fast"); }); With
Small help : total cost (column total) for dynamically added row
Dear All pls refer http://jsfiddle.net/5buwgq0k/42/ I want to sum cost 1+cost2 and and display in field Total cost Test Group Test Name Ref.Val Unit Qty Rate Cost Qty x Rate Please SelectTestGroup 1TestGroup 2 TestGroup 3 Please SelectBPSugarUrine routine ref 001 unit 001 Please SelectTestGroup 1TestGroup 2 TestGroup 3 Please SelectBPSugarUrine routine ref 001 unit 001 Add Row when i add row i need to know number of rows
If input pattern matches, copy to another field
All employees of our company have EIDs that are also associated with our work email addresses. For example, our employee ID might be abc123, so our email address is abc123@acme.com. For one of our online forms asking for EID and email, it would be helpful if, when the input matches the pattern of the EID, to populate the EID field as well. For example, let's say an employee enters the following for email: john.doe@gmail.com Nothing would populate into the EID field. Now, let's say the employee
Code to highlight selected area with CSS
Hello and happy 2019 What I want to achieve is to make "select to inspect" type of functionality, just like the browsers have. It should only have the functionality of creating a temporary element that will be overlayed over the element that my mouse is hovering on. I have created a screencast to show you what it should be like, and what I currently have. Link to video on google drive This is my code written with jQuery It creates a DIV on the page and then, on mousemove event, I set its values
Not working in IE11 although doing in Edge
The following code in Edge work successfully to give "done" message but it in IE11 to give "fail". Hey guys, please show me the way to work it in IE11. <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <script> $(document).ready(function(){ $("button").click(function(){ $.ajaxSetup({ cache: false}); $.get("load_test.txt", function(data, status){
changing saturation
Hi there, I have a page where the viewer can change the background of the window--(actually a div, #bigbg, above the html background)--by removing and adding a class, eg, .gradblk {background: linear-gradient(#000000, #36393C, #909396); background-attachment:fixed; } with function showBg(grad) { $('#bigbg').removeClass().addClass(grad); } There's a choice of six colour gradients. The viewer also has the option of varying the opacity of the new background with a choice of five levels: function opBg(n)
I can't drag image to out area carousel of bootstrap.
I use carousel of bootstrap and drag of jquery ui, I can't drag element out area of carousel. Plz help me! Thanks Link below. https://tipskailler.com/retrict/
jQuery Datepicker use within google sheets
I am having trouble using the jQuery datepicker within google sheets. My goal is to use the datepicker to return a selected date within a cell and I am having issues returning the date selected in the prompt to a specified cell.
jquery - moving from 1.10.2 to 3.3.1
i had a page that used jquery min v1.10.2. as the page could sometimes that a little while to fully load (pulling records from a database), i set a simple loader screen that sat on top until the page had loaded then disappeared to show the results below - worked very well. $(window).load(function() { // Animate loader off screen $(".se-pre-con").fadeOut("slow");; }); with this inside the content div <div class="se-pre-con"></div> i've moved the page over to using jquery min 3.3.1 and now the loader
What is a stable (updated and maintained version) photo viewer I can use for an eCommerce website?
Hi all :) I was looking at a variety of different photo viewers like elevateZoom, greasy fork, jQuery Remooz among many others. I couldn't find any with my specific requirements. I'm looking for a splice between these two: https://www.rubylane.com/item/260004-2751/Antique-Metal-Dresser-Box78-Casket-Cupid http://igorlino.github.io/elevatezoom-plus/examples.htm (scroll right down to "Mousewheel zoom" and "Image Constrain" for the thumbnails and mousewheel zoom) The interface is a lot prettier, more
jQuery.fx is undefined
I'm trying to add jQuery UI to a project, but I get jQuery.fx is undefined in jquery-ui.js I downloaded all elements so everything should be in place. code: <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script src="/script/jqueryui/jquery-ui.js" type="text/javascript" crossorigin="anonymous"></script> any ideas? -------------- Just so we're clear - you need a hero?
create tooltip for dynamic generated html table columns
im generating dynamic html table with with rows and column via inline code Need to give tool tips to the columns . can anyone share an example either in jquery or by any jquery plugins
How to query a JSON API and display in html
Beforehand I have zero knowledge of JS or JSQuery only HTML and CSS. I am trying to query this API: https://api.mcsrvstat.us/1/mc.cavernhcf.us and then display it as HTML for a server I am making the thing is I don't know how to do it any help would be great. -Tom
Toggle Beginner question
Hey, I have a toggle beginner question: I ve already found toggle examples like these: $('.opener').click(function() { $('.sub-menu').slideToggle('fast'); return false; }); but these only work with fake links (#) like: <ul> <li><a href="#" class="opener">Open </a></li> <ul class="submenu"> <li>hidden item 1</li> <li>hidden item 2</li> <li>hidden item 3</li> </ul> </ul> if I insert a real link like "https://mydomain/example.html" this stops working <ul> <li><a href="https://mydomain/example.html"
Make edit icon stay after clicking it to edit
I want to be able to edit a table cell using an edit icon and when I click on it, I want the icon to stay and the focus to be on the textbox. I can't seem to get it with the following code: // The two columns with edit icon tbl +='<td ><div class="row_data" edit_type="click" col_name="datamapname"><i class="fa fa-pencil"></i>'+val['datamapname']+'</div></td>'; tbl +='<td ><div class="row_data" edit_type="click" col_name="description"><i class="fa fa-pencil"></i>'+val['description']+'</div></td>';
Target image with substring in source
I am trying to target an image that has a specific substring, Ex: {{name-1-field}} in it's src. I'll be updating the src. So if I have this: <img src="../resources/{{name-1-field}}"> I tried a general search function to target the wrapping element: $('*:contains("{{name-1-field}}"):last'); But I guess that only works for text nodes? I'm not sure what would be the best way. Also, is there a quick way to check the type of the wrapping element? Ie. to make sure it's an image.
JQuery method not firing?
Hello all: In my JQuery method on a Modal dialog form, the first thing I am trying to do is check to see if required fields are filled out before an AJAX call is made: if ($('#FirstName').val() !== "") { $("#FirstNameHelp").text(""); } else { theError = 1; alert('First Name Blank'); $("#FirstName").text("Please enter your first name."); return; } if ($('#LastName').val() !== "") { $("#LastNameHelp").text(""); } else { $("#LastNameHelp").text("Please
Help
Hi all, This is my site nav HTML code --------------- which is included in header.php <section class="main-menu" id="menu"> <nav class="desktop-menu"> <ul> <li class="font-icon"><a href="index.php" class="home">Home</a></li> <li class="font-icon"><a href="blog.php"class="blog blog-mr">Blog</a></li> <li class="font-icon"><a href="contact.php"class="contact">Contact</a></li> </ul> </nav>
Jquery with Owl Carousel
I am trying to rotate images so added Owl Carousel (i believe the latest version), 2 files after downloading found under the assets folder owl.carousel.js owl.carousel.min.js Opening the first file i see /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ /** * Owl carousel * @version 2.3.4 * @author Bartosz Wojciechowski * @author David Deutsch * @license The MIT License (MIT)
Using jQuery Validation Plugin to validate then hide email field without submitting form yet
For a two-part form, where the first div shows just the email address and the second div, initially hidden, shows the rest of the fields, is it wise to use the jQuery Validation Plugin validator.element() https://jqueryvalidation.org/Validator.element/ to validate for the email address before hiding that and showing the remaining form fields? For example, can this be done without a form submitHandler following? $("#emailDisplay").validate({ rules: { emailAddress: {
Next Page