Search the Community

does anyone know why this doesn't work? it shows the picture but when I hit on it to maximise it, its not there. please help <div class="galleryrow"> <div class="column"> <img src="images/gallery image 10.jpg" style="width:90%" onclick="openModal();currentSlide(10)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 9.jpg" style="width:90%" onclick="openModal();currentSlide(9)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 8.jpg" style="width:90%" onclick="openModal();currentSlide(8)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 7.jpg" style="width:90%" onclick="openModal();currentSlide(7)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 6.jpg" style="width:90%" onclick="openModal();currentSlide(6)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 5.jpg" style="width:90%" onclick="openModal();currentSlide(5)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 4.jpg" style="width:90%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 3.jpg" style="width:90%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 2.jpg" style="width:90%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 1.jpg" style="width:90%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" height="195px"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content"> <div class="mySlides"> <img src="images/gallery image 10.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 9.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 8.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 7.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 6.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 5.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 4.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 3.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 2.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 1.jpg" style="width:100%" height="700px"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 10.jpg" style="width:100%" onclick="currentSlide(10)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 9.jpg" style="width:100%" onclick="currentSlide(9)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 8.jpg" style="width:100%" onclick="currentSlide(8)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 7.jpg" style="width:100%" onclick="currentSlide(7)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Home"> </div> </div> </div> <script> function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } 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("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } </script>

Hello, If i run the following code in an ASP page it loads the file (stored on local server) and outputs the text as expected; <p id="demo"></p> <button type="button" onclick="loadDoc()">Load Feed</button> <script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "XML_TEST.xml", true); xhttp.send(); } </script> I need to run this from a URL not a local file. The URL has the exact same data and if i run the URL in a browser i get the data displayed in XML in the browser but when i change my code to fetch the data from the URL nothing happens. <script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "https://test.httpapi.com/api/domains/available.xml?auth-userid=user&api-key=key&domain-name=domain&domain-name=domain2&tlds=com&tlds=co.uk", true); xhttp.send(); } </script> any ideas please how i can get this to work?

Hello, I want to do a countdown and put it in my website. I did a countdown but I have a problem, when I launch it, the seconds are freezing they are not anymore running... So the countdown is not in realtime anymore... I have to refresh in order to see the countdown running. Here is what I did: <div id="after"> <span id="dhour"></span>:<span id="dmin"></span>:<span id="dsec"></span> </div> <div id="count2">Texte à afficher</div> <div class="numbers" id="dday" hidden="true"></div> <script> var ladate = new Date("<?php echo gmdate("Y-m-d\TH:i:s\Z");?>"); var year=ladate.getFullYear(); var month=ladate.getMonth()+1; var day=ladate.getDate(); var hour=14; var minute=20; var tz=0; var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); function countdown(yr,m,d,hr,min){ theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min; var today= new Date("<?php echo gmdate("Y-m-d\TH:i:s\Z");?>"); var todayy=today.getYear(); if (todayy < 1000) {todayy+=1900; } var todaym=today.getMonth(); var todayd=today.getDate(); var todayh=today.getHours(); var todaymin=today.getMinutes(); var todaysec=today.getSeconds(); var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec; var todaystring=Date.parse(todaystring1)+(tz*1000*60*60); var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min); var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60)); var dd=futurestring-todaystring; var dday=Math.floor(dd/(60*60*1000*24)*1); var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1); var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1); var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1); if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){ document.getElementById('count2').style.display="inline"; document.getElementById('after').style.display="none"; document.getElementById('dday').style.display="none"; document.getElementById('dhour').style.display="none"; document.getElementById('dmin').style.display="none"; document.getElementById('dsec').style.display="none"; document.getElementById('days').style.display="none"; document.getElementById('hours').style.display="none"; document.getElementById('minutes').style.display="none"; document.getElementById('seconds').style.display="none"; return;}else { document.getElementById('count2').style.display="none"; document.getElementById('dday').innerHTML=dday; document.getElementById('dhour').innerHTML=dhour; document.getElementById('dmin').innerHTML=dmin; document.getElementById('dsec').innerHTML=dsec; window.location.reload(); setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);}} countdown(year,month,day,hour,minute); </script> Thank you.

I Think It Would Be An Excellent Decision If You Add A Tutorial About The Sixth Version Of JavaScript To W3schools...

