Jump to content

Search the Community

Showing results for tags 'html5'.

  • 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 172 results

  1. joshmaxwell
    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
  2. khan.sikki
    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
  3. pdipietro1
    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
  4. Rewillis
    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.
  5. bravewart
    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?
  6. BigDemond
    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.
  7. liverpool-phil
    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
  8. Ayon Bit
    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>
  9. lennert102
    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>
  10. pawalan
    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!
  11. Rewillis
    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>
  12. HigeMynx
    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 -->
  13. AARRGGHHH
    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
  14. DarkxPunk
    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!
  15. rayj00
    Keep in mind I am not a web designer or PHP or Smarty developer. So, I have this smarty.tpl script that I am trying to figure out how the code flows. It uses smarty for creating templates. Within the file is an <i html tag. Researching it at https://www.w3schools.com/tags/tag_i.asp tells me it is used for styling text. However, I have the following: <i class="fa fa-video fa-fw js_x-uploader" data-handle="publisher" data-type="video"></i> {__("Add Video")} </span> My question is: It appears that the js_x-uploader affects what happens when I click on a link. The button is the "Add Video" button in a drop down menu. When I click the "Add Video" button a windows explorer pops and I pick a mp4 video to post to a page timeline. When I change the js_x-uploader to something else, arbitrarily, the win explorer does not pop. I am confused as to why js_x-uploader acts like this. There is nothing in w3school that explains this action for the <i tag? I hope I articulated my question enough? Thanks, Ray
  16. AARRGGHHH
    This seems so simple: var aC = document.getElementById("arrowCanvas"); var context = aC.getContext("2d"); var img = document.getElementById("arrowImage"); context.drawImage(img, 225, 225); context.rotate(90 * Math.PI / 180); But the canvas never rotates. Also tried: var aC = document.getElementById("arrowCanvas"); var context = aC.getContext("2d"); var img = document.getElementById("arrowImage"); context.rotate(90 * Math.PI / 180); context.drawImage(img, 225, 225); But here, the canvas never even shows up. I could use some help with the correct syntax. Thank you!
  17. AARRGGHHH
    I'm having a problem determining if a given control has focus. It seems to me that: if (form.password.focus() == true) ... should tell me if the form's password control has focus. But, it's returning "false" even while I'm typing into the control. So, what is the correct way to determine whether a control has focus? Thank you!
  18. AARRGGHHH
    I need to create variable names in a loop (part of this seems to be working) and then get 26 of the 39 variables to perform simple math (for example: variable -= 10). Getting the variables recognized as variables, and not text, seems to be the issue. This works properly, it accesses 13 canvases named canvas1 through canvas13: for (i = 1; i < 14; i++) { c = document.getElementById("canvas" + i.toString()); context = c.getContext("2d"); ... } However, when I try to dynamically create canvas names, and dynamically create 2 variables in the same line, the variables are created as text. for (i = 1; i < 14; i++) { document.getElementById('canvas' + i).style.filter = "brightness((bright" + i + " -= 10)%) contrast((cont" + i + " -= 10)%)"; } Probably a dozen variations on this theme have failed. In a nutshell, the variables bright1 and cont1 through bright13 and cont13 are not recognized as variables that can be manipulated with math, they're recognized as text. Right now I'm typing out 13 lines of code: document.getElementById('canvas1').style.filter = "brightness(" + (bright1 -= 10) + "%) contrast(" + (cont1 -= 10) + "%)"; ... document.getElementById('canvas13').style.filter = "brightness(" + (bright13 -= 10) + "%) contrast(" + (cont13 -= 10) + "%)"; which is inefficient, to say the least. So, what is the proper syntax to use so that bright1 through bright13 and cont1 through cont13 are variables instead of text? Thank you!
  19. AARRGGHHH
    Hello I need to get the value of a CSS Filter, Hue in this case, that's currently being applied to a canvas. I tried this: var hue = document.getElementById('canvas1').style.filter('hue-rotate'); and it did not work, several variations on that theme also failed. What is the correct syntax? Thank you very much PS: this could apparently also work var hue = getComputedStyle(canvas1).filter But it will not retrieve just the hue. Thank you
  20. AARRGGHHH
    I have a form written using HTML5 and CSS3, final validation is performed on submit with JavaScript. Then, the form will be sent to the server, most likely using PHP's mail() function. I don't recall how to include two items such as these in a form's action="...", I'd deeply appreciate if someone could refresh my memory! Thank you
  21. AARRGGHHH
    I'm trying to use Base64 to compare two images to see if they are identical. The images are accessed using: var thumb5Original = ""; var thumb5Edited = ""; thumb5Original = canvas5.toDataURL('image/png'); thumb5Edited = canvas5.toDataURL('image/png'); I then check them using this: if (thumb5Original.toString() == thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Original Image"; if (thumb5Original.toString() != thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Edited Image"; The problem is, I'm getting "Edited Image" even when the images are identical. Is there an error in the way I'm comparing the images? Thank you
  22. rootKID
    hey w3s... so i have this code: <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h2 class="font-weight-bold text-center">WORK</h2> <div class="border"></div> <br /> </div> </div> </div> <div class="container main_wrapper"> <section> <div class="container"> <div class="row" id="work-grid"> <?php $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC"; $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink)); if( mysqli_num_rows($result_1) > 0 ) { while( $row_1 = mysqli_fetch_array($result_1) ) { $video_id = $row_1['video_id']; $video_title = $row_1['video_title']; $video_link = $row_1['video_link']; $video_director = $row_1['video_director']; $video_text = $row_1['video_text']; ?> <div class="col-sm-4 col-xs-12 work_panels"> <div class="panel panel-default Panel_ModalVideoID-<?php echo $video_id; ?>"> <div class="panel-thumbnail"> <a href="#" title="Video" class="thumb"> <img src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" class="img-responsive img-rounded" data-toggle="modal" data-target=".modalVideo"> </a> </div> <div class="panel-body"> <p class="work-name"><?php echo $video_director; ?></p> <p class="work-video-text"><?php echo $video_text; ?></p> </div> </div> </div> <?php } } else { // hvis der ikke er EN række i udtrækket, vises en fejlbesked echo 'Ingen videoer at vise i nu.'; } ?> </div> </div> </section> <div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title customModal_2">Video Title 1</h3> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> <div class="modal-footer"> <h4 class="customModal_3">Video Title 2</h4> <p class="customModal_4"> Video in here. </p> <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>--> </div> </div> </div> </div><!-- //.modal-Youtube_1 --> </div> <script> $('[class^=Panel_ModalVideoID-]').click(function(event) { event.preventDefault(); // Step 1 - The Variables //----------------------------------------------- var e = $(this); // e = event of the function happening via class/id "class^=Panel_ModalVideoID-*" (working?) var modal = $('.customModal_1'); var modalTitle = $('.customModal_2'); var videoTitle = $('.customModal_3'); var videoEmbed = $('.customModal_4'); var modal_body = $('.modal-body'); var INSERTDATA_modalTitle; $('a.thumb').click(function() { INSERTDATA_modalTitle = $(this).Attr( 'title' ); }); //var INSERTDATA_modalTitle = e.$('a.thumb').Attr("title"); // working? // Step 2 - Clear different areas //----------------------------------------------- modal_body.empty(); // empty area // Step 3 - insert data into different areas //----------------------------------------------- $(modalTitle).html(INSERTDATA_modalTitle); // Step 4 - show the modal //----------------------------------------------- $(".customModal_1").modal({ show: true; }); }); </script> Currently i'm using bootstrap 4 and trying to make a modal appear. So far it is working BUT i am trying to edit the following inside of the modal: Modal title, and the 2 <p> items inside modal-footer for youtube embed and youtube title etc. All of the replacements at different areas should come from the "while loop" at the upper of the page coding with php. Can you help me somehow? Not sure what to do with js/jquery really, a little bit of a newbie... even after years, i still dont get much of it :/ Hoping you guys can help me out a bit. If more information is needed, please ask. Using jQuery 3.2.1, included ALL of the bootstrap 4 bundle etc, so i know that is not the problem here. Maybe it is the way i am using my JS/jQuery code. Thanks a lot. And ohh... the title should be from the "a.thumb -> title attribute", saying video... will edit it later with php so that it will be dynamic. Hope you can help. Thanks!
  23. AARRGGHHH
    This should be so simple... I am using a canvas variable here (i) without any problems: for (i = 1; i < 10; i++) { c = document.getElementById("canvas" + i.toString()); context = c.getContext("2d"); context.drawImage(image,0,0,c.width,c.height); } But I cannot seem to get it right here: function clicked(thumbNumber) { //drawImage() in canvas5 using canvas1 as the source var canvasNumber = "canvas" + thumbNumber.toString(); canvas5.getContext('2d').drawImage(canvasNumber, 0, 0); } When I step into it and pass ""canvas" + thumbNumber.toString()" it's correct (for example, "canvas1"). But when it hits the next line, where "canvas1" is used, it grinds to a halt with the error: "color.html:332 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at clicked (color.html:332) at HTMLTableCellElement.onclick (VM548 color_balance.html:769) So, apparently it's not recognizing "canvas1" which is on line 332. If I hard code "canvas1" it works fine, but that's not practical here. I have tried at least a half dozen variations on a theme at "canvas5.getContext('2d').drawImage(canvasNumber, 0, 0);" but nothing seems to make any difference, I'm not giving the browser (Chrome Version 64.0.3282.186 (Official Build) (64-bit) on Windows 7 Pro) what it wants to see. Thank you in advance
  24. alessiopaoletti
    Hello, I'm new, I have realized an animation with Adobe Animate CC in HTML 5 canvas format and now I need help for a snippet code for start/play the animation when it is visible on the browser or vertical pixel and then I'll export it how .oam. the file example: AnimateBar Illustrator.fla thanks for help Illustrator_res.oam AnimateBar Illustrator.html
  25. AARRGGHHH
    I have resized an image to fit inside a canvas without any problems. However, now I need to resize a canvas without resizing the image that it contains. How do I do this? Thank You
×
×
  • Create New...