Posts

Showing posts with the label html5

How to prevent thead to be printed on all pages

Image
Clash Royale CLAN TAG #URR8PPP How to prevent thead to be printed on all pages I want to know if it's possible, when a user begins to print an html page, to prevent the thead of a table to be printed on all the pages ? thead It's because I use page-break-after: always; on an element situated before my table, and because of that my table header is also printed on the first page... page-break-after: always; I cannot replace my thead by a tr because a hard part of my code lays on that thead . thead tr thead can't you add <link rel="stylesheet" type="text/css" href="print.css" media="print"> to your head and in print.css add a display:none to the elements you don't want to print? – Marouen Mhiri Oct 13 '16 at 10:24 No, I can't, because these el...
-
Read more

chrome html5 video stops autoplay after a second or two

Image
Clash Royale CLAN TAG #URR8PPP chrome html5 video stops autoplay after a second or two I've got an autoplaying video which works well on all browsers, except Chrome - which has apparently disabled autoplay video. I've tried some work arounds, but now it just plays for 1-2 seconds and stops entirely. Here's my code: <video id="introduction-video" preload="auto" playsinline autoplay muted loop volume="0" poster="/images/videos/video-background.png" width="100%" height="100%"> <source src="/images/videos/Tasman10seconds.mp4" type="video/mp4"> <source src="/images/videos/Tasman10seconds.webm" type="video/webm"> Sorry, your browser does not support HTML5 video. </video> <script>$(window).on('load',function(){$('#introduction-video').get(0).play();});</script> And you can check i...
-
Read more

The height of the HTML tag is set differently than my intention

Image
Clash Royale CLAN TAG #URR8PPP The height of the HTML tag is set differently than my intention my structure is table ㄴ tbody ㄴ tr ㄴ td height: 25px ㄴ div height:24px ㄴ div height: 100% => why 30px ???? Why do I get a 30px when I set the height of the last div to 100%? There isn't enough information here to answer your question. Perhaps you could include a code snippet demonstrating the problem you're running into? – Ollin Boer Bohan 8 mins ago Please post a Minimal, Complete, and Verifiable example. – csmckelvey 7 mins ago By clicking "Post Your Answer", you acknowledge ...
-
Read more

Why does JS code “var a = document.querySelector('a[data-a=1]');” cause error?

Image
Clash Royale CLAN TAG #URR8PPP Why does JS code “var a = document.querySelector('a[data-a=1]');” cause error? I've an element in the DOM: <a href="#" data-a="1">Link</a> <a href="#" data-a="1">Link</a> I want to get this element via its HTML5 custom data attribute data-a . So I write JS codes: data-a var a = document.querySelector('a[data-a=1]'); var a = document.querySelector('a[data-a=1]'); But this code doesn't work and I get an error in browser's console. (I tested Chrome and Firefox.) JS code var a = document.querySelector('a[data-a=a]'); doesn't cause error. So I think the problem is that HTML5's JS API document.querySelector doesn't support to look for the number value in HTML5 custom data attribute. var a = document.querySelector('a[data-a=a]'); document.querySelector Is this a problem of browser implementation bug or a problem of HTML5's spec re...
-
Read more

Input length is undifined

Image
Clash Royale CLAN TAG #URR8PPP Input length is undifined < Why Input Length Is Undifined Js function calc() { var inp = document.getElementById("inp"); var result = document.getElementById("result"); var inpval = inp.value result.innerHTML = inpval; alert(inp.length); } Html <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <input id="inp" class="inp" Type="number"/> <center> <div id="calc" class="calc" onclick="calc()">Calculate</div> <br /> <br /> <p id="result"></p> </center> </body> </html> Please help me with this code I don't know why I am getting this error whenever I click on function it always shows undifined inpval.length v...
-
Read more

When to use any of and to embed video

Image
Clash Royale CLAN TAG #URR8PPP When to use any of <video> and <iframe> to embed video We can embed video on our webpage using <video> and <iframe> tags. When is one expected to use either of them? <video> <iframe> By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
-
Read more

Overlaying content on a progressbar

Image
Clash Royale CLAN TAG #URR8PPP Overlaying content on a progressbar ul { margin: 0; padding: 0; } .progress { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } li { position: relative; margin: 0; padding: 0; } .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } <div>some header content</div> <ul> <li> <div class="overlay"> <span>some stuff</span> <input/> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/> </div> <progress class="progress"></progess> </li> <li> <div class="overlay"> <span>some stuff</span> <input/> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/> </div> ...
-
Read more

Div is sitting directly on top of another div

Image
Clash Royale CLAN TAG #URR8PPP Div is sitting directly on top of another div I am following a tutorial. I found on making a product showcase using css, it looks great but I want to add more to my page. Underneath I would like to put a slider with more images, add text and include a footer. However, when I add the slider, it just sits directly on top of my product showcase and the page doesn't scroll. I have searched and tried so many options but nothing is working for me - any advice? html, body { width: 100%; } /*---------------------------- Styling the presentation -----------------------------*/ #impress { width: 100%; } #impress:not(.impress-not-supported) .step{ opacity:0.4; } #impress .step{ width:700px; height: 600px; position:relative; margin:0 auto; -moz-transition:1s opacity; -webkit-transition:1s opacity; transition:1s opacity; } ...
-
Read more

