Jump to content

Goodness

Members
  • Content Count

    34
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Goodness

  • Rank
    Newbie
  1. I removed the openTab("tab1") and added the w3-red as follows: <li><a href="javascript:void(0)" class="tablink w3-red" onclick="openTab(event, 'tab1');">TAB 1</a></li> and that causes the 1st tab to be open. Thanks!
  2. Like this? <ul class="w3-navbar w3-grey"> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab1');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab2');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab3');">TAB 3</a></li> </ul> <div id="tab1" class="tab w3-red" style="display:block;"> <p>Tab 1 content</p> </div> <div id="tab2" class="tab"> <p>Tab 2 content</p> </div> <div id="tab3" class="tab"> <p>Tab 3 content</p> </div> <script> openTab("tab1") function openTab(evt, tabName) { var i, x, tablinks; var x = document.getElementsByClassName("tab"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++){ tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " w3-red"; } </script>
  3. I'm using W3.CSS tabs and I have a class assigned so that the active tab is colored. However, when the page loads none of the tabs are open. I have to click on one. I'm wanting the 1st tab to be open and highlighted with the active color when the page is first loaded. Here's my code: <ul class="w3-navbar w3-grey"> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab1');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab2');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab3');">TAB 3</a></li> </ul> <div id="tab1" class="tab"> <p>Tab 1 content</p> </div> <div id="tab2" class="tab"> <p>Tab 2 content</p> </div> <div id="tab3" class="tab"> <p>Tab 3 content</p> </div> <script> openTab("tab1") function openTab(evt, tabName) { var i, x, tablinks; var x = document.getElementsByClassName("tab"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++){ tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " w3-red"; } </script> Thanks!
  4. Here's an odd one: I am working on my own machine (hard drive) at the moment and previewing my page(s) in various browsers. In order to make use of template-level content (navigation, footers, etc) I am using <div w3-include-html="includes/filename.html"> I am calling the w3data.js file in the <head> <script src="http://www.w3schools.com/lib/w3data.js"></script> I also have the w3data.js file resident within the website in a 'lib' folder. In that case I call it like this: <script src="lib/w3data.js"></script> Both the w3schools src and the local src for the w3data.js file work (in Firefox). Just before the closing </body> tag I have: <script> w3IncludeHTML(); </script> The included files show up fine in Firefox. However, not in Safari, Chrome, or IE. NOTE: all of the pages are at the root level and the included files are in the 'includes' folder. Has anyone else run into this? Thanks!
  5. Also Note: Uncommenting these 2 lines, just after the <body> start does not have any effect: <!--.mySlides {width: 100%;} /**/--> <!--#myslideFrame{text-align: center; font-size:0;min-height:100%; font-size:0; text-align: center;position:relative;}-->
  6. Unfortunately the page is not online. It's on my machine. Here's the page source: <!DOCTYPE html> <html> <head> <title>New Site Design</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <style> body {font-family: "Lato", sans-serif} <!--.mySlides {width: 100%;} /**/--> .mySlides {display: none} <!--#myslideFrame{text-align: center; font-size:0;min-height:100%; font-size:0; text-align: center;position:relative;}--> .w3-left, .w3-right, .w3-tag {cursor:pointer} .w3-tag {height:15px;width:15px;padding:0;margin-top:6px} </style> <script src="lib/w3data.js"></script> <script src="lib/carousel.js"></script> </head> <body> <!-- Navbar --> <div class="w3-top"> <div w3-include-html="includes/topNav.html"></div> </div> <!-- Navbar on small screens --> <div id="navDemo" class="w3-hide w3-hide-large w3-top w3-dark-grey" style="margin-top:43px;"> <div w3-include-html="includes/smallScreenNav.html"></div> </div> <!-- Start Content --> <div class="w3-content w3-container w3-padding-0" style="max-width:100%;margin-top:60px;margin-bottom:80px"> <div w3-include-html="includes/topBranding-Search.html"></div> <!-- Slideshow --> <div id="myslideFrame"> <!-- open slideShow frame--> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-1.jpg" style="width:100%; max-height:774px"> <div class="w3-display-bottommiddle w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-zot-red w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-2.jpg" style="width:100%; max-height:774px"> <div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-hover-zot-red w3-animate-bottom">Copy That Animates Over Image</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-3.jpg" style="width:100%; max-height:774px"> <div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-4.jpg" style="width:100%; max-height:774px"> <div class="w3-display-bottomright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-5.jpg" style="width:100%; max-height:774px"> <div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-6.jpg" style="width:100%; max-height:774px"> <div class="w3-display-bottomright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-7.jpg" style="width:100%; max-height:774px"> <div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Copy That Animates Over Image</span> </div> </div> <!-- Slideshow next/previous buttons --> <div class="w3-container w3-dark-grey w3-padding-8 w3-xlarge"> <!--open manual controls div--> <div class="w3-left" onclick="plusDivs(-1)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"><i class="fa fa-arrow-circle-left w3-hover-text-zot-red"></i></div> <div class="w3-right" onclick="plusDivs(1)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"><i class="fa fa-arrow-circle-right w3-hover-text-zot-red"></i></div> <div class="w3-center"> <!-- open Slideshow individual selector buttons --> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(5)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(6)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(7)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> </div><!--close Slideshow individual selectors--> </div> <!--close manual controls--> </div> <!--close slideshow frame--> <!-- Grid --> <div class="w3-row"> <!--open grid--> <div class="w3-center w3-padding-64 w3-hide-small"> <span class="w3-xlarge w3-bottombar w3-border-dark-grey w3-text-zot-red w3-padding-16">MAIN TOPIC HEADING</span> </div> <div class="w3-col l3 m6 w3-light-grey w3-padding-large"> <h3>Heading One</h3> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p> </p><br/> </div> <div class="w3-col l3 m6 w3-grey w3-padding-large"> <h3>Heading Two</h3> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p> </p><br/> </div> <div class="w3-col l3 m6 w3-dark-grey w3-padding-large"> <h3>Heading Three</h3> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p> </p><br/> </div> <div class="w3-col l3 m6 w3-black w3-padding-large"> <h3>Heading Four</h3> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p> </div> </div> <!--close grid--> <!-- Footer --> <div w3-include-html="includes/footer.html"></div> </div> <!--close content div--> <!-- Script For Side Navigation --> <script> function w3_open() { var x = document.getElementById("mySidenav"); x.style.width = "300px"; x.style.textAlign = "center"; x.style.fontSize = "40px"; x.style.paddingTop = "10%"; x.style.display = "block"; } function w3_close() { document.getElementById("mySidenav").style.display = "none"; } // Used to toggle the menu on smaller screens when clicking on the menu button function openNav() { var x = document.getElementById("navDemo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> <script> // Used to toggle the menu on small screens when clicking on the menu button function myFunction() { var x = document.getElementById("navDemo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } // When the user clicks anywhere outside of the modal, close it var modal = document.getElementById('ticketModal'); window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> <!--Includes Script--> <script> w3IncludeHTML(); </script> </body> </html> To keep the page clean I'm including some pieces. Here is the topNav.html <ul class="w3-navbar w3-left-align w3-light-grey w3-center w3-large"> <li class="w3-hide-large w3-opennav w3-right"> <a class="w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a> </li> <li class="w3-left w3-hide-small w3-hide-medium" style="width:11.11% !important"><a href="home.html">Home</a></li> <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="1.html">Link 1<i class="fa fa-caret-down"></i></a> <div class="w3-dropdown-content w3-white w3-card-4"> <a href="#">DD1</a> <a href="#">DD2</a> <a href="#">DD3</a> <a href="#">DD4</a> </div> </li> <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="2.html">Link 2<i class="fa fa-caret-down"></i></a> <div class="w3-dropdown-content w3-white w3-card-4"> <a href="#">DD1</a> <a href="#">DD2</a> <a href="#">DD3</a> <a href="#">DD4</a> </div> </li> <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="3.html">Link 3 <i class="fa fa-caret-down"></i></a> <div class="w3-dropdown-content w3-white w3-card-4"> <a href="#">DD1</a> <a href="#">DD2</a> <a href="#">DD3</a> <a href="#">DD4</a> </div> </li> <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="4.html">Link 4<i class="fa fa-caret-down"></i></a> <div class="w3-dropdown-content w3-white w3-card-4"> <a href="#">DD1</a> <a href="#">DD2</a> <a href="#">DD3</a> <a href="#">DD4</a> </div> </li> <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="5.html">Link 5<i class="fa fa-caret-down"></i></a> <div class="w3-dropdown-content w3-white w3-card-4"> <a href="#">DD1</a> <a href="#">DD2</a> <a href="#">DD3</a> </div> </li> <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="6.html">Link 6<i class="fa fa-caret-down"></i></a> <div class="w3-dropdown-content w3-white w3-card-4"> <a href="#">DD1</a> <a href="#">DD2</a> </div> </li> <li class="w3-left w3-hide-small w3-hide-medium w3-dropdown-hover" style="width:11.11% !important"><a href="7.html">Link 7<i class="fa fa-caret-down"></i></a> <div class="w3-dropdown-content w3-white w3-card-4"> <a href="#">DD1</a> <a href="#">DD2</a> </div> </li> <li class="w3-left w3-hide-small w3-hide-medium" style="width:11.11% !important"><a href="8.html">Link 8</a></li> </ul> Here's the topBranding-Search.html: (the serach input is just a placeholder) <div class="w3-row w3-margin"> <div class="w3-col w3-quarter w3-container"> <img src="images/logo.jpg" /> </div> <div class="w3-col w3-half w3-container"></div> <div class="w3-col w3-quarter w3-container w3-hide-small">Search <input class="w3-input w3-border" type="text" ></div> </div> Here is smallscreenNav.html (all dropdowns have not been added yet) <ul class="w3-navbar w3-left-align w3-large w3-theme"> <li><a href="#">Home</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="w3-dropdown-hover"> <a href="#" title="test">Link 3<i class="fa fa-caret-down"></i></a> <div class="w3-dropdown-content w3-light-grey w3-card-4"> <a href="#">DD1</a> <a href="#">DD2</a> <a href="#">DD3</a> </div> </li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> </ul> Here's the footer: <footer class="w3-container w3-padding-32 w3-light-grey w3-center"> <!--<h4>Footer</h4>--> <p>Copyright 2016 - All Rights Reserved</p> <a class="w3-btn-floating w3-zot-red" href="https://www.facebook.com"><i class="fa fa-facebook"></i></a> <a class="w3-btn-floating w3-zot-red" href="https://www.linkedin.com"><i class="fa fa-linkedin"></i></a> <a class="w3-btn-floating w3-zot-red" href="https://www.youtube.com"><i class="fa fa-youtube"></i></a> </footer> Here's the carousel.js: var slideIndex = 0; var t; var dots; var maxheight = 0; var timedelay = 9000; window.onload = function() { var x = document.getElementsByClassName("mySlides"); var parent_elem = document.getElementById('myslideFrame') var widthRatio = parseInt(parent_elem.offsetWidth) / parseInt(x[0].width) for (i = 0; i < x.length; i++) { // x[i].style.width = "100%"; if (x[i].height > maxheight) { maxheight = x[i].height; } } document.getElementById('myslideFrame').style.height = maxheight * widthRatio + "px"; showDivs(slideIndex); carousel(); }; function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); dots = document.getElementsByClassName("demodots"); if (n > x.length) { slideIndex = 1; } if (n < 1) { slideIndex = x.length; } ; for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-zot-red", ""); } x[slideIndex - 1].style.display = "inline-block"; dots[slideIndex - 1].className += " w3-zot-red"; } function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; dots[i].className = dots[i].className.replace(" w3-zot-red", ""); } slideIndex++; if (slideIndex > x.length) { slideIndex = 1 } x[slideIndex - 1].style.display = "inline-block"; dots[slideIndex - 1].className += " w3-zot-red"; t = setTimeout(carousel, timedelay); } function pauseCarousel() { clearTimeout(t) } function startCarousel() { t = setTimeout(carousel, timedelay); } Here's the w3data.js: /* W3Data ver 1.2 by W3Schools.com */ var w3DataObject = {}; function w3DisplayData(id, data) { var htmlObj, htmlTemplate, html, arr = [], a, l, rowClone, x, j, i, ii, cc, repeat, repeatObj, repeatX = ""; htmlObj = document.getElementById(id); htmlTemplate = w3InitTemplate(id, htmlObj); html = htmlTemplate.cloneNode(true); arr = w3GetElementsByAttribute(html, "w3-repeat"); l = arr.length; for (j = (l-1); j >= 0; j -= 1) { cc = arr[j].getAttribute("w3-repeat").split(" "); if (cc.length == 1) { repeat = cc[0]; } else { repeatX = cc[0]; repeat = cc[2]; } arr[j].removeAttribute("w3-repeat"); repeatObj = data[repeat]; if (repeatObj && typeof repeatObj == "object" && repeatObj.length != "undefined") { i = 0; for (x in repeatObj) { i += 1; rowClone = arr[j]; rowClone = w3NeedleInHaystack(rowClone, "element", repeatX, repeatObj[x]); a = rowClone.attributes; for (ii = 0; ii < a.length; ii += 1) { a[ii].value = w3NeedleInHaystack(a[ii], "attribute", repeatX, repeatObj[x]).value; } (i === repeatObj.length) ? arr[j].parentNode.replaceChild(rowClone, arr[j]) : arr[j].parentNode.insertBefore(rowClone, arr[j]); } } else { console.log("w3-repeat must be an array. " + repeat + " is not an array."); continue; } } html = w3NeedleInHaystack(html, "element"); htmlObj.parentNode.replaceChild(html, htmlObj); function w3InitTemplate(id, obj) { var template; template = obj.cloneNode(true); if (w3DataObject.hasOwnProperty(id)) {return w3DataObject[id];} w3DataObject[id] = template; return template; } function w3GetElementsByAttribute(x, att) { var arr = [], arrCount = -1, i, l, y = x.getElementsByTagName("*"), z = att.toUpperCase(); l = y.length; for (i = -1; i < l; i += 1) { if (i == -1) {y[i] = x; } if (y[i].getAttribute(z) !== null) {arrCount += 1; arr[arrCount] = y[i];} } return arr; } function w3NeedleInHaystack(elmnt, typ, repeatX, x) { var value, rowClone, pos1, haystack, pos2, needle = [], needleToReplace, i, cc, r; rowClone = elmnt.cloneNode(true); pos1 = 0; while (pos1 > -1) { haystack = (typ == "attribute") ? rowClone.value : rowClone.innerHTML; pos1 = haystack.indexOf("{{", pos1); if (pos1 === -1) {break; } pos2 = haystack.indexOf("}}", pos1 + 1); needleToReplace = haystack.substring(pos1 + 2, pos2); needle = needleToReplace.split("||"); value = undefined; for (i = 0; i < needle.length; i += 1) { needle[i] = needle[i].replace(/^\s+|\s+$/gm,''); //trim //value = ((x && x[needle[i]]) || (data && data[needle[i]])); if (x) {value = x[needle[i]];} if (value == undefined && data) {value = data[needle[i]];} if (value == undefined) { cc = needle[i].split("."); if (cc[0] == repeatX) {value = x[cc[1]]; } } if (value == undefined) { if (needle[i] == repeatX) {value = x; } } if (value == undefined) { if (needle[i].substr(0,1) == '"') { value = needle[i].replace(/"/g, ""); } else if (needle[i].substr(0,1) == "'") { value = needle[i].replace(/'/g, ""); } } if (value != undefined) {break;} } if (value != undefined) { r = "{{" + needleToReplace + "}}"; if (typ == "attribute") { rowClone.value = rowClone.value.replace(r, value); } else { w3ReplaceHTML(rowClone, r, value); } } pos1 = pos1 + 1; } return rowClone; } function w3ReplaceHTML(a, r, result) { var b, l, i, a, x, y, j, ll, nam; if (a.hasAttributes()) { b = a.attributes; l = b.length; for (i = 0; i < l; i += 1) { if (b[i].value.indexOf(r) > -1) {b[i].value = b[i].value.replace(r, result); } } } x = a.getElementsByTagName("*"); l = x.length; a.innerHTML = a.innerHTML.replace(r, result); } } function w3IncludeHTML() { var z, i, a, file, xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { if (z[i].getAttribute("w3-include-html")) { a = z[i].cloneNode(false); file = z[i].getAttribute("w3-include-html"); xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { a.removeAttribute("w3-include-html"); a.innerHTML = this.responseText; z[i].parentNode.replaceChild(a, z[i]); w3IncludeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); return; } } } function w3Http(target, readyfunc, xml, method) { var httpObj; if (!method) {method = "GET"; } if (window.XMLHttpRequest) { httpObj = new XMLHttpRequest(); } else if (window.ActiveXObject) { httpObj = new ActiveXObject("Microsoft.XMLHTTP"); } if (httpObj) { if (readyfunc) {httpObj.onreadystatechange = readyfunc; } httpObj.open(method, target, true); httpObj.send(xml); } } Lastly, here's my w3.css (note: I added a color zot-red and commented where it's added) /* W3.CSS 2.8 by Jan Egil and Borge Refsnes */html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/* End extract */html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}h1,h2,h3,h4,h5,h6,.w3-slim,.w3-wide{font-family:"Segoe UI",Arial,sans-serif}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:"Times New Roman",Times,serif}h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}hr{border:0;border-top:1px solid #eee;margin:20px 0}img{margin-bottom:-5px}a{color:inherit}.w3-image{max-width:100%;height:auto}.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}.w3-btn,.w3-btn-block{border:none;display:inline-block;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none!important;color:#fff;background-color:#000;text-align:center;cursor:pointer;white-space:nowrap}.w3-btn:hover,.w3-btn-block:hover,.w3-btn-floating:hover,.w3-btn-floating-large:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}.w3-btn,.w3-btn-floating,.w3-btn-floating-large,.w3-closenav,.w3-opennav{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .w3-btn-floating,.w3-btn-floating-large{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}.w3-btn-floating{width:40px;height:40px;line-height:40px}.w3-btn-floating-large{width:56px;height:56px;line-height:56px}.w3-disabled,.w3-btn:disabled,.w3-btn-floating:disabled,.w3-btn-floating-large:disabled{cursor:not-allowed;opacity:0.3}.w3-btn.w3-disabled *,.w3-btn-block.w3-disabled,.w3-btn-floating.w3-disabled *,.w3-btn:disabled *,.w3-btn-floating:disabled *{pointer-events:none}.w3-btn.w3-disabled:hover,.w3-btn-block.w3-disabled:hover,.w3-btn:disabled:hover,.w3-btn-floating.w3-disabled:hover,.w3-btn-floating:disabled:hover,.w3-btn-floating-large.w3-disabled:hover,.w3-btn-floating-large:disabled:hover{box-shadow:none}.w3-btn-group .w3-btn{float:left}.w3-btn-block{width:100%}.w3-btn-bar .w3-btn{box-shadow:none;background-color:inherit;color:inherit;float:left}.w3-btn-bar .w3-btn:hover{background-color:#ccc}.w3-ripple{position:relative;overflow:hidden}.w3-ripple:after{content:"";background:#ccc;position:absolute;padding:300%;bottom:0;left:0;opacity:0;transition:0.8s}.w3-ripple:active:after{padding:0;opacity:1;transition:0s}.w3-badge,.w3-tag,.w3-sign{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}ul.w3-ul{list-style-type:none;padding:0;margin:0}ul.w3-ul li{padding:6px 2px 6px 16px;border-bottom:1px solid #ddd}ul.w3-ul li:last-child{border-bottom:none}.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}.w3-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden}/*.w3-navbar li{float:left}.w3-navbar li a,.w3-navitem{display:block;padding:8px 16px}.w3-navbar li a:hover{color:#000;background-color:#ccc}*//*commented out original css above - below changed background-color and text color*/.w3-navbar li{float:left}.w3-navbar li a,.w3-navitem{display:block;padding:8px 16px}.w3-navbar li a:hover{color:#fff;background-color:#ac172b}.w3-navbar .w3-dropdown-hover,.w3-navbar .w3-dropdown-click{position:static}.w3-navbar .w3-dropdown-hover:hover,.w3-navbar .w3-dropdown-hover:first-child,.w3-navbar .w3-dropdown-click:hover{background-color:#ccc;color:#000}.w3-navbar a,.w3-topnav a,.w3-sidenav a,.w3-dropdown-content a,.w3-accordion-content a,.w3-dropnav a{text-decoration:none!important}.w3-navbar .w3-opennav.w3-right{float:right!important}.w3-topnav{padding:8px 8px}.w3-topnav a{padding:0 8px;border-bottom:3px solid transparent;-webkit-transition:border-bottom .3s;transition:border-bottom .3s}.w3-topnav a:hover{border-bottom:3px solid #fff}.w3-topnav .w3-dropdown-hover a{border-bottom:0}.w3-opennav,.w3-closenav{color:inherit}.w3-opennav:hover,.w3-closenav:hover{cursor:pointer;opacity:0.8}.w3-btn,.w3-btn-floating,.w3-dropnav a,.w3-btn-floating-large,.w3-btn-block,.w3-hover-shadow,.w3-hover-opacity,.w3-hover-opacity-off,.w3-navbar a,.w3-sidenav a,.w3-pagination li a,.w3-hoverable tbody tr,.w3-hoverable li,.w3-accordion-content a,.w3-dropdown-content a,.w3-dropdown-click:hover,.w3-dropdown-hover:hover,.w3-opennav,.w3-closenav,.w3-closebtn,.w3-hover-amber,.w3-hover-aqua,.w3-hover-blue,.w3-hover-light-blue,.w3-hover-brown,.w3-hover-cyan,.w3-hover-blue-grey,.w3-hover-green,.w3-hover-light-green,.w3-hover-indigo,.w3-hover-khaki,.w3-hover-lime,.w3-hover-orange,.w3-hover-deep-orange,.w3-hover-pink,.w3-hover-purple,.w3-hover-deep-purple,.w3-hover-red,.w3-hover-sand,.w3-hover-teal,.w3-hover-yellow,.w3-hover-white,.w3-hover-black,.w3-hover-grey,.w3-hover-light-grey,.w3-hover-dark-grey,.w3-hover-text-amber,.w3-hover-text-aqua,.w3-hover-text-blue,.w3-hover-text-light-blue,.w3-hover-text-brown,.w3-hover-text-cyan,.w3-hover-text-blue-grey,.w3-hover-text-green,.w3-hover-text-light-green,.w3-hover-text-indigo,.w3-hover-text-khaki,.w3-hover-text-lime,.w3-hover-text-orange,.w3-hover-text-deep-orange,.w3-hover-text-pink,.w3-hover-text-purple,.w3-hover-text-deep-purple,.w3-hover-text-red,.w3-hover-text-sand,.w3-hover-text-teal,.w3-hover-text-yellow,.w3-hover-text-white,.w3-hover-text-black,.w3-hover-text-grey,.w3-hover-text-light-grey,.w3-hover-text-dark-grey{-webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s}.w3-sidenav{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}.w3-sidenav a{padding:4px 2px 4px 16px}.w3-sidenav a:hover{background-color:#ccc}.w3-sidenav a,.w3-dropnav a{display:block}.w3-sidenav .w3-dropdown-hover:hover,.w3-sidenav .w3-dropdown-hover:first-child,.w3-sidenav .w3-dropdown-click:hover,.w3-dropnav a:hover{background-color:#ccc;color:#000}.w3-sidenav .w3-dropdown-hover,.w3-sidenav .w3-dropdown-click {width:100%}.w3-sidenav .w3-dropdown-hover .w3-dropdown-content,.w3-sidenav .w3-dropdown-click .w3-dropdown-content{min-width:100%}.w3-main,#main{transition:margin-left .4s}.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}.w3-closebtn{text-decoration:none;float:right;font-size:24px;font-weight:bold;color:inherit}.w3-closebtn:hover,.w3-closebtn:focus{color:#000;text-decoration:none;cursor:pointer}.w3-pagination{display:inline-block;padding:0;margin:0}.w3-pagination li{display:inline}.w3-pagination li a{text-decoration:none;color:#000;float:left;padding:8px 16px}.w3-pagination li a:hover{background-color:#ccc}.w3-input-group,.w3-group{margin-top:24px;margin-bottom:24px}.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #808080;width:100%}.w3-label{color:#009688}.w3-input:not(:valid)~.w3-validate{color:#f44336}.w3-select{padding:9px 0;width:100%;color:#000;border:1px solid transparent;border-bottom:1px solid #009688}.w3-select select:focus{color:#000;border:1px solid #009688}.w3-select option[disabled]{color:#009688}.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}.w3-dropdown-hover:hover .w3-dropdown-content{display:block;z-index:1}.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}.w3-dropdown-content a{padding:6px 16px;display:block}.w3-dropdown-content a:hover{background-color:#ccc}.w3-accordion {width:100%;cursor:pointer}.w3-accordion-content{cursor:auto;display:none;position:relative;width:100%;margin:0;padding:0}.w3-accordion-content a{padding:6px 16px;display:block}.w3-accordion-content a:hover{background-color:#ccc}.w3-progress-container{width:100%;height:1.5em;position:relative;background-color:#f1f1f1}.w3-progressbar{background-color:#757575;height:100%;position:absolute;line-height:inherit}input[type=checkbox].w3-check,input[type=radio].w3-radio{width:24px;height:24px;position:relative;top:6px}input[type=checkbox].w3-check:checked+.w3-validate,input[type=radio].w3-radio:checked+.w3-validate{color:#009688}input[type=checkbox].w3-check:disabled+.w3-validate,input[type=radio].w3-radio:disabled+.w3-validate{color:#aaa}.w3-responsive{overflow-x:auto}.w3-container:after,.w3-panel:after,.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,.w3-btn-group:before,.w3-btn-group:after,.w3-btn-bar:before,.w3-btn-bar:after{content:"";display:table;clear:both}.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{width:99.99999%}@media only screen and (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}@media only screen and (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3,.w3-quarter{width:24.99999%}.w3-col.l4,.w3-third{width:33.33333%}.w3-col.l5{width:41.66666%}.w3-col.l6,.w3-half{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8,.w3-twothird{width:66.66666%}.w3-col.l9,.w3-threequarter{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}.w3-content{max-width:980px;margin:auto}.w3-rest{overflow:hidden}.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}}@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}@media (min-width:993px){.w3-modal-content{width:900px}}@media screen and (max-width:600px){.w3-topnav a{display:block}.w3-navbar li:not(.w3-opennav){float:none;width:100%!important}.w3-navbar li.w3-right{float:none!important}} @media screen and (max-width:600px){.w3-topnav .w3-dropdown-hover .w3-dropdown-content,.w3-navbar .w3-dropdown-click .w3-dropdown-content,.w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative}} @media screen and (max-width:600px){.w3-topnav,.w3-navbar{text-align:center}}@media (max-width:600px){.w3-hide-small{display:none!important}}@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}@media (min-width:993px){.w3-hide-large{display:none!important}}@media screen and (max-width:992px){.w3-sidenav.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}}@media screen and (min-width:993px){.w3-sidenav.w3-collapse{display:block!important}}.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}.w3-left{float:left!important}.w3-right{float:right!important}.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}.w3-vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}.w3-circle{border-radius:50%!important}.w3-round-small{border-radius:2px!important}.w3-round,.w3-round-medium{border-radius:4px!important}.w3-round-large{border-radius:8px!important}.w3-round-xlarge{border-radius:16px!important}.w3-round-xxlarge{border-radius:32px!important}.w3-round-jumbo{border-radius:64px!important}.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}.w3-margin{margin:16px!important}.w3-margin-0{margin:0!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}.w3-section{margin-top:16px!important;margin-bottom:16px!important}.w3-padding-tiny{padding:2px 4px!important}.w3-padding-small{padding:4px 8px!important}.w3-padding-medium,.w3-padding,.w3-form{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}.w3-padding-xlarge{padding:16px 32px!important}.w3-padding-xxlarge{padding:24px 48px!important}.w3-padding-jumbo{padding:32px 64px!important}.w3-padding-4{padding-top:4px!important;padding-bottom:4px!important}.w3-padding-8{padding-top:8px!important;padding-bottom:8px!important}.w3-padding-12{padding-top:12px!important;padding-bottom:12px!important}.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}.w3-padding-128{padding-top:128px!important;padding-bottom:128px!important}.w3-padding-0{padding:0!important}.w3-padding-top{padding-top:8px!important}.w3-padding-bottom{padding-bottom:8px!important}.w3-padding-left{padding-left:16px!important}.w3-padding-right{padding-right:16px!important}.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}.w3-spin{animation:w3-spin 2s infinite linear;-webkit-animation:w3-spin 2s infinite linear}@-webkit-keyframes w3-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes w3-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.w3-container{padding:0.01em 16px}.w3-panel{padding:0.01em 16px;margin-top:16px!important;margin-bottom:16px!important}.w3-example{background-color:#f1f1f1;padding:0.01em 16px}.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}.w3-code{line-height:1.4;width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}.w3-example,.w3-code{margin:20px 0}.w3-card{border:1px solid #ccc}.w3-card-2,.w3-example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}.w3-card-8{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}.w3-card-12{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)!important}.w3-card-16{box-shadow:0 16px 24px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21)!important}.w3-card-24{box-shadow:0 24px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22)!important}.w3-animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite}@-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}.w3-animate-opacity{-webkit-animation:opac 1.5s;animation:opac 1.5s}@-webkit-keyframes opac{from{opacity:0} to{opacity:1}}@keyframes opac{from{opacity:0} to{opacity:1}}.w3-animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s}@-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}/*increased animation time from 4 to 8 for animate-left below*/.w3-animate-left{position:relative;-webkit-animation:animateleft 0.8s;animation:animateleft 0.8s}@-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}.w3-animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s}@-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}.w3-animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s}@-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}.w3-animate-zoom {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s}@-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}.w3-animate-input{-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}.w3-opacity,.w3-hover-opacity:hover{opacity:0.60;filter:alpha(opacity=60);-webkit-backface-visibility:hidden}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1;filter:alpha(opacity=100);-webkit-backface-visibility:hidden}.w3-text-shadow{text-shadow:1px 1px 0 #444}.w3-text-shadow-white{text-shadow:1px 1px 0 #ddd}.w3-transparent{background-color:transparent!important}.w3-hover-none:hover{box-shadow:none!important;background-color:transparent!important}/* Colors */.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}.w3-blue-grey,.w3-hover-blue-grey:hover{color:#fff!important;background-color:#607d8b!important}.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}.w3-grey,.w3-hover-grey:hover{color:#000!important;background-color:#9e9e9e!important}.w3-light-grey,.w3-hover-light-grey:hover{color:#000!important;background-color:#f1f1f1!important}.w3-dark-grey,.w3-hover-dark-grey:hover{color:#fff!important;background-color:#616161!important}.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}/*added zot-red color below*/.w3-zot-red,.w3-hover-zot-red:hover{color:#fff!important;background-color:#ac172b!important}.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}.w3-text-blue-grey,.w3-hover-text-blue-grey:hover{color:#607d8b!important}.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}.w3-text-black,.w3-hover-text-black:hover{color:#000!important}.w3-text-grey,.w3-hover-text-grey:hover{color:#757575!important}.w3-text-light-grey,.w3-hover-text-light-grey:hover{color:#f1f1f1!important}.w3-text-dark-grey,.w3-hover-text-dark-grey:hover{color:#3a3a3a!important}/*added zot-red text color below*/.w3-text-zot-red,.w3-hover-text-zot-red:hover{color:#ac172b!important}.w3-border-amber,.w3-hover-border-amber:hover{border-
  7. dsonesuk, I'm not sure why this is working for you and not for me. When I view the version of the page with the totally manual slideshow the copy inside the <span> tags renders perfectly. When I view the version of the page with the new auto/manual slideshow the divs that contain the <span> tags still render but not the copy that's inside the <span> tags. Both pages are using the exact same w3.css. You're not having any issues with the javascript - and my javascript matches what you wrote.
  8. Yes. I've cleared cache and tried it in Firefox, Safari, IE, and Google Chrome. There's obviously something interfering with the rendering of the text inside the <span> tags since the <div> that contains them is being rendered. I say obviously, but it's not obvious to me (yet).
  9. I've been messing with this for several days now and I don't see the issue. My <script> code is exactly as you have listed above. Here is the portion of the page that includes the slideshow: <!-- Slideshow --> <div id="myslideFrame"> <!-- open slideShow frame--> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-1.jpg" style="width:100%; max-height:774px"> <div class="w3-display-bottommiddle w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Lorem ipsum hipsum;</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-2.jpg" style="width:100%; max-height:774px"> <div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-hover-zot-red w3-animate-bottom">Lorem ipsum hipsum</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-3.jpg" style="width:100%; max-height:774px"> <div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Lorem ipsum hipsum</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-4.jpg" style="width:100%; max-height:774px"> <div class="w3-display-bottomright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Lorem ipsum hipsum</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-5.jpg" style="width:100%; max-height:774px"> <div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Lorem ipsum hipsum</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-6.jpg" style="width:100%; max-height:774px"> <div class="w3-display-bottomright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Lorem ipsum hipsum</span> </div> </div> <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-7.jpg" style="width:100%; max-height:774px"> <div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">Lorem ipsum hipsum</span> </div> </div> <!-- Slideshow next/previous buttons --> <div class="w3-container w3-dark-grey w3-padding-8 w3-xlarge"> <!--open manual controls div--> <div class="w3-left" onclick="plusDivs(-1)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"><i class="fa fa-arrow-circle-left w3-hover-text-zot-red"></i></div> <div class="w3-right" onclick="plusDivs(1)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"><i class="fa fa-arrow-circle-right w3-hover-text-zot-red"></i></div> <div class="w3-center"> <!-- open Slideshow individual selector buttons --> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(5)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(6)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> <span class="w3-tag demodots w3-border w3-transparent w3-hover-white" onclick="currentDiv(7)" onmouseover="pauseCarousel()" onmouseout="startCarousel()"></span> </div><!--close Slideshow individual selectors--> </div> <!--close manual controls--> </div> <!--close slideshow frame--> I realize that I have the manual controls inside the slideshow frame. I also tried it closing the slideshow frame div before the manual controls (like you did) but it has no impact. The slideshow functions as it's suppose to. I just can't seem to get the copy inside the <span> tags to render. I still just get the small box where the copy should be. Maybe there's something obvious in my code that I'm just not seeing. Thanks again!
  10. I've been staring at this code for several hours. So far, I don't see it. It's probably right in front of my eyes but my code matches exactly to what you've shown. I'll give it another fresh look tomorrow. Thanks!
  11. I've checked to be sure that I've accounted for opening and closing divs. I've attached a quick image of what I'm seeing.
  12. I have the onmouseover and onmouseout on the left and right pointer elements. That part is working perfectly, Just can't figure out why my nested text divs aren't working.
  13. Whoops - 1 last thing: Here's an example of one of the 7 mySlides divs: <div class="mySlides w3-display-container w3-center w3-animate-left w3-padding-0"> <img src="images/banner-3.jpg" style="width:100%; max-height:774px"> <div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small"> <span class="w3-dark-grey w3-padding-large w3-animate-bottom">This Text Should Animate Over The Image</span> </div> </div> The slideshow is working perfectly except the nested div with the class of 'w3-display-topright' is not showing up. I just get a small grey box where the text should be. Thoughts?
  14. WAIT! I found my problem. I had a : instead of a " on the id of my wrapper div. Mistake: <div id="myslideFrame:> Fixed: <div id-"myslideFrams"> Everything is working mow. THANKS!!!
  15. Thank you! That helped. Here's what I did: I changed the reference in the JavaScript from 'demo' to 'demodots'. I added a wrapper div around the entire slideshow and gave it id="myslideFrame" Since I am not using the flexbox, I eliminated that from the <style> in the head and in the html. Here's what's happening: There are 7 slides. When the page loads the 1st slide shows in it's proper position but the carousel isn't running. Once I click on any of the controls (demodots or next/prev), a replica of the slideshow appears directly below the 1st image and it starts to run both auto and manual - but only slides 2-6. The last individual selector (demodot) is not usable. If I click on it it automatically shifts to the 1st demodot which is actually slide #2. Slide #1 remains in view above but all of the manual controls have gone (now visible in the duplicate below). I hope I'm explaining this clearly.
×
×
  • Create New...