<p><strong>My first Javascript</strong></p> <button type="button" on-click="myfunction()">Click here</button> <script> function myfunction() {document.getElementById("demo").innerHTML = "Hello its Wednesday";}</script> <p id="demo">Hello its Tuesday</p> Any assistance would be much appreciated. I am learning the W3Schools tutorials and I can't seem to move forward. The results dont's show its a "Wednesday"! <script> function light(sw) {var pic; if (sw == 0) {pic = "gifs/pic_bulboff.gif"} else {pic = "gifs/pic_bulbon.gif"} document.getElementById('myImage').src = pic;</script> <img id="myImage" src="gifs/pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button></p> I can't quite make the light bulb to go on.

i wanted to use this sample code from code pen http://codepen.io/emilioincerto/pen/yaVzJd However, when i want to use it my java script isn't working Here is my code. <!DOCTYPE html> <html> <head> <script src="../java/java2.js"></script> <title> </title> </head> <body> <h1>Shopping List</h1> <ul class="shopping-list"> </ul> <div> <input type="text" id="item" /> <button id="b1" value="Add">Add</button> </div> </body> </html> ************This is JavaScript*********** $(document).ready( function(){ $("#b1").on("click", function(){ //grab the value of input element with id item and set it to userinput var userInput = $("#item").val(); //log userinput to the console console.log( userInput ); var shoppingItem = $(document.createElement("li")); //shoppingItem.addClass("item"); shoppingItem.html(userInput); if (userInput.length > 3){ $("ul.shopping-list").append(shoppingItem); //clear all input fields $("input").val(""); } }); $("ul").on("click", "li", function(){ console.log("test number two"); $(this).remove(); }); } );

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> #h1 { color: #000000; } </style> </head> <body> <h1 id ="h1">Discover Australia</h1> </body> </html> "use strict"; function changeColour() { var heading = ["Discover"]; for(var i =0;i<heading.lenght;i++) { heading = heading.split(" "); heading = heading.charAt(0).style.fontColor = "#F00"; heading = heading.charAt(1).style .fontColor = "#F00"; heading = heading.subString.style.fontColor = "#000"; } var result = heading.join(" "); console.log(result); } document.getElementById("h1").addEventListener("onload", changeColour,false);

Hello, I have created a java-script file which needs to see which check-boxes are checked and pass it to PHP Testing platform: Url: https://crezzur.com/test/backoffice/ Login: test@w3schools.com Pass: w3school When logged in go to the name " height " then next the "view" button click on the arrow and select "edit". there you will see a checkbox tree called "Available categories". So i need to find whats the issue for my JavaScript code not working. When you select a checkbox for example "Women" it should pass the variable to my php code when pressing on the save button. PHP code: if (Tools::isSubmit('activeOnCats')) { require_once(_PS_MODULE_DIR_.'featuresincategory/featuresincategory.php'); $fcat = new FeaturesInCategory(); $fcat->setFeatureCategories(Tools::getValue('activeOnCats'), Tools::getValue('id_feature')); } Anyone with some JavaScript knowledge could take a look at my issue?

Hi, below, I am creating a slider. I am passing the sliding method to the click handler, but such method doesn't fire when I call it. Do you have any idea why? Thank you this.sliding = function(e) { that.slide_width = $(that.article).width(); that.slide_number = $(that.article).size(); that.max_pos = that.slide_width * (that.slide_number - 1); that.left_pos = $(that.inner).position().left; if ($(this).hasClass('article-previous') && that.left_pos < 0) { $(that.inner).css({ 'left': '+=' + that.slide_width + 'px' }); } if ($(this).hasClass('article-next') && -that.left_pos < that.max_pos) { $(that.inner).css({ 'left': '-=' + that.slide_width + 'px' }); that.animateSkills(); } }; element.find('.article-previous, .article-next').off('click').on('click', { slidingAction : this.sliding}, function(e){ e.stopImmediatePropagation; e.data.slidingAction; // doesn't fire! });

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>

I'm trying to select data from a MySQL database that is hosted on a webserver. I want to be able to retrieve the data from a table within the database and then illustrate it within a HTML table. There's an example on W3Schools that I've been following, but I'm unable to retrieve the data successfully. http://www.w3schools.com/php/php_ajax_database.asp Below is the source code: (HTML) <html> <head> //Javascript code <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } } </script> </head> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Joseph Swanson</option> <option value="4">Glenn Quagmire</option> </select> PHP File: (getuser.phd) <!DOCTYPE html> <html> <head> <style> table { width: 100%; border-collapse: collapse; } table, td, th { border: 1px solid black; padding: 5px; } th {text-align: left;} </style> </head> <body> <?php $q = intval($_GET['q']); $con = mysqli_connect('www.example.com','user_Admin','12345-678','my_DB'); if (!$con) { die('Could not connect: ' . mysqli_error($con)); } mysqli_select_db($con,"ajax_demo"); $sql="SELECT * FROM user WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo "<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> </tr>"; while($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "<td>" . $row['Hometown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?> </body> </html> *MySQL table is attached I think the issue might exist from mysqli_select_db($con,"ajax_demo"); onwards inside the PHP file. Should I be referring to the table that contains the data inside the database? I have the PHP File hosted on my webserver, so I'm not sure why it won't retrieve that data when a person is selected from the list of options on the HTML page. Any help would be much appreciated.