Is there a way to style a webcomponent based on the container it's in?

Image
Clash Royale CLAN TAG #URR8PPP Is there a way to style a webcomponent based on the container it's in? I'm trying to write some webcomponents that respond to a theme for the container they're in. I.e. <div dataset-theme='light'> <my-custom-element></my-custom-element> </div> <div dataset-theme='dark'> <my-custom-element></my-custom-element> </div> I'd like the background color of the one in the dark theme to change to a dark color. I've tried CSS like the following inside of my shadow-root: [dataset-theme='dark'] :host background-color: #333 But it doesn't seem to respond to that at all. Is there a way for the style of a webcomponent to change based on the container it's in? Have you tried [dataset-theme='dark'] my-custom-element{background-color: #333} ? – Justinas Jul 18 at 7:09 ...
-
Read more

Каретка для смены изображения (своеобразная галерея HTML5 CSS3) [on hold]

Image
Clash Royale CLAN TAG #URR8PPP Каретка для смены изображения (своеобразная галерея HTML5 CSS3) [on hold] Доброе время суток. Нашел интересную галерею, где у каждого элемента 2 фотографии, наложенные друг на друга. И они разделены кареткой, которую можно двигать влево и вправо. (получается на подобии ДО и ПОСЛЕ) Как это выглядит (тык) Можно ли как-то такую сверстать (с минимальным кол-вом блоков), если да то как? Или есть какой-то плагин (типа fancybox, lightbox) позволяющие сделать такое Спасибо. I'm voting to close this question as off-topic because it doesn't seem to be in English – Denys Séguret 2 mins ago Nope... Here, English please – Jeremy Thille 1 min ago ...
-
Read more

Toggle current class using jquery

Image
Clash Royale CLAN TAG #URR8PPP Toggle current class using jquery I want to toggle .title class when we click on .title .content class toggle.Here i written this classes inside .I want to be toggle .title in a current class. I tried but not getting. Can anyone suggest me what might be the issue here? .title .content $(document).ready(function() { $('.title').click(function() { $(this).find('.content').slideToggle(); }); }); .content { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <ol class="list-timeline"> <li> <h3 class="title">The Establishment</h3> <div class="content"> <p>Ascetur ridiculus mus. Suspendisse pellentesque convallis massa.</p> </div> </li> <li> <h3 class="title">150 Employe...
-
Read more

TemplateDoesNotExist even if the path set is correct

Image
Clash Royale CLAN TAG #URR8PPP TemplateDoesNotExist even if the path set is correct Look and help I think the path entered in the code is correct,still it's showing template doesn't exist. By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
-
Read more

How to limit autocomplete suggestion's to a max of 10?

Image
Clash Royale CLAN TAG #URR8PPP How to limit autocomplete suggestion's to a max of 10? According to this example from w3schools the autocomplete works fine but how do i limit the autocomplete suggestion's to a max of 10.Would be helpful if anybody could tell me how to implement it in the following example: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } body { font: 16px Arial; } .autocomplete { /*the container must be positioned relative:*/ position: relative; display: inline-block; } input { border: 1px solid transparent; background-color: #f1f1f1; padding: 10px; font-size: 16px; } input[type=text] { background-color: #f1f1f1; width: 100%; } input[type=submit] { background-color: DodgerBlue; color: #fff; cursor: pointer; } .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-botto...
-
Read more

Syntax for adding image in HTML5

Image
Clash Royale CLAN TAG #URR8PPP Syntax for adding image in HTML5 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <style> body { background-color: lightblue; } h1 { color: black; font-size: 70px; text-align: center; } h2{ color: red; font-family: verdana; font-size: 29px; text-align: center; } </style> </head> <body> <h1>HOTEL MANAGEMENT</h1> <h2> Welcome To Hotel MYNE.</h2> <img src="C:UsersBIPIN KUMARDesktophotel-management-system-dryice.jpg" alt="Hotel Management System"> </body> </html> Can any body help me in finding the error in this code.When I run the code it is not showing the image ,I have changed the image also then also it not showing the image.Can anybody help me in sol...
-
Read more

Img dropdown issue

Image
Clash Royale CLAN TAG #URR8PPP Img dropdown issue I would like the logo image I have located in the navbar element of my html to slowly dropdown (or even the whole navbar itself), but it won't seem to do anything when i try with JQuery (I am not very familiar with this yet). I am thinking this is due to the fullscreen video I have and some sort of interaction problem with that. Any ideas on how i can make: img src="img/logo.png" dropdown with that slidedown animation, if its even possible at all would be greatly appreciated. Thanks. My Code * { box-sizing: border-box; } .container { max-width: 960px; padding-left: 1rem; padding-right: 1rem; margin: auto; text-align: center; } .v-header { height: 100vh; display: flex; align-items: center; color: #fff; } .fullscreen-video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; } .fullscreen-video-wrap video { min-height: 100%; min-width: 100%; position...
-
Read more