Jump to content

Search the Community

Showing results for tags 'html'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 647 results

  1. Multiple Slideshows on one page

    Hi everyone. I need help. I am using this slideshow https://www.w3schools.com/howto/howto_js_slideshow.asp for a new site I'm building. I want to to put multiple slideshows on the same page. I can't seem to find out how to target each java script to each slideshow. What happens is that each "dot" will change the pictures on the same slideshow. Let me know if you need any other details. Thanks so much in advance!
  2. Hello I am wondering how to make a randomly teleporting button that makes noise and shows an Android toast when the button is clicked. If anyone knows how to do this please tell me I tried looking on Google and the only thing that comes up is Minecraft...
  3. Creating a view of an excel sort

    I want to create a spreadsheet and then do a sort and display that sort as my html. Is there an easy way to do that?
  4. href="?value = ..."

    I recently stumbled on still another piece of code to which I am not accustomed <a href="?edit=<?php echo $row['obs']; ?>" onclick="return confirm('sure to edit !'); " >edit</a> How does one read the phrase ?edit= in plain English? Roddy
  5. Please consider the following two sets of code. Are they not identical in their functionality? BACKGROUND: I am troubled by the following set of code, for it intertwines PHP and HTML in a way that, for me, is neither intuitive, nor reasonable based on my limited knowledge of how PHP and HTML work. This said, it appears to work. <?php if(isset($_GET['edit'])) { ?> <button type="submit" name="update">update</button> <?php } else { ?> <button type="submit" name="save">save</button> <?php } ?> ANALYSIS: Had I written the code I would have felt compelled to enter the <button> elements as part of PHP echo statements. QUESTION: Is this proper coding technique? Roddy
  6. BACKGROUND: Please go to the following webpage and note four different ways to fill the center section. 1) The center section is loads with the rest of the page as the content of <div id='main'> 2) The center is replaced with hidden content already on the page using jQuery's html( ) function. (Click in the navigation panel on the phrase "Form, Use, and Meaning'.) 3) The center is replaced with a portion of content from another page using jQuery's load( ) function. (Click in the navigation panel on the phrase "Words, Phrases, and Clauses".) 4) The center will be replaced with its original content, but without having to reload the page. The principle is the same as in Item 2, but the link mechanism is different. (Click on the host's image.) DILEMMA: I want to fill the same section with an HTML-formatted template filled with information from a data base that opens simultaneously with the page. CONSTRAINTS: 1) The host page for the content -- namely, podcasts_dev_copy.php is structurally complete. Any changes that I make to it should be minor. 2) The content of the middle section must be filled invisibly before the host page opens, or it must fill simultaneously with the host page. RESOURCES: 1) I have developed a PHP page that takes information sent to it from a 3rd party HTTP request, downloads data from a database that is based on the request, and opens to the host page with a portion of the processed information using a $_SESSION superglobal and the PHP header( ) function and location property. (This page has not been posted.) 2) A template engine that generates the replacement content from the same $_SESSION superglobal Have you got any ideas? Roddy

    QUESTION: What does it mean when the value of the QUERY_STRING looks like the following without end? &width=1920&height=1200&width=1920&height=1200&... Roddy
  8. How to auto create a new page based on inputs

    My school asked me for a website where they can post their pictures on. Pictures from camp/city trips etc. I said that I never build a website before, but I would like to try it. So I googled and googled, then almost a week later I have this (code is below the text) I still have one problem: I have a login page which can be accessed by the teachers, I have a upload button and a name field, so every time when they have new pictures they can upload them and choose a name. But there isn't happening anything with the data. Is it possible that it automatically creates a page based on a tamplate with the before indicated input? I read something about get and post, but I have no idea how I could use that. I also read something about MySQL, but I have absolutely no idea how I could use something like that. So my question: How can I automatically create a new page, based on the input from another page. This is the website: http://thorbeckefotos.tk/ In the top right corner is a small login button, if you press the botton, you go to the login page (username: user password: password) if you continu you see the page that can be accessed by the teachers. Tamplate code: <!DOCTYPE html> <html> <head> <title>Thorbecke foto's</title> </head> <link rel="icon" href="images/logos/thorbecke.png"> <body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF"> <img src="images/Banner.png"> <a href="https://twitter.com/ThorbeckeSG"> <img src="images/logos/twitter.png" style="position:absolute; top: 5px; right: 153px;"></a> <a style="position:absolute; top: 12px; right: 20px;" href="https://twitter.com/ThorbeckeSG">Thorbecke Twitter</a> <a href="http://www.thorbecke-zwolle.nl"> <img src="images/logos/thorbecke.png" style="position:absolute; top: 37px; right: 163px"></a> <a style="position:absolute; top: 42px; right: 40px;" href="https://www.thorbecke-zwolle.nl">Thorbecke Site</a> <a href="https://www.youtube.com/channel/UCcGO0gpLrWdWMxmycPjh7Bg"> <img src="images/logos/youtube.png" style="position:absolute; top: 70px; right: 153px"></a> <a style="position:absolute; top: 72px; right: 5px;" href="https://www.youtube.com/channel/UCcGO0gpLrWdWMxmycPjh7Bg">Thorbecke YouYube</a> <a href="contact/index.php"> <img src="images/logos/contact.png" style="position:absolute; top: 92px; right: 153px"></a> <a style="position:absolute; top: 100px; right: 92px;" href="../contact/index.php">Contact</a> <br> <br> <br> </body> <link href='style.css' rel='stylesheet'> <ul> <li><a href="../index.htm">Home</a></li> <li><a>2017/18</a> <ul> <li><a href="Examenreis_Berlijn.htm">Examenreis Berlijn</a></li> <li><a href="Examenreis_Londen.htm">Examenreis Londen</a></li> <li><a href="Examenreis_Parijs.htm">Examenreis Parijs</a></li> <li><a href="Disco.htm">Disco klas 1</a></li> <li><a href="Biodag.htm">Biodag 3M</a></li> <li><a href="Introductie.htm">Introductie klas 3/4M</a></li> </ul> </li> <li><a>2016/17</a> <ul> <li><a href="../2016,17/Werkweek.htm">Werkweek</a></li> <li><a href="../2016,17/Grote_Avond.htm">Grote Avond</a></li> <li><a href="../2016,17/Skiereis.htm">Skireis</a></li> <li><a href="../2016,17/Diploma_uitreiking_Atheneum.htm">Diploma uitreiking Atheneum</a></li> <li><a href="../2016,17/Diploma_uitreiking_Havo.htm">Diploma uitreiking Havo</a></li> <li><a href="../2016,17/Diploma_uitreiking_Mavo.htm">Diploma uitreiking Mavo</a></li> <li><a href="../2016,17/Galaklas2.htm">Gala klas 2</a></li> <li><a href="../2016,17/Examenreizen.htm">Examenreizen</a></li> <li><a href="../2016,17/Brugklasdisco.htm">Brugklasdisco</a></li> <li><a href="../2016,17/Introductie.htm">Introductie klas 1M/H/A 3M 4A</a></li> <li><a href="../2016,17/Open_Dag.htm">Open Dag</a></li> </ul> </li> <li><a>2015/16</a> <ul> <li><a href="../2015,16/Diploma_uitreiking_Atheneum.htm">Diploma uitreiking Atheneum</a></li> <li><a href="../2015,16/Diploma_uitreiking_Havo.htm">Diploma uitreiking Havo</a></li> <li><a href="../2015,16/Diploma_uitreiking_Mavo.htm">Diploma uitreiking Mavo</a></li> <li><a href="../2015,16/Ijsverkoop_onioth.htm">Ijsverkoop Onioth</a></li> <li><a href="../2015,16/Onioth_kamp.htm">Onioth kamp</a></li> <li><a href="../2015,16/Werkweek.htm">Werkweek</a></li> <li><a href="../2015,16/Talendorp.htm">Talendorp</a></li> <li><a href="../2015,16/Skiereis.htm">Skireis</a></li> <li><a href="../2015,16/Going_Global.htm">Going Global</a></li> <li><a href="../2015,16/Open_Dag.htm">Open Dag</a></li> </ul> </li> <li><a>2014/15</a> <ul> <li><a href="../2014,15/kerstdinner.htm">Kerstdinner 4/5H</a></li> <li><a href="../2014,15/Munster.htm">Münster</a></li> <li><a href="../2014,15/Gala_klas_2.htm">Gala klas 2</a></li> <li><a href="../2014,15/Grote_Avond.htm">Grote Avond</a></li> <li><a href="../2014,15/Lisabon.htm">Lissabon</a></li> <li><a href="../2014,15/Londen.html">Londen</a></li> <li><a href="../2014,15/parijs.htm">Parijs</a></li> <li><a href="../2014,15/Barcelona.htm">Barcelona</a></li> <li><a href="../2014,15/Auditie_Grote_Avond.htm">Auditie Grote Avond</a></li> <li><a href="../2014,15/Stadshangenrun.htm">Stadshagenrun</a></li> </ul> </li> </ul> <br> <br> <br> <br> <center> <h1>Disco klas 1 2017/18</h1> <img src="images/Disco/breed001.jpg"> <img src="images/Disco/breed002.jpg"> <img src="images/Disco/breed003.jpg"> <img src="images/Disco/breed004.jpg"> <img src="images/Disco/breed005.jpg"> <img src="images/Disco/breed006.jpg"> <img src="images/Disco/breed007.jpg"> <img src="images/Disco/breed008.jpg"> <img src="images/Disco/breed009.jpg"> <img src="images/Disco/breed010.jpg"> <img src="images/Disco/breed011.jpg"> <img src="images/Disco/breed012.jpg"> <img src="images/Disco/breed013.jpg"> <img src="images/Disco/breed014.jpg"> <img src="images/Disco/breed015.jpg"> </center> <footer><h2><a font color="white" href="*download_url*">Download</h2></font></a> <h5>Gemaakt door Martijn Schuman</h5> <h5> Copyright 2017 All rights reserved. </h5> </footer> </html> Upload page code: <?php // Start the session ob_start(); session_start(); // Check to see if actually logged in. If not, redirect to login page if (!isset($_SESSION['loggedIn']) || $_SESSION['loggedIn'] == false) { header("Location: index.php"); } ?> <html> <head> <title>Thorbecke fotos upload</title> </head> <link rel="icon" href="images/logos/thorbecke.png"> <link href='style.css' rel='stylesheet'> <body> <img src="images/Banner.png"> </body> <form method="post" action="logout.php"> <input type="submit" value="Logout"><br> </form> <h2>Op deze pagina kan u een nieuwe activiteit aanmaken en foto's uploaden.</h2> <label for="activiteit">Activiteit:</label><br/> <input type="activiteit" placeholder="Activiteit"><br/> <br> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="files[]" multiple> <input type="submit" value="Upload"> </form> </html>
  9. 2 Submits in a form

    I need two submit buttons in my form, first is going to show result in the same tab and another one is in another one. <submit target="_blank"> is not correct. <target="_blank"> is for <form> tag, right?
  10. Same Page HTTP Request

    BACKGROUND: I have some PHP code that I would like to turn on and off from two different approaches: on the one hand, via an HTTP Request from a third-party domain; and on the other hand, via the href attribute of an HTML <a> tag on the same page. Under normal circumstances one might write something like case one. I am proposing cases two and three. Third Party Domain HTTP Request (CASE ONE): Podcast No. 3 <a href='www.grammarcaptive.com?hash=2348dd8we23jrkajddu&podcast_no=003' title='Podcast Overview' target='_blank'>Overview</a> Same Page HTTP Request (CASE TWO): Podcast No. 3 <a href='#podcast_003?hash=2348dd8we23jrkajddu&podcast_no=003' title='Podcast Overview' target='_blank'>Overview</a> Same Page HTTP Request (CASE THREE): Podcast No. 3 <a href='./?hash=2348dd8we23jrkajddu&podcast_no=003' title='Podcast Overview' target='_blank'>Overview</a> QUESTION ONE: If neither case two, nor three is permissible, how would you suggest to achieve the same goal. If either or both cases two or three are possible, which is preferable and why?
  11. Hello everyone I want to make a login page and I want to connect it with loptop or mobile fingerprint scanner and people can login with their fingerprint. Can anyone help me what should I do?
  12. University exam exercise

    Hi!! The day after tomorrow I've a HTML exam... Would you mind help me with this exercise?? I couldn't find the way to do it looking to the tutorials.. but if there is, and I missed it, let me now!! Create a HTML index.html containing a form: - with 2 text boxes to insert the name and the lastname; - a Submit button which sends the datas inserted by the user to a script php named namecontrol.php. Create a PHP page which has to visualize the datas sent from the form, as a list.
  13. BabyCam Code Help

    Hello world! First post. I am trying to get some code working to my liking that I found on the internet. I am in CS1 programming class but I do not know enough about Javascript to fix it. I am determined to finish this however. I would appreciate any help I can get. Here is the code: <!doctype html> <html> <head> <title>Security/BabyCam Revisited</title> <style type="text/css"> #container { /* center the content */ margin: 0 auto; text-align: center; } </style> </head> <body> <div id="container"> <img src="/?action=stream" /><br> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><br /> <input type="range" min="10" max="170" value="85" step="1" onchange="showValue(this.value)/> <span id="range">10-170</span> <script type="text/javascript"> function showValue(newValue) { document.getElementById("range").innerHTML=newValue; } </script> <button onclick="servos.move('P', 5)">Left</button> <button onclick="servos.move('P', -5)">Right</button> <button onclick="servos.move('T', -5)">Down</button> <button onclick="servos.move('T', 5)">Up</button> </div> </body> <script> var servos; $( document ).ready(function() { servos = moveServos(); }); function moveServos() { // Store some settings, adjust to suit var panPos = 70, tiltPos = 90, tiltMax = 170, tiltMin = 45, panMax = 170, panMin = 20; return { move:function(servo, adjustment) { var value; if(servo == 'P') { if(!((panPos >= panMax && adjustment > 0) || (panPos <= panMin && adjustment < 0))) { // Still within allowed range, "schedule" the movement panPos += adjustment; } value = panPos + 'P'; } else if(servo == 'T') { if(!((tiltPos >= tiltMax && adjustment > 0) || (tiltPos <= tiltMin && adjustment < 0))) { // Still within allowed range, "schedule" the movement tiltPos += adjustment; } value = tiltPos + 'T'; } // Use AJAX to actually move the servo $.get('' + value); }, } } </script> </html> This code has 4 buttons that work the two pan/tilt servos. I want to use a slider for left/right and another slider for up/down and in 1 degree increments rather than 5 degrees. You can see the output at I added a slider, but I do not know Javascript enough to hook it into the actions. Once this is over, I will be writing a very clear tutorial on how everyone can make this from scratch like I did for Samba here: http://devestechnet.com/NewTech/PiSamba Thank you!
  14. I have referenced the W3 slideshow tutorial here and added two slideshows to my web page using Dreamweaver. I understand that the Javascript needs to be edited to accommodate 2 slideshows (divs vs. classes i think?), and I have tried to follow the instructions given here in order to edit it. Both of my slideshows seem to work independently now, but i can't figure out how to edit the Javascript to make the dots work right. The hover color works (red), but on the second slideshow, the dots do not turn red as the slideshow is advanced. I know very little about Javascript and I have gone through the Javascript tutorial, but I haven't landed on a solution. I've also searched the forums for an answer, but haven't found one that works for my specific situation. If anyone could point me toward a solution to have two slideshows on the page that both work pretty much like the one on the W3 tutorial page (with dots and arrows), I'd greatly appreciate your help — ANY guidance about how to fix the code is greatly appreciated. ~bex Here is my code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0} .mySlides {display:none} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #f44336; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div id="wrapper"> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="img_nature_wide.jpg" width="100%"> <img class="mySlides fade" src="img_fjords_wide.jpg" width="100%"> <a class="prev" onclick="plusDivs(-1, 0)">&#10094;</a> <a class="next" onclick="plusDivs(1, 0)">&#10095;</a> <!-- Extra plusDivs parameter refers to first (0) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1)"></span> <span class="dot" onclick="currentDiv(2)"></span> </div> </div> <hr> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="img_nature_wide.jpg" width="100%"> <img class="mySlides fade" src="img_fjords_wide.jpg" width="100%"> <a class="prev" onclick="plusDivs(-1, 1)">&#10094;</a> <a class="next" onclick="plusDivs(1, 1)">&#10095;</a> <!-- Extra plusDivs parameter refers to second (1) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1)"></span> <span class="dot" onclick="currentDiv(2)"></span> </div> </div> <script> var slideIndex = 1; var z = document.getElementsByClassName("slideshow"); for (i = 0; i < z.length; i++) { //set custom data attribute to first current image index z[i].setAttribute("data-currentslide", 1); showDivs(z[i].getAttribute("data-currentslide"), i); } function plusDivs(n, j) { //get custom data attribute value of current image index to slideshow class index j slideIndex = parseInt(z[j].getAttribute("data-currentslide")[0]); showDivs(slideIndex += n, j); } function currentDiv(n,j) { showSlides(slideIndex += n, j); } function showDivs(n, j) { var i; var z = document.getElementsByClassName("slideshow")[j]; var x = z.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length; } //set custom data attribute to current image index z.setAttribute("data-currentslide", slideIndex); 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(" active", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } </script> </div> </body> </html>
  15. I am trying to find a solution to a problem that I have encountered while trying to get a fixed-top navigation menu to work dynamically in W3.CSS. By dynamically, I mean that the horizontally-orientated navigation bar should remain in its place under the page title and image until the page is scrolled downwards and reaches the top of the viewport. At this point, it should fix itself to the top of the screen. I have been able to achieve this effect using my own html/css and jquery script but this method doesn’t work as intended with W3.CSS. I have been moving my websites over to W3.CSS as I as a means of making them responsive and also because css is not my strong point and I like the W3.CSS structure. The menu bar operates as it should when it is in its static mode but, when it is fixed, which involves position:absolute and a z-index of 1, the dropdown menus no longer appear above the bar but are concealed within it. I have tried altering the z-index values of the dropdown-hover and dropdown-content elements but cannot find a solution to this problem. If there is anyone who can, I would be very grateful. The html code below is based closely on the “Navigation Bar with Dropdown” example taken from the W3.CSS Navigation Bars page. I also include the css used to fix the bar and the jquery function to call the css once the top of the screen is reached. HTML <div id=”container”> <div id=”header”></div> <img id="header_image" src="titleimage.jpg" alt="Header Image" class="header_image"/> <img id="header_image_m" src="title_image_m.jpg" alt="Header Image" class="header_image"/> <div id=”nav_bar_container> <div id=”nav_bar” class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a> <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a> <div class="w3-dropdown-hover"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-mobile"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div> </div> CSS #nav_bar_container, #nav_bar{ margin:0; padding:0; width:100%; max-width:948px; } .nav_bar_fixed { position:fixed; top:0px; z-index:1; } Jquery if ($( window ).width() > 600) { $(window).scroll(function() { var fixedBar = $('#nav_bar'), targetScroll = $('#nav_bar_container').position().top, currentScroll = $('html').scrollTop() || $('body').scrollTop(); fixedBar.toggleClass('nav_bar_fixed', currentScroll >= targetScroll); }); }
  16. Not sure if I worded that right. I am trying to ad a modal to our page. Eventually it will need to be more than one modal but one problem at a time. I am struggling to add multiple images in a modal where visitors can just click on the image and it will enlarge and they can scroll through them. Instead what happens is it gives me the images but no option to click on an arrow which means every image has to opened separately. Can someone help me please as I am not managing with google. This is the coding I found on W3Schools. I just copied and pasted it like I found it and just put my image tag in. I just can't figure out how to add more images. <!-- Trigger the Modal --> <img id="myImg" src="img/t1.jpg" alt="Tinkerbell Party" width="300" height="200"> <!-- The Modal --> <div id="myModal" class="modal"> <!-- The Close Button --> <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times; </span> <!-- Modal Content (The Image) --> <img class="modal-content" id="img01"> <!-- Modal Caption (Image Text) --> <div id="caption"></div> </div> <html> <head> <style> #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } </style> </head> <body> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <script> // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } </script> </body> </html>
  17. Problem with Photo Image Layout

    I am trying to design my own mockup website based on one of the W3 templates; however, I could not get the photo images to lay out on my website the same way as the W3 template. Here is the W3 template that I was talking about: https://www.w3schools.com/w3css/tryw3css_templates_photo2.htm. And here is the following codes that I came up with for my website. Any feedback will help. HTML <!doctype html> <html> <head> <title>Amy Perrales | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- !PAGE CONTENT! --> <div class="photography" style="max-width:1500px"> <!-- Header --> <header class="panel" style="padding:128px; 16px;"> <h1 class="ap-xlarge">PHOTOGRAPHER</h1> <h1>Amy Perrales</h1> </head> <body> <div> <id class="introduction"> <a href="Home" style="text-decoration: none;">Home</a> <a href="Portfolio" style="text-decoration: none;">Portfolio</a> <a href="About Amy" style="text-decoration: none;">About Amy</a> <a href="Contact" style="text-decoration: none;">Contact</a> </div> </header> <!-- Photo Grid --> <div class="half-width"> <img src="img/amusement_park.jpg" alt="amusement park" style="width: 599px; height: 424px;"> <img src="img/dock-1365387_640.jpg" alt="dock" style="width:550px; height:633px;"> <img src="img/kaboompics_Black baby chicks.jpg" alt="baby chicks" style="width: 342px; height:513px;"> <img src="img/sunset-114557_640.jpg" alt="sunset" style="width: 275px; height: 550px;"> <img src="img/wedding_couple.jpg" alt="wedding couple" style="width:550px; height:412px;"> </div> <div class="full-width"> <img src="img/ballet-437990_640.jpg" alt="ballet dancer" style="width:424px; height="640px;"> <img src="img/baseball.jpg" alt="baseball player" style="width:424px; height="640px;"> <img src="img/dancer-2471026_640.jpg" alt="dancer" style="width:424px; height="640px;"> <img src="img/pool.jpg" alt="children and pool" style="width:424px; height="640px;"> </div> <!-- Footer --> <footer> <i class="fa fa-facebook-square" style="font-size:36px;"></i> <i class="fa fa-twitter-square" style="font-size:36px;"></i> <i class="fa fa-instagram" style="font-size:36px;"></i> <i class="fa fa-pinterest" style="font-size:36px;"></i> <i class="fa fa-linkedin" style="font-size:36px;"></i> </footer> </style> </body> </html> CSS /* ========================================================================== Base Styles ========================================================================== */ body,h1 { font-family: 'Slabo 45px', serif; text-align: center; letter-spacing: 6px; color: #9aa6b1; } a { color: #a9b3bc; border: 3px solid #fba69d; padding: 8px; margin-left: 3px; margin-right: 5px; } img { margin-bottom: 128px; width: 100%; height: auto; }
  18. Changing the place of input and label

    The html code is this : <div class="form-group"> <label class="col-sm-4 control-label">Checkbox inputs</label> <div class="col-sm-8"> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt01" checked> <label for="opt01">Option 1</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt02"> <label for="opt02">Option 2</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt03"> <label for="opt03">Option 3</label> </div> </div> </div> I attached the results photo : I want to change the place of checkbox and label I mean I want first be label and then checkbox. It had bootstrap too I uploaded the bootstrap files too : https://www.dropbox.com/s/kc8ytkkd5dxcmc1/assets.zip?dl=0 Who can say that how can I change the place of checkbox and label I will be thank.
  19. So the first picture is my homepage(mt.hebronbaptistchurch.html) and the link box is the size i want it to be. The second picture is my pictures and videos page(picturesandvideos.html and the link size is increased and I have no clue why. I added a slideshow feature using CSS and I think it messed with the link box. Mt.hebronbaptistchurch.html News.html PicturesandVideos.html
  20. Dear W3Schools-Community, There is something not working with my code right here. It should be mentioned that I am fairly new to using JavaScript. Here is my HTML code (stripped down to the essential parts): <!DOCTYPE html> <html lang="de"> <head> <script type="text/javascript"> function change_content(contentname) { if (document.getElementById(contentname).className = 'notactive') { document.getElementById('login').className = 'notactive'; document.getElementById('news').className = 'notactive'; document.getElementById('info').className = 'notactive'; document.getElementById('websites').className = 'notactive'; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById('content').innerHTML = this.responseText; if (contentname == 'kontakt' || contentname == 'hilfe' || contentname == 'impressum') { document.getElementById('info').className = 'active'; } else { document.getElementById(contentname).className = 'active'; } } }; xmlhttp.open('POST', contentname + 'page.php', true); xmlhttp.send(); } if (document.getElementById('info').className == 'active') { document.getElementById('dropdown-icon').src = "/ressource/images/nydoo-dropdown-icon-black.png"; } else { document.getElementById('dropdown-icon').src = "/ressource/images/nydoo-dropdown-icon-yellow.png"; } } window.onload = change_content; </script> </head> <header> <ul id="mainnavigation"> <li id="mainlist" class="dropdown"><a id="info" class="notactive" onclick="change_content(this.id);">Information<img id="dropdown-icon" style="width: 15px; height: 12px; float: right; margin-top: 7px; margin-right: 20px;" src="/ressource/images/nydoo-dropdown-icon-yellow.png" id="dropdown_icon"></a></li> </ul> </header> <body onload="change_content('login'); return false;"> <div id="content"> </div> </body> </html> What I'm trying to do is changing the color from img (id="dropdown-icon") from yellow to black whenever a (id="info") has class "active". Also the other way around (class "notactive" -> change from black to yellow). Hopefully this describes it. It maybe a simple thing. But I'm getting frustrated with this issue. Let me know if I screwed it up myself :3 Thank you very much n advance.
  21. logo

    how adding logo to top page next to the title.
  22. Hi I am using below script to create 3 tables adjacent to each other : PARAMETERS MOUNT SIZE 1 f fg fgh BEFORE_USAGE USED AVAILABLE USE% 1 f 5 fg fgh t2 AFTER_USAGE USED AVAILABLE USE% Fvfev kjhkj kjgfhkg fbghvg gcfv hfjghj QUERY : I want to use df -h command which should fill the data ( <td> ) in the above 3 table columns ( Parameters/ Before_Usgae/After_Usage). BEFORE USAGE : The disk space before clearing the space on the server. AFTER USAGE : Disk space after clearing the space. The problem here is : I am able to write the code in linux to generate the table like above ( next to each other) but unable to generate the data for ( Mount/size) , ( Used/available/use%) in runtime. Please help me how can i achieve this. ------------------------- #! /bin/bash MailTO=xyz@gmail.com DATE=`/bin/date '+%Y%m%d-%H%M%S'` HOST=`hostname` ALERT_DIR_COUNT=`df -Ph | grep -v "Use%" | sed 's/%//g' | awk '$5 > 70 {print $1,$2,$3,$4,$5"%",$6;}' | column -t | wc -l` ( printf "To: xyz@gmail.com\n" printf "Subject:$HOST\n :$ALERT_DIR_COUNT\n mounts reached threshold & Logs Cleared : $Numberofdays days\n" printf "Content-Type: text/html\n" printf "<html>\n" printf "<body>\n" df -Ph | awk ' BEGIN { printf "<table border="1" cellspacing="0" cellpadding="0">" printf "<tr>" printf "<td width="40">" printf "<table width="100" border="1" cellspacing="0" cellpadding="1">" printf "<tr>" printf "<th style=\"font-size:12px\" bgcolor=#B2BABB align=center colspan="2">PARAMETERS</th>" printf "<tr>" printf "<th style=\"font-size:12px\" bgcolor=#EAEDED>MOUNT</th>" printf "<th style=\"font-size:12px\" bgcolor=#EAEDED>SIZE</th>" printf "</tr>" printf "<tr>" printf "<td>1</td>" printf "<td>f</td>" printf "</tr>" printf "<tr>" printf "<td>fg</td>" printf "<td>fgh</td>" printf "</tr>" printf "</table>" printf "</td>" printf "<td width="30">" printf "<table width="100" border="1" cellspacing="0" cellpadding="1">" printf "<tr>" printf "<th style=\"font-size:12px\"bgcolor=#73C6B6 align=center colspan="3">BEFORE_USAGE</th>" printf "<tr>" printf "<th style=\"font-size:12px\" bgcolor=#D0ECE7>USED</th>" printf "<th style=\"font-size:12px\" bgcolor=#D0ECE7>AVAILABLE</th>" printf "<th style=\"font-size:12px\" bgcolor=#D0ECE7>USE%</th>" printf "</tr>" printf "<tr>" printf "<td>1</td>" printf "<td>f</td>" printf "<td>5</td>" printf "</tr>" printf "<tr>" printf "<td>fg</td>" printf "<td>fgh</td>" printf "<td>t2</td>" printf "</tr>" printf "</table>" printf "</td>" printf "<td width="30">" printf "<table width="100" border="1" cellspacing="0" cellpadding="1">" printf "<tr>" printf "<th style=\"font-size:12px\" bgcolor=#7FB3D5 align=center colspan="3">AFTER_USAGE</th>" printf "<tr>" printf "<th style=\"font-size:12px\" bgcolor=#D6EAF8>USED</th>" printf "<th style=\"font-size:12px\" bgcolor=#D6EAF8>AVAILABLE</th>" printf "<th style=\"font-size:12px\" bgcolor=#D6EAF8>USE%</th>" printf "</tr>" printf "<tr>" printf "<td>Fvfev</td>" printf "<td>kjhkj</td>" printf "<td>kjgfhkg</td>" printf "</tr>" printf "<tr>" printf "<td>fbghvg</td>" printf "<td>gcfv</td>" printf "<td>hfjghj</td>" printf "</tr>" printf "</table>" printf "</td>" printf "</tr>" printf "</table>" } END { print "</table>" }' printf "</body>\n</html>\n" ) | /usr/sbin/sendmail $MailTO
  23. Hello everyone, I am trying to make my first website and have been going through some javascript examples on W3S to learn how to make a website more interactive. I have been looking at the code for modal login and signup forms found here: https://www.w3schools.com/howto/howto_css_login_form.asp and here: https://www.w3schools.com/howto/howto_css_signup_form.asp The HTML and CSS are easy enough to understand I think, but I seem to be having some trouble with the JS aspect of the tutorials. What I have done is simply add both forms to an HTML document, linked to the styling and that seems to be working fine. The problem is when I click outside of the form the display for the modal forms should be set to none by the javascript code but this only works for one button. I have been able to rearrange some of the code so the second button works but then the first button wouldn't work. I have the code listed below. I've been trying this for a few days and would really like some help. Thanks in advance. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website3</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="login.css"> </head> <body> <div id="outerMain"> <div id="main"> <header> <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button> <button onclick="document.getElementById('id02').style.display='block'" style="width:auto;">Sign Up</button> <div id="id01" class="modal"> <form class="modal-content animate" action="/action_page.php"> <div class="imgcontainer"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span> <img src="logo.png" alt="Avatar" class="avatar"> </div> <div class="container"> <label><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> <input type="checkbox" checked="checked"> Remember me </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> </div> </form> </div> <div id="id02" class="modal"> <form class="modal-content animate" action="/action_page.php"> <div class="imgcontainer"> <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span> </div> <div class="container"> <label><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <label><b>Repeat Password</b></label> <input type="password" placeholder="Repeat Password" name="psw-repeat" required> <input type="checkbox" checked="checked"> Remember me <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p> <div class="clearfix"> <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button> <button type="submit" class="signupbtn">Sign Up</button> </div> </div> </form> </div> <script src="scripts.js"> </script> </header> <section> <center><img src="centerimg.png" alt=""></center> </section> </div> </div> <footer> <center>HERE IS THE FOOTER!!</center> </footer> </body> </html> Javascript: var login = document.getElementById('id01'); var modal = document.getElementById('id02'); console.log(login); console.log(modal); if(login == document.getElementById('id01')){ console.log(login); window.onclick = function(event) { if (event.target == login) { login.style.display = "none"; } }; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }; CSS: html,body{ height: 100%; } #outerMain { min-height: 100%; } #main{ overflow: auto; padding-bottom: 100px; background-color: green; } header{ background-color: blue; } /* Full-width input fields */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* Set a style for all buttons */ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } /* Extra styles for the cancel button */ .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } /* Center the image and position the close button */ .imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } .container { padding: 16px; } span.psw { float: right; padding-top: 16px; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button (x) */ .close { position: absolute; right: 25px; top: 0; color: #000; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: red; cursor: pointer; } /* Add Zoom Animation */ .animate { -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)} } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } }
  24. how to link another page using id

    Hello folks, i want to link the page from to another page ex: In my footer column, i've 5 types of products but when i click those products it links to product.html page.Actually In that product page there 5 no of products are listed. when i click the product from index page.I want exact header location for the product.. Thanks in advance
  25. I have created some js file to change the height of my header when a user scrolls through it. The goal is that the header starts at 90% of the window height (90vh in css) when the page is loaded and it shrinks down to 80px when a user starts scrolling down (if the user goes back to the top of the page it will again grow to 90%). Also I want a gif playing in the back behind the header. The code works, but when you scroll down/up it seems to be lagging, but I would like it to fluently do these actions. Can anyone can give me some hints on how to improve the speed? Here is my code for these actions: HTML <html> <body> <div id="header-back" class="col12"></div> <div id="header" class="col12"></div> <div id="main" class="col12"></div> </body> </html> CSS /****** GRID VIEW ******/ [class*="col"] { width: 100%; } @media only screen and (min-width: 850px) { .col1 {width: 8.33%;} .col2 {width: 16.67%;} .col3 {width: 25.00%;} .col4 {width: 33.33%;} .col5 {width: 41.67%;} .col6 {width: 50.00%;} .col7 {width: 58.33%;} .col8 {width: 66.67%;} .col9 {width: 75.00%;} .col10 {width: 83.33%;} .col11 {width: 91.67%;} .col12 {width: 100.00%;} .col {width: auto;} } * { font-family: Trebuchet MS; border: 0px solid black; box-sizing: border-box; } body { width: 100vw; min-height: 100vh; margin: 0; } /* HEADER */ #header { height: 90vh; min-height: 80px; max-height: 90vh; background-color: rgba(30,30,30,0.8); position: fixed; top: 0; left: 0; box-shadow: 0 0 15px rgb(0,0,0); z-index: 2; } #header-back { height: 90vh; min-height: 80px; max-height: 90vh; position: fixed; top: 0; left: 0; z-index: 1; background-image: url("https://media.giphy.com/media/wyBcwFyH2FpO8/giphy.gif"); background-position: bottom left; background-size: cover; } /* MAIN */ #main { min-height: 100vh; padding-top: 90vh; background-color: rgb(230,230,230); } Javascript // change header size on scroll $(document).ready(function(){ // variables var vh90 = $(window).height()*(9/10); var height, color, opacity; // control height of header on scroll $(window).scroll(function(){ height = vh90 - $(window).scrollTop(); opacity = 1 - ( (height-80) / vh90 ) * 0.2; color = "rgba(30,30,30," + opacity + ")"; $("#header").css({"height": height, "background-color": color}); $("#header-back").css({"height": height}); }); }); I have created a jsfiddle to show my idea, but in the fiddle it seems to be working fluently (I used another gif, but I don't think this is the problem because this gif gets loaded at the start and doesn't really go away?)