Search the Community
Showing results for tags 'js'.
-
Create an HTML page and upload it to the thread! Try to include as many features as you can! Please use embedded CSS and JS in your pages. Upload in a zip folder if you have images. TEMPLATES NOT ALLOWED Please do not use or post templates. Thanks! Have Fun!
-
Hi guys, me need help. I dont know how did it my idea. So 1. If rainmeter can make elements transparent, can it make this like burger-menu? This is to animation element, right? 2. I dont understand what language used for work Rainmeter, just thinking what its css, or js, or simple bat.file, BUT! 3. Me needed when i hover the mouse for icon (take this tag #menu) his opened more elements like are burger menu on the something web site, then user can be change icons from the available elements which one is for him need, and then he click for this element -- opened program (like it worked with *HoneyComb), or other icon hide back on the #menu I really dont understand HOW it maked, but really dlikes did it. Please help me for writing code for this, or founding how me did it
-
- rainmeter skin
- css3
-
(and 2 more)
Tagged with:
-
What characters are allowed for usernames and passwords? I'm trying to figure out how to sanitize user input when registering an account to a website in javascript, or is there a js framework out there that will do this automatically? let illegal = "`\:{}?<>,." My idea is to count illegal characters like those on the list above, and not allow the user to register unless those are replaced. I planned to only allow alpha numeric characters but realized there are other languages like Japanese with a different set of characters so that's a no go, there would be way too many characters to monitor.
- 8 replies
-
- input sanitation
- js
-
(and 2 more)
Tagged with:
-
nodejs JS/Express Send a very big string to an express server
Playlogo posted a topic in Programming
What is the best way to send a very big String to a nodeJs express server? I have a Webpage with Codemirror which is able to load files from a express server and load them into Codemirror. But what method is the best to send "the file"(actually it's a string,can be realy big) back to the express api ? -
Hey! I am currently searching for a nice javascript framework/library to work with on a rather simple website. The website will only have a single site, so I don't really need too complicated stuff. I was already looking at vue.js and react.js, but I thought getting some other opinions on the topic would be nice. If you already used one of the above mentioned, what were your experiences like? I'd love to know! Have a great day, motz
-
I have been trying to get the Y position of the highest pixel in an image that is not transparent. I want a function where you input an X coordinate and the minimum opacity for a pixel to be considered transparent. It returns the Y coordinate of the highest point of this, the visible image in the canvas, from the imputed X coordinate. I tried this, and am not sure what I got wrong: this.highestPoint = function(x, transparency = 1) { var imageCanvas = document.createElement("CANVAS"); var imageCtx = imageCanvas.getContext("2d"); imageCanvas.width = canvas.width; imageCanvas.height = canvas.height; var image = new Image(); image.src = this.base64Src; imageCtx.drawImage(image, this.x, this.y, this.width, this.height); var highestPoint = -1; var imageData = imageCtx.getImageData(x, this.y, 1, this.height).data; for(var i = 1; i < (imageData.length + 1) / 4; i++){ if(imageData[i * 3] >= transparency){ console.log(i) highestPoint = i; break; } } if(highestPoint != -1){ highestPoint = this.y - highestPoint + 1; } return highestPoint; }
-
I'm having some trouble accessing a prop from within the History page I'm making using React. In App.js I'm passing user as a prop. <Route exact path="/history" render={(props) => ( <History user={user}/> )} /> user is returned during componentDidMount: componentDidMount() { const user = AuthService.getCurrentUser(); if (user) { this.setState({ user: user }); The interesting fact is that I have another component before History : <HeaderBar user={user}/> And within the HeadBar component, it's able to access the user prop without any problems. However, in History, when I log this.props.user in the constructor, I'm constantly getting undefined. I made sure I have super(props) in the constructor so I'm at a lost right now. What could I be missing that's preventing me from passing the user prop? So right now in History I have: class History extends React.Component { constructor(props) { super(props); console.log(this.props.user) If I add a button within render that logs this exact item, it logs it perfectly. The problem is that I need to use this user information to fetch whatever is going to be rendered on the page.
- 2 replies
-
- js
- javascript
-
(and 1 more)
Tagged with:
-
I want to store multiple variables and objects in the cloud. I am aware about databases, but I can't find one that is both free and user-friendly. Does anyone have any solution? Thanks in advance.
-
so I'm trying to create an error event handler in javascript. I'm purposely adding the website wrong so that I get a specific error message but thats not what I'm getting. When I run my code I get the following: undefined:1 SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) at IncomingMessage.<anonymous> (/Users/elmaschingon/Desktop/app.js:24:30) at IncomingMessage.emit (events.js:327:22) at endReadableNT (_stream_readable.js:1201:12) at processTicksAndRejections (internal/process/task_queues.js:84:21) Here is my code below // Problem: We need a simple way to look at a user's badge count and JavaScript points // Solution: Use Node.js to connect to Treehouse's API to get profile information to print out const https = require('https'); // Function: to pring message to console function printMessage (username, badgeCount, points) { const message = `${username} has ${badgeCount} total badge(s) and ${points} points in Javascript.` console.log(message); } function getProfile(username) { // Connect to the API url const request = https.get(`https://wwwteamtreehouse.com/${username}.json`, response => { let body = ""; // Read the data response.on('data', data => { body += data.toString(); }); // Parse the data response.on('end', () => { const profile = JSON.parse(body); printMessage(username, profile.badges.length, profile.points.JavaScript ); }); }); request.on('error', error => console.error(`Problem with request: ${error.message}`)); } const users = process.argv.slice(2) users.forEach(getProfile); The really weird thing is that when I make the site "https://wwwwteamtreehouse.com" (adding an additional w and still missing the '.') I get the right error code that I'm looking for which is: Problem with request: getaddrinfo ENOTFOUND wwwwteamtreehouse.com Any help would be GREATLY appreciated guys
- 2 replies
-
- javascript
- js
-
(and 2 more)
Tagged with:
-
Basically, I'm writing a program that allows a user to create and export maps. I can't get JavaScript to export the map (a canvas) because it is "tainted." I tried looking this up and tried to fix the error multiple times in multiple ways, but nothing worked. Here is some of the code for exporting in case it helps: <img id="exportImage" crossorigin="Anonymous"> <script> function exportMap(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var img = document.getElementById("exportImage") // save canvas image as data url (png format by default) img.crossorigin = "Anonymous"; var dataURL = canvas.toDataURL(); console.log(dataURL) document.getElementById("exportImage").src = dataURL; } </script> Thanks in advance!
-
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!
-
I am trying to make a program where the user uploads a map and can cover it and uncover it. I can manage to write a code to allow the user to cover the map, but not to uncover the map. I am trying to use CSS sprites that take a piece of the uploaded image and makes that what the user paints. Since the image is uploads, it does not have a url, so using CSS sprites does not work. Is there a way to use CSS sprites, or an easier way? Note: The image is in an HTML canvas. Here is the program, if showing it helps: <!DOCTYPE html> <html> <head> <title>Dungeon Crawler</title> <style> #title { font-variant: small-caps; font-size: 50px; } </style> </head> <body> <h1 id = "title">Dungeon Crawler</h1> <b id = importMapText> Import Map: </b><span id = "imageLoader"><input type="file" accept="image/*" name="imageLoader"/></span> <input type="button" id = "back" value="Back" onclick="back()" /> <p> <span id = "tools"> <select id="coverOrUncover"> <option value="uncover"> Uncover</option> <option value="cover"> Cover </option> </select> the map with a brush size of <input type="text" value = "50" name = "size" id = "size"> pixels. </span> <canvas id="imageCanvas"></canvas> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <script> var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; var x = document.getElementById("back"); x.style.display = "none"; var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); var canvas = document.getElementById('imageCanvas'); var ctx = canvas.getContext('2d'); document.getElementById("imageLoader").innerHTML = "<input type=\"file\" name=\"imageLoader\">" function handleImage(e){ var vv = document.getElementById("tools"); vv.style.display = "block"; var v = document.getElementById("title"); v.style.display = "none"; var w = document.getElementById("imageCanvas"); w.style.display = "block"; document.getElementById("imageLoader").innerHTML = "" document.getElementById("size").value = "50" var y = document.getElementById("importMapText"); y.style.display = "none"; var z = document.getElementById("back"); z.style.display = "block"; // ^ shows stuff that need to and hides things that don't var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.onload = function(){ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); } img.src = event.target.result; } reader.readAsDataURL(e.target.files[0]); // ^ Prints the image to the canvas } function back(){ var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; document.getElementById("imageLoader").innerHTML = "<input type=\"file\" accept=\"image/*\" name=\"imageLoader\">" var y = document.getElementById("importMapText"); y.style.display = "block"; var z = document.getElementById("back"); z.style.display = "none"; // ^ shows stuff that need to and hides things that don't } </script> <script> var sketchProc = function(processingInstance) { with (processingInstance) { size(700, 400); frameRate(30); // ProgramCodeGoesHere var size = document.getElementById("size").value; size = parseInt(size, 10); var coverOrUncover = document.getElementById("coverOrUncover").value; draw = function() { size = document.getElementById("size").value; size = parseInt(size, 10); fill(0, 0, 0); noStroke(); rect(mouseX, mouseY, size, size); }; }}; // Get the canvas that Processing-js will use var canvas = document.getElementById("imageCanvas"); // Pass the function sketchProc (defined in myCode.js) to Processing's constructor. var processingInstance = new Processing(canvas, sketchProc); </script> </body> </html>
- 5 replies
-
- js
- javascript
-
(and 4 more)
Tagged with:
-
I'm programming my own "Chrome 'New tab' page" . It's a local html file on my computer. Is there any way to create a loacl xml file , read and edit it ? Thanks for your answers?!
-
I am currently writing a Website, with a Html based 3D canvas. So far so good, now i am facing a Problem with sliders to manipulate a 3D object in space. everytime one slider changes the Object reverts to its original Position first and then the manipulation of its Position in space is Computed. I tried several ways to bypass this limitation, but i always end up with the same result that multiplies the current rotation with 0, is there something i'm missing or is that not possible and i have to write Javascript code to link both sliders to a variable in hard coded css? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PnP_Javascript</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <main> <button style="cursor:pointer; grid-row: 1 / span 2; width: min-content;" class="drawerButton" onclick="toggleNav()">☰</button> <div class="title" style="grid-column: 2/span2; width:100%;">title</div> <div class="subtitle" style="grid-column: 2/span2; width:100%;">Subtitle </div> <div class="lSidebar"> <input class="verticalSlider" id="viewingAngle" type="range" min="0" max="90" value="0" data-units="deg" onchange="document.getElementById('map').style.transform='rotate3d(1,0,0,'+ this.value +'deg)'"> <input class="verticalSlider" id="centerRotation" type="range" min="0" max="360" value="360" data-units="deg" onchange="document.getElementById('map').style.transform='rotate3d(0,0,1,'+ this.value +'deg)'"> </div> <div class="canvas"> <div class="container" id="map"> <div class="face north"></div> <div class="face east"></div> <div class="face south"></div> <div class="face west"></div> <div class="face image"> <embed src="https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg" width=100% height=100%> </div> </div> </div> <div class="item5">Right</div> <div class="item6" style="grid-column: 1/span3; width:100%;">Footer</div> </main> </body> </html> https://jsfiddle.net/stbdznw1/8/
-
How and why I made Syntatical (an NPM package that changes how you write JavaScript) Basics of Syntatical: Goal: The initial goal was to make an NPM package that changed how JavaScript is written. Not to make it "easier" or "weirder", just a different way to write it. How it works: Syntactical basically just puts JavaScript code into functions. Making multi-line functions one-line. It also makes console.log shorter, I did this because I hate using console.log() to log everything. To show it better I will use a snippit from the index file "arr_buff":function(num){ if(isNaN(num) == false){ var b = new ArrayBuffer(num); console.log(b.byteLength); } else if(Array.isArray(num)){ var x = num.length; console.log(x) } else { console.log("input invalid") } }, This basically takes if(isNaN(num) == false){ var b = new ArrayBuffer(num); console.log(b.byteLength); } else if(Array.isArray(num)){ var x = num.length; console.log(x) } else { console.log("input invalid") } and shrinks it down to s.arr_buff(633) // ------ OR ------ // You can use: s.arr_buff(["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]) The one on top will print out: 633 The one bellow will print out: 26 s.arr_buff("a string, not an array") This one will print our "input invalid" Why Node.js and NPM? JavaScript's syntax is fine, but I thought I could make it simple. I would have done it in Python if I felt like Python needed this, which I feel it really does not. JavaScript's syntax is easy, but I wanted to make it easier. How to install and use: Install script and view the Syntatical NPM repo What does the future hold for Syntatical? A lot actually. I am going to gather a few friends to continue development on the main Syntatical package. Plans for syntatical-electron, syntatical-discord, syntatical-express and syntatical-passport do exist and are being considered. Having a Syntatical.py module is also in thought, same with a Syntatical.lua package. However these are plans in consideration, not yet confirmed!
-
The title is pretty explanatory of what i need, couldn't find it anywhere else so I'm asking if it is even possible I dont know PHP, so i made my own Login API in C# and the client side is just JavaScript (idk if it is even possible with anything else) I have a function in the head that checks for the login, if it fails it redirects back to the index and if it succeeds it keeps the page I dont mind people viewing the page without being logged in, the thing is, if they aren't logged in, sometimes the login process takes time and it lets other page contents load (images and that stuff) which causes a bit more bandwidth usage on the server side Is there any way that i could make that function pause the page loading until it completes, and if it is successful resume the page loading... Tried await, but VSC just returns it as an syntax error (actually, nvmd, might be VSC, it does it only on .php files, and it doesnt seem to affect the page loading) Im sorry if i don't understand some stuff about JS and HTML, haven't done something like this before, im a Back-end Developer working mostly in C# .... not JS Thank you !
-
Hello there, folks. So, here's a question I waited long enough to post here: How much Computing Power is really necessary for Web Development? (JS, CSS, HTML, BOOTSTRAP) But wait, there's more: And how about backend stuff (like managing servers, dealing with databases etc)? (JAVA and C# mostly) I know gaming and game development need beastly machines, but how about the other things? Cause if you look into the interwebz people will recommend i9 with titan z and 128 gigs of ram, but dude... that can't be truth... can it? How much cpu do we really need to the day to day web development?
- 25 replies
-
- web development
- js
-
(and 3 more)
Tagged with:
-
Hello Guys so i recently wanted to start a project of my own to solve a problem, you see im living with my 2 siblings at the moment, and i hold a large collection of movies (arround 8TB ) that are Stored on my Personal rig and several external hard drives, the problem is that its a hassle to disconect and wait for files to transfer i wanted to create a webapi and a client that could function as an explorer (just like windows explorer) to browse the directory of the hard drives and strema the data to the computer using the browser while the files remain on the main computer i havent been able to found anything like that aside from webstorage and streaming, i only want it to be locally 0 internet im familiar with Javascript and some lable languages for web development, but im at a loss with APIs like NODE.JS and such, any starters?
-
Hey, @Slick, any plans on Apple tvOS? I am playing around with TVML right now and would say that it's a pretty cool and easy way to make a tvOS app
- 1 reply
-
- floatplane
- tvos
-
(and 2 more)
Tagged with:
-
I dont have cluw what im dowing rong here. Im try to get a canvas in html to match the screen size of the html screen. But it woont take the widht or the height. only when is pre programade in like "1080px" :/ is thare a wee to make it full the screen ? current code var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; console.log("width: "+height+" height: "+width); document.getElementById("MainFrame").style.border="1px solid black"; document.getElementById("MainFrame").style.width=width; document.getElementById("MainFrame").style.height="height";
-
How does this website use hover events to get the boxes to enlarge and shrink with the animation? http://blacknegative.com/#!/loader/
-
Well the title says it all really. I'm looking for ideas to practise web development (both front- and backend) and I'm hoping you guys can help me out ^^ Any and every idea is welcome!
-
I've been practicing a lot of html and javascript recently, and I came across this challenge question. I can't for the life of me figure out why it works and I feel like the answer is very simple. Here it is: What is the output of this code: <html> <head> <title>Test</title> </head> <body> <script type="text/javascript"> var arr = [1,2,3,4]; arr[arr[1]]=5; alert(arr); </script> </body> </html> The answer is 1,2,5,4 but I can't figure out why. arr[1] is the second spot in the array, so the output should be 1,5,3,4 but its not. Does anybody know how this works? It's been bugging me for hours. Thanks!
- 5 replies
-
- javascript
- code
-
(and 2 more)
Tagged with:
-
So I have a YouTube video in the progress of being rendered that I want to have as my website background. But the thing is that I want it to be the background like background-color: #hexhere; but with a YouTube video. There is already a blur on the video so the text would be visible and more aesthetically pleasing. I would also need an h1 and a subtitle on the above the fold content.
- 9 replies
-
- yt
- background
-
(and 2 more)
Tagged with:
-
Hello, I am trying to make a login page that with javascript will verify if the email is in a correct email format. If it is a valid email format the box will have turn to a green border color and if it is in a invalid format the box will turn red and will disbale the submit button. Right now I have two files, index.html and log.php <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Please Login</title> <link rel="stylesheet" href="style.css"> </head> <body> <form action="log.php" method="POST"> <input name="email" id="email" type="email" /> <input name="password" id="passowrd" type="password" /> <input type="submit" name="submit" value="Submit"> </form> </body> </html> <?php if(isset($_POST['email']) && isset($_POST['password'])) { $data = 'Email: ' . $_POST['email'] . ' Password: ' . $_POST['password'] .$ $ret = file_put_contents('mydata.txt', $data, FILE_APPEND | LOCK_EX); if($ret === false) { die('An error occured'); } else { echo "Success"; } } else { die('no post data to process'); } ?> I know that logging the data to a txt file is not secure but later on I will implement either google firebase or MySQL. Thanks!