<!doctype html>
<html>
<head>
<title>Game</title>
<style media="screen" type="text/css">
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#canvas {
position: absolute;
}
</style>
<!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta charset="utf-8"> -->
<!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->
</head>
<body>
<canvas id="canvas">
Your browser needs to support canvas to play this game!
</canvas>
<!-- Include libraries -->
<script type="text/javascript" src="js/pentagine/build/pentagine.js"></script>
<script type="text/javascript" src="js/cp.min.js"></script>
<!-- Include game classes -->
<script type="text/javascript" src="js/MenuState.js"></script>
<script type="text/javascript" src="js/Block.js"></script>
<script type="text/javascript" src="js/Constants.js"></script>
<script type="text/javascript" src="js/Utils.js"></script>
<script type="text/javascript" src="js/ScoreState.js"></script>
<script type="text/javascript" src="js/PlayState.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
The relevant lines are the CSS and these ones:
<!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta charset="utf-8"> -->
<!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->
I want to make my Canvas occupy as much screen as there is to occupy. I want my canvas to be full screen and this used to be working fine both on Firefox, Chromium and Firefox OS, but now it doesn't seem to be working on any. I need help with figuring out the CSS and content="" tags to make the canvas (and therefore canvas's context.width and context.height occupy as much space as there is.
Fiddle: http://jsfiddle.net/AwLwF/
CSS:
body {
position:relative;
}
canvas {
position:absolute;
left:0;
top:0;
}
JS:
$("canvas").width($(document).width());
$("canvas").height($(document).height());
var ctx = document.getElementById("canvas-element").getContext("2d");
function draw() {
//draw here
ctx.fillStyle="blue";
ctx.fillRect(0,0,200,100);
requestAnimationFrame(draw);
}
draw();
BUT there is little problem. Aspect Ratio. Strange resolutions will destroy scale of drawn elements.
That should make the canvas full screen in CSS (not tested, but works for divs so you should be fine with canvas too):
canvas {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: auto;
height: auto;
}
In javascript you could read the window/document width/height and add it to the canvas to calculate with it. Like this in jQuery:
$(document).height();
$(document).width();
And like this without jQuery:
document.width;
document.height;
I really hope that'll be a help for you.
Related
I am using wordpress and I have a Iframe with a leaflet map inside it. But on the left there is a lot of white space. And I want that the leaflet map will cover the full widht. So this is the code of the iframe:
<!DOCTYPE html>
<html>
<html lang="en-us">
<head>
<title>GeoVerdeling</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Show geometric distribution">
<meta name="author" content="Victor Bom">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src=
"https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<style>
#peMap {height:1000px;
width: 100%;
background: rgba(76, 175, 80, 0.0);
border:5px double #000000}
div { margin-left:auto;
margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>
<script>
$(function()
{
var dlist=[
["aa en hunze",53.0104848,6.7495285,1320.00,7],
];
var maxBounds=[
[50.800,3.259], //Southwest
[53.565,7.335]]; //Northeast
var peMapOptios={'maxBounds':maxBounds, 'zoomSnap':0, 'zoomDelta': 0.5,
'wheelPxPerZoomLevel':120, 'minZoom':7.5, 'maxZoom':11};
var circleOptions={color:'red', fillColor:'#f03', fillOpacity:0.5};
var peMap=L.map('peMap',peMapOptios).setView([52.2,5.3],7.7);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution:'© OpenStreetMap'}).addTo(peMap);
L.control.scale().addTo(peMap);
var i;
for ( i=0;i<(dlist.length);i++ )
{ circle=L.circle([dlist[i][1],dlist[i][2]],dlist[i][3],circleOptions).addTo(peMap);
circle.bindPopup(dlist[i][0]+":"+String(dlist[i][4]));
};
});
</script>
</head>
<body>
<h3 style="text-align:center">Deelnemers per: 2022-05-27 </h3>
<div id="peMap"></div>
<br>
<p> Geregistreerde deelnemers: 3984, Bekende gemeenten: 331, Deelnemers toegekend aan gemeenten: 3161</p>
</body>
</html>
and this is how it looks like now:
So you see on the left there is a lot of space. And of course on a mobile phone it has to be rendering also correct.
So what I have to change?
Thank you
if I do it like this:
<style>
html, body
{
margin: 0px; padding: 0px
}
#peMap {height:1000px;
width: 100%;
background: rgba(76, 175, 80, 0.0);
div { margin-left:auto;
margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>
<script>
still on the left a lot of white space. Even on mobile
There isn't anything wrong with the code you've written. This just has to do with the interesting world of web development, where most browsers have a default stylesheet attached to web pages.
In your case, it has to do with the <body></body> element having a default margin: 8px. You'll simply need to override this with body { margin: 0px; }.
Here's some fun reading and discussion about this.
I want to use an HTML tooltip and also import some features from bootstrap. The problem is that when I add:
<link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>
Tooltips are not working anymore. I'm working in eXist-db and using exide, here is my HTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8"/>
<title data-template="config:app-title"> ...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta data-template="config:app-meta"/>
<link rel="shortcut icon" href="$shared/resources/images/exist_icon_16x16.ico"/>
<link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<script type="text/javascript" src="$shared/resources/scripts/jquery/jquery-1.7.1.min.js"/>
<script type="text/javascript" src="$shared/resources/scripts/loadsource.js"/>
<script type="text/javascript" src="$shared/resources/scripts/bootstrap-3.0.3.min.js"/>
<html>
<head>
<style>
.tooltip {
position: relative;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: white;
color: black;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
width: 240px;
bottom: 110%;
left: 20%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
visibility: visible;
}
</style>
</head>
<body id="body">
<div style="width: 20%; height: 90px; float: left; margin:10px">
<h4>Original Text:</h4>
<div data-template="letter:text_orig"/>
</div>
</body>
</html>
</html>
Here is my letter.xql where I use tooltip:
declare function letter:text_orig($node as node(), $model as map())
{
let $resource := collection('/db/apps/Tobi-oshki/data')
let $xml_id := letter:text_people('/db/apps/Tobi-oshki/data')
for $rs in $resource//tei:rs
for $id in $xml_id
return
if (data($rs/#key) eq $id)
then
<html>
<div class="tooltip">{$rs}
<span class="tooltiptext">{letter:text_lem(data($rs/#key))}</span>
</div>
</html>
else
("")
};
I'd recommend not relying on the bootstrap version that ships with shared-resources (which is deprecated since exist v 5.3.0) its outdated and unmaintained.
I would suggest packaging you own preferred dependencies and css. As a last resort you can experiment with replacing the js and css files inside shared resources with later versions, to see if that fixes your problem.
Viewing the following plunker in IE 11 shows now pin icons on the Name column. Viewing in FF or Chrome the pin icon is there. Any ideas why this might be?
http://plnkr.co/edit/RU4KnysM6s0aeYzI3KYJ?p=preview
.grid {
width: 100%;
height: 400px;
}
.ui-grid-pinned-container .ui-grid-header-cell {
position: relative;
}
.ui-grid-pinned-container .ui-grid-header-cell:after {
position: absolute;
font-family: 'FontAwesome';
content: '\f08d';
font-size: .75em;
right: 2em;
top: 0.5em;
width: 1em;
height: 1em;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
</div>
<script src="app.js"></script>
</body>
</html>
Your Plunkr demo works fine for me in IE11. I imagine your issue is that IE is actually rendering your page in IE7 mode.
If you open your developer tools within IE (F12) you'll see a drop-down menu in the top right which says which version it's rendering on:
If this isn't displaying 11 by default, you can fix this by telling IE not to do this by adding this to your document's <head> (as described here: How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?):
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
I currently have an issue with my page, where the contents of the page are not filling 100% of the screen. (Laravel 4.2)
See Image
My code is as follows
master.blade.php
HTML/Javscript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Timetable</title>
<link rel="icon" href="/images/calander.ico">
<script src="/scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/scripts/main.js" type="text/javascript"></script>
<script src="/scripts/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/styles/default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container script" style="display:none">
#include('layouts.banner')
#include('layouts.navigation')
<div class="content">
dasda
#include('layouts.messages')
#yield('content')
</div>
</div>
</body>
#yield('modal')
#yield('javascript')
<script type="text/javascript" id="cookiebanner" src="http://cookiebanner.eu/js/cookiebanner.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.script').attr('style', 'block');
});
</script>
</html>
CSS Code:
html {
overflow-x:hidden;
height:100%;
}
.navigation {
width:150px;
}
.container {
width:100%;
height:100%;
}
.content {
background-color:#000000;
top:-100px;
width:100%;
height:100%;
}
body {
background: #F0EDED;
}
I cannot figure out what the issue is. If anybody has any suggestions that would be appreciated
Try deleting default margins and paddings by adding this to css:
*{
maring:0;
padding:0;
}
And also for calculating width use vw units:
width:100vw;
Try to change the css for body tag in this way:
body {
margin: 0;
padding: 0;
background: #F0EDED;
height: 100%;
}
you cant use
html {
overflow-x:hidden;
height:100%;
}
use:
astrick (*) insted of html
html {
height: 100%;
}
body {
min-height: 100%;
}
I created a cocos2d-javascript game and am testing it on Chrome. The HTML of the webpage is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="icon" type="image/GIF" href="res/favicon.ico"/>
<meta name="viewport" content="width=100%, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="landscape"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<style>
body, canvas, div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
margin: 0px;
}
</style>
</head>
<body style="padding:0; margin: 0; background: #000; width:100%; height:100%; margin: 0px;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="100%" height="100%"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
</html>
As you can see, I set it up so that the canvas will fit the whole page. This is how the game looks (it is by default 500x500):
If I resize the window, the canvas will generally resize correctly. But sometimes it will have some sort or margin:
What is wrong? I imagine the problem is the HTML itself, rather than cocos2d.
It only seems to occur with Chrome. Firefox seems fine.
I am using Mac OSX Yosemite.
Try:
*, html {
margin:0 !important;
padding:0 !important;
}
And I would suggest removing the properties inside the body style attribute(just for cleanliness), and leaving just properties inside the style tag inside the head.