Search the Community
Showing results for tags 'jquery'.
-
Delete this before posting. Please make sure to include the language that you're using in the title, and use the <> button for any code. Creating a jQuery table. Want to add a class to the rows that are created but I want to use the data: portion of the request. In "columnDefs": [ adding {"data": "ID"} to "className": doesn't work as jQuery just places and object in there where instead I was hoping it will automaticall place in the correct data in sequence. I can easily place in other hardcoded ID's and classes but nothing dynamically that I assumed jQuery would do on it's on. How can I add ID's or classes to the same rows that jQuery already places automatically via the data section?
-
Run into a problem where I need a function that is outside the document.ready to call a function that is inside it. $(document).ready(function () { function ExampleDoStuff(var message){ alert(message); } }); function CalledExternally(){ ExampleDoStuff("Do Stuff"); } Ideally I'd have everything inside the ready script but I need the other function to be called by a different JS file, that also exists on the browser page, I couldn't call it if it was inside the scope of ready but could if it was outside. I can think of two fixes: How can I place CalledExternally inside the ready and for it to be easily called by different JS files without the files explicitly referencing THIS file? If not, how can I get the code above to work. Online says to make the ready an class, doesn't work so I guess I keep doing it wrong?
-
Got a simple field <label for="comment">Text here</label> <textarea class="form-control" rows="2" id="comment" name="ID1"></textarea> and I want to get label text. I can easily get the field value with elementByID as well as jQuery .val() but no luck getting to the label and the text that is in there. In theory should be pretty simple, I've gotta be forgetting something.
-
Delete this before posting. Please make sure to include the language that you're using in the title, and use the <> button for any code. I have a modular table, its size depending on the array that makes it. Its ID would look something like "AA[0][1][A]" Haven't found anything that I can pinpoint at but it seems like jQuery doesn't like arrayed ID's. My normal ID's work when jQuering like alert($("#I001").val()); but the moment try to do it in the form of my array ID it's a dud. I've tried alert($("#AA[0][1][A]").val()); As well as var IDValue = "AA[0][1][A]"; alert($("#" + IDValue).val()); And still nothing. Everything always comes back as "undefined." Feels like an amateurish mistake but it's hooked me and I can't let go. I need to know why my jQuery isn't working, well the array ID at least, normal ID is fine.
-
To keep code simple and scalable, I'm hoping there's a way to list multiple classes inside jQuery events. I've got 3 inputs I want to have code listen to. I've tried: $('.table_1','.table_2','.table_3').on('focusout', function () { // alert("multi on focusout"); }); and $('.table_1 .table_2 .table_3').on('focusout', function () { // alert("multi on focusout"); }); I feel like I'm close and this is the way it's meant to work in functionality, I just don't have the proper identifiers to let jQuery know I'm listing multiple classes into one event. What is the correct way of identifying this?
-
Hi, I'm trying to create a function that navigation links for each new post that is made to a website that i'm creating. I'm having trouble applying the correct href as well as a name to each individual navigation link. This is a short-hand version of the HTML used. <div class="post-container" id="001"> <table class="post-title"> <tr> <th>POST 001: Name</th> </tr> </table> </div> <div class="post-container" id="002"> <table class="post-title"> <tr> <th>POST 002: Name</th> </tr> </table> </div> and the Jquery function function postchecker(){ post = $(".post-container"); $(post).each(function(){ id = "#" + $(this).attr("id"); name = $(this).find(".post-title th").text(); $(".nav-post-wrapper").append('<a class="nav-link" href=""><span></span></a>'); >> Apply the variable "id" as href to the appended element .nav-post-wrapper >> Insert the variable "name" into the span inside the .nav-post-wrapper }); }; How exactly would i go about applying the id and name as described in the code? Can i insert variables directly in to the append() somehow? The appended elements should look like this in the HTML. <a class="nav-link" href="#001"><span>Post 001: Name</span></a> <a class="nav-link" href="#002"><span>Post 002: Name</span></a> etc. EDIT: managed to find a solution, set the append as a variable with id and name like this. function postchecker(){ post = $(".post-container"); $(post).each(function(){ id = "#" + $(this).attr("id"); name = $(this).find(".post-title th").text(); navlink = '<a class="nav-link" href="'+id+'"><span>'+name+'</span></a>' $(".nav-post-wrapper").append(navlink); }); };
-
Hi, I have stumbled across a wierd issue with my code. I'm trying to offset and slider left and right when i click another element and for some reason, the jquery calculations return inaccurate values. I've created a small example of what happens in this pen. The end result is that the slider moves slightly less than it should which causes issues with other functions that use the values. https://codepen.io/niklas-bagge/pen/bGoJRNK?editors=1111 Am i crazy or should the console not return exactly 5? (now returning 5.000932713641037) I'm sure I've missed something really silly, help is much appreciated. EDIT: I might have come up with a dirty solution that uses math.round() to correct the jquery output to match the css. Needs to be tested first though. Did not work as values no longer represent the true css values. EDIT2: It appears the viewport value 2vw is being incorrectly calculated in css, very strange.
-
Hi! I'm trying to make my current function better. Short explanation is: When the user clicks a button, i change multiple img sources by using the function below. Instead of this i would like to have a function that looks at each img source, deletes ".png", adds "w" and then adds ".png" again. I've tried to find each functions that do this but i've have not yet managed to get it to work. .color-toggle is the button .active-color is a class that adds a highlight to the clicked button. There are two buttons, one that swaps images to a lighter version and one that swaps them to a darker version, essentially these buttons toggle each other. Glad for any help i can get! $(".color-toggle").click(function(){ $(".color-toggle").removeClass("active-color"), $(this).addClass("active-color"); if ($(this).text() == "LIGHT") { $(this).parent().parent().find(".img-carousel img:nth-child(2)").attr("src", "assets/images/luna-1w.png"), $(this).parent().parent().find(".img-carousel img:nth-child(3)").attr("src", "assets/images/luna-2w.png"), $(this).parent().parent().find(".img-carousel img:nth-child(4)").attr("src", "assets/images/luna-3w.png"), $(this).parent().parent().find(".img-carousel img:nth-child(5)").attr("src", "assets/images/luna-4w.png"), $(this).parent().parent().find(".img-carousel img:nth-child(6)").attr("src", "assets/images/luna-5w.png"); } else if ($(this).text() == "DARK") { $(this).parent().parent().find(".img-carousel img:nth-child(2)").attr("src", "assets/images/luna-1b.png"), $(this).parent().parent().find(".img-carousel img:nth-child(3)").attr("src", "assets/images/luna-2b.png"), $(this).parent().parent().find(".img-carousel img:nth-child(4)").attr("src", "assets/images/luna-3b.png"), $(this).parent().parent().find(".img-carousel img:nth-child(5)").attr("src", "assets/images/luna-4b.png"), $(this).parent().parent().find(".img-carousel img:nth-child(6)").attr("src", "assets/images/luna-5b.png"); } });
-
Hi Team I have a magic mirror install, with a calendar module installed The problem is the module doesn't have overflow functionality (if there are too many events for a day it just puts a +1 or +2 etc at the bottom of the list I looked at the support for it and the dev doesnt want to add any scrolling features as its too much for a raspberry pi to handle (apparently) and even those of us who dont use it on a pi (myself) he wont support Iv been looking into the code and so far have been able to use css to detect which divs have overflowed events, and put a scroll tag on that div What im trying to figure out now is how to animate those divs Iv looked as css animations and jquery animations, but this is where im stuck trying to figure out A) how to get the divs with the scroll tag to animate (as it changes when more events are added or removed_ B) How to control the speed based on the number of events hidden C) how to loop the animation so it goes back to the start and repeat when it gets to the end Is anyone willing to give me some help or at least point to some online documents which would help? many thanks in advance
-
- javascript
- jquery
-
(and 2 more)
Tagged with:
-
My end goal is to get the html code of a website and modify it in some way to suit my needs. I can't however for the life of me, get the html. Here is my code so far. Note, that I am using JQuery. index.html <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="EditHtml.js" type="text/javascript"></script> </head> <body> <p>Placeholder Text</p> </body> </html> EditHtml.js $(document).ready(function () { $.ajax({ url: 'my-link', type: 'GET', success: function(data) { $(document).html(data); } }) .done(function() { alert( "success" ); }) .fail(function() { alert( "error" ); }) .always(function() { alert( "complete" ); });; }); The alert is always "error" and then "complete". I tried multiple urls and nothing worked.
-
So, I have this contact form in the website I'm making, I'm using a template I found online that uses ajax to validate that the form is working and the email has been sent, the problem is that this file that validates the form is set to work with PHP I think, so I tried modifying the file that has ajax to make it work with my node app, but I end up with the form loading forever and I get Failed to load resource: net::ERR_EMPTY_RESPONSE in the console. note: the form is working and all and the email gets sent but I just need an indication to the user that it worked. here's the code: validate.js: $.ajax({ method: "POST", url: "/home", data: str, success: function(msg) { if (msg == 'OK') { this_form.find('.loading').slideUp(); this_form.find('.sent-message').slideDown(); this_form.find("input:not(input[type=submit]), textarea").val(''); } else { this_form.find('.loading').slideUp(); this_form.find('.error-message').slideDown().html(msg); } } }) index.js: const express = require("express"), router = express.Router(), nodemailer = require("nodemailer"), mailGun = require("nodemailer-mailgun-transport"); router.get("/home", (req, res) => { res.render("index"); }); router.post("/home", (req, res) => { let { firstName, lastName, email, website, company, message } = req.body; console.log("Data: ", req.body); let mailOptions = { from: email, to: "myemail@email.com", subject: "No Subject", html: "<h3>First Name: " + firstName + "</h3>" + "<h3>Last Name: " + lastName + "</h3>" + "<h3>Email: " + email + "</h3>" + "<h3>Company: " + company + "</h3>" + "<h3>Website: " + website + "</h3>" + "<h3>Message: " + message + "</h3>" } smtpTransport.sendMail(mailOptions, (error, response) => { if (error) { console.log(error) } else { console.log("Successfully sent email.") } }) }); Thanks in advance
-
Hi, i'm having trouble with an animation not working properly on my live site vs when i preview it locally. The video shows how the live website previews vs the local. The second version is the correct one. I'm not sure how to fix it. JQUERY var h = $(window).height(); $(".menu").click(function() { if ( $(".top_banner").height() != h) $(".top_banner").addClass("expanded_banner"), $(".line_top, .line_bot").addClass("marginleft"), $(".line_mid").css("transform", "rotate(45deg)"), $(".line_mid_2").css("transform", "rotate(-45deg)"); else $(".top_banner").removeClass("expanded_banner"), $(".line_top, .line_bot").removeClass("marginleft"), $(".line_mid").css("transform", "rotate(0deg)"), $(".line_mid_2").css("transform", "rotate(0deg)"); }); <div class="top_banner"> <div class="top_bar"> <button class="menu"> <div class="line_container"> <div class="line line_top"></div> <div class="line line_mid"></div> <div class="line line_mid_2"></div> <div class="line line_bot"></div> </div> //more stuff below .line_container { position: relative; height: calc(0.4 * 80px); width: calc(0.5 * 80px); margin: 30% 25%; } .line { position: relative; height: 2px; width: 40px; background: white; transition: all 0.5s ease-in-out; } .marginleft { margin-left: calc(0.25 * 80px); width: 0; transition: all 0.5s ease-in-out; } .line_top {margin-top: 0;} .line_mid , .line_bot {margin-top: calc(16px - 3px);} .line_mid_2 {margin-top: -2px;}
-
Hi all, Just wondering would anyone know how to scrape the goal and currently raised of a GoFundMe page? Either with php or JQuery? Thanks.
-
When I try to execute the code I want run, tampermonkey can't do it. Through the developer console I can. I tried an alert and it works, but anything else doesn't work. I tried using $('some element').length == 0 {} and it works on developer console but not through a user script.
- 9 replies
-
- javascript
- jquery
-
(and 1 more)
Tagged with:
-
So I'm creating this local password vault, and when you have gone thru the signin and decryption I want it to display the stuff, but the password is ******* until you press the title of it. So here I want the "hide" to move to the ******* when <a>A title</a> is pressed and visa versa, tho I have no clue on how to do that. I have a script that changes what it shows based on a <options> value and I were not able to re create it for this <div class="col-lg-4"> <div class="ibox"> <div class="ibox-content text-center float-e-margins"> <a>A title</a> <p class="form-control">*********</p> <p class="form-control hide" id="copytext">Password</p> <div class="text-center"> <button class="btn btn-xs btn-primary" data-clipboard-target="#copytext"><i class="fa fa-clipboard"></i> Copy </button> </div> </div> </div> </div>
-
So I'm really not good at front end, but I would like to create a nice page where I upload files with no page updates. (I have already done this with deleting files in a table). So my issue is that I think laravel is not getting any data at all. The form code is really long so I shortened it down to the inputs and selects as thats whats important (this form worked as is before this ajax so it's nothing wrong with it) I have removed urls but they do work. <form action="/" method="post" enctype="multipart/form-data" id="file-upload"> <input type="hidden" name="_token" value="csrftokengoeshere"> <input type="file" name="file" id="file-select"> <select id="categoryselector" class="form-control m-b div-toggle" name="iscategory" data-target="#categorys"> <option selected="" value="false">No</option> <option value="true" data-show="#program">Yes</option> </select> <input placeholder="Program name" name="name" class="typeahead_1 form-control"> <input placeholder="version" name="version" class="form-control"> <select id="scan" class="form-control m-b" name="scan"> <option selected="" value="false">No</option> <option value="true">Yes</option> </select> <button class="btn btn-white btn-block" id="upload-button">Upload</button> </form> $('#file-upload').submit(function(e) { e.preventDefault(); var $form = $(this); $form.find('input, select, button, textarea'); var serializedData = $form.serialize(); $.ajax({ url: '/', type: 'POST', data: $form, processData: false, contentType: false, success: function( msg ) { if ( msg.status === 'success' ) { Snackbar.show({ text: msg.msg, pos: 'top-right' }); } else { Snackbar.show({ text: 'Oops.. ' + msg.msg, textColor: '#ff0000', pos: 'top-right' }); } }, }); return false; }); Currently laravel says token mismatch, in chrome I see that request payload is [object Object] What do I do to fix this?
-
Hi there, I am working on a project that requires files been uploaded to an S3 server and I ran into a problem with the Post request. My upload script works perfectly using the following AJax code: var form = new FormData(); let msg = $("#msg").val(); form.append('file', file); form.append('msg', msg); form.append('size', file.size); $.ajax({ url: 'upload.php', // point to server-side PHP script dataType: 'text', // what to expect back from the PHP script, if anything cache: false, contentType: false, processData: false, data: form, type: 'post', success: function(php_script_response){ alert(php_script_response); // display response from the PHP script, if any } }); However this is not the code I want to use as I have a progress bar linked to my other method that I want to use. Here is the code I am trying to use, it is calling my upload script but no FormData is been passed through at all. var form = new FormData(); let msg = $("#msg").val(); form.append('file', file); form.append('msg', msg); form.append('size', file.size); $(".uploader__share").addClass("hidden"); $(".uploader__progress").removeClass("hidden"); $("#msg").prop("readonly", true); const xhr = new XMLHttpRequest(); xhr.open("POST", 'upload.php', true); xhr.upload.addEventListener("progress", e => { const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0; $(".progress-bar").width(percent.toFixed(5) + "%"); }); xhr.setRequestHeader("Content-Type", "text/plain"); xhr.send(form); I've also tried setting the "setRequestHeader" to: xhr.setRequestHeader("Content-Type", "multipart/form-data"); But nothing seems to be working. Can someone help me resole this please Thanks in advance!
-
What i'm trying to do is to incrementally scroll horizontally within a container. The default unit is px for scrollLeft() but i want to scroll in viewport width instead. // This scrolls 250px to the right each time i click $(".right_scroll").click(function(){ $(".proj_folder").animate({scrollLeft: "+=250"}, 500); }); // This scrolls 25% of the viewport width, but only once var scrollnext = $(document).width() * 0.25; $(".right_scroll").click(function(){ $(".proj_folder").animate({scrollLeft: scrollnext}, 500); }); // This is what i want to do but it doesn't work using a variable for 25vw and += for increments var scrollnext = $(document).width() * 0.25; $(".right_scroll").click(function(){ $(".proj_folder").animate({scrollLeft: "+=scrollnext"}, 500); }); Is there any way for me to incrementally scroll 25vw with each click?
-
Hello, I have this odd issue On this link you can see it in action https://i.gyazo.com/87720508205b70970c09aa630500ee5a.mp4 You see that the button is dragged to the side on load, this does not happen on my production site. they are "identical". How can I find out what is happening on my local one that's not happening on the prod one? There are no errors or anything, so I'm going in blind on this.
-
Hello, So this is the Html <ul id="theList"> <div id="sdas"> <div id="adsdsa"> I want to append a element to the last div, the ID's are random so I can't use that one. How can I get the last div element using the ID of UL? I know this has something to do with siblings.
-
I want to search the table data by using an input text field which is on top of the table and its working simply using jquery only but if let's say I have 2000records then it will take time to load. So I want to make a code for same in AJAX where data when user search then only it will search from DATABASE then show us as a result. $(document).ready(function(){ $("#hidetable").hide(); $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#hidetable").show(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); $("#myInput").on("keydown", function() { var valuecheck = $(this).val(); if (valuecheck.trim().length > 0) { $("#hidetable").hide(); } }); }); </script> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> <h2>Filterable Table</h2> <p>Type something in the input field to search the table for first names, last names or emails:</p> <input id="myInput" type="text" placeholder="Search.."> <br><br> <table id="hidetable"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@mail.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@greatstuff.com</td> </tr> <tr> <td>Anja</td> <td>Ravendale</td> <td>a_r@test.com</td> </tr> </tbody> </table> <p>Note that we start the search in tbody, to prevent filtering the table headers.</p> </body> </html>
-
So I am trying to make a website, here is the code: <!DOCTYPE html> <html> <meta charset="utf-8"> <title class=".title">Photography By Emily</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/theme.css" rel="stylesheet"> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <header class="intro"> <div class="intro-body"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h1 class="brand-heading">Gallery</h1> <p class="intro-text">By Emily</p> <a href="#about" class="btn btn-circle page-scroll"><i class="fa fa-angle-double-down animated"></i></a></div> </div> </div> </div> </header> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand page-scroll" href="index.html">Emie Ashy Photography</a> </div> <div class="collapse navbar-collapse navbar-right navbar-main-collapse"> <ul class="nav navbar-nav"> <li> <a href="index.html">Home</a> </li> <li> <a href="pictures.html">Pictures</a> </li> <li> <a href="page-sample.html">Samples</a> </li> <li> <a href="contact.html">Contact</a> </li> </ul> </div> </div> </nav> <section id="portfolio"> <div class="gallery"> <div class="container content-section text-center"> <div class="row"> <h2>My Pictures</h2> </div> </div> <ul> <li class="col-md-3"><img src="http://unsplash.it/680/380?random=1" alt=""></li> <li class="col-md-3"><img src="http://unsplash.it/680/380?random=2" alt=""></li> <li class="col-md-3"><img src="http://unsplash.it/680/380?random=3" alt=""></li> <li class="col-md-3"><img src="http://unsplash.it/680/380?random=4" alt=""></li> <li class="col-md-3"><img src="http://unsplash.it/680/380?random=5" alt=""></li> <li class="col-md-3"><img src="http://unsplash.it/680/380?random=6" alt=""></li> <li class="col-md-3"><img src="http://unsplash.it/680/380?random=7" alt=""></li> <li class="col-md-3"><img src="http://unsplash.it/680/380?random=8" alt=""></li> </ul> </div> </section> <footer> <div class="container text-center"> <p class="credits"> Copyright © Your Website 2017 </p> </div> </footer> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.easing.min.js"></script> <script src="js/theme.js"></script> </body> </html> But I would like a drop-down so people can pick if they would like a photo in a frame or something else and a add to cart button next to it, but can seem to find out how. Does anyone know how you would do this?
-
Hey guys, So I'm trying to run some code on my webpage, it works in JSFiddle but it isn't working on my actual web page for some reason. here's the JSFiddle: http://jsfiddle.net/ZakPowley/37PGT/20/ I even made a file containing nothing but the code from within the JSFiddle and even that doesn't work? here is the file contents incase I messed something up: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="checkpoint.css"> <title> </title> </head> <body> <table id="table"> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <script type="text/javascript"> $('td').click(function() { $(this).css('backgroundColor', '#000'); }); </script> </body> </html> If anyone has any idea what I've done wrong would greatly appreciate some help, thanks!
-
Hey guys, I was hoping to somehow implement a 10x10 table onto my webpage where you select a cell and then store the X and Y value of the cell clicked but I'm really not sure on how to store the values, or to make the cell interactive (clickable) without having 100 buttons. My end goal is pretty much something like this: http://materdeimath.pbworks.com/f/GraphPaper20x20AxesUnits.bmp Where I can store the X/Y values of the clicked cell, is this possible? If any of you guys have any idea how I would accomplish this I would really appreciate the help, Thanks!
- 7 replies
-
- html
- javascript
-
(and 2 more)
Tagged with: