Jump to content

Search the Community

Showing results for tags 'JAVASCRIPT'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 844 results

  1. I have an intersection observer for one animation, but i want to use window.requestIdleCallback() Where I should add the code window.requestIdleCallback(callback_1)? my script: if (document.querySelector('#weddings')) { let observer_1; let Element_1; let prevRatio = 0.0; let options = { root: null, rootMargin: "0px", threshold: buildThresholdList() }; // Set things up Element_1 = document.querySelector("#img-1"); initObserver(); ////////////////////////////////////////////////////////////////////////////// function initObserver() { observer_1 = new IntersectionObserver(callback_1, options); observer_1.observe(Element_1); } ///////////////////////////////////////////////////////////////////////////// function buildThresholdList() {...} ///////////////////////////////////////////////////////////////////////////// var gallerySroll_1 = anime({...}); //////////////////////////////////////////////////////////////////////////// function callback_1 (entries, observer_1) { entries.forEach((entry) => { if(entry.boundingClientRect.top <= 0 && entry.intersectionRatio != prevRatio){ gallerySroll_1.seek(gallerySroll_1.duration * (entry.intersectionRatio)); }else{ gallerySroll_1.seek(1000); } prevRatio = entry.intersectionRatio; }); } } if I add the code at the start after the if before anything i got the error: TypeError: entries.forEach is not a function callback_1 https://alessiopaolettidesign.it/ph/js/main.js:343
  2. I am pretty new to javascript and node.js. I am wanting to display some text using document.getElementById('txt').innerHTML= "some text" followed by a node module : var spawn = require('child_process').spawnSync; child = spawn('ffmpeg',['-y -i ',some_file , result_file ], { shell: true }); (which takes some time) and then document.getElementById('txt').innerHTML= "some other text"; However it only disp[ays the second lot of text after the external program has finished. I had assumed that as I am using the synchronous version of spawn that the first line would get displayed first, how can I do this? Thanks
  3. I followed the following tutorial and I was finally able to add a slide in menu on my WordPress site. However, I noticed that the body scrolls when moving up and down on my mobile phone. Can someone explain to me how I can disable body scroll when the menu is opened? Many thanks in advance! Tutorial: https://www.w3schools.com/howto/howto_js_sidenav.asp <script> function openNav() { document.getElementById("mySidenav").style.width = "100%"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script>
  4. Hi, I've used this code in my website. I want "Hide --> Show", but the explenation automatic do "Show --> Hide". Is there a way to flip the code?
  5. I have this script and would like to make it search if just the word Mango is in the array and if it is true console.log the index of it. <!DOCTYPE html> <html> <body> <h1>Array includes()</h1> <p>Check if the fruit array contains "Mango":</p> <p id="demo"></p> <p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier versions).</p> <script> var fruits = ["Banana is yellow", "Orange juice", "Apple is red", "Mango is orange"]; var n = fruits.includes("Mango"); console.log(n); </script> </body> </html>
  6. $(function() { $("#demo").keyup(function(){ var len = $("#demo").val(); if(len.length>8){ var el = $("<p></p>").html(""); $("#holder").append(el); //$("p").addClass("alert alert-warning"); var x = $("<span></span>").html(" Too long"); $("p").append(x); $("span").addClass("glyphicon glyphicon-alert"); stop(); } else if(len.length<=8){ $("#holder p").children().remove(); } }); });
  7. jsonLikeObj.getFoo.value( ); BACKGROUND: Consider the following object var jsonLikeObj = Object.create( {}, {getFoo: { value: function() { return this.foo = 1; }, enumerable: false } } ); DISCUSSION: Now I could more easily understand the following that does not work, than what does work. What Does Not Work jsonLikeObj.getFoo.value(); What Does Work jsonLikeObj.getFoo(); QUESTION: What is going on? Roddy
  8. I have 3 fields that are the same name as corresponding column in MySQL database. First field is a dynamic dropdown list called "eventname". Second field called "eventdate" is an input field that gets populated via choice made from "eventname" dropdown list / First field. Third field called "venuename" is an input field that gets populated via choice made from "eventname" dropdown list / First field. What this dynamic dropdown list does is select the eventname from database then there is an onchange function that pulls out corresponding data from same line for the eventdate and venuename and sets them in the corresponding input field. All works as they should and data gets entered to the MySQL database. Only one issue: "eventname" choice from dropdown list should be submitted as "eventname" the displayed choice, what happens is my code enters data in MySQL as "eventdate | venuename" and my desired result should only be "eventname" The PHP <select id="eventname" onchange="eventFunction(eventname)"> <option selected="selected"></option> <?php foreach ($event as $event) { ?> <option value="<?php echo $event['eventdate'] .'|'. $event['venuename']?>"><?php echo $event['eventname'] ?></option> <?php } ?> </select> Date: <input id="eventdate"> Venue: <input id="venuename"> and the JavaScript <script> function eventFunction(eventname){ var eventDetails = eventname.options[eventname.selectedIndex].value.split("|"); document.getElementById("eventdate").value=eventDetails[0]; document.getElementById("venuename").value=eventDetails[1]; } </script> NOTE: If I touch the value attribute ie value="<?php echo $event['eventdate'] .'|'. $event['venuename']?>" the javascript wont work. I am a begginer with coding using JavaScript, can someone help me solve this please with examples. Thanx.
  9. I need to get the raw window handle for a html / javascript window (hwnd in windows 10), using javascript / node.js / nwjs but can't find a way. does anybody have any ideas? I want to embed mpv or mplayer in a window using the -wid option which requires the window handle as an integer. Or does anyone have any ideas how to do this as an alternative? Thanks
  10. Hello All, I have a question in regards to an idea I have and was curious as to which of the JavaScript tutorials would be a good place to start. What I had in mind was an image that would swap through a series of pictures, say for example of 10. I would like these images to swap over over in one of four directions randomly, image 2 would say for example slide image 1 from the top, image 3 would slide from the left, etc. Which of the JavaScript Tutorials here would be a good place to start for this idea? I am aware of the setInterval() command to switch between images after x amount of milliseconds, I just am not sure how to properly function a randomizer for the direction of the swap as well as the amount of images.
  11. Hello! I'm looking for some help with my Javascript code. I have a services page with 5 tabs. I used w3schools to obtain and tweak this code as needed. However, I need to link to a specific tab from my home page and I'm having trouble editing the Javascript to make this possible. Here's what I have thus far: Services Page HTML: <div class="col"> <button class="tablinks" onclick="openCity(event, 'nonclinical')"><div class="tab-wrap-blue"><div class="nonclinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Nonclinical Development</h4></div></div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'clinical')"><div class="tab-wrap-green"> <div class="clinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Clinical Development</h4></div> </div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'safety')"><div class="tab-wrap-dkgreen"><div class="safety" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Regulatory, Safety and Manufacturing</h4></div></div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'life')"><div class="tab-wrap-gray"><div class="life" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Life Science Enterprises</h4></div></div></button> </div> Current Javascript: <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); }); </script> Home page link needs to go to both the services page, and open up a specific <button>. Ie. <button class="tablinks" onclick="openCity(event, 'clinical')"> I'm new to Javascript and W3Schools has been such a help! Hoping there is a simple solution from someone who knows this code well. Thanks so much!
  12. BACKGROUND: I recently install nodejs and npm and downloaded a library call xregexp.js Then, I discovered what I did not know. The applications nodejs (node) and npm are primarily designed for server-side Javascript. Now, I am confused. In PHP one can simply include or require PHP from another document file and employ it wherever you like that PHP can be used. When I try to do something similar with xregexp.js I inevitably fail and am told that the script cannot be found. Now, I have node and npm installed above my domain folders so that it can be used with all of my domains. Simply I do not know how to access the modules that I install with npm, and I was hoping to install several more. QUESTION: How does one access node modules that are installed with npm, but reside above the domain folders in which the Javascript that is targeted to employ them resides? Roddy
  13. QUESTION: Is the following an accurate statement? If not, please clarify how a unicode string literal differs from say, an ASCII string literal. Roddy Untitled-1.html
  14. I copied the game code from w3 schools for a school project, however I wanted to change the turning and moving object from a red square to an image. Now everything works fine but the image does not turn when the object turns, how do I fix this. Here is my code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; } </style> </head> <body onload="startGame()"> <script> var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "images/smiley.png", 255, 255, "image"); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 800; this.canvas.height = 500; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.frameNo = 0; this.interval = setInterval(updateGameArea, 10); window.addEventListener('keydown', function (e) { e.preventDefault(); myGameArea.keys = (myGameArea.keys || []); myGameArea.keys[e.keyCode] = (e.type == "keydown"); }) window.addEventListener('keyup', function (e) { myGameArea.keys[e.keyCode] = (e.type == "keydown"); }) }, stop : function() { clearInterval(this.interval); }, clear : function() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y, type) { this.type = type; if (type == "image") { this.image = new Image(); this.image.src = color; } this.width = width; this.height = height; this.speed = 0; this.angle = 0; this.moveAngle = 0; this.x = x; this.y = y; this.update = function() { ctx = myGameArea.context; if (type == "image") { ctx.drawImage(this.image, this.x, this.y, this.width, this.height); } else { ctx.fillStyle = color; ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height); } ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); ctx.restore(); } this.newPos = function() { this.angle += this.moveAngle * Math.PI / 180; this.x += this.speed * Math.sin(this.angle); this.y -= this.speed * Math.cos(this.angle); } } function updateGameArea() { myGameArea.clear(); myGamePiece.moveAngle = 0; myGamePiece.speed = 0; if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -2; } if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 2; } if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 2; } if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -2; } myGamePiece.newPos(); myGamePiece.update(); } </script> <p></p> </body> </html> I very appreciate the help!
  15. I like the automatic slideshow in the example here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto, but would like 2 slideshows on one page. When I try to do this myself, one slideshow plays and finishes, then the other one starts and finishes. I would like them to start at the same time and loop and like the caption option but don't necessarily need the "dots".
  16. Hi, i love the w3school web, I learn for first time coding here and so im fun because I have job with coding relation. But for React so hard to learn with bad english spech knowledge. So the w3school can added new tutorial about React JS? Thanks..
  17. Hello, I am using the How to Create Tabs tutorial (https://www.w3schools.com/howto/howto_js_tabs.asp), but I can't get the default tab to work. It seems to work in the Tryit Editor, but even pasting the code as is, it doesn't work. I am using Shopify and have a .js, .css, and a .liquid (page template) document. Other changes on the pages seem to take affect. {{ 'tabs.js' | asset_url | script_tag }} {{ 'tabs.css' | asset_url | stylesheet_tag }} {% include 'breadcrumb' %} <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="grid"> <div class="grid-item large--two-thirds push--large--one-sixth"> <h1>{{ page.title }}</h1> <div class="rte"> <h2>Tabs</h2> <p>Click on the x button in the top right corner to close the current tab:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> {{ page.content }} </div> </div> </div> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } /* Style the close button */ .topright { float: right; cursor: pointer; font-size: 28px; } .topright:hover {color: red;}
  18. I'm trying to create a form that allows for calculation of metabolic rate. There is an if,then statement related to gender (formula changes if female vs male) I'd also like the result to be targeted to a specific part of the page (anchor). Ideally a new section can appear (maybe need to link a new page?) to provide further details Below is my code, any help would be so appreciated!! <head> <style> body { font: 15px gothic, sans-serif; letter-spacing: 1px; } input { width: 100%; } input[type=number] { border: none; border-bottom: 1px solid grey; } input[type=button], input[type=submit], input[type=reset] { background-color: #ddcecb; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #95483e; padding: 16px 32px; text-decoration: none; letter-spacing: 1px; margin: 4px 2px; #submit:hover { border: none; background: #d2d1d1; box-shadow: 0px 0px 1px #777; }} input[type=text]:focus { border: 1px solid #555; } .form-inline label { margin: 5px 10px 5px 0; } @media (max-width: 800px) { .form-inline input { margin: 10px 0; } .form-inline { flex-direction: column; align-items: stretch; } </style> </head> <form name="RMRcalc"> weight (kg) : <input type="number" name="weight" autofocus><br><br> height (cm): <input type="number" name="height"> <br><br> age (years): <input type="number" name="age"> <br><br> activity Level: <select name="activity" margin=5px > <option value="1.2">sedentary (1-2x/week)</option> <option value="1.3">low (2-3x/week)</option> <option value="1.4">moderate (3-4x/week)</option> <option value="1.6">high (5+x/week)</option> </select> <br><br> female <input type="radio" name="gender" value="female" checked> <br> male <input type="radio" name="gender" value="male"> <br> <input type="submit" value="Calculate" id="calculate" onclick="RMRCalc ()" target="results"> <br><br> <script type="text/javascript"> "use strict" function RMRCalc () { var weight = document.getElementById ("weight").value; var height = document.getElementById("height").value; var age = document.getElementById("age").value; var activity = document.getElementById("activity").value; if (gender="female") var RMR = (10*weight) + (6.25*height) - (5*age) -161; document.getElementById("RMR").innerHTML=RMR; else var RMR = (10*weight) + (6.25*height) - (5*age) +5; document.getElementById("RMR").innerHTML=RMR; } </script> </form> <p><a name="results"> Your Daily Caloric Requirements: <div id ="RMR"></div> </a></p> <br> <p> Did you know that Thank you!!
  19. Hello. Any one here as experience with ionic 4 and express? I'm trying to do something simple: A simple login form for the user to enter login and password and a connect button. Once the user click on connect to send the data to the server. I wanna see the data on the server side maybe using an alert. Can anyone help me with that? It's been a couple of days I'm trying it. Please notice that I'm not trying something complex and the goal is to understand the concept, therefore the use of error handling, or whatever other utility to make the connection strong isn't necessary at all. Thanks ahead of time.
  20. BACKGROUND: Recently I discovered a nifty Javascript function that counts the like values of an index array and returns as its value an object whose property-value pairs consist of a single repeated value and its corresponding frequency. Unfortunately, I am having trouble understanding how the function works. As I have adapted it to fit my own needs I have changed the variable names. Indeed, this change may be the source of my own confusion. The FUNCTION: function dateCounter(dates) { return dates.reduce( (countDates, date) => { countDates[date] = ++countDates[date] || 1; return countDates; }, {} ); } REQUEST: Please write in plain English what the so-called reducer function of the reduce( ) function is achieving with each iteration. I am baffled. Roddy
  21. I am needing to convert an String input into an Integer. But before converting the String input, i have to do a validation that the String input can be converted to a numeric value. So If it cannot, i need to log a message saying “This cannot”. Then log another new log statement on the next line saying “be a number”. I understand I need a parseInt and isNan and if else statements but I am confused on exactly how they are implemented. I am new to javascript.
  22. I am designing a Sharepoint page with script editor. I have an image which I have used area tag on. So with onmouseover another image pops up and it reverts back onmouseout. I further want to use another area tag on this new image onmouseover where I can add area tags on this new image. Something like a nested image map. For description sake. I will use script from w3schools. <img src="planets.gif" width="145" height="126" alt="Planets" name="myname" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" onmouseover=myname.src="C:\Users\Quabynar\Pictures\sun.gif" ; onmouseout=myname.src="C:\Users\Quabynar\Pictures\planets.gif"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map> I expect to put another map with area tags on the sun.gif when onmouseover where I can use href to say a link about description the Sun. I don't seem to get around it.
  23. Hey guys, I know that this is quite a longshot but I hope that there is someone here that can help me. We've had problems with our Store Locator on our homepage for quite a long time since it was missing an API Code (which we got today). The site I'm talking about is this: http://www.melon-helmets.com/en/stores The Problem is: I don't know where to put the API. There is this line of code <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> My guess was that I'd have to enter the API key after js?, by adding key=ourkey. It does display the map without an error afterwards, unfortunately it always asks me to enter a zip code or adress, even though I did so. (Tried City/Adress/ZIP Code) Can anyone help me? (I'm fairly poor at html/css/js) Thank you!
  24. HI, I'm using RPC.Query to send a string from js to py. At py receptor this scrash using json.loads(..) de args. The messages error is: "" ... JSONDecoderError(\"Expecting value\", s, err.value) from None\njson.decoder.JSONDecodeEror: Expecting value: line 1 colum1 (char 0)\n", "message": "Expecting value: line 1, column 1 (char 0)"], "Exception_type":"internal_error"}}" "" I do an console.log(..) beford RPC instruction and the string value is ok. That is the code: FROM JS: .... // *JCM* var strcontenido = ''; var LF = '\n'; var orderi = JSON.parse(JSON.stringify(order)); var orderf = JSON.parse(JSON.stringify(order_flushed)); strcontenido ="80#DOCUMENTO DE PRUEBA +LF80_is*YO MISMO+LF80_ir*22157456+LF80_i03Dirección: Calle, 12345678 Ciudad, Venezuela+LF80_i04Teléfono: +584161236548+LF80_i05Referencia: 00001-317-0204+LF80_i06Mesa: M5, Comensales: 1+LF80_@*****Gracias por su compra*****+LF80_#000000010000001000Golosinas+LF101" strcontenido= strcontenido.split(":").join("?"); // Replace ":" with "?" to send to py strcontenido= strcontenido.split(",").join("-"); // Replace "," with "-" to send to py console.log(strcontenido); // This show ok errTxt = self._crear_factura( true, strcontenido); var transfer = self._flush_orders([order_flushed], {timeout:30000, to_invoice:true}); // *JCM* // ...do some... }); return done; }); return invoiced; }, // Envia comandos al programa en python- Send command to py _crear_factura: function(imprime, strcontenido) { var self = this; var ejecuted = true; strcontenido = '{"F": "\'' +strcontenido + '\'"}' // Converting string to json inserting {"id": '...string...'} format var args = JSON.parse(strcontenido); console.log('ARGS=>>'+args); // This show text ok >> 80#DOCUMENTO DE PRUEBA +LF80_is*YO MISMO+LF80_ir*22157456+LF80_i03Dirección? Calle- 12345678 Ciudad- Venezuela+LF80_i04Teléfono? +584161236548+LF80_i05Referencia? 00001-317-0204+LF80_i06Mesa? M5- Comensales? 1+LF80_@*****Gracias por su compra*****+LF80_#000000010000001000Propinas+LF101 if (imprime) { return rpc.query({ model: 'pos.order', method: 'print_ticket', args: args, }).fail(function(error, event){ ejecuted = false; }); console.log('_crear_factura (\n' + strcontenido +'\n): Ejecutada...!!!'); } else { console.log('_crear_factura (\n' + strcontenido +'\n): NO EJECUTADA...!!!'); } return ejecuted; }, ... FROM py: @api.model def print_ticket(self, strcontenido): #contenido = strcontenido.get('F') // Error: strcontenido d'nt have get method contenido = json.loads(strcontenido) // Error: previus commented f=open('c:/IntTFHKA/invoiced1.txt','w') #if strcontenido.get('F'): // Error: strcont.... # contenido = strcontenido['strcontenido'] errVal=f.write(contenido["F"]) // Never cross at this... #else: # errVal=f.write('***** GENERAR LA FACTURA*****\n\n') #for data in strcontenido: errVal=f.write(data) errVal=f.write('\n\n*****FIN DEL ARCHIVO******\\nn') errVal = f.close() return True So, I had proved some method without result.... ¿Do you have any idea to resolv...??
  25. Is there anyway to make this dropdown menu use onclick instead of hover on small screens. I'm creating a menubar with several dropdowns and a couple sub-dropdowns with-in them and as it is on small screes the menu is too hard to navigate with the hover. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown Thanks!
  • Create New...