I created a PWA with a display "fullscreen" specified in the manifest. However, the body doesn't take 100% of the height of its HTML parent. The body is scrollable and doesn't take the whole height
Here the basic CSS
html,
body,
#root {
background: green;
padding: 0;
margin: 0;
}
The HTML opened by the PWA
<!DOCTYPE html>
<html translate="no" class="notranslate" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1; viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes" />
<title>Test</title>
<meta name="google" content="notranslate" />
<meta name="description" content="Flink HubOne App" />
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="mask-icon" href="/mask-icon.png" color="#FFFFFF" />
<meta name="theme-color" content="#000000" />
</head>
<body>
<div style="background-color: red; flex: 1; padding: 0; margin: 0;">
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
</div>
</body>
</html>
Here the configuration used for my PWA
manifest: {
id: "/",
name: "Test App",
short_name: "Test",
description: "Test",
theme_color: "#ffffff",
display: "fullscreen",
scope: "/",
start_url: "/",
},
Related
I have "Visual studio Code" and "Go Live server"
I just want to make https://observablehq.com/#d3/zoomable-icicle to work on my own computer.
How do I make it work without anything else:
<!DOCTYPE html>
<html lang="us">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="d3v7min.js"></script>
<title>Title</title>
</head>
<body>
<div id="chart"></div>
<svg width="960" height="500"></svg>
<script>
</script>
</body>
</html>
Can't figure out how to set this animated canvas as the website background of my portfolio page.
any help would be appreciated. or how do I place the div with text over the canvas?
so it sits nice and flush....................
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="icon" type="image/x-icon" href="image/favicon.ico">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" crossorigin="anonymous"></script>
<nav>
<!-- De checkbox -->
<input type="checkbox" id="check">
<label for="check" id="checkbox">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<!-- logo en de Buttons in de nav bar -->
<img src="image/logo.png" alt="logo">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
</head>
<body>
<div id="particles-js">
<script>
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.json loaded ...');
});
</script>
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hey, I'm makkerheineken.</div>
<div class="text-2">Front-End & Back-end Develeper.</div>
</div>
</div>
</section>
</div>
</body>
</html>
You could give the canvas the same size as the screen, add a div with the same size but positioned absolutely, and then put the rest of your elements inside this div.
I've been trying to make a section of a background image clickable with an external link. I've tried a few suggestions using 'imagemap' tag from archived inquires here but had no luck. I'm guessing this is due to the fact that the background image is set in CSS and the nature of the website.
I have only basic coding knowledge, so it's a trial and error approach for me which is very time consuming and I've run out of trials now.
Below is the image of the page. The area 'HERE' (under 'Book Now') should be the clickable area.
Screenshot background image
CSS
body {
height: 100%;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url(../images/bg_2019_2.jpg) center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta property="og:url" content="http://www.athleticum.co.uk"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
<meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
<meta property="og:description" content="Spinning® and functional equipment training." />
<meta property="fb:app_id" content="693292167509917"/>
<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>
<!-- First Screen -->
<section class="screen-section section-1">
<div class="section-inner">
<header id="site-header">
<!-- To change site subtitle just write any text between <h3>...</h3> -->
<h3 id="site-subtitle"></h3>
</header>
<footer id="site-footer">
<ul id="site-social">
<li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">
</i></a></li>
<li><i class="icon-social_twitter_square"></i></li>
<li><i class="icon-social_instagram_square"></i></li>
</ul>
<div class="scrolldown">
<span class="keyscroll">
<span class="scrolldown-title">Use Up & Down Keys</span>
<span class="key-up"><i class="icon-angle-up"></i></span>
<span class="key-down"><i class="icon-angle-down"></i></span>
</span>
<span class="label-or">or</span>
<span class="mousescroll">
<span class="scrolldown-title">Scroll down</span>
<i class="scroll-icon"></i>
</span>
</div>
</footer>
</div>
</section>
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
width:1646px;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url('https://i.stack.imgur.com/Y5nhJ.jpg') center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
</style>
</head>
<body>
<img src="https://i.stack.imgur.com/Y5nhJ.jpg" width="1646px" height="auto" usemap="#image-map">
<map name="image-map">
<area target="_self" alt="Book Now" title="Book Now" href="www.athleticum.co.uk" coords="1544,1241,2032,1393" shape="rect">
</map>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta property="og:url" content="http://www.athleticum.co.uk"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
<meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
<meta property="og:description" content="Spinning® and functional equipment training." />
<meta property="fb:app_id" content="693292167509917"/>
<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>
<!-- First Screen -->
<section class="screen-section section-1">
<div class="section-inner">
<header id="site-header">
<!-- To change site subtitle just write any text between <h3>...</h3> -->
<h3 id="site-subtitle"></h3>
</header>
<footer id="site-footer">
<ul id="site-social">
<li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">
</i></a></li>
<li><i class="icon-social_twitter_square"></i></li>
<li><i class="icon-social_instagram_square"></i></li>
</ul>
<div class="scrolldown">
<span class="keyscroll">
<span class="scrolldown-title">Use Up & Down Keys</span>
<span class="key-up"><i class="icon-angle-up"></i></span>
<span class="key-down"><i class="icon-angle-down"></i></span>
</span>
<span class="label-or">or</span>
<span class="mousescroll">
<span class="scrolldown-title">Scroll down</span>
<i class="scroll-icon"></i>
</span>
</div>
</footer>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
width:1646px;
padding: 0;
position: relative;
margin: 0;
font-weight: 600;
font-family: 'Khand', sans-serif;
background: url('https://i.stack.imgur.com/Y5nhJ.jpg') center 0 no-repeat #000 fixed;
background-size: cover;
color: #636363;
font-size: 18px;
line-height: 1.2em;
}
.booknow{
background-color:green; /* remove this property once you set the position and uncomment below to make it transparent*/
/*background-color:transperant;*/
position:relative;
left:200px;
top:250px;
width:180px;
height:65px;
display:inline-block;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta property="og:url" content="http://www.athleticum.co.uk"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.athleticum.co.uk/images/section2_bg.jpg"/>
<meta property="og:title" content="Athelticum® - Training for Body and Brain."/>
<meta property="og:description" content="Spinning® and functional equipment training." />
<meta property="fb:app_id" content="693292167509917"/>
<head>
<meta charset="utf-8">
<title>ATHLETICUM® – Training For Body And Brain</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Khand:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/icons/css/animation.css" rel="stylesheet" type="text/css">
<link href="css/icons/css/fontello.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="http://www.athleticum.co.uk/favicon.png" />
</head>
<body>
<!-- First Screen -->
<section class="screen-section section-1">
<div class="section-inner">
<header id="site-header">
<!-- To change site subtitle just write any text between <h3>...</h3> -->
<h3 id="site-subtitle"></h3>
</header>
<footer id="site-footer">
<ul id="site-social">
<li><a href="https://www.facebook.com/groups/SpinningUKandIreland/" target="_blank"><i class="icon-social_facebook_square">
</i></a></li>
<li><i class="icon-social_twitter_square"></i></li>
<li><i class="icon-social_instagram_square"></i></li>
</ul>
<div class="scrolldown">
<span class="keyscroll">
<span class="scrolldown-title">Use Up & Down Keys</span>
<span class="key-up"><i class="icon-angle-up"></i></span>
<span class="key-down"><i class="icon-angle-down"></i></span>
</span>
<span class="label-or">or</span>
<span class="mousescroll">
<span class="scrolldown-title">Scroll down</span>
<i class="scroll-icon"></i>
</span>
<span class="booknow" onclick="location.href='www.athleticum.co.uk'">Book now</span>
</div>
</footer>
</div>
</section>
I am working on a Spring MVC application that use FreeMarker for my views.
I am absolutly new in FreeMarker and I have the following problem: in my projct I have 3 files that have to be assemblet togheter into a single page.
So I have:
1) header.ftl representing the header of all my pages, somthing like:
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js is-ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registrazione - MY WEBSITE</title>
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="resources/css/webfont.css">
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="resources/plugins/bs-select/bootstrap-select.min.css">
<link rel="stylesheet" href="resources/plugins/bs-dialog/bootstrap-dialog.min.css">
<link rel="stylesheet" href="resources/css/style.css" />
</head>
<body id="main">
<!-- versione per popup. non prendere in considerazione -->
<!--
<div class="container page-header">
<h1>MY WEBSITE</h1>
</div>
2) footer.ftl representing the footer of all my pages:
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/bs-select/bootstrap-select.min.js"></script>
<script src="assets/plugins/bs-select/i18n/defaults-it_IT.min.js"></script>
<script src="assets/plugins/bs-dialog/bootstrap-dialog.min.js"></script>
<script src="assets/plugins/jq-form-validation/jquery.validation.js"></script>
<script src="assets/js/functions.lib.js"></script>
<script src="assets/js/form-validation.js"></script>
</body>
</html>
3) Then I have my specific page (named myPage.ftl that represent only the content, something like this:
<h1>This is the content</h1>
<p>Some inforamation</p>
The header.ftl and the footer.ftl are into this directory **\WEB-INF\freemarker\layout** of my project.
So my problem is: how can I import the header.ftl content above the content of the myPage.ftl and the footer.ftl under the content of myPage.ftl page?
I did this using user-defined macros for page layouts, e.g. let's call your layout standardPage.ftl:
<#macro standardPage title="">
<!DOCTYPE html>
<html lang="en">
<head>
<title>${title}</title>
</head>
<body>
<#include "/include/header.ftl">
<#nested/>
<#include "/include/footer.ftl">
</body>
</html>
</#macro>
Then you can call this macro in each of your pages, e.g. homePage.ftl:
<#include "/pages/standardPage.ftl" />
<#standardPage title="Home">
<h1>Home Page</h1>
<p>This bit replaces the nested tag in the layout</p>
</#standardPage>
If the browser does not detect the HTML5 Audio controller it will fallback a swf player.
But for some unknown reason IE8 does not display the swf player.
The swfobject.js is in the same folder as the html.
Here's the full code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<center>
<audio controls preload="auto" autobuffer>
<source src="friday.ogg" />
<source src="friday.mp3" />
<div class="fallback">
<object type="application/x-shockwave-flash" data="xspf_player.swf?playlist_url=playlist.xspf&autoplay=true
&repeat_playlist=true&player_title=KICK&playlist_size=3"
width="400" height="151">
<param name="movie" value="xspf_player
.swf? playlist_url=playlist.xspf&
;autoplay=true&repeat_playlist=true&player_title=
KICK&playlist_size=3" />
</object>
</div>
</audio>
</center>
</body>
</html>
You're using swfobject.registerObject("myId", "9.0.0", "expressInstall.swf"), but there is no element with the id "myId" on your page.