Hi, I want to create a slideshow that will work automatically and also user can change slides manually. The manual slideshow is running but the automatic slideshow function is not running. Also the active-slides class doesn't get activated. Can you please help me on fixing the issue? Here is the code <!DOCTYPE html> <html> <head> <style> .project-images { max-width: 30%; height: 200px; position: absolute; left: 20px; } .mySlides { width: 100%; height: 200px; -webkit-animation-name: fade; -webkit-animation-duration: 1s; animation-name: fade; animation-duration: 1s; } .project-images-slideshow { width: 100%; height: 100%; margin: 0; padding: 0; left: 10px; position: relative; } .previous, .next { position: absolute; top: 48%; margin-top: -10px; color: white; font-size: 20px; padding:10px; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .previous { left: 0; border-radius: 0px 4px 4px 0px; } .next { right: 0; border-radius: 4px 0px 0px 4px; } .previous:hover,.next:hover { background-color: rgba(0,0,0); background-color: rgba(0,0,0,0.6); cursor: pointer; } .dots-container { text-align: center; margin: 10px 5px; } .dots-container .dot { display: inline-block; width: 80px; height: 50px; opacity: 0.4; transition: 0.5s; cursor: pointer; } .active-slides { opacity: 1; } /**Fading animation to the mySlides class**/ @-webkit-keyframes fade { from {opacity: 0} to {opacity: 1} } @keyframes fade { from {opacity: 0} to {opacity: 1} } </style> </head> <body> <div class= "project-images"> <div class= "project-images-slideshow"> <img src= "http://www.w3schools.com/howto/img_nature_wide.jpg" class= "mySlides"/> <img src= "http://www.w3schools.com/howto/img_fjords_wide.jpg" class= "mySlides"/> <img src= "http://www.w3schools.com/howto/img_mountains_wide.jpg" class= "mySlides"/> <span class= "previous" onclick= "plusSlide(-1)">❰</span> <span class= "next" onclick= "plusSlide(+1)">❱</span> </div> <div class= "dots-container"> <img src= "http://www.w3schools.com/howto/img_nature_wide.jpg" class= "dot" onclick= "currentSlide(1)"/> <img src= "http://www.w3schools.com/howto/img_fjords_wide.jpg" class= "dot" onclick= "currentSlide(2)"/> <img src= "http://www.w3schools.com/howto/img_mountains_wide.jpg" class= "dot" onclick= "currentSlide(3)"/> </div> </div> <script> var slideIndex = 1, t, dots; function slideshow(n) { 'use strict'; var i, mySlides = document.getElementsByClassName("mySlides"), dots = document.getElementsByClassName("dot"); if (n > mySlides.length) { slideIndex = 1; } if (n < 1) { slideIndex = mySlides.length; } for (i = 0; i < mySlides.length; i++) { mySlides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active-slides", ""); } mySlides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active-slides"; } function autoSlideshow() { 'use strict'; var slideIndex = 0, i, mySlides = document.getElementsByClassName("mySlides"); for (i = 0; i > mySlides.length; i++) { mySlides[i].style.display = "none"; dots[i].className = dots[i].className.replace(" active-slides", ""); } slideIndex++; if (slideIndex > mySlides.length) { slideIndex = 1; } mySlides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active-slides"; t = setTimeout(autoSlideshow, 5000); } function plusSlide(n) { 'use strict'; slideshow(slideIndex += n); } function currentSlide(n) { 'use strict'; slideshow(slideIndex = n); } slideshow(slideIndex); autoSlideshow(); </script> </body> </html>

Hi, I thank all of you in this forum because whenever I don't understand anything you people help me. Now I want to know something more. I know HTML, CSS, JavaScript and jQuery. Now I have started building an e-commerce shopping website. But I don't know how I will manage the data on this site, how I will request data from server,keep the recordings of the sales and products. Is there any way, I can complete my website with just javascript scripting language. Please have some dynamic suggestion for me. Thank you in advance.

