Jump to content

Search the Community

Showing results for tags 'javascipt'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. Hi! I would like to know if it is possible to convert the code that was wrote based on JavaScript to Java or Kotlin. What type of commands do I need to do, to make these changes? This one is part of a BootCamp´s exercises that I am engaged in. Below, the code and IDE´s print: for (i = 0; i < 3; i++) { let t = gets(); let v = gets(); let arrayV = v.split(" "); let maior = 0; let nivel = 0; maior = arrayV.reduce((a, b) => ( Math.max(a, b) )) if (maior < 10) { nivel = 1; } else if (maior < 20) { nivel = 2; } else { nivel = 3 } console.log(nivel) }
  2. I have made a custom browser in Visual Studio with Visual Basic. The browser works great but does not run JavaScript so websites think I'm outdated. Does anyone know what I could do to let my browser run JS?
  3. I want to make a RPG game that can be run in a browser. The goal of the post is to see if I can get other developers to help. I know HTML and CSS but don't know JavaScript, which is a big part of game. ( I am learning it now ) I want the graphics to look similar to pixel dungeon. The people who sign up will get equity of the game. While this game is to be made for fun it could also make money. For more details about the game details ( such as classes, levels, etc. ) contact me.
  4. I've seen this (and similar) code used to apply an SVG filter to an image. How do I use this code to apply an SVG filter to a canvas? The canvas' content may change often. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="darkGreen"> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> <image xlink:href="(url to image)" width="" height="" filter="url(#darkGreen)" /> </svg> Thank you
  5. Hello.I started learning javascript and my professor give me this to solve. Its program that turn on and turn off bulbs on different ways. It have number of bulbs and number of variations . The problem is that i don't know how to use function deleteBulbs because when i type smaller number , those who left must get changed with blank.jpg but they won't. Please help me and sorry for my bad english. I uploaded images with problem. In first example, 3 are turned on . So in example 2,when i type 1 and 0, last bulb is turned off and other 2 must be blank but they are not in my case. <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <p> <b> Task: </b> There are <i> n </i> bulbs in the room, each of which is turned on by a separate switch. How many ways can a room be lit? </p> Number of bulbs: <input id = "numOfBulbs" type = "number"> </p> Number of variations<input id="numOfVariations" type="number"></p> <p> <button type="button" onclick="numOfVariations();">Light up </button> </p> <img id="image7" src="blank.jpg"> <img id="image6" src="blank.jpg"> <img id="image5" src="blank.jpg"> <img id="image4" src="blank.jpg"> <img id="image3" src="blank.jpg"> <img id="image2" src="blank.jpg"> <img id="image1" src="blank.jpg"> <img id="image0" src="blank.jpg"> <p id="solution"></p> <script> function numOfVariations() { var n, i, p=1,v,s; n=document.getElementById("numOfBulbs").value; if(n>8 || n<=0) { window.alert("Incorrect number of bulbs!"); var s=document.getElementById("image0").value; s.src="blank.jpg" ; s=document.getElementById("image2").value; s.src="blank.jpg"; s=document.getElementById("image3").value; s.src="blank.jpg"; s=document.getElementById("image4").value; s.src="blank.jpg"; s=document.getElementById("image5").value; s.src="blank.jpg"; s=document.getElementById("image6").value; s.src="blank.jpg"; s=document.getElementById("image7").value; s.src="blank.jpg"; document.getElementById("solution").innerHTML="Total variations: 0"; return; } v=document.getElementById("numOfVariations").value; for (i=1;i<=n;i++) p*=2; if((v<0) || (v>=p)){ window.alert("Incorrect number of variations!"); var s=document.getElementById("image0").value; s.src="blank.jpg" ; s=document.getElementById("image1").value; s.src="blank.jpg"; s=document.getElementById("image2").value; s.src="blank.jpg"; s=document.getElementById("image3").value; s.src="blank.jpg"; s=document.getElementById("image4").value; s.src="blank.jpg"; s=document.getElementById("image5").value; s.src="blank.jpg"; s=document.getElementById("image6").value; s.src="blank.jpg"; s=document.getElementById("image7").value; s.src="blank.jpg"; document.getElementById("solution").innerHTML="Total variations:"+ p; return; } document.getElementById("solution").innerHTML="Total variations:"+ p; p=1; for(i=0;i<n;i++){ if(v&p) turnOn(i); else turnOff(i); p*=2; } } function turnOff(i) { var s; if(i==0){ s=document.getElementById("image0"); s.src="off.jpg"; } if(i==1){ s=document.getElementById("image1"); s.src="off.jpg"; } if(i==2){ s=document.getElementById("image2"); s.src="off.jpg"; } if(i==3){ s=document.getElementById("image3"); s.src="off.jpg"; } if(i==4){ s=document.getElementById("image4"); s.src="off.jpg"; } if(i==5){ s=document.getElementById("image5"); s.src="off.jpg"; } if(i==6){ s=document.getElementById("image6"); s.src="off.jpg"; } if(i==7){ s=document.getElementById("image7"); s.src="off.jpg"; } } function turnOn(i) { var s; if(i==0){ s=document.getElementById("image0"); s.src="on.jpg"; } if(i==1){ s=document.getElementById("image1"); s.src="on.jpg"; } if(i==2){ s=document.getElementById("image2"); s.src="on.jpg"; } if(i==3){ s=document.getElementById("image3"); s.src="on.jpg"; } if(i==4){ s=document.getElementById("image4"); s.src="on.jpg"; } if(i==5){ s=document.getElementById("image5"); s.src="on.jpg"; } if(i==6){ s=document.getElementById("image6"); s.src="on.jpg"; } if(i==7){ s=document.getElementById("image7"); s.src="on.jpg"; } } function deleteBulbs(i) { var s; if(i==0){ s=document.getElementById("image0"); s.src="blank.jpg"; } if(i==1){ s=document.getElementById("image1"); s.src="blank.jpg"; } if(i==2){ s=document.getElementById("image2"); s.src="blank.jpg"; } if(i==3){ s=document.getElementById("image3"); s.src="blank.jpg"; } if(i==4){ s=document.getElementById("image4"); s.src="blank.jpg"; } if(i==5){ s=document.getElementById("image5"); s.src="blank.jpg"; } if(i==6){ s=document.getElementById("image6"); s.src="blank.jpg"; } if(i==7){ s=document.getElementById("image7"); s.src="blank.jpg"; } } </script> </body> </html> y are not. bulbs translated.rar
  6. Hi there Is there anyone who can help a javascript Noob? And explain what is missing in my javascript code, so the pop-up only is displayed once per. session. Because right now, it pops up every time I click to a new page. And the idea is that it is should work like the business or consumer popup on dustin.com. Is my Javascrip code. <!--Modal--> <!--modalpopup Business eller privat--> <script> $(document).ready(function(){ //loads when document is ready if (document.cookie.indexOf('modal_shown=') >= 0) { //do nothing if modal_shown cookie is present } else { $('.modal').modal('show'); //show modal pop up document.cookie = 'modal_shown=seen'; //set cookie modal_shown //cookie will expire when browser is closed } }) </script> <script> $ts.ready(function() { $elm('[data-dismiss="modal"]').onclick = function() { $elm('.container').style.display = 'none'; } }); </script> <!--test--> <script> $ts.ready(function() { $elm('[data-dismiss="modal-footer"]').onclick = function() { $elm('.container').style.display = 'none'; } }); </script> <!---->
  7. https://www.w3schools.com/howto/howto_custom_select.asp The link above is a custom select dropdown. I'm trying to get each item in the dropdown go to a link. I've tried using; <body> Please select city : <select name="select-city" onchange="location = this.value;"> <option value="">Select-City</option> <option value="https://en.wikipedia.org/wiki/New_Delhi">New Delhi</option> <option value="https://en.wikipedia.org/wiki/New_York">New York</option> <option value="https://en.wikipedia.org/wiki/Bern">Bern</option> <option value="https://en.wikipedia.org/wiki/Beijing">Beijing</option> </select> </body> And this, <select name="formal" onchange="javascript:handleSelect(this)"> <option value="home.com">Home</option> <option value="https://www.Facebook.com">Contact</option> </select> <script type="text/javascript"> function handleSelect(elm) { window.location = elm.value; } </script>
  8. Hi all i need to duplicate a string using javascript problem is the string was taken from an xml node so, lots of things can go wrong. this is the string: <RunList Class="Parameter" Pages="0 ~ 3" Run="1" xmlns="http://www.CIP4.org/JDFschema_1_1"> <LayoutElement> <FileSpec URL="file://xxx/xxx/Jobs/xxx/xxx/xxx/xxx/xxx/xxx.pdf"></FileSpec> </LayoutElement> </RunList> any sugetions? thanks guy
  9. I'd like my video to start playing automatically when the page is launched without sound just like on this page: [LINK REMOVED]. I've tried any possible jQuery/javascript/CSS option I could find online but I always end up with Google error that's blocking the video from autoplay unless there was an interaction. How did they do it in the link above?
  10. 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.
  11. 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
  12. 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
  13. 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?
  14. 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
  15. 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?
  16. 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>
  17. 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);
  18. <!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>
  19. 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.
  20. 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
  21. 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
  22. 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>
  23. 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?
  24. 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,
  25. 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
×
×
  • Create New...