Search the Community
Showing results for tags 'automatic'.
Found 4 results
-
I have a site where I fetch a list of jobs from MYSQL and display them on the page. At the end of the row for each job I have a button that has a drop down menu, unique to the user. All this works fine, but if the lines of jobs get near the bottom of the page, the drop down menu goes off the screen and I cannot scroll up to see it. I need to make the position of the drop down menu change automatically depending on its position on the page. Can this be done in CSS or must I now go and learn javascript? You feedback will be most appreciated! Thank you. I am using W3Schools drop down menu script and it works perfectly well (thank you!) <div class="dropdown"> <button class="dropbtn">Options</button> <div class="dropdown-content"> Menu items go here </div> </div> This is the CSS (from W3) /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: fixed; top: 1; /*right:50px;*/ background-color: #f9f9f9; min-width: 220px; overflow: auto; /* box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2); */ z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { padding: 2px 2px; text-decoration: none; display: block; } /* specify colour of headings as opposed to line items */ .dropdown-content span { background-color: #0000C1; color:#FFFFFF; font-weight:bold; padding: 2px 2px; text-align:center; text-decoration: none; display: block; }
-
I see you have examples of a non-autoplay slideshow with dots and arrows, and you have an auto-play slideshow that does not have arrows and you cannot select the dots to go to that particular state. Both are great, and I would like to know the code to make an autoplay slideshow, that has selectable dots, and next/prev arrows.
-
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>
-
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.
