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>
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 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>
I am new to AngularJS and trying to fix the issue where some of the HTML code displays before ng-if condition gets evaluated. I am using ng-cloak as mentioned in many other stack over flow URLs but it still doesn't work for me. I am trying to load default image if actual image on URL is blank and when page loads, even if actual URL is there, it first blinks with default image and then loads the actual image because ng-cloak doesn't work correctly.
Please help.
I have below code and CSS etc.
Index.html
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>Some App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="app">
some code here
<div ng-view></div>
</body>
</html>
other.html
<div class="content">
<div style="width: 100px; height: 40px;">
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" ng-cloak>
<img src="image/default.png">
</div>
</div>
You can apply ng-cloak in your body tag. So, you whole body will be displayed only after angular's compilation.
<body ng-cloak ng-app="app">
..
</body>
This will solve your issue.
I did it always on my <html> tag. Like <html ng-app="someApp" ng-cloak>
The timeout function will do what you want:
// timeout function will give some time for page load.
$timeout(function () {
//your page load
$("#panelTask").html(res);
});
the best solution is to have a loader while your app is waiting for the data. Instead of putting the ng-if on the flickering element, put in on the parent component and show a loader (it could like FB does a sort of mock of your UI).
I had to add :
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
to my css file for ng-cloak to work.
Like here :How to correctly use ng-cloak directive?
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" class="ng-cloak">
<img src="image/default.png">
</div>
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>
Using <noscript> inside of another tag seems to cause it to take on its own style (that is, none), and forces the text inside to take its own line (even if display:inline is set with CSS). Is there any way to avoid this, or a workaround to use instead?
Here is what I mean: http://www.webdevout.net/test?01I
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p { font-family:sans-serif; font-size:12px;}
noscript {display:inline !important;}
</style>
</head>
<body>
<p>This is some text<noscript> that should be displayed on the same line with the same style if JS if disabled.</noscript></p>
</body>
</html>
I would recommend a different approach over using script/noscript tags.
Something like this works best:
<!DOCTYPE html>
<html class="noJS">
<head>
<title>noJS Demo</title>
<style type="text/css">
html.noJS .jsRequired,
html .noJS{
display: none !important;
}
html.noJS span.noJS{
display: inline !important;
}
html.noJS div.noJS{
display: block !important;
}
</style>
<script type="text/javascript">
function onDocumentLoad(){
var html = document.getElementsByTagName("html")[0];
html.className = html.className.replace("noJS", "");
}
</script>
</head>
<body onLoad="onDocumentLoad();">
<p>This is some text<span class='noJS'> that should be displayed on the same line with the same style if JS if disabled.</span></p>
</body>
</html>
Of course, if you use a framework like jQuery the JavaScript is even easier, just remove the JS function and the function from the body, then just use the following JS:
$(document).ready(function(){
$("html").removeClass("noJS");
});
Old but still relevant question - http://www.tigerheron.com/article/2007/10/alternative-noscript-tag presents an excellent and very simple solution:
"Insert the following code into the <head> section of your Web page:
<script type="text/javascript"> document.write('<style>.noscript { display:none }</style>'); </script>
When you need to use <noscript> inline, use <span class="noscript"> instead."
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
p { font-family:sans-serif; font-size:12px;}
</style>
</head>
<body>
<script type="text/javascript">document.write('<p>This is some text</p>');</script>
<noscript><p>This is some text that should be displayed on the same line with the same style if JS if disabled.</p></noscript>
</body>
</html>
Something like this should do what you want. You should of course use unobtrusive methods instead but I guess that´s above par for now.
Have you tried putting an element like a span inside the noscript tag, and then styling the span? It's a long shot, but might work.
Alternatively, get very specific with your selector and give that a shot. Something like #content p noscript { display:inline !important; } might work. But it might also be insoluble.
As a last resort, you could ditch the noscript tag and put in a span (or your element of choice) and give it a class of noscript -- then remove that first thing in your js.