Jump to content

Search the Community

Showing results for tags 'javascipt'.

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 27 results

  1. Top javascript projects for bginners with source code We have lots of free basic to advanced level JavaScript projects here. Here you will learn JavaScript step by step. If you are a teacher, there is a very good way, that from on you can download or copy sample mini or advanced JavaScript projects and teach your students very well because every javascript project has very good examples. Each JavaScript project here is category-based, such as calculators, converters, online tools, games, Random scripts, and more. Each JavaScript project for beginners will be able to use and enhance their own programming skills.There are sample projects, javascript mini projects, basic javascript projects, advanced javascript projects, 100+, and more list of javascript projects. Step-by-step video tutorial on how to download a JavaScript project source code or file usage on your webpage.
  2. I'm going through the HTML game module, and I found " var myleft = this.x; var myright = this.x + (this.width); var mytop = this.y; var mybottom = this.y + (this.height); " In https://www.w3schools.com/graphics/game_obstacles.asp Can someone please explain what points are myleft, myrightm mytop and mybottom on the component? I'm confused because aren't myleft and mytop the same point on the component? Please help. Thanks, Prakhar
  3. I'm using the Autocomplete of w3schools, however the need to search for approximation arose Example If I type bar it returns me Barbados However, I need that in addition to returning Barbados he also returns me Antigua & Barbuda because here also contains the letters bar Is there any way to adapt this code to make it work like this?
  4. I have copy and pasted the coding from https://www.w3schools.com/howto/howto_js_portfolio_filter.asp into my portfolio page and came across some issues that I cannot figure out. 1. When I open my html document in the web browser, it doesn't show all of the photos until you click on "All" in the portfolio's menu bar. It's supposed to show all right when you open the portfolio page. 2. The active link is not working right. It shows "All" as being active even when you click on the other options. Anyone know how to fix this? I am not familiar with js so I don't know how to fix these problems. art.css portfolio.js portfolio.html
  5. Hello everyone, I have an issue where an external iFrame I am loading using Javascript displays fine on iOS, Android and Windows, but doesn't display on Mac Chrome, Firefox or Edge. Using Chrome Inspector, I can see the reason why it doesn't display is because height is set to 0px. If you resize the browser window, the iFrame then displays, as if Chrome is nudged into resizing the iFrame. My thinking is to force the iFrame's height, that way it will be displayed no matter what. I am fairly new to JS, so could someone recommend what that code might look like? Below is my code (a Shopify Buy Button): <div id='product-component-[product component]'></div> <script type="text/javascript"> /*<![CDATA[*/ (function () { var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { ShopifyBuyInit(); } else { loadScript(); } } else { loadScript(); } function loadScript() { var script = document.createElement('script'); script.async = true; script.src = scriptURL; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); script.onload = ShopifyBuyInit; } function ShopifyBuyInit() { var client = ShopifyBuy.buildClient({ domain: 'golden-moments-usa.myshopify.com', storefrontAccessToken: '7d944d2e69bddb24e7c33ba1395129bd', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '[product id]', node: document.getElementById('product-component-[product component]'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { "product": { "styles": { "product": { "@media (min-width: 601px)": { "max-width": "calc(25% - 20px)", "margin-left": "20px", "margin-bottom": "50px" }, "text-align": "left" }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "width": "100%", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" }, "price": { "font-family": "Lato, serif", "font-weight": "700", "font-size": "20px", "color": "#4d4d4d" }, "compareAt": { "font-family": "Lato, serif", "font-weight": "bold", "color": "#0b1c51" } }, "contents": { "img": false, "button": false, "buttonWithQuantity": false, "title": false, "options": false, "price": true }, "googleFonts": [ "Lato" ] }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": false, "button": true, "buttonWithQuantity": false }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#ed2a47" }, "background-color": "#0b1c51", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" } }, "text": { "button": "Add to cart" } }, "cart": { "styles": { "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px" } }, "text": { "total": "Subtotal" }, "contents": { "note": true } }, "toggle": { "styles": { "toggle": { "font-family": "Lato, sans-serif", "background-color": "#ed2a47", ":hover": { "background-color": "#a81f33" }, ":focus": { "background-color": "#13308a" } }, "count": { "font-size": "14px", "color": "#ffffff", ":hover": { "color": "#c8ad76" } }, "iconPath": { "fill": "#ffffff" } } } }, }); }); } })(); /*]]>*/ </script> Below is the resulting iFrame rendered in browser: <iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-4840729411716" style="width: 100%;overflow: hidden;border: none;height: 50px;"></iframe> Below is the full code as it's rendered in browser: <div class="collection-price-div"><div class="additionalprice w-embed w-script"><div id="product-component-1840729411716" class="shopify-buy-frame shopify-buy-frame--product shopify-buy__layout-vertical" style="max-width: 280px;"><iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-4840729411716" style="width: 100%;overflow: hidden;border: none;height: 50px;"></iframe></div> <script type="text/javascript"> /*<![CDATA[*/ (function () { var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { ShopifyBuyInit(); } else { loadScript(); } } else { loadScript(); } function loadScript() { var script = document.createElement('script'); script.async = true; script.src = scriptURL; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); script.onload = ShopifyBuyInit; } function ShopifyBuyInit() { var client = ShopifyBuy.buildClient({ domain: 'golden-moments-usa.myshopify.com', storefrontAccessToken: '7d944d2e69bddb24e7c33ba1395129bd', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '4840729411716', node: document.getElementById('product-component-1840729411716'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { "product": { "styles": { "product": { "@media (min-width: 601px)": { "max-width": "calc(25% - 20px)", "margin-left": "20px", "margin-bottom": "50px" }, "text-align": "left" }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "width": "100%", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" }, "price": { "font-family": "Lato, serif", "font-weight": "700", "font-size": "20px", "color": "#4d4d4d" }, "compareAt": { "font-family": "Lato, serif", "font-weight": "bold", "color": "#0b1c51" } }, "contents": { "img": false, "button": false, "buttonWithQuantity": false, "title": false, "options": false, "price": true }, "googleFonts": [ "Lato" ] }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": false, "button": true, "buttonWithQuantity": false }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#ed2a47" }, "background-color": "#0b1c51", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" } }, "text": { "button": "Add to cart" } }, "cart": { "styles": { "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px" } }, "text": { "total": "Subtotal" }, "contents": { "note": true } }, "toggle": { "styles": { "toggle": { "font-family": "Lato, sans-serif", "background-color": "#ed2a47", ":hover": { "background-color": "#a81f33" }, ":focus": { "background-color": "#13308a" } }, "count": { "font-size": "14px", "color": "#ffffff", ":hover": { "color": "#c8ad76" } }, "iconPath": { "fill": "#ffffff" } } } }, }); }); } })(); /*]]>*/ </script></div></div> Many thanks
  6. My friend and I are building a website and we're a little lost about how to get my form data (javascript) to transfer to him (python) so he can use it. I've just started learning front end (html, css, js) and he's pretty familiar with python. How do we connect the two? JSON? Nodejs?
  7. My HTML page is having password input field when I try to input values to the password input field then the page becomes unresponsive after entering more than 30 to 40 characters. Below is the code which I am using. This issue I am having in all web browsers. Even if I change the minimum length and all other like lower, upper, number and symbol value to 50 then also the same problem persist. I am new to javascript, Kindly do the needful. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* Style all input fields */ input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; } /* Style the submit button */ input[type=submit] { background-color: #4CAF50; color: white; } /* Style the container for inputs */ .container { background-color: #f1f1f1; padding: 20px; } /* The message box is shown when the user clicks on the password field */ #message { display:none; background: #f1f1f1; color: #000; position: relative; padding: 20px; margin-top: 10px; } #message p { padding: 10px 35px; font-size: 18px; } /* Add a green text color and a checkmark when the requirements are right */ .valid { color: green; } .valid:before { position: relative; left: -35px; content: "✔"; } /* Add a red text color and an "x" when the requirements are wrong */ .invalid { color: red; } .invalid:before { position: relative; left: -35px; content: "✖"; } </style> </head> <body> <p>Try to submit the form.</p> <div class="container"> <form action="/action_page.php"> <label for="usrname">Username</label> <input type="text" id="usrname" name="usrname" required> <label for="psw">Password</label> <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required> <input type="submit" value="Submit"> </form> </div> <div id="message"> <h3>Password must contain the following:</h3> <p id="letter" class="invalid">199 <b>lowercase</b> letter</p> <p id="capital" class="invalid">199 <b>capital (uppercase)</b> letter</p> <p id="number" class="invalid">199 <b>number</b></p> <p id="length" class="invalid">Minimum <b>199 characters</b></p> </div> <script> var myInput = document.getElementById("psw"); var letter = document.getElementById("letter"); var capital = document.getElementById("capital"); var number = document.getElementById("number"); var length = document.getElementById("length"); // When the user clicks on the password field, show the message box myInput.onfocus = function() { document.getElementById("message").style.display = "block"; } // When the user clicks outside of the password field, hide the message box myInput.onblur = function() { document.getElementById("message").style.display = "none"; } // When the user starts to type something inside the password field myInput.onkeyup = function() { // Validate lowercase letters var lowerCaseLetters = new RegExp('(?:[a-z].*){' + 199 + '}', 'g') if(myInput.value.match(lowerCaseLetters)) { letter.classList.remove("invalid"); letter.classList.add("valid"); } else { letter.classList.remove("valid"); letter.classList.add("invalid"); } // Validate capital letters var upperCaseLetters = new RegExp('(?:[A-Z].*){' + 199 + '}', 'g') if(myInput.value.match(upperCaseLetters)) { capital.classList.remove("invalid"); capital.classList.add("valid"); } else { capital.classList.remove("valid"); capital.classList.add("invalid"); } // Validate numbers var numbers = new RegExp('(?:[0-9].*){' + 199 + '}', 'g') if(myInput.value.match(numbers)) { number.classList.remove("invalid"); number.classList.add("valid"); } else { number.classList.remove("valid"); number.classList.add("invalid"); } // Validate length if(myInput.value.length >= 199) { length.classList.remove("invalid"); length.classList.add("valid"); } else { length.classList.remove("valid"); length.classList.add("invalid"); } } </script> </body> </html>
  8. The JavaScript Array Methods (Merging an Array with Values) example doesn't use array in it's example, it still uses an array like in the examples above it. The square brackets in the argument to concat should be removed, leaving 3 separate string arguments. I think example could be improved to something like: var arr1 = ["Cecilie", "Lone"]; var nephew = "Nick"; var myChildren = arr1.concat("Emil", "Tobias", "Linus", nephew);
  9. First off, I am a newbie. I'm try to make the first accordion tab and heading tab open by default, but keep coming up short. Any and all help would be greatly appreciated! Sample url: https://www.iciwireless.com/industry-solutions-mat/construction.htm So, the "Two-way Radio" accordion and header tab should be open when entering the page. I'm using a DW template with repeatable regions to populate the accordions on a number of pages, which is working, but need the 1st accordion tab open. The last code that I tried was the following: <script> $(document).onload(function(){ $("#accordion1Collapse1").collapse('show'); }); }); </script> No luck there.
  10. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> </title> <link href="css/bootstrap-4.0.0.css" rel="stylesheet" type="text/css"> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var id = 1; $("#butsend").click(function() { var newid = id++; $("#table1").append('<tr valign="top" id="'+newid+'">\n\ <td width="100px" >' + newid + '</td>\n\ <td width="100px" class="patid'+newid+'">' + $("#patid").val() + '</td>\n\ <td width="100px" class="test_code'+newid+'">' + $("#test_code").val() + '</td>\n\ <td width="100px" class="test_name'+newid+'">' + $("#test_name").val() + '</td>\n\ <td width="100px" id="generalprice" class="generalprice'+newid+'">' + $("#generalprice").val() + '</td>\n\ <td width="100px" id=quantity class="quantity'+newid+'">' + $("#quantity").val() + '</td>\n\ <td width="100px" id="qntytolprices" class="totalprices'+newid+'">' + $("#totalprices").val() + '</td>\n\ <td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>'); }); $("#table1").on('click', '.remCF', function() { $(this).parent().parent().remove(); $('#table1 tbody tr').each(function(id){ $($(this).find('td')[0]).html(id++); }); }); $("#butsave").click(function() { var lastRowId = $('#table1 tr:last').attr("id"); var test_code = new Array(); var test_name = new Array(); var generalprice = new Array(); var quantity = new Array(); var totalprices = new Array(); var patid = new Array(); for ( var i = 1; i <= lastRowId; i++) { patid.push($("#"+i+" .patid"+i).html()); test_code.push($("#"+i+" .test_code"+i).html()); test_name.push($("#"+i+" .test_name"+i).html()); generalprice.push($("#"+i+" .generalprice"+i).html()); quantity.push($("#"+i+" .quantity"+i).html()); totalprices.push($("#"+i+" .totalprices"+i).html()); totalprice.push($("#"+i+" .totalprice"+i).html()); } }); }); </script> <script> $(".qtol2,.qtol1").keyup(function() { $('.qtol3').val($('.qtol1').val() * $('.qtol2').val()); }); </script> </head> <body> <div class="form-group"> <form> <input name="patid" type="text" id="patid" placeholder="patid" value=""> <div class="container" id="multiple"> <input name="test_code" type="text" id="test_code" placeholder="code" value=""> <input name="test_name" type="text" id="test_name" placeholder="Item Name" value=""> <input class="qtol1" name="generalprice" type="text" id="generalprice" placeholder="general price"> <input class="qtol2" name="quantity" type="text" id="quantity" value="1" onClick="calc()" placeholder="quantity"> <input class="qtol3" name="totalprices" type="text" id="totalprices" placeholder="total prices"> <input name="send" type="button" id="butsend" class="add-row" value="Add Row"> </div> <div> <input name="save" type="button" class="btn btn-primary" value="Save to database" id="butsave"> </div> <table id="table1" name="table1" class="table table-bordered"> <tbody> <thead> <tr> <th>Serial no.</th> <th>ID</th> <th>Test code</th> <th>Test name</th> <th>General price</th> <th>Quantity</th> <th>Total prices</th> <th>Action</th> </tr> </thead> </tbody> <tfoot> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td>Total:</td> <td ><input id="subtotal" type="text"></td> <td> </td> </tr> </tfoot> </table> </form> </div> </body> </html>
  11. unable to understand why black image is getting, please check the code and assist in generating the optimised image from file input <html> <head> <script src="jquery-3.4.1.min.js"></script> <title>Image Optimization</title> </head> <body> <div> <input type="file" id="imgFile" accept="image/*" capture="user"> </div> <div id ="test"> <img id="optImg" alt="optmisied Image"> </div> </body> </html> <script> $("#imgFile").change(function(){ const File = this.files[0]; const fileURL = URL.createObjectURL(File); const cvs = document.createElement("canvas"); let ctx = cvs.getContext("2d"); const imgFile = new Image(); imgFile.src = fileURL; imgFile.onload = function(){ ctx.drawImage(imgFile,0,0); } const cvsURL = cvs.toDataURL(File.type, 0.3); $("#optImg").attr('src',cvsURL).css('width',80) }); </script> please assist
  12. Hello There, As I was going through your documentation of W3C for javascript. I would like to suggest one change in documentation. As per your Javascript documentation of https://www.w3schools.com/js/js_performance.asp (Reduce Activity in Loops) Bad code is as follows: var i; for (i = 0; i < arr.length; i++) { Better Code: var i; var l = arr.length; for (i = 0; i < l; i++) { But in URL (https://www.w3schools.com/js/js_htmldom_elements.asp) >> Finding HTML Elements by HTML Object Collections. In this example: var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements.value + "<br>"; } document.getElementById("demo").innerHTML = text; From above example the highlighted line should be replaced with Better code. Also after filling form for Report Error on page https://www.w3schools.com/js/js_htmldom_elements.asp and when i click on submit below API gives me error like API : https://www.w3schools.com/err_sup.asp "We cannot find the page you are looking for. It might have been removed, had its name changed, or is temporarily unavailable. Please check that the Web site address is spelled correctly." Please let me know, if I could help you here. Regards, Amol Rajhans
  13. I followed the tutorial to create an accordion. Now, I would like to link to individual headers in that accordion and have them load opened. How can I edit the code to do this? Here is what I'm using: <style type="text/css">.accordion { background: none; color: #3d8bb1; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 18px; font-weight: bold; transition: 0.4s; } .active, .accordion:hover { background: none; color: #2e6885; } .accordion:after { content: '\002B'; color: #2e6885; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> <button class="accordion">TITLE</button> <div class="panel"> <p> CONTENT</p> </div> <button class="accordion">TITLE</button> <div class="panel"> <p>CONTENT</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script>
  14. hello all i am trying to use 'keydown' function to move through html rows. but i could not succeed. here is what i tried-- $("body").on("keyup", function(e) { if ($("#mid").find(".maintable tr[data-selected='Y']").length == 0) { $("#mid").find(".maintable tr").first().data("selected", 'Y').addClass("thisrow"); } else { if (e.which === 40) { $("#mid").find(".maintable tr[data-selected='Y']").next().data("selected", 'Y').addClass("thisrow"); $("#mid").find(".maintable tr[data-selected='Y']").first().data("selected", 'N').removeClass("thisrow"); } else if (e.which === 38) { $("#mid").find(".maintable tr[data-selected='Y']").prev().data("selected", 'Y').addClass("thisrow"); $("#mid").find(".maintable tr[data-selected='Y']").last().data("selected", 'N').removeClass("thisrow"); } } }) in the above code, '#mid' is a div that holds data retrieved from jQuery.ajax function. below is the backend code data from which is attached to the '#mid' div. $data = "<table class='maintable'>"; $sn = 0; while ($r = $q->fetch_object()) { $sn++; $name = $r->name; $aid = $r->aid; $ac_id = $r->ac_id; $ob = $r->ob; $data .= " <tr data-target='acregister.php?aid=$aid&m=e' data-selected='N'> <td>$name</td> <td style='width: 150px;'>$ac_id</td> <td style='width: 150px;'>$ob</td> </tr>"; } $data .= "</table>"; echo $data; here i want to use up and down arrows to move through the rows retrieved from ajax function. on the rows i've attached 'data-selected' value to know which row is selected. and on each keydown function i want change the 'data-selected' value of next row to 'Y' and change its value to 'N' for the previous one. the above code worked only once. it changed the value for new row but didnot change the value for the previous one and hence when i press down arrow, it selects first row but does not move to next row on another down arrow press. please guide me, what i missed?
  15. Dear all, I managed a web interface under Linux/Apache. This interface must start and stop some shell scripts, through HTML buttons. My goal is to use just only one HTML button to do 3 actions: 1- Stop a shell script 2- Open a new HTML page 3- Start a new shell script So, usually, I will drive it like this: <script language="javascript"> function button() { function1(); function2(); function3(); } </script> But my problem is what kind of Javascript function is able to start and stop a shell script ? I found various answer with PHP, but I don't want use it ! Just HTML/JAVASCRIPT. Can you please help me ? Thank you for your support and help. Best regards,
  16. HI, I'm sure I've seen on a websites somewhere the ability to either select an option from a dropdown list or enter an alternative. Can anyone give me any pointers in how to achieve this? Thanks Phil
  17. Hello, w3schools. I like your tutorials very much and used to come to this site daily. I would love, if it possible, that you created some webgl or ThreeJS tutorials. I really want to learn how to create 3D graphics on the web, so please if you can, create tutorials that cover WebGL or ThreeJS. I'd prefer ThreeJS. Anyway, thanks in advance. Sincerely, Vlad Kvaskov
  18. Hi I am new to javascript and was creating search suggestions referring to the article on https://www.w3schools.com/howto/howto_js_filter_lists.asp , but the search suggestions in output are not sorted. Can someone guide me on updating this code to get alphabetically sorted suggestions? Thanks in advance
  19. chob1234


    Confused on why my toFixed(2) function is not rounding my output. Located at the bottom of my code here. My output is "501327.3600770543" //// Get the sq inch. for BuildIDs that start with AA and //// sets value to the "result" variable var result=0; var params = { maxItems: 100000 /* NUMBER */ }; //// result: INFOTABLE var itPartInfo = Things["Training.InfoTable.PartInfo"].GetDataTableEntries(params); // Return square inches of Oak needed for each build ID that starts with AA // Like type filters by a like criteria // filters rows from Infotable PartInfo var query = { filters: { "type": "AND", filters: [ { "fieldName": "BuildID", "type": "LIKE", "value": "AA*" }, { "fieldName": "MaterialType", "type": "EQ", "value": "Oak" } ] } }; var oakparams = { t: itPartInfo /* INFOTABLE */, query: query /* QUERY */ }; // result: INFOTABLE var sqresult = Resources["InfoTableFunctions"].Query(oakparams); //Infotable for loop snippet var tableLength = sqresult.rows.length; // for loop will loop through itPartInfo, calculate the sq. in. for each part that starts with AA and return // sq. in. in "result" for (var x = 0; x < tableLength; x++) { var row = sqresult.rows[x]; //Your code here //+= addition assignment operator is basically same as "x = x + y" result += (row.Height*row.Width); result.toFixed(2); }
  20. var params = { maxItems: 100000 /* NUMBER */ }; //// result: INFOTABLE var itPartInfo = Things["Training.InfoTable.PartInfo"].GetDataTableEntries(params); ///***************************************** // ADD YOUR CODE BELOW //*****************************************/ var query = { "filters": { "fieldName": "ID", "type": "EQ", "value": partID } //partID is an input }; var idQuery = { t: itPartInfo /* INFOTABLE */, query: query /* QUERY */ }; //// result: INFOTABLE var result = Resources["InfoTableFunctions"].Query(idQuery); So this code will return an item in an infotable(thingworx) which is basically an array of objects, it can also be thought of as a table where the array entries are rows and the object properties of each object in the array are the columns. So currently my output is displaying what I have correctly, I need to know how I could display say partID, Color, and MaterialType, my thinking was a I could use a sort function like var sort = new Object(); sort.name = Color; sort.ascending = True; itPartInfo.Sort(sort); But I am getting errors. Any suggestions?
  21. Hi! Im trying to add a function that gives the text in my code a random background color (either yellow, red or green). I want this random color change to happen when I press the button. Can anyone help me with this? my code sofar is: <!DOCTYPE html> <html> <body> <p id="output_paragraph">Click the button to change the text in this paragraph.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("output_paragraph").innerHTML = "Hello World"; } </script> </body> </html>
  22. I am unable to display Date and Time on clicking button. Sublime Text image is attached
  23. The example of the AutoComplete Textbox on W3Schools does not work when as entry has an apostrophe in it. It populates the textbox with the characters before the apostrophe but not after. This is a bug. How do you fix this issue? To reproduce this issue, go to the following link. https://www.w3schools.com/howto/howto_js_autocomplete.asp Type in the text box the letter T and try to select "Timor L'Este Thanks
  24. Hi all, I am trying to work with tabs and using the How to Create Tabs page on the w3 site below. I am unclear on one part. In the HTML code, what is the event parameter referring to in the onclick function. I've copied on of the relevant lines below. If someone could elaborate further it would be much appreciated. <button class="tablinks" onclick="openCity(event, 'London')">London</button> https://www.w3schools.com/howto/howto_js_tabs.asp
  25. Hi everyone, I'm still learning, but getting deeper now. I'm trying to use JavaScript and PHP in one page in website. I'm trying to make a switch video source on html by click on button. I believe I'm doing right in PHP, but Javascript seem something is missing. I don't understand how it gone work...it said undefined. <!doctype html> <html> <head> <link href="css/grammar.css" rel="stylesheet" type="text/css"> <link rel="icon" href="images/sigma.png"> <script type="text/javascript" src="js/checkbox.js"></script> <script> function clickvideo() { let path = document.getElementById("video1").button; document.getElementById("display").innerHTML = "<video width='450' controls style='border-radius: 5px;' height='240' type='mp4'>" + "<source src='UPLOADS/Breakfast/" + path + "'></video>"; } </script> </head> <body> <table class="table"> <tr><td><video width="450" controls style="border-radius: 5px;"><source src="video/Ha_Demo.mp4"></video></td></tr> <tr><td> <div id='display'><video width='450' controls style='border-radius: 5px;'><source src="UPLOADS/Breakfast/hello.mp4"></video></div></td></tr> <tr><td> <?php $video = opendir("UPLOADS/Breakfast/"); while(($listvideo = readdir($video)) !== FALSE) { if(preg_match("/^[^\.].*$/", $listvideo)) { echo "<button id='video1' onclick='clickvideo()'>".$listvideo."</button>&nbsp;"; } } ?> </td></tr> </body> </html>
  • Create New...