So So I'am Thinking Of A Way To Detect CSS3 Browser Support Using Client-Side Scripting (JavaScript),I Know There's A Library Out There To Handle Such Situations,But I Need A Code Or A Hint To Do This Without Any External Libraries. Any Suggestions Would Be Appreciated...

Hi, this is a automatic slideshow script. var slideIndex = 0; function showSlides(n) { 'use strict'; var i, slides = document.getElementsByClassName("slideshow"), dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } slideIndex++; if(slideIndex > slides.length) {slideIndex = 1; } if(slideIndex < 0) { slideIndex = slides.length} for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; var timeHandler = setTimeout(showSlides,5000); } showSlides(slideIndex); function plusSlides(n) { 'use strict'; showSlides(slideIndex += n-1); } function currentSlide(n) { 'use strict'; showSlides(slideIndex = n-1); } Now I want to reset the time when the dots variable is clicked. And set the timeout 5s again. I tried to clear the timeout and invoke the setTimeout var again. But it didn't help. Can you guys please help me to reset the time? Thank you in advance.

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......

Good day everyone! I will admit right off the hop that I know very little about javascript programming but I hope that with your help, I can learn something today. I've looked on w3 and elsewhere to find my answer but I have not been successful. I think what I'm trying to do is simple... Using w3.css, I am trying to create a navigation menu that will include more than one dropdown menu. I have the menu working to a point. Right now if I click on the three links with sub menus, the sub menus will display. However, they do not 'hide' unless I click on the top-menu link. That is, if I click on 'Training', the sub menu appears but will only disappear if I click on 'Training' again. Of course I want the sub-menu to disappear if I click anywhere outside the sub-menu or have another sub-menu appear if I click on its top-menu link. I've attached my html file for you to have a look. Any help and guidance would be greatly appreciated. Thanks so much! Have a great day! <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <div class="w3-container"> <ul class="w3-navbar w3-light-grey"> <li><a href="#">Home</a></li> <li class="w3-dropdown-click"> <a onclick="myFunction()" href="#">Manuals <i class="fa fa-caret-down"></i></a> <div id="sub-menu" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Power Unit/Truck/Bus Safety Inspections and Standards</a> <a href="#">School Bus Safety Inspections and Standards</a> <a href="#">Trailer/Semi-Trailer Safety Inspections and Standards</a> <a href="#">Motorcycle Safety Inspections and Standards</a> </div> </li> <li class="w3-dropdown-click"> <a onclick="myFunction2()" href="#">Forms <i class="fa fa-caret-down"></i></a> <div id="sub-menu2" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Supply Form</a> <a href="#">Backup Forms</a> <a href="#">Station Application</a> </div> </li> <li class="w3-dropdown-click"> <a onclick="myFunction3()" href="#">Training <i class="fa fa-caret-down"></i></a> <div id="sub-menu3" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </li> <li><a href="#">Who to Call</a></li> </ul> </div> <script> function myFunction() { var x = document.getElementById("sub-menu"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } function myFunction2() { var x = document.getElementById("sub-menu2"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } function myFunction3() { var x = document.getElementById("sub-menu3"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> test.html

Hello In this Wordpress theme the nav menu changes when you scroll-down the page. At the begining is transparent and big, but then it gets smaller and white. http://feriapixel.cl/wordpress/ How can i do that myself?

