Jump to content

Search the Community

Showing results for tags 'html5'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. Hello Everyone Good Evening I'm following your w3.css tutorial but I need your help. My questions are: - How do I centralize the Work Experience, Education and Skills sections in the middle of the browser window? - How do you fix datetime on the same level as the timebar, ie on the same line as the timebar? I would appreciate your support, please. https://codepen.io/Quencyjones79/pen/eYRWgOm
  2. I want to make a RPG game that can be run in a browser. The goal of the post is to see if I can get other developers to help. I know HTML and CSS but don't know JavaScript, which is a big part of game. ( I am learning it now ) I want the graphics to look similar to pixel dungeon. The people who sign up will get equity of the game. While this game is to be made for fun it could also make money. For more details about the game details ( such as classes, levels, etc. ) contact me.
  3. I've seen this (and similar) code used to apply an SVG filter to an image. How do I use this code to apply an SVG filter to a canvas? The canvas' content may change often. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="darkGreen"> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> <image xlink:href="(url to image)" width="" height="" filter="url(#darkGreen)" /> </svg> Thank you
  4. Hi everyone!😃 I have done the html, css and doing the JavaScript tutorial. I want to start consolidating my basic knowledge by developing websites. But where do I start? I want to build a portfolio. But I can't seem to move forward! To start the web building, should I follow the section headed 'Web Building?' Thanks, Jayne🤠
  5. I do not know how to make cell phone browsers choose the smaller image, and the laptops/desktops choose the bigger image, while their resolutions are the same. I have the following script: <img sizes="(max-width: 479px) 479px, (max-width: 991px) 991px, 1400px" srcset="media/img/small.webp 479w, media/img/medium.webp 991w, media/img/big.webp 1400w" src="media/img/default.png"> From the above script, when the cell phone's resolution is, let's say 1080 x 1920 pixels, then the browser will choose big.webp. How to make the cell phone's browser choose small.webp? Thank you
  6. 0 I do not know how to make cell phone browsers choose the smaller image, and the laptops/desktops choose the bigger image, while their resolutions are the same. I have the following script: <img sizes="(max-width: 479px) 479px, (max-width: 991px) 991px, 1400px" srcset="media/img/small.webp 479w, media/img/medium.webp 991w, media/img/big.webp 1400w" src="media/img/default.png"> From the above script, when the cell phone's resolution is, let's say 1080 x 1920 pixels, then the browser will choose big.webp. How to make the cell phone's browser choose small.webp? Thank you
  7. https://www.w3schools.com/howto/howto_custom_select.asp The link above is a custom select dropdown. I'm trying to get each item in the dropdown go to a link. I've tried using; <body> Please select city : <select name="select-city" onchange="location = this.value;"> <option value="">Select-City</option> <option value="https://en.wikipedia.org/wiki/New_Delhi">New Delhi</option> <option value="https://en.wikipedia.org/wiki/New_York">New York</option> <option value="https://en.wikipedia.org/wiki/Bern">Bern</option> <option value="https://en.wikipedia.org/wiki/Beijing">Beijing</option> </select> </body> And this, <select name="formal" onchange="javascript:handleSelect(this)"> <option value="home.com">Home</option> <option value="https://www.Facebook.com">Contact</option> </select> <script type="text/javascript"> function handleSelect(elm) { window.location = elm.value; } </script>
  8. Hello guys, I´m currently creating a website and have to use some kind of a switch button (in iOS-Style). I already implemented the switch button, however I want the user to switch with the button between two upcoming photo galleries. Because documentation in the www is lacking, I would need your support. Because I´m pretty unexperienced in website coding, I used the W3school switch button (https://www.w3schools.com/howto/howto_css_switch.asp) I hope you could help and I´m sorry for being such unexperienced but having high demands.
  9. I'm trying to write an article on my web site about special relativity. Does HTML5 provide a way to render one over the square root of an expression on a web page? The expression has superscripts and subscripts, which I know how to do. Thank you for your help. Jim Adrian
  10. I'd like my video to start playing automatically when the page is launched without sound just like on this page: [LINK REMOVED]. I've tried any possible jQuery/javascript/CSS option I could find online but I always end up with Google error that's blocking the video from autoplay unless there was an interaction. How did they do it in the link above?
  11. I have created a simple Web Page having a HTML form for the user's name and age details. I had HTML file linked with an asp file that displayed the user's name and age using action attribute xxx.asp. Upon running the code, first web page shows me a form to fill, let it be my page 1 and after finishing the form and clicking on submit button I am redirected to a new web page, consider it as page 2. Now What happens to page 1 after the submit button is clicked, is it stored somewhere or the memory space is freed for page 1. Wanted to know how page 1 works internally.
  12. I'm going through the HTML game module, and I found " var myleft = this.x; var myright = this.x + (this.width); var mytop = this.y; var mybottom = this.y + (this.height); " In https://www.w3schools.com/graphics/game_obstacles.asp Can someone please explain what points are myleft, myrightm mytop and mybottom on the component? I'm confused because aren't myleft and mytop the same point on the component? Please help. Thanks, Prakhar
  13. If somebody can explain this code like what does what il swish 15 euros. Here is the code its for my nav bar but i have a hard time explaining what everything does. <style> .dropbtn { background-color:black; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { left:77.005px; position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: lightgrey; min-width: 200px; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: white;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: grey;} </style> </head> <div class="dropdown"> <button class="dropbtn">meny</button> <div class="dropdown-content"> <a href="La carte/la carte.html">A la carte matsedel</a> <a href="Veckomatsedel/veckomatsedel.html">veckomatsedel</a> </div> </div> <style> <div class="dropdown"> <button class="dropbtn" onclick="window.location.href = 'Kontakt/Kontakt.html';">kontakt</button> <div class="dropdown-content"> </div> </div>
  14. I'm building a web page, and started with a simple layout: there is a banner and a menu at the top, and the welcome page after it. People may then select an item from the menu at the top or the image links at the main page, and go to other subpages. But the idea is that those subpages should be loaded in the area below the menu, the menu itself and the banner should remain in place, not reloaded each time the visitor navigates around. I have seen some instructions but they always rely in frames or frame-related tags. It has been made abundantly clear that those are not compatible with HTML5 and have many drawbacks, but then, which is the modern way to do that? Note that most or all major pages in internet do this regardless of their format (limit the navigation to a part of the page, while keeping links at the top, bottom, left or right in their place), so I'm sure that I'm not asking about some outdated idea. The W3Schools page itself, after all, does this.
  15. What would be the most efficient way to code on wordpress? Should I write directly on the platform or copy it from an editor? I am having a hard time on WP specially when adding tables as the code is all messed up (without spaces or lines). If you use WP, please help! Thank you, Damian
  16. <!DOCTYPE html> <html lang = "en"> <!--This is my first comment in my index page--> <head> <meta charset="utf-8"> <link rel="stylesheet" href="greentea.css"> <a href= "greentea.html"></a> </head> <header> <h1>Teaz Nuts</h1> </header> <!--This is the body of my page--> <body> <nav> <ul> <li><a href= "greentea.html"> Home </a></li> <li><a href="about.html">Login</a></li> <li><a href="Product.html">Product</a> </li> <li><a href="New User Signup.html">New User Signup</a></li> </ul> </nav> <main> <div class = "hippiegirl"> <image src = "hippiegirl.jpg" alt = "tranquility"></image> </div> <p>The properties of green tea are many and varied. Especially during an epidemic<br> we all need to be aware of what tea can do for us. Along with its antibiotic properties, it also<br> can cleanse the spirit and wash away our tensions. </p> </main> <footer> <br>&copy; <a href="mailto:jackcole861@gmail.com">Click to email Jack Cole</a> </footer> </body> </html> This is my css .hippiegirl { position:absolute; left:0; top:0; width:400%; height:auto; opacity:0.6; } body{ background-color: lightgreen; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change the link color to #111 (black) on hover */ li a:hover { background-color: #111; }
  17. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> </title> <link href="css/bootstrap-4.0.0.css" rel="stylesheet" type="text/css"> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var id = 1; $("#butsend").click(function() { var newid = id++; $("#table1").append('<tr valign="top" id="'+newid+'">\n\ <td width="100px" >' + newid + '</td>\n\ <td width="100px" class="patid'+newid+'">' + $("#patid").val() + '</td>\n\ <td width="100px" class="test_code'+newid+'">' + $("#test_code").val() + '</td>\n\ <td width="100px" class="test_name'+newid+'">' + $("#test_name").val() + '</td>\n\ <td width="100px" id="generalprice" class="generalprice'+newid+'">' + $("#generalprice").val() + '</td>\n\ <td width="100px" id=quantity class="quantity'+newid+'">' + $("#quantity").val() + '</td>\n\ <td width="100px" id="qntytolprices" class="totalprices'+newid+'">' + $("#totalprices").val() + '</td>\n\ <td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>'); }); $("#table1").on('click', '.remCF', function() { $(this).parent().parent().remove(); $('#table1 tbody tr').each(function(id){ $($(this).find('td')[0]).html(id++); }); }); $("#butsave").click(function() { var lastRowId = $('#table1 tr:last').attr("id"); var test_code = new Array(); var test_name = new Array(); var generalprice = new Array(); var quantity = new Array(); var totalprices = new Array(); var patid = new Array(); for ( var i = 1; i <= lastRowId; i++) { patid.push($("#"+i+" .patid"+i).html()); test_code.push($("#"+i+" .test_code"+i).html()); test_name.push($("#"+i+" .test_name"+i).html()); generalprice.push($("#"+i+" .generalprice"+i).html()); quantity.push($("#"+i+" .quantity"+i).html()); totalprices.push($("#"+i+" .totalprices"+i).html()); totalprice.push($("#"+i+" .totalprice"+i).html()); } }); }); </script> <script> $(".qtol2,.qtol1").keyup(function() { $('.qtol3').val($('.qtol1').val() * $('.qtol2').val()); }); </script> </head> <body> <div class="form-group"> <form> <input name="patid" type="text" id="patid" placeholder="patid" value=""> <div class="container" id="multiple"> <input name="test_code" type="text" id="test_code" placeholder="code" value=""> <input name="test_name" type="text" id="test_name" placeholder="Item Name" value=""> <input class="qtol1" name="generalprice" type="text" id="generalprice" placeholder="general price"> <input class="qtol2" name="quantity" type="text" id="quantity" value="1" onClick="calc()" placeholder="quantity"> <input class="qtol3" name="totalprices" type="text" id="totalprices" placeholder="total prices"> <input name="send" type="button" id="butsend" class="add-row" value="Add Row"> </div> <div> <input name="save" type="button" class="btn btn-primary" value="Save to database" id="butsave"> </div> <table id="table1" name="table1" class="table table-bordered"> <tbody> <thead> <tr> <th>Serial no.</th> <th>ID</th> <th>Test code</th> <th>Test name</th> <th>General price</th> <th>Quantity</th> <th>Total prices</th> <th>Action</th> </tr> </thead> </tbody> <tfoot> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td>Total:</td> <td ><input id="subtotal" type="text"></td> <td> </td> </tr> </tfoot> </table> </form> </div> </body> </html>
  18. The file at this url contains exactly the code below, and the domain is SSL https://staging13.dgstesting.com/new2.html <!DOCTYPE html> <html> <head> <script> navigator.geolocation.getCurrentPosition(function(position){ document.body.innerHTML = position.coords.latitude; }, function(error){ document.body.innerHTML = error.message; }); </script> </head> <body> </body> </html> The problem: On chrome, edge beta (so basically chrome) and chrome on android, this code will succeed and print your devices latitude to the page. On Safari, safari for ios, and IE11, this will fail with the message "This site does not have permission to use the Geolocation API." I assume it's not referring to the user granting permission to access location data, but i checked this anyway. Doesn't appear to be the case because it's working in one browser but not another on the same device. In my example, it works in chrome but not ie11 on the same windows 10 computer. I also had a coworker confirm the same thing, it works in chrome but not safari on his mac. That leaves me thinking it's a domain issue, but why would it work in one browser and not another? After tons of Googling the best answer I can find is that it is an SSL issue, but if you go to https://developers.google.com/maps/documentation/javascript/geolocation you can see that even google.com is facing the same issue. So I think that rules that out. you can even try it on w3schools own site https://www.w3schools.com/html/html5_geolocation.asp Google of course has no input here because navigator is a product of html5
  19. unable to understand why black image is getting, please check the code and assist in generating the optimised image from file input <html> <head> <script src="jquery-3.4.1.min.js"></script> <title>Image Optimization</title> </head> <body> <div> <input type="file" id="imgFile" accept="image/*" capture="user"> </div> <div id ="test"> <img id="optImg" alt="optmisied Image"> </div> </body> </html> <script> $("#imgFile").change(function(){ const File = this.files[0]; const fileURL = URL.createObjectURL(File); const cvs = document.createElement("canvas"); let ctx = cvs.getContext("2d"); const imgFile = new Image(); imgFile.src = fileURL; imgFile.onload = function(){ ctx.drawImage(imgFile,0,0); } const cvsURL = cvs.toDataURL(File.type, 0.3); $("#optImg").attr('src',cvsURL).css('width',80) }); </script> please assist
  20. I'm referring to https://www.w3schools.com/howto/howto_js_form_steps.asp What I want to achieve, is to introduce a step where to select the required steps. As example: Imagine a form to insert the data of a person: Tab0: a transfer list with 3 elements: Name and date on the right tab, required; Driving License on the left tab to be selected only by people having a driver license Tab1 - Name: First and last name Tab2 - Date: Date of birth Tab3 - Driving license: Optional: Driving license # The sequence of pages should include Tab3 only if previously selected in Tab0
  21. Attention: W3Schools Forums members: It is baffling as to why the following Hypertext Markup Language ( HTML ) version 5 ( HTML5 ) code is not working: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Holy Bible.</title> <style> <!-- div.container { --> <!-- width: 100%; --> <!-- border: 1px solid gray; --> <!-- } --> <!-- header, footer { --> <!-- padding: 1em; --> <!-- color: white; --> <!-- background-color: purple; --> <!-- clear: left; --> <!-- text-align: center; --> <!-- } --> <!-- nav { --> <!-- float: left; --> <!-- max-width: 50%; --> <!-- margin: 0; --> <!-- padding: 0em; --> <!-- } --> <!-- nav ul { --> <!-- list-style-type: none; --> <!-- padding: 0; --> <!-- } --> <!-- nav ul a { --> <!-- text-decoration: none; --> <!-- } --> <!-- article { --> <!-- @media only screen and (max-width: 35%) { --> <!-- body { --> <!-- margin-left: 35%; --> <!-- border-left: 1px solid gray; --> <!-- padding: 0em; --> <!-- overflow: hidden; --> <!-- } --> <!-- } --> <!-- } --> p { text-indent: 20px; } .text { margin: 15px; } </style> </head> <body> <!-- <div class="container"> --> <!-- <header> --> <!-- <h1>King James Version; 1611 Edition.</h1> --> <!-- </header> --> <img src="Holy_Bible_RSV_2_crop (136x100).jpg" height="200" width="200"> <img src="Holy_Bible_KJV_crop_vs.jpg" height="200" width="200"> <img src="Holy_Bible_NRSV_2_crop (640x574).jpg" height="200" width="200"> <img src="The_Gospel_Preacher_logo_2.jpg" height="50" width="50"> <img src="The_Gospel_Preacher_logo_2a.jpg" height="50" width="50"> <img src="The_Gospel_Preacher_logo_3a.jpg" height="50" width="50"><br> <a href="ftp://Russell1-PC:21/c:/inetpub/wwwroot/TheHolyBible_ftp_1/*.pdf">click here</a><br><br> <object width="10%" height="100" data="The_Gospel_Preacher_255.pdf"></object>&#160&#160&#160<object width="10%" height="100" data="The_Gospel_Preacher_256.pdf"></object>&#160&#160&#160<object width="10%" height="100" data="The_Gospel_Preacher_257.pdf"></object>&#160&#160&#160<object width="10%" height="100" data="The_Gospel_Preacher_258.pdf"></object>&#160&#160&#160 <object width="10%" height="100" data="The_Gospel_Preacher_259.pdf"></object>&#160&#160&#160<object width="10%" height="100" data="The_Gospel_Preacher_260.pdf"></object>&#160&#160&#160<object width="10%" height="100" data="The_Gospel_Preacher_261.pdf"></object>&#160&#160&#160<object width="10%" height="100" data="The_Gospel_Preacher_262.pdf"></object>&#160&#160&#160 <object width="10%" height="100" data="The_Gospel_Preacher_263.pdf"></object>&#160&#160&#160<object width="10%" height="100" data="The_Gospel_Preacher_264.pdf"></object>&#160&#160&#160<object width="10%" height="100" data="The_Gospel_Preacher_265a.pdf"></object>&#160&#160&#160<object width="10%" height="100" data="The_Gospel_Preacher_266.pdf"></object>&#160&#160&#160 <object width="10%" height="100" data="The_Gospel_Preacher_267.pdf">&#160&#160&#160 <br><br> <iframe src="demo_1.htm" height="200" width="300"></iframe> <br><br> <!-- &#160 &#160 &#32Web page design by: Russell E. Willis. --> <!-- </div> --> </body> </html> The following is the "demo_1.htm" HTML5 code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Holy Bible.</title> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 50%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } div.container { width: 100%; border: 1px solid gray; } div { text-align: justify; text-justify: inter-word; } div.sup1 { font-size: xx-small; } article { @media only screen and (max-width: 35%) { body { margin-left: 35%; border-left: 1px solid gray; padding: 0em; overflow: hidden; } } } p { text-indent: 20px; } .text { margin: 15px; } p1 { text-indent: -20px; } .text1 { margin: 15px; } p2 { } .text2 { margin: 15px; } .text3 { margin: 15px; } .justified { text-align: justify; } blockquote { margin: 100 100px; } h4 { text-align: center; } sup { vertical-align: super; font-size: x-small; } sup1 { vertical-align: super; font-size: xx-small; } sub { vertical-align: sub; font-size: x-small; } } </style> </head> <body> <h3><ins>This is an iframe demonstration file.</ins></h3> <!-- &#160&#160&#160&#160&#95&#95&#95&#95&#95<br> --> <!-- <p1 align="justify" class="text1"><font size="2" color="black">1. <i><b>BIBLE ALMANAC</b>,</i> --> <!-- THE OLD-TIME GOSPEL HOUR, <font size="1" color="black">LYNCHBURG, VIRGINIA</font>, --> <!-- Copyright &#169 1980 by Thomas Nelson Publishers, p. 27.</p1><br> --> <!-- <p1 align="justify" class="text1"><font size="2" color="black">2. Ibid., p. 28.</p1><br><br> --> </body> </html> Why is the HTML5 code "<iframe src='demo_1.htm' height='200' width='300'></iframe>," in the first code image, above, not working? Thank you ( see Colossians 3:15, for example ) for your help and your patience. Keep in touch. 😊 Sincerely in Christ, Russell E. Willis P.S. - Please read Proverbs 23:23.
  22. I am working with an HTML5 template that supports youtube video backgrounds in a DIV. When I scale the browser window to see how the responsivnes behaves, I notice that the videos crop left/right, top/bottom, depending on the aspect ratio of the DIV. For my purposes, I would need the videos only crop on the right and top only, so that the bottom left is always visible. As I am not a pro I have been doing a lot of trial and error on this, but cannot get it working. I actually need to have two classes available. One where the video scales from the bottom left and one where it scales from the top right corner. I don't quite understand if I need to create two new classes for "videobg" AND "youtube-background" respectively? That would be "videobg-bl, videobg-tr, youtube-background-bl, youtube-background-tr". Or is just one of those classes responsible for the scaling? This is the HTML snippet I use in the template: <div class="imageblock__content videobg col-lg-6 col-md-4 pos-right" data-overlay="0"> <div class="youtube-background" data-video-url="https://www.youtube.com/watch?v=ekthcIHDt3I"></div> <div class="background-image-holder"> <img alt="image" src="img/dancer-1A.png"> </div> </div> and these are the CSS classes for videobg and youtube-background: .videobg { background: #252525; position: relative; overflow: hidden; } .videobg .container, .videobg .background-image-holder { opacity: 0; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; } .videobg .background-image-holder { opacity: 0 !important; } .videobg.video-active .container { opacity: 1; } .videobg.video-active .loading-indicator { opacity: 0; visibility: hidden; } .videobg video { object-fit: cover; height: 100%; min-width: 100%; position: absolute; top: 0; z-index: 0 !important; left: 0; } @media all and (max-width: 1024px) { .videobg .background-image-holder, .videobg .container { opacity: 1 !important; } .videobg .loading-indicator { display: none; } .videobg video { display: none; } } .youtube-background { position: absolute; height: 100%; width: 100%; top: 0; z-index: 0 !important; } .youtube-background .mb_YTPBar { opacity: 0; height: 0; visibility: hidden; } @media all and (max-width: 1024px) { .youtube-background { display: none; } } Also, the template is using ytplayer.min.js for the youtube backgrounds. Unfortunately, the player shows branding watermarked elements during the first 2-3 seconds of the clip, that I have no idea how to get rid of. I also have all my clips on vimeo, so it would be so much more convenient to be able to use vimeo backgrounds instead. Is there a simple way to do this, without breaking the above CSS?
  23. I wanna know the correct form to use the HTML5 tags when i use BOOTSTRAP. we usually see that developers forget about semantic web and html5 tag like article and section where use BOOTSTRAP. aren´t necessary or how to use it.
  24. HI, I'm sure I've seen on a websites somewhere the ability to either select an option from a dropdown list or enter an alternative. Can anyone give me any pointers in how to achieve this? Thanks Phil
  • Create New...