I got reference of this image
But in following scenario even if the JavaScript is at the bottom of the html file its downloaded and parsed first and then the HTML is shown, I am a bit confused -
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loader Sequence</title>
<link rel="stylesheet" type="text/css" href="style/style1.css">
</head>
<body>
<p>HTML parse and render</p>
<img style="max-width: 70%; height: auto; border: 1px solid red;" src="https://i.stack.imgur.com/wfL82.png">
<p>
There ain't no grave can hold my body down
There ain't no grave can hold my body down
When I hear that trumpet sound I'm gonna rise right out of the ground
Ain't no grave can hold my body down
</p>
</body>
<script type="text/javascript">
alert('Last Appearance');
setTimeout(function(){ alert('Last appearance 5000 ms') }, 5000);
</script>
</html>
In your example, the scripts are inline, so nothing is really downloaded. But the script is executed after the rest of the html has finished loading.
Here is a maybe clearer example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loader Sequence</title>
<link rel="stylesheet" type="text/css" href="style/style1.css">
<script type="text/javascript">
alert('Head script\nThe body does not show yet');
</script>
</head>
<body>
<p>HTML parse and render</p>
<img style="max-width: 70%; height: auto; border: 1px solid red;" src="https://i.stack.imgur.com/wfL82.png">
<p>
There ain't no grave can hold my body down
There ain't no grave can hold my body down
When I hear that trumpet sound I'm gonna rise right out of the ground
Ain't no grave can hold my body down
</p>
</body>
<script type="text/javascript">
alert('Bottom script\nThe body has been rendered');
</script>
</html>
Another example, by accessing the DOM before and after it has loaded:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loader Sequence</title>
<link rel="stylesheet" type="text/css" href="style/style1.css">
<script type="text/javascript">
// Here the paragraph has not been parsed yet and does not exist in the DOM
alert(document.getElementById('johnnycash') && document.getElementById('johnnycash').innerText);
</script>
</head>
<body>
<p>HTML parse and render</p>
<img style="max-width: 70%; height: auto; border: 1px solid red;" src="https://i.stack.imgur.com/wfL82.png">
<p id="johnnycash">
There ain't no grave can hold my body down
There ain't no grave can hold my body down
When I hear that trumpet sound I'm gonna rise right out of the ground
Ain't no grave can hold my body down
</p>
</body>
<script type="text/javascript">
// Here the paragraph has been parsed and exists in the DOM
alert(document.getElementById('johnnycash') && document.getElementById('johnnycash').innerText);
</script>
</html>
Related
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>
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'm having some weird trouble with my css, It doesn't load!?
So I'm using google chrome to preview it on and it always had worked fine,
until I started to ad meta tags. This is the code that I'm using;
body {
margin: 0;
overflow: hidden;
}
mainContainer {
position: absolute;
width: 100%;
height: 600px;
background-color: black;
}
<DOCTYPE! html>
<html>
<head>
<title>Sander™ - Code & Design</title>
<link href="stylehome.css" type="text/css" rel="stylesheet">
<meta name="description" content="Welcome to my website - Sander™ - Code & Design">
<meta name="author" content="Sander™ - Code & Design">
<meta name="keywords" content="Minecraft Server, RPG, Nederlands, 24/7, Beste Minecraft Server, NL server">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="javaScript.js"></script>
</head>
<body>
<div id="mainContainer">
</div>
</body>
</html>
And I don't know why it's not previewing, I can't find any spell mistakes,
and overall I always had done it this way (only not the meta tags) and I always worked fine. So if somebody can spot something wrong please tell me.
Thanks in Advance!
mainContainer is a type selector that matches all <mainContainer> elements, which you don't have any of and aren't allowed in HTML anyway.
You need an ID selector, which starts with a # character.
Right now I have a canvas pop-up, but I want it to be separate from the window from which it is originated (it's stuck within the boundaries of the first window, I can only drag it within the first window).
Is there any way to do this?
You can open a new browser instance with: window.open(aURL,'name','width=400,height=400')
1. Create an html file for your popup
Put this code into popupTest.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
window{width:300px; height:150px; }
body{ background-color: ivory;}
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font='14px verdana';
ctx.fillText('I am a popup canvas.',20,50);
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
2. Open the popup (popupTest.html) in a new browser instance
Put this code into runPopup.html and open it:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var popupURL='popupTest.html';
function myPopup(url){
window.open(url,'myPopup','width=400,height=400,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=yes');
return false;
}
$('#pop').on('click',function(){
myPopup(popupURL);
return(false);
});
}); // end $(function(){});
</script>
</head>
<body>
<button id=pop>Open Popup</button>
</body>
</html>
Note about opening your popup
This method requires the user to trigger the popup (eg button-click or anchor-click). If you want to programmatically trigger the popup you must be sure the user has any popup blocker turned off or else your popup will be blocked.
this is sample code i tried n its working
<html>
<head>
<style>
<!--
.execute { background-color: red; height: 25px; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js">
</script>
<!-- Let's register a onClick handle for any .execute div. -->
</head>
<body>
<div class="execute">
<head>
<script>
dojo.ready(function() // Dojo will run this after being initialized
{
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt)
{
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
Click me 1
</body>
</div>
<br /><br />
<div class="execute">Click me 2</div>
</body>
</html>
but if i merge it in another code it highlights and as invalid code. what does it means?
Ther are several code issues. double <head> tags, HTML elements after the <body> tag.
cleaned up code:
<html>
<head>
<style>
.execute { background-color: red; height: 25px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
<script>
dojo.ready(function() { // Dojo will run this after being initialized
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt) {
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
<div class="execute">Click me 1</div>
<br><br>
<div class="execute">Click me 2</div>
</body>
</html>
<head> should only appear once, directly under the <html>, and not within <body>.
Exceptions to this are iframes embedded within existing pages, which have their own document structure.
Just remove the second <head>.
Why do you have two heads? <script>s don't have to be in <head>s.
You should only have a single <head> in your document.
The structure of an HTML page should be as follow:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Although they do not have to be, most people put script tags within the opening and closing header tags. For example:
<html>
<head>
<title></title>
<script>
<!--This is where all your functions should be.-->
</script>
</head>
<body>
</body>
</html>