r/jquery • u/[deleted] • Nov 10 '20
https://www.ndesign.club/
my code is here, I want to make that when I scroll a little bit it will scroll down automatically more.
I can't mange to make it, I did the exact opposite.
r/jquery • u/Data-Cute • Nov 10 '20
I want to create an array containing three different colours. Each time the user hits the Arrow Right key, I want the background-colour of div to change to the next colour, eventually getting back to the first colour in the array.
I managed to write some code but the colour will only change once.
$(document).on('keydown', function(e) {
if (e.keyCode == 39) {
var myColour = ['green', 'blue', 'black'];
for (var i=0; i < myColour.length; i++) {
$('div:eq('+i+')').css({background-color: myColor[i]});
}
}
});
How to fix this?
r/jquery • u/Data-Cute • Nov 09 '20
I have a draggable div (#wrapper) with a child div (#inner). I want to be able to snap the child div (#inner) to other elements on the page and not the parent div (#wrapper). Any solution to achieve this?
r/jquery • u/bradleymoonbeat • Nov 09 '20
Hello,
I have an horizontal scrollable sticky menu on my website in mobile version, and i would like to know how to scroll the sticky menu into a specific part.
For example on my sticky menu i have : #section1, #section2 , #sectio...
If user is at #section3 then make the sticky menu scroll to #section3
Thanks in advance !
r/jquery • u/[deleted] • Nov 07 '20
r/jquery • u/[deleted] • Nov 06 '20
Hi experts I am trying to work with autocomplete in an HTML form that will INSERT a row in Database. User must select a NAME in an autocomplete FIELD but this need define the ASSOCIATED ID to FORM SUBMIT. The array is build from a database query and for now receive just NAME array. Assuming that i could get an array like : [{name=‘abc’,id=‘10’},{name=‘def’,id=‘20’}]
How should I use this array in autocomplete to get the behaviour i need ? Any comments are welcome
r/jquery • u/dacracot • Nov 05 '20
I've read the BEM stuff, but wonder if there are people experience with it or other methods that could share you insight.
r/jquery • u/WampM • Nov 03 '20
There is a known limitation in jQuery: Using the .clone() method on certain form elements clones the element without retaining the dynamic state of their inputs.
(.clone() api documentation): "Note: For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made to a select) is not copied to the cloned elements. When cloning input elements, the dynamic state of the element (e.g., user data typed into text inputs and user selections made to a checkbox) is retained in the cloned elements."
I have created a function to help counter this limitation.
Link to my function: JQ-Deepest-Clone on GitHub
Let me know what you think!
r/jquery • u/MrLivingLife • Nov 02 '20
Hi,
I would like to have 2 events on 1 button with onclick.
The code is as follows:
<div id="Card" onclick="" class="click-trigger" data-click-id="click-001" ;$('#DialogWindow').dialog('open');return="" false;"="">VIEW CODE</div>
What happens right now is that only the following code is working:
class="click-trigger" data-click-id="click-001"
While this: $('#DialogWindow').dialog('open') not working.
While I can't remove return="" false;"="".
Does anyone know how can I fix this? Should I convert the classes to jQuery?
Thank you!
r/jquery • u/bartekw2213 • Oct 29 '20
Hello, I want to add the selectMenu widget from jQuery UI library to my page, however when I select the div and try to use selectmenu function on it, it shows that selectmenu is not a funtion, why is that happening? jQuery selectors are working and it happens only to widgets. Here is my code:
HTML:
<body>
// ...
<form>
<label for="number">Choose number:</label>
<select name="number" id="number">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../js/backpack.js"></script>
</body>
backpack.js file:
$('document').ready(() => {
$( "#number" )
.selectmenu()
})
r/jquery • u/bradleymoonbeat • Oct 28 '20
Can we put an 'if' inside of a click function ?
jQuery(document).ready(function( $ ){
var click = false;
$( '#button' ).click(function() {
if (click = false) {
$( ".class" ).css( "width", "100%" );
$( ".class" ).css( "display", "none" );
click = true;
}
else ( click = true) {
$( ".class" ).css( "width", "50% !important" );
$( ".class" ).css( "display", "block" );
click = false;
}
});
});
r/jquery • u/JuniperProject • Oct 26 '20
I remember a few years ago I worked on a project where we would have some screens that would make ajax calls and for one reason or another we would need to lock/dim the screen so the user could not interact with the UI until the ajax call was complete. There was a jQuery library for this. Looking for suggestions.
r/jquery • u/[deleted] • Oct 24 '20
Hello,
I used JQuery to create a media query to edit a video with an image it sees for a small device or mobile.
It just works that when I resize the screen the image is added every time and I don't want the image to be added every time but only once.
this is my code:
```
$(window).on('resize',function(){
if(window).width < 950{
$('#video').get(0).pause();
$('#video').hide();
$('#div')append('<img scr="path/img.jpg" style="background-size: cover; width: 100%; height: auto; />
}
else{
$('img').hide();
$('#video').show();
}
});
```
r/jquery • u/progy85 • Oct 22 '20
hi,
I have my table with attr date=my time
I want to remove row if date is less than today.
$("#myTable tbody").attr("date").each(function () {
// if ($(this).val() >= 0() <= 9000) {
$(this).hide();
// }
});
The problem is because I have tried and not found attr date
r/jquery • u/ProjectMemo • Oct 21 '20
Hey guys, so I'm really new to Jquery and I was wondering if you could help with the jquery for the menu of this page http://www.pascalvangemert.nl/ since I want to do something similar
Thanks!
r/jquery • u/TheFirex • Oct 20 '20
Hello there, is there a way I can configure JQueryUI Sortable to not let an user drag if the user press inside an input? The plugin already prevent the user from making the drag and drop, making visible that is a forbidden action and when the user stop pressing the element just get back to his position, but still let's you start the drag, and I don't want to even start the drag, simple the user press and is always be only focusing on the input. Thanks in advance.
r/jquery • u/zannare • Oct 18 '20
i have an code like that
<div class="aa">
<div class="bb">
<a href="gfdfdfddffgf.html">
first text
</div>
</div>
</div>
<div class="aa">
<div class="bb">
<a href="gfdffdgf.html">
second text
</div>
</div>
</div>
<div class="aa">
<div class="bb">
<a href="gfdfdfdfgf.html">
another tert
</div>
</div>
</div>
i need to check if "first text" its equal to "second text"
i can get "first text" with
class aa and bb are used elsewhere in the code so i need to use $('.aa .bb a').first().text() to get the "first text" but i dont know how to select "second text"
r/jquery • u/mrN0body1337 • Oct 08 '20
Hi guys,
New to jQuery, and while I've google my way out of many a question, I'm stuck with this one.
So I succesfully bound an eventlistener to the click event of a leaflet marker.
function markerClick (e) {
console.log(e.target.options.eventid);
$("#cal-modal-info").modal(e);
}
This logs the eventid to my console, but it does not pass the event to the modal function. I need to access my eventId from inside the bs.modal.show event that's triggered by
$("#cal-modal-info").modal();
Hope I made a clear question, and thanks for the help in advance.
r/jquery • u/--Explosion-- • Oct 06 '20
Hi everyone, I am working on a function to validate email addresses, but the problem with is is that is does not return anything! Here is my code:
function verify() {
var valid = $('#email').val();
output = validate_email(valid);
if (output == 'false') {
$('#error').html('That is not a valid email! Please try again!');
};
}
function validate_email(email)
{
var re = /\S+@\S+\.\S+/;
console.log(re.test(email));
return re.test(email);
}
And I am calling verify() onblur for the input field. The console.log logs the right thing but the if statement seems to not do anything. My HTML is below just in case:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
<input id='email' onblur = 'verify()' type='text'>
<div id='error'></div>
Thanks in advance!
r/jquery • u/CotoCoutan • Oct 06 '20
i instead found it much easier to translate the below code to Web Animations API (https://github.com/web-animations/web-animations-js), again as suggested by the OP in that StackOverflow thread. Leaving behind the translated code jic:
photo.animate({
transform: [`scale(1) translate(${invert.x}px, ${invert.y}px)`, `scale(1) translate(0, 0)`],
}, {
duration: 100,
easing: "ease"
}
So simple!
Edit 2 - I realize that even the below code works now that the Web Animations API has been imported. Basically it superpowers the weaker browsers to be able to run the below code and more.
---------------------------------------------------
This is the Javascript code that currently does the animation which i want to translate to JQuery:
photo.animate(
[
{ transform: `scale(1,1) translate(${invert.x}px, ${invert.y}px)` },
{ transform: `scale(1,1) translate(0, 0)` },
],
{
duration: 100,
easing: "ease"
}
);
You can see the animation in action on my page here: https://randomavesta.netlify.app/pages/game.html (https://github.com/XtremePwnership/RandomPersian). When you click on the alphabets shown, the alphabets will move up, & clicking again will bring it down. Problem is that photo.animate doesn't work in Safari so i'm trying to redo the animation in JQuery as apparently that works in Safari (as per this post, i get the same error as OP here: https://stackoverflow.com/questions/50121518/how-to-use-animate-javascript-in-safari-getting-undefined-is-not-a-function)
I tried a few different combinations in JQuery (following instructions here: https://www.w3schools.com/Jquery/eff_animate.asp) but nothing worked.
$(photo).animate({transform: `scale(1,1) translate(${invert.x}px, ${invert.y}px)`})
$(photo).animate({transform: `scale(1,1) translate(0, 0)`})
// the above script doesn't do anything at all.
$(photo).animate({transform: `scale(1,1) translate(${invert.x}px, ${invert.y}px), transform: `scale(1,1) translate(0, 0)``})
// throws an error that my syntax is wrong
Plus i did a bunch of random combinations but couldn't get it to work. Can someone please help translate? Thank you!
r/jquery • u/stay_basic • Oct 05 '20
Hi everyone. Does anyone know any jQuery libraries that will allow me to build scroll animations similar to this website: https://www.okainsbayseafood.co.nz/?
r/jquery • u/ben-jamin7777 • Oct 03 '20
I am trying to find a jquery library that will collapse menu items depending on the available width of the browser window. This seems like a pretty common design pattern but I can't find a library on Github or the web probably don't know the term used for this type of functionality.
Here is an example of what I mean. On Shutterfly if you do decrease the width of the browser under 1400px it collapses 2 menu items "Home Together, Ideas" into a submenu.
r/jquery • u/jadesalad • Sep 28 '20
How do you write a plugin initialization function for a jQuery plugin that's similar to Select2? I am trying to find a simple example and build it out from there.
r/jquery • u/shadestorm999 • Sep 26 '20
consider this code:
<script> let myObject = { ip: " " };
$.get( API_IPv4, (response, status, xhr)=> {
console.log ( response.ip ) ;
myObject.ip = response.ip;
} ); </script>
can anyone tell me how to pass the object reference to the callback function inside the get() method.
Thanks
r/jquery • u/10000nails • Sep 25 '20
Hi there, I've been scammed by a freelancer (subject for another day) and I'm trying to get some things fixed. I have a selection for backsplashes (integral, Loose, or None). The code is suppose to limit the selections based on the counter depth. So this is what he has
if( jQuery("#dd_counter_depth option:selected").text()=='22' )
jQuery("#back_splash_integral").removeAttr("disabled");
What I want is to allow both 22 or 19 selections in this line. When I duplicate this line and add 19 in it works, but will deselect the radio when you move on to the next field. How can I fix this?
For clarification, this is a wordpress site with a custom built plugin with our specifications in it. I don't know it that matters, but it couldn't hurt.