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


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

Found 839 results

  1. Hello, I am pretty new in JavaScript. These days I am implementing slideshow on my project. But I am facing with two problems: Problem number 1: I would like my slideshow to have two options : - option number 1: arrays with user can slide images manually - option number 2 I want images to slide automatically for (lets say) 5 seconds. My problem is that I can`t implement these two options to run together. On w3schools.com they are codes for option number 1 and option number 2 but are separately, and I can`t implement to run together. Is there any way there options to run together? Problem number 2: It will be much better for my project if I can implement some cool slides when my images slides. For now, they are sliding normal from right to left, but as I can see, they are options for images to slides on very cool way. Here there are some cool slides: https://amazingslider.com/examples/ My code is here: CSS: .slideshow-container { position: relative; max-width: 1200px; box-sizing: border-box; margin: auto; } .number { position: absolute; color: white; margin: 15px; font-size: 18px; } .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } .prev { position: absolute; top: 50%; color: white; font-size: 35px; left: 0; padding-left: 15px; padding-right: 15px; background-color: black; } .next { position: absolute; top: 50%; color: white; font-size: 35px; right: 0; padding-left: 15px; padding-right: 15px; box-sizing: border-box; background-color: black; } .prev:hover, .next:hover { background-color: gray; cursor: pointer; } .dot { width: 15px; height: 15px; background-color: lightgray; border-radius: 50%; margin: 5px; display: inline-block; cursor: pointer; } .active { background-color: #717171; } .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: transparent; overflow: hidden; width: 100%; height: 10%; transition: 0.5s ease; } .container:hover .overlay { height: 100%; } .text-overlay { color: #333; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .images-overlay { display: flex; margin-left: 15%; margin-right: 15%; } Javascript var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides((slideIndex += n)); } function currentSlide(n) { showSlides((slideIndex = n)); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; setInterval(showSlides, 1000); }
  2. Hello I'm pretty new to coding and I'm wondering how to stack these image slideshows. https://www.w3schools.com/howto/howto_js_slideshow.asp The issue I get is once I try to put 2 of these image slideshows one underneath the other the slide arrow buttons remain in the same place instead of going next to the second image slider, they remain as if they were a part of the first one except the new arrow buttons are wider apart (which is intended except they should be 5 inches lower on the screen next to the second image slideshow) and also all the arrow buttons only affect the second image slideshow instead of the first arrow buttons affecting only the first slideshow and second arrow buttons affecting only the second slideshow. Hopefully I explained my issue well.
  3. Okay, first I want to say you I'm very new in TypeScrpt. Now I have a question. TypeScript is a static type checking language. But, when TS code is transpile to JS code this features got loss. Here is my code. demo.ts function add(x:number , y:number) { return (x+y); } add(5,"Raktim"); In the above TS code x and y only capable to accept number and it will perform addition. But, I callback this function and pass number and string intentionally to the function. So, TS compiler obviously give error as a result. But, now look the generated JS code. demo.js function add(x, y) { return (x + y); } add(5,"Raktim"); So, in the JS code x and y are capable to accept any value. So, here this code perform string concatenation not addition. My question is when TypeScript type checking features got loss on JS then why we use it? Then, what the actual benefit behind of TypeScript type checking? Is It really useful?
  4. I am following the tutorial here, and I would like to add more than two slideshows on a page. I tried this: <h4>10 Shot Photo Challenge #1</h4> <div class="slideshow-container"> <div class="mySlides1"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_BlackAndWhite.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Contrast.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Emotion.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_FavoriteColor.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Misc.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Numbers.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Outside.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Rule_of_Thirds.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_StartingWithB.jpg" style="width:100%"> </div> <div class="mySlides1"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_UpClose.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a> <a class="next" onclick="plusSlides(1, 0)">&#10095;</a> </div> <br> <br> <h4>10 Shot Photo Challenge #2</h4> <br> <div class="slideshow-container"> <div class="mySlides2"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_happy.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_January.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2873.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2931.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2985.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2986.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3031.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3037.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3041.JPG" style="width:100%"> </div> <div class="mySlides2"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_E3040.JPG" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a> <a class="next" onclick="plusSlides(1, 1)">&#10095;</a> </div> <br> <br> <h4>10 Shot Photo Challenge #3</h4> <br> <div class="slideshow-container"> <div class="mySlides3"> <div class="numbertext">1 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0139.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">2 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0144.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">3 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0157.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">4 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0158.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">5 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0159.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">6 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0160.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">7 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0192.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">8 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0199.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">9 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0936.JPG" style="width:100%"> </div> <div class="mySlides3"> <div class="numbertext">10 / 10</div> <img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0945.JPG" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a> <a class="next" onclick="plusSlides(1, 2)">&#10095;</a> </div> <script> var slideIndex = [1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1, 0); showSlides(1, 1); showSlides(1, 2); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> This made 2 slideshows, but the third one didn't work. How can I get a third slideshow onto this webpage? ZIP file attached with all website files. 10shot.html is the file I am having trouble with. Alex's Website.zip
  5. Formatting dates seem to be not working in the examples of W3 schools. Any ideas why? https://www.w3schools.com/js/js_date_formats var d = new Date("2015-03-25"); results in: Wed Mar 25 2015 01:00:00 GMT+0100 (Central European Standard Time)
  6. Hi all, I’m learning to code and building a site to push my learning along. However, I am having a frustrating issue. On my site I would like to have search functionality, but for the search to be completed on a different URL. I understand this requires query parameters, but I'm a bit lost. For example, if my site is “www.mysite.com” I would like a user to be able to input their city (could be any city in the world) and then select an option from a dropdown menu, say ‘running’ or ‘cycling’ and then the combination of the two querys added together and executed on “www.fitnessbuddies123xyz.com” (for example) and if someone had added a listing for a fitness buddy on “www.fitnessbuddies123xyz.com” and the string matched a URL on that site then the results would appear. My current HTML is below: Firstly, I have a text box: <input type="text" class="form-control-lg form-control" id="inputText12" placeholder="City"> And then there is a drop-down menu, with three set options: <select class="form-control form-control-lg" id="exampleFormControlSelect1"> <option>Running</option> <option>Cycling</option> <option>Walking</option> </select> I then have a button: <a href="url" class="btn btn-lg btn-block btn-primary">Search</a> Any help on how I can create the query string for the text box and dropdown menu and then execute on an external URL would be much appreciated. Thanks in advance!
  7. Hello guys, I´m currently creating a website and have to use some kind of a switch button (in iOS-Style). I already implemented the switch button, however I want the user to switch with the button between two upcoming photo galleries. Because documentation in the www is lacking, I would need your support. Because I´m pretty unexperienced in website coding, I used the W3school switch button (https://www.w3schools.com/howto/howto_css_switch.asp) I hope you could help and I´m sorry for being such unexperienced but having high demands.
  8. I am able to retrieve data from a js like this: <!DOCTYPE html> <html> <body> <script> var a=[1,2,3,4] </script> <?php $ap= "<script> document.write(a) </script>"; print_r ($ap); $b=explode(',',$ap); print_r($b); ?> </body> </html> Result: 1,2,3,4Array ( [0] => 1,2,3,4 ) Why is the array not explode
  9. Where can I find real examples and codes of javascript? Is there any references for: javascript calculator , form validate , javascript sliders , and...
  10. html,body{ padding:0; margin:0; background:whitesmoke; } .cont{ position:relative; width:100%; padding:0; margin:0; text-align:center; } .calsi{ width:350px; padding:0; margin:100px auto; text-align:center; background:#d82ed8; box-shadow:0px 0px 6px 0px #0006; } .calsi h1{ font-size:40px; font-family:calibri; font-weight:bold; color:white; text-transform:cepitalize; padding:8px 0px; text-align:center; width:100%; background:#222; margin:0 auto; } #inp{ position:relative; width:100%; padding:8px 0px; text-align:center; font-size:16px; font-family:arial; font-weight:normal; color:#222; outline:none; border:none; background:white; } .btns{ position:relative; width:100%; padding:10px 0px; } .btns button{ border:none; outline:none; width:50px; height:50px; font-size:30px; color:#222; vertical-align:middle; border-radius:5px; background:white; margin:10px 5px; display:inline-block; } button{ border:none; outline:none; width:100px; height:50px; font-size:20px; color:#222; border-radius:5px; vertical-align:middle; background:white; margin:10px 5px; display:inline-block; } <div class="cont"> <div class="calsi"> <h1>Calculator</h1> <input type="text" id="inp" placeholder="Enter Value..." readonly=""> <div class="btns"> <button onclick="AT_add(1)">0</button> <button onclick="AT_add(1)">1</button> <button onclick="AT_add(2)">2</button> <button onclick="AT_add(3)">3</button> <button onclick="AT_add(4)">4</button> <button onclick="AT_add(5)">5</button> <button onclick="AT_add(6)">6</button> <button onclick="AT_add(7)">7</button> <button onclick="AT_add(8)">8</button> <button onclick="AT_add(9)">9</button> <button onclick="AT_add('+')">+</button> <button onclick="AT_add('-')">-</button> <button onclick="AT_add('/')">/</button> <button onclick="AT_add('*')">*</button> </div> <button onclick="exe()">=</button> <button onclick="cancel()">⌫</button> <button onclick="cls()">c</button> </div> <script>var val=document.getElementById("inp"); function AT_add(v){ val.value+=v; } function cls(){ val.value=""; } function exe(){ val.value=eval(val.value); } function cancel(){ val.value=val.value.substr(0,val.value.length-1); }</script> ApakaTechnology@128953.html
  11. Hi , I am not familiar with javascript at all , I am going to learn node.js (I have a good background in python , c ) now , I don't know where to start, should I master js then go for nodejs , or a basic learning of js is adequate for nodejs or... I will appreciate if you suggest useful sources and websites to learn . Thanks in advance
  12. Hi, I was wondering how I could 'copy' the way w3 schools website menu from scrolling up and disappearing? I am using w3css for my projects. I was wondering if the feature I mentioned can be done using w3css. Thanks, Ben
  13. Hello everyone, i have created a html form and a button. Javascript reacts to the button click sends the html values to functions.php and there i have a function to insert into the wordpress database. Every field is working and is being inserted into the database but i have some problems to upload and save a image file with these steps. Iam not using a html form i wanted to go the javascript way. Is there any option/solution to insert an image file as blob into mysql using php without form submit just via javascript ajax ? Thanks and best regards, Atilla
  14. I finished studying html, and i started CSS but its same as html. should i skip css and just go to JS? i have a background in c (arduino and raspberry pi ), am not interested in the whole front-end code (its like making a power-point presentation more than coding). when am going through css its like a am going through html yet again. i could finish it in a week probably (since i finished studying html and since it seems like css is the style sheet of html). am just feeling like am wasting my time. I have this bad habit, if i start reading something, i don't feel completed if i don't go from cover to cover. PS: even if i got a comment to skip CSS, i would probably do the contrary and finish it (i just don't feel its that important for a person who is interested in the back-end programming ). i have got this bad habit of following numbers and steps even if its so repetitive.
  15. I have a use case where my content editable div accepts only string inside it but it shows the html elements as they are supposed to be shown on website but as per the configurations mentioned in package. They have mentioned the attributes but not click events. Now, if I have string as `some text here <button onclick=someFunction()>button</button>`. Here someFunction is directly being called without triggering button because I think it is in string. How can I call `someFunction()` only when button is clicked.
  16. On the tutorial for an image gallery slideshow (https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp) the example starts with the first image enlarged. The code they provided doesn't apply that to my website, I have to select an image to enlarge it, is there something I can add? Thanks
  17. This code gives an error that x[m] is undefined when it calls show(i) but it works fine if I call like show(0). What happens? I already declare x and m then why it gives an error? My code... <html> <head> <style> .myslides{margin: 0px;} </style> </head> <body> <div class="myslides"></div> <div class="myslides"></div> </body> <script> var x = document.getElementsByClassName("myslides"); var i = -1; function show(m) { x[m].style.display = "block"; } function hide(n) { x[n].style.display = "none"; } while(i<x.length) { i = i+1; show(i); setTimeout(hide(i), 3000); if(i==x.length){i = -1;} } </script> </html>
  18. MOTIVATION: It is sometimes said that time heals all. With this in mind I am hoping that the W3Schools community has advanced since the last time that I communicated and has found a solution to the following problem. BACKGROUND: Recently I created a new webpage that can be found at www.publiustwo.com/ali. If you open this page in an iPhone with a vary narrow viewport such as my own, you will observe that filling in any of the form items that require text input, and in several cases even those that do not, causes the width of the document to increase beyond the size of the available viewport and does not return it to its former size after the input has been completed. QUESTION: It would appear that there are two solutions to this problem: one, prevent the size of the page from expanding in the first place; two, cause the size of the page to retract after the entry has been completed. Has anyone found a solution to this problem" Roddy
  19. Raktim

    Animated Modal Box

    I create a modal box that when the user clicks on the button the modal will appear with animation. When the user clicks on the close button ( located on the right side of the header area ) or anywhere of the screen except modal box it will disappear without animation. I want that the modal will disappear/hide with animation. I create two CSS animation. One is animatetop which I already used when modal will open and another is animatedown which I want to use when modal will disappear. But, I can't understand how to do that? See the code on JSFiddle <html> <head> <style> .background{ display:none; position: fixed; z-index: 1; height: 100%; left: 0; top: 0; width: 100%; padding: 100px; background-color: rgba(0,0,0,0.4); } .modal{ background-color: white; position: relative; border: 1px solid #888; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animatetop; animation-duration: 0.4s; width: 80%; } .header{ width: 100%; padding: 8px 20px; background-color: crimson; color: white; } .footer{ width: 100%; padding: 8px 20px; background-color: lime; color: white; } .middle{ width: 100%; padding: 2px 20px; background-color: white; color: black; } h2{ margin: 0px; } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatedown { from {top:0; opacity:1} to {top:-300px; opacity:0} } span{ float: right; color: white; font-size: 28px; font-weight: bold; cursor: pointer; padding: 2px 5px; } </style> </head> <body> <button onclick="modal()">Open Modal</button> <div class="background" id="MyModal"> <div class="modal" id="modal"> <div class="header"> <span onClick="a()">&times;</span> <h2>Header</h2> </div> <div class="middle"> <h1>Modal</h1><br> <h1>Popup Box</h1> </div> <div class="footer"> <h2>Footer</h2> </div> </div> </div> </body> <script> background = document.getElementById("MyModal"); function modal() { document.getElementById("MyModal").style.display = "block"; } function a() { document.getElementById("MyModal").style.display = "none"; } window.onclick = function (event) { if(event.target == background) { document.getElementById("MyModal").style.display = "none"; } } </script> </html>
  20. Hi Everyone, I'm trying in a bootstrap view to replace two dropdown lists (yes/no) by two toggle checkboxes. Here is the part of code used on the Edit View : <div class="row"> <div class="col-md-3" style=""> <div class="col-sm-12"> <label for="d_c" class="col-sm-12 control-label">DC</label> </div> </div> <div class="col-md-3" style="" > <div class="col-sm-12"> <label for="i_m_c" class="col-sm-12 control-label">IMC</label> </div> </div> <div class="col-md-6" style="" > <div class="col-sm-12"> </div> </div> <div class="col-md-3" style=""> <div class="col-sm-12"> <input type="checkbox" name="test_1" id="test_1" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger"> </div> </div> <div class="col-md-3" style=""> <div class="col-sm-12"> <input type="checkbox" name="test_2" id="test_2" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger"> </div> </div> <div class="col-md-6" style="" > <div class="col-sm-12"> </div> </div> </div> When i check the test_1, 'on' is stored in my (sql) database, when i check test_2, 'on' is also stored. my problem is that i would like to be able to have test_2 toggle button visible only when test_1 toggle button is checked, and when test_1 is not checked to store 'NULL' as test_2 value. And when test_2 is checked to force test_1 value to be 'on', and force test_2 value to 'NULL' if test_1 is not checked. ALL that I tried in javascript ended in a failure, so if there is anybody who can tell me how to get out of it, any help will be really appreciated. (i have try following javascript (div names have been removed from code above as nothing worked as i want to)) <script type="text/javascript"> function Change() { if ((document.getElementById('test_1').checked)) { document.getElementById('madiv').style.display="block"; document.getElementById('madiv2').style.display="block"; } else { document.getElementById('madiv').style.display="none"; document.getElementById('madiv2').style.display="none"; } } </script> And if anybody can tell me how to get the checkbox value on another bootstrap form (Modify View)... i'tried with value="<?php echo...; ?>" but it doesn't worked.. a big big thanks in advance. (sorry for my poor english) Have a nice day. Jeff
  21. 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
  22. 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
  23. 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>
  24. 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?
  25. 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>
×
×
  • Create New...