var xmlhttp; var Staff, obj; var url = "staff.json"; function init() { xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") ? new ActiveXObject("Msxml2.XMLHTTP") : null ; xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { Staff = JSON.parse(this.responseText); var table = document.createElement("table"); document.body.appendChild(table); obj = Staff.Staff[0]; for (var y in obj) { var header_row = document.createElement("th"); var column = document.createElement("td"); var data = document.createTextNode(y); column.appendChild(data); header_row.appendChild(column); table.appendChild(header_row); } for(var x=0; x<Staff.Staff.length; x++) { obj = Staff.Staff[x]; if (x%2 == 0) { var row = document.createElement("tr"); row.setAttribute("class","even"); // function? for (var y in obj) { var column = document.createElement("td"); var data = document.createTextNode(obj[y]); column.appendChild(data); row.appendChild(column); table.appendChild(row); } } else { var row = document.createElement("tr"); // function? for (var y in obj) { var column = document.createElement("td"); var data = document.createTextNode(obj[y]); column.appendChild(data); row.appendChild(column); table.appendChild(row); } } } } }; xmlhttp.open("GET",url,true); xmlhttp.send(); } window.onload = init; Since the codes below "// function?" are repeated (either the row to be created in the JavaScript is odd or even), how can I write the same codes into ONE function to be shared and used in different places? Thanks for any help!

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"; }

Hi, I am learning javaScript and jQuery. In this code, I saw that if I keep the script in the head section it doesn't work.But if I keep the script in the body section it works. Can you please tell me why this happens? Thank you in advance. <!DOCTYPE html> <html> <body> <h3>Your Screen:</h3> <div id="demo"></div> <script> var txt = ""; txt += "<p>Total width/height: " + screen.width + "*" + screen.height + "</p>"; txt += "<p>Available width/height: " + screen.availWidth + "*" + screen.availHeight + "</p>"; txt += "<p>Color depth: " + screen.colorDepth + "</p>"; txt += "<p>Color resolution: " + screen.pixelDepth + "</p>"; document.getElementById("demo").innerHTML = txt; </script> </body> </html>

Hi, I have 2 XML stored in the variable 'ad' and 'addd' respectively: Variable 'ad': <?xml version="1.0" encoding="UTF-8"?> <name> <data> <Id>003</Id> </data> <data> <Id>006</Id> </data> .... </name> And Variable 'addd': <?xml version="1.0" encoding="UTF-8"?> <name> <data> <Id>009</Id> </data> <data> <Id>005</Id> </data> ... </name> I have written a `ttt` Javascript function: function ttt(ad,addd) { var match = ad.match(/<Id\/>/); var matcht = addd.match(/<Id\/>/); if ((! match || match.length == 0) && (! matcht || match.length == 0)){ return "Below is the details of the Id of ad:\n\n" + ad.split("<Id>")[1].split("</Id>")[0]; + "\n\n And, Below is the details of the Id of addd:\n\n" +addd.split("<Id>")[1].split("</Id>")[0]; } } I need `If` `Id` is not blank from 'ad' variable then return alert as `error` with `Id` as below, otherwise not: <?xml version="1.0" encoding="UTF-8"?> <name> <data> <Id>003</Id> </data> <data> <Id>006</Id> </data> </name> And, I need `If` `Id` is not blank from 'addd' variable then return alert as `error` with `Id` as below, otherwise not: <?xml version="1.0" encoding="UTF-8"?> <name> <data> <Id>009</Id> </data> <data> <Id>005</Id> </data> </name>

Hi i am new for the PHP, i had the experienced before to do a login system page but what i want it is HTML and PHP file to separate i dont want PHP with HTML together to 1 file , cause professional people will more likely to use 2 file rather than 1 file easy to maintain and edit how to use the external PHP file coding without re-design whole page cause normally what i tested before was link or turn to other new page and result will come out but the design was totally gone so have any ways and suggestion to do that ... in the end, im sorry i not well in english and my knowledge of PHP still quite new , thanks you so much

Hello There. I'am Making What It Seems Like A Function To Animate The Background Color Of An Element,But I Have A Problem. This Is The Code: <script> function color(id,duration,r_start,g_start,b_start,r_end,g_end,b_end) { var element=document.getElementById(id); var parameter=setInterval(colorGradually,50*duration); function colorGradually() { if (r_start==r_end && g_start==g_end && b_start==b_end) { clearInterval(parameter); } else { for (var i=r_start,var j=g_start,var k=b_start; i<r_end && j<g_end && k<b_end;i++,j++,k++) { element.style.backgroundColor="rgb("+i+","+j+","+k+")"; } } } } </script> <div id="test" style="width:100%;height:200px;background-color:rgb(128,128,128)"></div> <input type="button" onclick="color('test',1,128,128,128,255,255,255)" value="Change"> The Script Isn't Working At All. I've Checked The Script With Esprisma Code Validator And The Code Was Syntactically Valid,But I Can't Recognize The Problem...

So,I'am Creating An Internal Search Engine Which Can Be Used To Search For A Specific Word In The Page You're Browsing. This Engine Makes The Background Color Is Yellow For The Word You're Searching. <!--Taken From W3Schools.com--> <p> The display property sets or returns the element's display type. Elements in HTML are mostly "inline" or "block" elements: An inline element has floating content on its left and right side. A block element fills the entire line, and nothing can be displayed on its left or right side. </p> <p> The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size. Tip: If an element is a block element, its display type can also be changed with the float property. </p> <script> var i; function searchFor(keyword) { for (i=0;i<document.querySelectorAll("p").length;i++) { document.querySelectorAll("p").innerHTML=document.querySelectorAll("p").innerHTML.replace(/keyword/gi,"<span style='background-color:yellow;'>"+keyword+"</span>"); } searchFor("display"); </script> How Can I Make It Possible To Pass A String As A Parameter To The searchFor() Function?