Jump to content

Search the Community

Showing results for tags 'HTML5'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 171 results

  1. 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
  2. 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?
  3. 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.
  4. 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
  5. 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>
  6. 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.
  7. 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.
  8. 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
  9. <!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; }
  10. <!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>
  11. 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
  12. 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
  13. 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
  14. 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.
  15. 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?
  16. 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.
  17. 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
  18. PROBLEM ::: .navbar >:nth-child(3){margin:auto; } hover is not working in the media quires. Is there any other solution for this code? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> *{box-sizing: border-box;} .navbar { display: flex; background-color: #333; } .navbar > :nth-child(3){ margin-right: auto; } .navbar a{ color: white; text-align: center; text-decoration: none; padding: 14px 20px; } .navbar a:hover { background-color: #A4A1A1; } @media screen and (max-width:700px){ .navbar { flex-direction: column; } .navbar >:nth-child(3){ margin:auto; } } </style> </head> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">News</a> <a href="#">About</a> <a href="#">Contact</a> </div> </body> </html> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> *{box-sizing: border-box;} .navbar { display: flex; background-color: #333; } .navbar > :nth-child(3){ margin-right: auto; } .navbar a{ color: white; text-align: center; text-decoration: none; padding: 14px 20px; } .navbar a:hover { background-color: #A4A1A1; } @media screen and (max-width:700px){ .navbar { flex-direction: column; } .navbar >:nth-child(3){ margin:auto; } } </style> </head> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">News</a> <a href="#">About</a> <a href="#">Contact</a> </div> </body> </html>
  19. Hi, I’m having a problem with the implementation of google maps within my phonegap build. I have this problem in the browser on my pc and on the Phone itself. When I have the code in isolation it works and shows a map but when I have it within the rest of the code nothing seem te happen. Please help me with this. <!doctype html> <html> <head> <title>Huisartspraktijk app</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- /jquery links en scripts. NIET VERWIJDEREN!! --> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.4.5.js"></script> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery-ui.js"></script> <style> /* css styes for the maps */ #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style> <!-- Script for the geolocation, Stack Overflow --> <script> $(document).ready(function () { document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //onDeviceReaddy initMap(); //Google map navigator.geolocation.getCurrentPosition(displayAndWatch, locError); } // user Current Position function displayAndWatch(position) { setCurrentPosition(position); watchCurrentPosition(); } function setCurrentPosition(pos) { var image = 'img/ic_CurrentLocationmap.png'; currentPositionMarker = new google.maps.Marker({ icon: image, map: map, position: new google.maps.LatLng( pos.coords.latitude, pos.coords.longitude ), title: "Current Location" }); map.panTo(new google.maps.LatLng( pos.coords.latitude, pos.coords.longitude )); } function watchCurrentPosition() { var positionTimer = navigator.geolocation.watchPosition( function (position) { setMarkerPosition( currentPositionMarker, position ); }); } function setMarkerPosition(marker, position) { marker.setPosition( new google.maps.LatLng( position.coords.latitude, position.coords.longitude) ); var center = { lat: position.coords.latitude, lng: position.coords.longitude } map.setCenter(center); } function locError(error) { // the current position could not be located } }); </script> </head> <body> <!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps --> <div data-role="page" id="mobiel"> <!-- /header --> <div data-role="header"> <h1>SPOED</h1> <div data-role="navbar"> <ul> <li><a href="#main">Mainpage</a></li> <li><a href="#chat">Chat met de arts</a></li> <li><a href="#consult">Consultaanvraag</a></li> <li><a href="#doorverwijzing">Doorverwijzing</a></li> <li><a href="#bloedonderzoek">Bloedonderzoek</a></li> <li><a href="#berichten">Berichten</a></li> <li><a href="#epd">EPD</a></li> <li><a href="#medicijnen">Mijn medicijnen</a></li> </ul> </div> </div> <!-- /content --> <div role="main" class="ui-content" align="center"> <h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2> <div style="background-color: lightyellow"> <br> <h3> Huisartsenpraktijk Gideonse en Boekhout </h3> <p>Meteorenstraat 4<br> 2024 RK, Haarlem</p> <p>Telefoon<br> 023 - 525 36 00 </p> <p>Keuze 1: Spoed <br> Keuze 2: Herhaalrecepten <br> Keuze 3: Assistentie</p> <br> <!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. --> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap" async defer></script> </div> <a href="#spoedEisend" class="ui-btn ui-shadow ui-corner-all">Terug</a> </div> <!-- /footer --> <div data-role="footer"> <h2>&copy; 2019 Huisartsapp</h2> </div> </div><!-- /page --> </body> </html>
  20. Hi folks, it's my first post here and while I have been learning a lot from w3schools in the past (compliments!!), I am just about to familiarize myself with w3.css. For a start, I choose the architects template as basis for a project portfolio as joiner and just started to replace pictures etc. from the original template with my own stuff. However, I would like to use the HTML5 semantic layout (header, footer, aside...) as much as possible and the w3css tutorial also states that it's possible because the w3-* classes can be applied to whichever HTML element. So I tried to rewrite the images with top-left captions in the project section of the template into <figure> + <figcaption> elements, as semantically this is exactly what happens on the page. However doing so, the figure-element has much bigger margins/paddings as before, thus breatking the multicolumn-layout - please see https://portfolio.sven-goettner.de - the 4 pics with green background are created using my new semantic markup, while the 4 pics below with the red background are the original <div>-only code from the template. The difference is obvious... I tried various combinations of which original <div>-tag to change into the respective semantic counterparts, but none was able to produce the original looks. Could you please redirect me to a resource where I can learn how to fix this or tell me straight away what I am doing wrong? Thank you very much for your support!
  21. Attention: W3Schools Forums members: A solution has been found for the hypertext markup language version 5 ( HTML5 ) paragraph formatting problem that was posted to this forum yesterday. The HTML5 code is included below for your consideration ( Note: I was not successful using the paragraph tag ( i.e., "<p></p>" ) to format the text following the table, so I figured I would try the blockquote tag ( i.e., "<blockquote></blockquote>" ) with the text class ( "class='text'" ) included in it ( i.e., "<blockquote class='text'> <paragraph text goes here.> </blockquote>" ), and it works perfectly. Thank you ( see Colossians 3:15, for example ) for your views. 😊 Keep in touch. Sincerely in Christ, Russell E. Willis P.S. - Please read Proverbs 23:23. ) : <!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> <div class="container"> <h3><ins>Please read the bulletin and article below:</ins></h3> <object data="The_Gospel_Preacher_243.pdf" width="100%" height="1112"></object> <h4><ins>The Shadow Of The Law of Moses.</ins></h4> <article> <p align="justify" class="text">As in the previous bulletin, a consideration of the claim, that the Old Testament does not apply to us today, is in order. The book of Proverbs is described as "&#8202practical wisdom for living.&#8202"<sup>1</i></sup> Based on the argument just mentioned, are we to conclude that people stopped living once the law of Moses and, by extension, the entire Old Testament became obsolete, when Jesus Christ died on the cross of Calvary? We see the absurdity of this line of reasoning.</p> <p align="justify" class="text">The apostle Paul ( see 2 Timothy 1:1 ) wrote ( see verse 16; Philemon, verses 7, 9, and 20, for example ) in 2 Timothy 3:16, 17, "&#8202<sup><b>16</b></sup>&#8202<sup><i>d</i></sup>&#8202All Scripture is breathed out by God and profitable for teaching, for reproof, for correction, and for training in righteousness, <sup><b>17</b></sup>&#8202that <sup><i>e</i></sup>&#8202the man of God<sup><i2</i></sup> may be competent, <sup><i>f</i></sup>&#8202equipped <sup><i>g</i></sup>&#8202for every good work.&#8202" This means that all of the Old Testament ( including the law of Moses ) and all of the New Testament are profitable for teaching, reproof, correction, and training in righteousness. The assertion, that the Old Testament does not apply to us today, implies that one can cut the entire Old Testament out of his or her copy of the Holy Bible; this would leave one with just the New Testament&#8202&#151&#8202not the Holy Bible.</p> <p align="justify" class="text">With regard to the shadow of the law of Moses, consider the follwoing table:</p> <center><h2><ins>Table 1</ins></h2></center> <table align="center"> <tr> <th>Shadow Of The Law Of Moses.</th> <th>General O.T. Concept Carried Forward To The N.T.</th> <th>The Good Things To Come ( The True Form Of These Realities ).</th> </tr> <tr> <td>The Priests' Physical Garments ( see Exodus, chapter 28, for example ).</td> <td>Priestly Clothing.</td> <td>Clothed with Christ ( see also 1 Peter 2:9 and Revelation 1:1-8 ( especially verses 4-6, for example ); 3:14-22 ( especially verse 18, for example ); and 19:6-10 ( especially verse 8, for example ), for example ).</td> </tr> </table> <br> <blockquote class="text">In this case ( as outlined in Table 1, above ), the shadow of the law of Moses is the concept of the specific, physical priestly garments whereas, under the New Testament, the concept of spiritual priestly clothing ( being clothed with Christ through the act of Scriptural baptism ) applies to us as Christians, members of the one, universal, New Testament church ( the church of Christ - see Matthew 1:16; 16:13-20 ( especially verses 16-18, for example ); Romans 1:7; 16:16; and Ephesians 1:15-23 ( especially verses 22 and 23, for example ), for example ).</blockquote> <p align="justify" class="text">What the Bible teaches is that the Old Testament does, in fact, apply to us today, as slaves of God, for example. It is important to understand that the shadow of the law of Moses is obsolete, but the general concepts, contained in the Old Testament, are carried forward into the New Testament, and they apply to us, today, in a different way. In 2 Timothy 2:15, it is written, "&#8202<sup><b>15</b></sup>&#8202Do your best to present yourself to God as one approved,<sup><i>2</i></sup> a worker <sup><i>b</i></sup>&#8202who has no need to be ashamed, rightly handling the word of truth.&#8202" This passage of Scripture is the Master's clarion call for Bible study the world over. There is not nearly enough of this activity taking place today.</p> </article> &#160&#160&#160&#160&#95&#95&#95&#95&#95<br> <p1 align="justify" class="text1"><font size="2" color="black">1. <i>The <b>HOLY BIBLE</b>,</i> E<font size="1" color="black">NGLISH</font> S<font size="1" color="black">TANDARD</font> V<font size="1" color="black">ERSION</font>: <i>Containing the Old and New Testaments,</i> PERSONAL SIZE REFERENCE BIBLE, C<font size="1" color="black">ROSSWAY</font> B<font size="1" color="black">IBLES</font>, p. 659.</font></p1><br> <br> </div> <script src="https://my.hellobar.com/0ae31685b506068c0147b160df09bbc44482364d.js" type="text/javascript" charset="utf-8" async="async"></script> </body> </html>
  22. Hey folks, I have created a picture that shows my problems with Responsive Design. When I make the window smaller or switch to a smartphone, the Responsive Design should make it look good, no matter what resolution the display has. I'm not a pro in HTML5 or CSS3, especially not when it comes to Responsive Design, so I still don't understand some things correctly. #01: For example, I don't understand why the box with the lamp or the complete headline with subtext and symbolic line under it disappears completely as soon as the website switches to mobile. (Highlights – das gibt es bei uns) #02: Or why the distances to the individual boxes in the mobile design are so gigantic. #03: In mobile design, the W-Lan Icon Box and the text are below each other, but the distance is too big, and the text is no longer centered horizontally. I've been busy with this for a few days now and don't know what to do anymore. I've used a commercial Template to do this: Canvas | The Multi-Purpose HTML5 Template https://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123?s_rank=1 This is the HTML Code of this section <!-- So Funktioniert's ============================================= --> <div class="page-section nomargin"> <div class="container clearfix divcenter center" style="max-width: 1150px;"> <h4 class="divcenter font-body"> Die moderne Kommunikation ist simpel.<br /> Da das Internet schon ohnehin zu unserem täglichen Leben gehört, lässt sich die Nutzung der telba Cloud sehr einfach gestalten. </h4> </div> <div class="row align-items-stretch divcenter center " style="background: #F9F8F7; max-width: 1150px; height: 400px"> <div class="col_half center" style="background: #EAF2F6 url(images/telba/wlan_crop.png) center center no-repeat; background-size: contain; height: 400px"> <h2 class="font-body ">So funktioniert's:</h2> </div> <div class="col_half col_last divcenter" style="background: #F9F8F7; height: 400px; padding: 5%"> <span class="font-body"> Ihre Cloud Lösung wird individuell nach Ihren Wünschen angepasst. Die Telefonanlage wird nicht vor Ort in Ihrem Unternehmen installiert, sondern wird Ihnen virtuell bereitgestellt. Unsere Kommunikationslösung wird in unserem Rechenzentrum betrieben, wodurch wir Ihnen unsere Leistungen, dank Cloud Computing, direkt über das Internet zur Verfügung stellen können. Über unser Internet Portal behalten Sie alles im Blick und können Ihre Aktivitäten leicht managen. </span> </div> </div> </div><!--So Funktioniert's ENDE --> <!-- Highlights ============================================= --> <div class="page-section nomargin"> <div class="heading-block title-center"> <h2>Highlights</h2> <span>das gibt es bei uns</span> </div> <div class="row align-items-stretch divcenter center" style="max-width: 1150px"> <div class="col-lg-4 d-none d-md-block" style="background:#DFEEF2 url('images/telba/lampe_crop.png') center center no-repeat; background-size: contain; height: 600px;"></div> <div class="col-lg-8"> <div class="row align-items-stretch clearfix noborder" style="background: #F9F8F7"> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">One Number</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Faire Preisgestaltung</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Moderne Kommunikation</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Skalierbarkeit</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Immer auf dem neusten Stand</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Schnelle, einfache Einführung</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Motivierte Mitarbeiter</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Betriebliche Flexibilität</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Standort- unabhängigkeit</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">innovative Arbeitsplatzmodelle</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Schnelles Reagieren auf Veränderungen</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Bereitstellen der Leistung über das Internet</h3> </div> </div> </div> </div> </div> </div><!--Highlights ENDE -->
  23. This code works perfectly on a desktop or laptop, and on non-iOS mobile devices. It takes a thumbnail sample of an edited image and displays it at full size in a new canvas. On iOS, I just see a blank screen where the canvas should be. function click5() { document.getElementById("preview").style = "visibility:visible;"; document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; // Apply change to preview image which will open beneath thumbnails var cP = document.getElementById("cPreview"); var contextP = cP.getContext("2d"); var cO = document.getElementById("cOriginal"); var contextO = cO.getContext("2d"); var imgData = contextO.getImageData(0,0,cO.width,cO.height); var data = imgData.data; //read full size image //similar image read/write code works fine in another image filter so this does not appear to be the issue for (i = 0; i < data.length; i += 4) { red[i] = imgData.data[i]; green[i] = imgData.data[i+1]; blue[i] = imgData.data[i+2]; alpha[i] = imgData.data[i+3]; } //set adjustments represented by user interaction with thumbnails for (i = 0; i < data.length; i += 4) { red[i] = red[i] + finalRedAdjust; if (red[i] < 0) red[i] = 0; if (red[i] > 255) red[i] = 255; green[i] = green[i] + finalGreenAdjust; if (green[i] < 0) green[i] = 0; if (green[i] > 255) green[i] = 255; } //write full size image with adjustments to memory for (i = 0; i < data.length; i += 4) { imgData.data[i] = red[i]; imgData.data[i+1] = green[i]; imgData.data[i+2] = blue[i]; imgData.data[i+3] = alpha[i]; } //write image in memory to file contextP.putImageData(imgData, 0, 0); //add borders for canvases. document.getElementById('cOriginal').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:hidden; display:none;"; document.getElementById('cPreview').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:visible; display:block;"; //Scroll page to preview image location.hash = "null"; location.hash = "previewAnchor"; } // End Table Click Event Functions I have tried this with small images, so dimensions and file size do not appear to be the issue. Thank you
  24. Hey there, I am having a bit of an argument with myself on how best to organize a general page, in this specific instance for a blog. Reading online you get many different perspectives on how to organize the page, however generally you get something like this: <header> <nav> </nav> </header> <main> <article> <h2>Heading</h2> <p>Date: YY/MM/DD</p> <p>Author: Name</p> <p>Article Content</p> </article> </main> <aside> </aside> <footer> </footer> The article block would typically repeat for how many number of articles are on the page. Looking further online, reading the spec and understanding a big more how article, sections, and the like work I have come across other layouts like such: <header> <nav> </nav> </header> <main> <section> <article> <header> <h2>Heading</h2> <p>Date: YY/MM/DD</p> <p>Author: Name</p> </header> <p>Article Content</p> <footer> <p>Copyright Info</p> </footer> </article> </section> </main> <aside> </aside> <footer> </footer> This can even get further complicated with the introduction of comments, article navigation, etc. I am curious to hear from you all what is your preferred way to handle this sort of organization? Cant wait to hear back! Thanks!
×
×
  • Create New...