I have a simple C++ SDL2 program and I'm using emscripten to run it in the browser. Emscripten generates two files (javascript and webassembly) and it renders everything into HTML canvas. I found this simple HTML canvas on the internet and it works just fine but for some reason, it has white borders on the left and on the top. How can I remove these borders?
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type='text/javascript'>
var Module = {
canvas: (function() { return document.getElementById('canvas'); })()
};
</script>
<script src="index.js"></script>
</body>
</html>
screenshot here
This is the browser-default margin on the body-element.
You can remove it by adding some CSS to the head-element.
Example:
<style>
body {
margin: 0;
}
</style>
Related
My website is displaying an undesired white border for all my components, even when using default configs:
Main.kt
fun main() {
renderComposable("root") {
Div({ style { height(300.px); backgroundColor(blue) } }) { }
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<div id="root"></div>
<script src="MyApp.js"></script>
</body>
</html>
renders
Can you notice the white border around the blue background?
Why does this happen? How to remove this white border?
This happens due to the default margin for the body tag being 8px.
This means that the default body component is rendered with an 8px margin, which is what you're seeing as a "white border".
To remove it, you simply have to adjust your body tag style. This can be done at your index.html file, where you declare your body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body style="margin: 0">
<div id="root"></div>
<script src="MyApp.js"></script>
</body>
</html>
I'm trying to implement the data feed that Box Office Mojo offers from their website, and they say that adding this line of code should display the feed:
<script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php">
Which works, but I have the issue of it positioned on the far left side of the page by default, which looks weird (warning, large image).
I wrapped said script in a p tag, like so:
<p id="boxOffice"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></p>
and styling tag with position, but none of the options that I have tried have moved it. Have any of you guys had any idea of moving it? I'm stuck here.
Do you want it in the center? There are multiple ways to do that.
Method 1. Using <center> tag
<center><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></center>
Your table should be centered like this:
Method 2. Add below code after the <head> tag:
<style type="text/css">
table {
margin: 0px auto;
}
</style>
It will do the same.
Method 3. Using <div> tag:
<div class="mytable"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></div>
And you can play with css to put the table anywhere you want:
.mytable {
text-align: center;
}
Here is my full code for method 1:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<center><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></center>
</body>
</html>
Firstly i would suggest that try using <DIV>tag instead of <p>tag.
it should Work.
<!DOCTYPE html>
<html>
<head>
<style>
#boxOffice{
float:right;
}
</style>
</head>
<body>
<div id="boxOffice"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></div>
</body></html>
You can also use other css properties with <DIV>.
or
You can use <center>tag with <p> tag to align it to center.
<center><p id="boxOffice"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></p></center>
I want to display an image (It can be of any size) only in a table of 1280 x 800 Resolution it will not display on other screens.
Now I'm using an <img> element inside the body, and if the image is small, it doesn't fill the screen and if the image is big, it display it out off the screen.
So the html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/senaletica.js"></script>
</head>
<body>
<img id="mapa" alt="mapa" src="">
</body>
</html>
And the javascript:
$('document').ready(function(){
var session = new QiSession();
session.service("ALMemory").done(function (ALMemory) {
ALMemory.subscriber("PepperQiMessaging/totablet").done(function(subscriber) {
subscriber.signal.connect(toTabletHandler);
});
});
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'data:image/png;base64,' + value);
imgMap.width($('window').width());
imgMap.height($('window').height());
}
});
I don't use any CSS at the moment.
window is an actual javascript entity and should not be quoted, which then makes it a string. Removing the quotes from 'window' will solve your problem.
See Below Snippet :
$(document).ready(function(){
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSd8cAJmOsrWimMAMpTAFOPURbw4q7uDKKxau1nimZ4V-usMb0w');
imgMap.width($(window).width());
imgMap.height($(window).height());
}
toTabletHandler(5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img id="mapa" alt="mapa" src="">
</body>
I am moving a navigable site into an iframe that now has other frames surrounding it.
Everything works normally however now in Safari when a link is clicked in the main iframe the iframe goes blank momentarily then the pages loads. Usually the user would only notice changes in elements that have changed. So the main site template would appear to have not been reloaded.
This is how the site used to behave outside the iframe and in Firefox it behaves that way despite now being in an iframe.
Is there any way to stop Safari re-loading the entire page from scratch each time a link is clicked in the iframe?
The answer has been tested and is completely serious, be warned!
So the Safari white flicker only occurs when a Javascript file is called in the head or the body, and from the same domain.
So you can include Javascript files in the head as normal from an external domain and no flicker, change it to your own domain and it flickers.
To get even more weird if you include the local javascript files in the body there is a lesser flicker, after the body it completely goes away.
This must be a bug!
Below is a basic example, clicking the link causes the flicker.
Test page HTML:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="inzu.ico" >
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<iframe id="iframe" src="testframe.html" style="height:600px"/>
</body>
</html>
Frame with flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="/something.js" type="text/javascript"></script>
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
</html>
Frame with no flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
<script src="/something.js" type="text/javascript"></script>
</html>
I'm trying to make my first video background and found this tubular plugin. when i follow the step, it seems that adding the code in body gets complicated.
I added the jquery link and for some reason the code i added is not valid.
can anyone help me how tomake this plugin work?
This is the instruction im trying to follow:
https://code.google.com/p/jquery-tubular/
Thank you in advance!
here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Using Tubular Plugin</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<style type="text/css">
body,html { margin:0; padding::0; height:100%; width:100%;}
#topSection {
background-color: #D8D8D8;
height:100%;
min-height:100%;
width:100&;
position:relative;
}
</style>
</head>
<body>
$().ready(function() {
$('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID.
});
<section id="topSection">Top section- I need a youtube video background here</section>
</body>
</html>
Hi Have you tryed calling jQuery from head. You should add a piece of code like:
<script>
$("document").ready(function() {
var options = { videoId: "xp-8HysWkxw", // where idOfYourVideo is the YouTube ID.
start: 0,
repeat: true
};
$("#page").tubular(options); // Here is the jQuery call
});
</script>