Jump to content

Search the Community

Showing results for tags 'js'.



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

  1. disease

    Node.js file server problems

    Hey there, I have followed the tutorial for the w3 raspberry pi led pwm Gpio controller using node.js (https://www.w3schools.com/nodejs/nodejs_raspberrypi_rgb_led_websocket.asp) unfortunately though it uses internal scripts and stylesheets. I have tried using express.static to set up file hosting but I couldn’t get it to work. I am needing to host additional files for the web server to read. I am fairly new at node.js so it might have been the way I was trying to implement it that caused the issue. Thanks in advance
  2. IvanConway

    State/Country Form Fields

    Being reasonably new at generating javascript, I am trying to create a form where the client enters the State of Birth (Queensland, Victoria, Tasmania etc) and by using javascript the Country of Birth is auto filled with "Australia". I have got to a stage where I can auto fill the Country field with a small js script with either onClick or mouseOver however I am at a loss with the code to be able to fill the Country field by entering the state name in the State field. At 75 I'm running out of brains and would appreciate a little help please. Autofill.html
  3. I am trying to copy form inputs from 3 address fields to corresponding duplicate fields in another section of my form. If I use the following script and html the process works perfectly. <input type="checkbox" id="copy" value="" name="copy" onclick="CopyAddress(this.form)"> <script> function CopyAddress(f) { if(f.copy.checked == true) { f.bstr.value = f.gstr.value; f.bsubcit.value = f.gsubcit.value; f.bstate.value = f.gstate.value; f.bpcode.value = f.gpcode.value; } else { f.bstr.value = ""; f.bsubcit.value = ""; f.bstate.value = ""; f.bpcode.value = "";} } <script> I would like to change the checkbox to a button like so: <input type="button" id="copy" value="Copy" name="copy" onclick="CopyAddress(this.form)"> However once I change to a button, the script will not run and I can't work out why. My limited understanding tells me the fault lies in line 2 of the JS, if(f.copy.checked == true). Can anyone tell me where I am going wrong please.
  4. rootKID

    show and hide next element

    FIXED IT! I placed my script a little lower on the document! Worked... no clue why tho :/
  5. Easy tutorial: HTML5 Canvas + pure JavaScript http://slicker.me/fractals/animate.htm
  6. codeminer

    Small Group Projects

    I think it would be great to have small group projects .We could build login system; with air tight state of the art security, photo gallary's, audio gallery's. I think it would be a great tool for learning web development . Just a thought.
  7. Hello people Can You help me with an Jave script ( it is unreadable and I think its also compiled or something like that ) I have try'd to look at it with an DeCompiler but it keeps unreadable It is used for calculations in another part of de system ( XML scripts ) The system (soft- and hard-ware) is made by an company that is not able to get service of this product. Because of problems with the system I'm trying to figure out how the software works. But this script is the part that is not possible to see what is going on in it. Filename = Calculations.js Note: It is running on an "Intel(R) Core(TM)2 Quad CPU Q6600 @ 2.40 GHz With Windows 7 Ultimate" system When someone can get the file more readable much thanks. calculations.js
  8. Dear W3schools community, I want to check if a required input is empty (has more then 0 characters). You guys have any idea what I'm doing wrong? Thanks in advance! If there is no character in input (id="vname") I still get a red "bar" Here's my code: function foobar() { var vname = document.getElementById('vname').value; if (vname.length > 0 && vname != '' && vname != null) { document.getElementById('contact-response').style.color = 'green'; document.getElementById('contact-response').innerHTML = "foo"; } else { document.getElementById('contact-response').style.color = 'red'; document.getElementById('contact-response').innerHTML = "bar"; } } I also tried length, null and '' separately. I also tried doing it with isEmpty(). Also I tried using || instead of &&. Nothing worked yet. Heres my HTML: <div id="wrapper-contact"> <form> <input type="text" id="vname" placeholder="*Vname" required="yes"> <input type="button" onclick="foobar()" value="Senden"> <p id="contact-response"></p> </form> </div>
  9. Hello, I can't figure out how to pause my animation when the cursor hovers over the slide. Here is my code: <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <style> .mySlides {display:none; height:130px} .w3-left, .w3-right, .w3-badge {cursor:pointer} .w3-badge {height:13px;width:13px;padding:0} </style> <body> <div class="w3-content" style="max-width:600px"> <div class="mySlides w3-animate-right" > <p>I really enjoyed my experience at LIV. The staff are very professional and friendly. I will be sure to refer some friends</p> <p> -Shaun <p> </div> <div class="w3-content" style="max-width:600px"> <div class="mySlides w3-animate-right"> <p>I have been welcomed by everyone and shown many kindnesses, along with hints of places to go, things to do and even assurances of safety on the streets as I walked home after the evening sessions. I came, I learned and I grew in my practice. I found peace. You have all carved a big space in my heart.</p> <p> -Debbie <p> </div> <div class="w3-content" style="max-width:600px"> <div class="mySlides w3-animate-right"> <p>I thoroughly enjoyed my first class. Looking forward to trying out the other classes soon. Thank you!</p> <p> -Lorna <p> </div> <div class="w3-center w3-container w3-section w3-large w3-text-white" style="width:100%"> <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" w3-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-white"; } var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 3000); } </script> </body> </html> What am I missing? Thanks!!
  10. NCPlayz

    How to start off on id

    Hello, this is my first time posting, and I wanted to know how to start of on an id using the W3Schools Tab function. Here is the code! <!DOCTYPE html> <html lang="en"> <head> <title>(null)'s Website</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link href="V1.css/Home.V1.css" rel="stylesheet"> <link href="V1.css/Home.V1.Slideshow.css" rel="stylesheet"> <script type="text/javascript" src="V1.js/Tabs.js"></script> <script type="text/javascript" src="V1.js/Slideshow.js"></script> <script src="https://www.w3schools.com/lib/w3data.js"></script> </head> <body> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'Home')">Home</button> <button class="tablinks" onclick="openCity(event, 'News')">News</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="Home" class="tabcontent"> <h3>Home</h3> <h2>Automatic Slideshow</h2> <p>Change image every 2 seconds:</p> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="V1.png/NEW!.png" style="width:100%"> <div class="text">Loving the look of our new website?</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="https://img.clipartfest.com/182119c47939e54a12e23325c2153d0d_garfield-clip-art-garfield-clipart_500-500.jpeg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="https://s-media-cache-ak0.pinimg.com/736x/35/a5/26/35a526aa3f44fb009da502db1127a82c.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> <div id="News" class="tabcontent"> <h3>News</h3> <button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">Updates</button> <div id="Demo1" class="w3-container w3-hide w3-animate-zoom"> <h4>Section 1</h4> <p>Some text..</p> <hr> </div> <button onclick="myFunction('Demo2')" class="w3-btn w3-block w3-black w3-left-align">Announcements</button> <div id="Demo2" class="w3-container w3-hide w3-animate-zoom"> <h4>Section 2</h4> <p>Some text..</p> <hr> </div> <button onclick="myFunction('Demo3')" class="w3-btn w3-block w3-black w3-left-align">Blog</button> <div id="Demo3" class="w3-container w3-hide w3-animate-zoom"> <h4>Section 3</h4> <p>Some text..</p> <hr> </div> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex> slides.length) {slideIndex = 1} 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"; setTimeout(showSlides, 10000); // Change image every 2 seconds } </script> <script> function myFunction(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> <script> jQuery("#menu li a").click(function(){ var page_url = jQuery(this).attr("href") jQuery(".wide_main").html("<p>loading...</p>"); jQuery(".wide_main").load( page_url + ' #home'); }); </script> </body> </html> What I want to start off on when the html file is loaded, is the 'home' id.
  11. The famous Mandelbrot set: http://slicker.me/fractals/fractals.htm
  12. Hello programmers, Just have met with the above statement which comes with www.veldfiets.nl/whbe2b. I have changed somewhere a thing and mismanaged the smoothscroll in the above way. I cannot find the mistake. Has anybody a clue? It has been a long time ago that I wrestled with the matter and got it working.... Thanks a lot.
  13. Hello. Here is some excerpted code which already works well. ------------------------------------------------------------------------------------------------------- <script type="text/javascript"> function checkForm(form) { if(form.username.value == "") { ... // many more lines </script> <form action="return_to_calling_page.html" onsubmit="return checkForm(this);" id="logonForm" > <p>Username: <input type="email" name="username" autofocus></p> <p>Password: <input type="password" name="pwd1"></p> <p>Confirm Password: <input type="password" name="pwd2"></p> <p><br/> <input type="submit" value="submit"> <button type="button" onclick="javascript:location.href='about_page.html'">cancel</button> </p> </form> ... // many more lines ------------------------------------------------------------------------------------------------------- Then the JavaScript question: The checkForm(form) function only checks input data against invalid character types. But we additionally need to check the logon input values are in the company db. So I tried to write and call a modified function which included the checkForm(form) function. But the new modified javascript function verifyLogon() does not seem to run at all? Currently the following modified code is in use (which does not appear to call verifyLogon() successfully): ------------------------------------------------------------------------------------------------------- <form action="return_to_calling_page.html" onsubmit="return verifyLogon();" id="logonForm" > <script type="text/javascript"> function verifyLogon() { alert("Entered verifyLogon()"); // print something, regardless, but never (yet) seen checkForm(form) // checkForm(form) does not (yet) run from here if(checkForm()) { // if checkForm() returns true, do un/pw lookup in db <?PHP some_php_code1 ?> // run some php, sql find un in db if($stmt1 = true) { // if un query returns true, then... <?PHP some_php_code2 ?> // run some php, sql find pw in db if($stmt2 = true) { // if pw query returns true, then... <?PHP some_php_code3 ?> // run some php, sql view customer account db records }else{ alert("Password not found in company db."); } }else{ alert("Username was not found in company db."); } }else{ document.getElementById("logonForm").reset(); // clears the form form.username.focus(); // sets focus to username field return false // return to form } } </script> ------------------------------------------------------------------------------------------------------- Currently, I am not very concerned about the (if) control logic inside the verifyLogon() function. The plan is to fine tune the (if) logic later once the verifyLogon() is running. Mostly now just want to get the verifyLogon() running at all. Thank you.
  14. j.silver

    JS Tutorials of W3Schools

    Dear all, Are JS tutorials of W3Schools written using the latest version of JS, known as ES6 (ECMAScript 6)?
  15. j.silver

    Importance of JS

    Hi all, Why do we hear and read that js is one of three programming languages a web programmer must learn besides html and css when there are also other widely used server-side languages, such as PHP? Is it because browsers are designed to mainly understand html, css, and js? If there are other reasons, kindly them spell out?
  16. Hi, I am creating a portfolio website. Here I want that the testimonials will scroll horizontally automatically and will pause on hover. Guys, please give me some hints on how can I perform this action. Here is the markup and style. <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } .testimonials-container::-webkit-scrollbar { display: none; .testimonials-wrapper { max-width: 100%; height: 450px; border: 1px solid lightgrey; background: linear-gradient(#000000, #777474); padding-left: 25px; padding-right: 25px; position: relative; } .testimonials-quote { width: 100%; text-align: center; padding-bottom: 20px; color: white; } .testimonials-container { width: 100%; height: 100%; text-align: center; display: flex; margin: 0; padding: 0; padding-bottom: 20px; overflow: scroll; } .testimonials-item { min-width: 230.99px; max-width: 230px; height: 70%; background-color: white; margin-right: 20px; margin-left: 20px; color: black; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .testimonials-item:last-child { margin-right: 0; } .testimonials-item:first-child { margin-left: 0; } .testimonials-image { width: 124px; border-radius: 50%; padding-top: 20px; } .testimonials-image img { width: 150px; height: 150px; border-radius: 50%; margin-left: 30%; } .testimonials-prev, .testimonials-next { position: absolute; top: 50%; padding: 10px 5px; font-size: 25px; color: white; cursor: pointer; z-index: 5; } .testimonials-prev { left: 0; border-radius: 0 3px 3px 0; } .testimonials-next { right: 0; border-radius: 3px 0 0 3px; } .testimonials-prev:hover, .testimonials-next:hover { background-color: white; color: black; } </style> </head> <body> <div class= "testimonials-wrapper"> <div class= "testimonials-quote"> <h1>What Others Say About Us</h1> </div> <div class= "testimonials-container"> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Rahim</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Karim</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Abdullah</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Yasir</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Mahmudullah</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Riad</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Shohan</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> <div class= "testimonials-item"> <div class= "testimonials-image"> <img src= "images/for%20use/tiger.jpg"/> </div> <div class= "testimonialists-name"> <h3>Shohan</h3> </div> <div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div> </div> </div> <span class= "testimonials-prev">❰</span> <span class= "testimonials-next">❱</span> </div> <script src= "jquery-3.1.1.min.js"></script> <script> var x = 270; $(document).ready(function() { $(".testimonials-next").click(function() { $(".testimonials-container").scrollLeft(x += 270); }); $(".testimonials-prev").click(function() { $(".testimonials-container").scrollLeft(x -= 270); }); }); </script> </body> </html> Waiting for your great hints. Thank you in advance.
  17. m.s_shohan

    Having problem with positioning

    Hi, here is a code. I want to make the .characteristics-quote to stay fixed when scrolling to the .characteristics-wrapper. But When the characteristics-wrapper class scrolling is finished the .characteristics-quote should be vanished. Can you please tell me how I can fix this ? Thank you in advance. <!DOCTYPE html> <html lang= "en-us"> <head> <meta charset= "utf-8"/> <title>About</title> <link rel= "stylesheet" type= "text/css" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style type= "text/css"> body { margin: 0; padding: 0; color: white; background-color: black; overflow: auto; } .about { max-width: 100%; height: 200px; background-color: black; color: white; text-align: center; padding-left: 10%; padding-right: 10%; padding-top: 5px; margin: 0; } .characteristics-wrapper { max-width: 100%; padding: 10px; margin-bottom: 200px; border: 1px solid white; overflow: hidden; } .characteristics-quote { max-width: 40%; float: left; transform: translateX(-5%); position: fixed; color: white; } .characteristics-quote h1 { max-width: 70%; text-align: center; margin: auto; padding-top: 100px; } .characteristics-container { max-width: 60%; float: right; text-align: center; position: relative; } .characteristics-item-row1, .characteristics-item-row2 { max-width: 50%; } .characteristics-item-row1 { padding-top: 50px; } .characteristics-item-row2 { position: absolute; top:50px; right: 0; } .characteristics-item { max-width: 80%; display: block; margin: auto; margin-bottom: 20px; margin-top: 20px; } .characteristics-icon { font-size: 60px; padding: 15px; border: 1px solid lightgrey; border-radius: 50%; height: 76px; width: 76px; margin: auto; } .characteristics-item:hover .characteristics-icon{ background-color: white; color: black; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; } /**Animations**/ .left { -webkit-animation-name: left; -webkit-animation-duration: 1s; -moz-animation-name: left; -moz-animation-duration: 1s; -ms-animation-name: left; -ms-animation-duration: 1s; -o-animation-name: left; -o-animation-duration: 1s; animation-name: left; animation-duration: 1s; } .right { -webkit-animation-name: right; -webkit-animation-duration: 3s; -moz-animation-name: right; -moz-animation-duration: 3s; -ms-animation-name: rightt; -ms-animation-duration: 3s; -o-animation-name: right; -o-animation-duration: 3s; animation-name: right; animation-duration: 3s; } .scale { -webkit-animation-name: scale; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: scale; -ms-animation-duration: 2s; -o-animation-name: scale; -o-animation-duration: 2s; animation-name: scale; animation-duration: 2s; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: fade; -ms-animation-duration: 2s; -o-animation-name: fade; -o-animation-duration: 2s; animation-name: fade; animation-duration: 2s; } /**Animating from the left**/ @-webkit-keyframes left { from {left: -500px;} to {left: 0;} } @-moz-keyframes left { from {left: -500px;} to {left: 0;} } @-ms-keyframes left { from {left: -500px;} to {left: 0;} } @-o-keyframes left { from {left: -500px;} to {left: 0;} } @keyframes left { from {left: -500px;} to {left: 0;} } /**Animating from the right**/ @-webkit-keyframes right { from {right: -500px;} to {right: 0;} } @-moz-keyframes right { from {right: -500px;} to {right: 0;} } @-ms-keyframes right { from {right: -500px;} to {right: 0;} } @-o-keyframes right { from {right: -500px;} to {right: 0;} } @keyframes right { from {right: -500px;} to {right: 0;} } /**Animating scale**/ @-webkit-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-moz-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-ms-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-o-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } @keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } /**Fading animation**/ @-webkit-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-moz-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-ms-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-o-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @keyframes fade { from {opacity: 0;} to {opacity: 1;} } </style> </head> <body> <div class= "about"> <h1>Who we are?</h1> <div class= "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan. Pellentesque commodo, enim nec faucibus tristique, risus nibh ullamcorper velit, sed egestas urna erat sit amet justo.</div> </div> <div class= "characteristics-wrapper"> <div class= "characteristics-quote"> <h1>Main characteristics of our services</h1> </div> <div class= "characteristics-container"> <div class= "characteristics-item-row1"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> <div class= "characteristics-item-row2"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item item2"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> </div> </div> <div style= "height: 700px"></div> </body> </html>
  18. Hi, I want to change the background image automatically every 5 second and the indicators should be green. I followed w3schools slideshow tutorial and created this slideshow. But it doesn't seem to work as expectation. Please tell me where I made the mistake. thank you in advance. <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } .header-slideshow-container { width: 100%; margin: 0; padding: 0; } .header-slide { display: block; width: 100%; height: 100%; margin: 0; padding: 0; } #header-slide1 { background-image: url("http://www.w3schools.com/howto/img_nature_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } #header-slide2 { background-image: url("http://www.w3schools.com/howto/img_fjords_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } #header-slide3 { background-image: url("http://www.w3schools.com/howto/img_mountains_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } .current-header-slides-container { position: absolute; top: 45%; right: 25px; margin-top: -30px; } .current-header-slide-indicator { width: 15px; height: 15px; border-radius: 50%; margin-bottom: 5px; background-color: black; } </style> </head> <body> <div class= "header-slideshow-container"> <div class= "header-slide" id= "header-slide1"></div> <div class= "header-slide" id= "header-slide2"></div> <div class= "header-slide" id= "header-slide3"></div> <div class= "current-header-slides-container"> <div class= "current-header-slide-indicator"></div> <div class= "current-header-slide-indicator"></div> <div class= "current-header-slide-indicator"></div> </div> </div> <script> var h = window.innerHeight; (function () { 'use strict'; document.getElementsByClassName("header-slideshow-container")[0].style.height = h + 'px'; }()); var headerSlideIndex = 0; headerSlideshow(); function headerSlideshow() { 'use strict'; var i, headerSlides = document.getElementsByClassName("header-slide"), dots = document.getElementsByClassName("current-header-slide-indicator"); for (i = 0; i < headerSlides.length; i++) { headerSlides[i].style.display = "none"; } headerSlideIndex++; if (headerSlideIndex >= headerSlides.length) { headerSlideIndex = 1; } for (i = 0; i < dots.length; i++) { dots[i].style.backgroundColor = "black"; } headerSlides[i-1].style.display = "block"; dots[i-1].style.backgroundColor = "green"; setTimeout(headerSlideshow, 5000); } </script> </body> </html>
  19. j.silver

    Affect of NULL Type in Coding

    Having NULL type as an object to be a bug in js, is there any harm to code this could result in, and what precautions should we take to avoid such harm?
  20. j.silver

    JS Basic Question

    <body> hello all <script> document.write(5+7); document.write(4); </script> </body> Above basic js code outputs: hello all 124 There is no concatenation between "hello all" and "12", yet space is there. I'd appreciate an explanation.
  21. Hi,I am developing my first website template. When I used this script in the internal script, it ran well. But when I added this script inside a file,the jsLint showed that there was almost 20 errors. Here I am sending the screen of the errors. Can you please help me to understand why these errors occurred and how can I resolve these? Here is the script: function openModalSearch() { 'use strict'; var modalSearch = document.getElementById("modal-search-container"); modalSearch.style.height = "100%"; } function closeModalSearch() { 'use strict'; document.getElementById("modal-search-container").style.height = "0%"; } function hideSearch() { 'use strict'; document.getElementById("search-container").style.visibility = "hidden"; } function showSearch(){ 'use strict' document.getElementById("search-container").style.visibility = "visible"; } Thank you in advance......
  22. Hi, I am facing problem to undestand the showSlides() function . Can you please explain this function to me . 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"; }
  23. Hi everybody http://www.w3schools.com/js/js_array_sort.asp If I'm right, the JS-Tutorial about sorting arrays randomly has a lack. The order of the array is kind of in a random order at the first glance, but the elements often stay at the same place as they were. This is true in the most for the element at the end of the array and the effect happens in most browsers, but not in all of them. I've written a script to test this. In these browsers the elements are not evenly distributed as they should: Chrome, IE, Edge, Opera. In Safari they were evenly distributed when I tried it. Try it yourself. <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var sum; var points; var i, j; sum = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; for (i=0;i<1000;i++){ points = [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1]; points.sort(function(a, {return 0.5 - Math.random()}); for (j=0;j<points.length;j++){ sum[j]+=points[j]; } } document.getElementById("demo").innerHTML = sum; </script> </body> </html> What the code does: It creates an array with a leading 1 and a 1 at the last place and zeroes between (points). Then it sorts this array randomly and adds the resulting array to a sum array. Then it starts again with the specific array. The generating, sorting and adding is done a 1000 times. When you reload the page the summed up numbers are displayed. Result: In many browsers the last number is higher than the others, which shouldn't happen with correct random sorting. Cheers, celus
  24. Hi, I am a beginner web designer and developer. Now I am learning javascript. But while learning I didn't understand the bitwise operators and how they works. In the below image how X converts to decimal? Please help as many experienced and professional web developers are present here. Thank you.
  25. Mad_Griffith

    Twitter API: JS and PHP

    Hi all, I would like to understand how JS/jQuery can interact with PHP to upload a status and a picture from the HTML5 canvas to Twitter. I set up a similar thing for FB and it works. I don't get how to do it for Twitter and I haven't found much about it. Could you explain to me how it works? I currently have this JS/jQuery code as a starting point: var formData = new FormData(), mimetype = canvas.toDataURL().substring(canvas.toDataURL().lastIndexOf(":") + 1, canvas.toDataURL().lastIndexOf(";")), blob = dataURItoBlob(canvas.toDataURL().split(',')[1], mimetype); formData.append('source', blob); $('#twitter').click( function() { $.ajax({ url: '', type: 'POST', data: formData, processData: false, contentType: false, cache: false, success: function() { $('#twitter').addClass('twitter-success'); setTimeout( function() { $('#twitter').removeClass('twitter-success'); }, 3000); } }); } ); Thank you!
×