Fairly self explanatory.
<link href="C:\Users\Andre\Desktop\FOLDER\css\xterm.css" rel="stylesheet" /> <!--Terminal-->
<div id="terminal"></div>
<script src="./xterm.js"></script> <!-- Terminal -->
<script>
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello Again');
</script>
Here is my css file that it's connected to and how I tried to center it, I realize it's a different type, so I wasn't sure how to go about it
#terminal{
align-content:center;
}
Any help on centering this would be appreciated
#terminal {
text-align: center;
}
Maybe try this :
#terminal{
margin: auto;
width : 300px;
}
Related
Good day,
I am trying to program a random quote generator and am currently unable to get the text to change. I'm sure that It's a simple mistake but any extra eyes would help because I tried another solution I saw and it also didn't work so I'm sure that I'm just missing something simple.
As always appreciate the help and will share anything else necessary to help resolve this. Thanks!
HTML
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#getMessage").on("click", function(){
$(".message").html("New Message");
});
});
</script>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<header>
Quote Generator.
</header>
<body>
I thought I'd provide some quotes for your edification.
<div id="wrapper">
<button class = "btn btn-primary" onClick="newQuote()">
Generate New Quote
</button>
</div>
<div class= "text-center">
<div id = "quoteDisplay">
Quote Here
</div>
</div>
<script src = javascript.js></script>
</body>
</html>
CSS
body {
background-image: url("http://www.planwallpaper.com/static/images/depositphotos_15858395-Abstract-swirls-seamless-pattern-background.jpg");
text-align: center;
font-size: 25px;
}
header {
text-align: center;
font-size: 45px;
font: 400 100px/1.3 'Lobster Two', Helvetica, sans-serif;
}
JS
var quotes = ["quote 1", "quote 2", "quote 3"];
function newQuote(){
var randomNumber = Math.floor(Math.random()*(quotes.length()));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
Array.length is a property, not a function:
quotes.length()
Should be:
quotes.length
So... this is weird?! when i try and use an ACE editor in google chrome in the following context:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
body {
background-color: rgb(0, 0, 0);
}
.preview {
position: fixed;
margin: 0 auto;
width:800px;
height:600px;
background-color:#3D3D3D;
}
#code {
width:800px;
height:600px;
position: fixed;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="preview" id="preview_layer_1" style="z-index:0;">
nothing much yet
</div>
<div class="preview" id="preview_layer_2" style="z-index:1; background-color:;">
</div>
<div id="code" style="z-index:2;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#code").hide();
$(".preview").dblclick(function(){
$("#code").fadeIn();
})
$("#code").dblclick(function(){
$("#code").fadeOut();
})
});
var Editor = ace.edit("code");
var Haxe = ace.createEditSession("","ace/mode/haxe");
var JSON = ace.createEditSession("","ace/mode/json");
Editor.setTheme("ace/theme/monokai");
Editor.setSession(Haxe);
Editor.focus();
</script>
</body>
so like any sane person i go to chrome dev tools to check whats going on and then suddenly it works!
so i reload it repeat the steps without opening devtools and then wait...
but nothing happens! and i don't know where to start the code looks fine to me but i'm sure its just a dumb error that i've made, right?
Thanks in advance
You need to call Editor.resize() when changing position or display of the editor container element, to allow the editor to adapt to the size changes.
It works when opening chrome devtools, because window size changes, and that calls the resize() method.
The following should work:
$(".preview").dblclick(function(){
$("#code").fadeIn();
Editor.resize();
})
This is my first post on SO and my first time making a Chrome Extension. I've read alot of documentation, but I am still unsure how to get this to work. Below are my html and js files. I want to be able to type something in the source box and have the have the word print out in the results area in real time. I have tested this code on my local host so i know it works, but for some reason it is acting up as a chrome extension.
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension Popup</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<textarea id="source"></textarea>
<div id="result">
</div>
</body>
</html>
Here's the js:
function main() {
document.getElementById('source').keydown(function() {
var source = document.getElementById('source').value;
var outputValue = source.replace(/command/gi, "⌘")
.replace(/tab/gi, "⇥")
.replace(/return/gi, "⏎")
.replace(/option/gi, "⌥")
.replace(/control/gi, "⌃")
.replace(/esc/gi, "⎋")
.replace(/left/gi, "←")
.replace(/down/gi, "↓")
.replace(/up/gi, "↑")
.replace(/right/gi, "→")
.replace(/shift/gi, "⇧")
.replace(/eject/gi, "⏏")
.replace(/caps\s\(lock\)/gi, "⇪")
.replace(/save/gi, "⌘ + S")
.replace(/print/gi, "⌘ + P")
.replace(/find/gi, "⌘ + F");
document.getElementById("result").innerHTML = outputValue;
}
}
1) What wOxxOm said in the comment: element.keydown(function() { ... }) does not exist. This definitely comes from some jQuery code - you could use that if you add it to your extension, or you could use addEventListener.
2) You declare a function main(), but nothing ever calls it. A good place to call it would be a DOMContentLoaded event listener on document:
document.addEventListener("DOMContentLoaded", main);
function main() {
/* ... */
}
Sorry, but I am not getting where actually I did the mistake (as I am a newbie to javascript). I wrote this code for the flipbook effect using turn.js with the help of a tutorial. But the output in a browser is just showing the blank screen. I guess, there must be an awkward mistake but m still not getting it . plz help.
<html>
<head>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
<style type="text/css">
body{
background: #9988aa;
}
#book{
width: 1152px;
height: 400px;
}
#book .turn-page{
background-color: #ddd;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="book">
<div style="background-image:url('images/1.jpg');"></div>
<div style="background-image:url('images/2.jpg');"></div>
<div style="background-image:url('images/3.jpg');"></div>
<div style="background-image:url('images/4.jpg');"></div>
<div style="background-image:url('images/5.jpg');"></div>
<div style="background-image:url('images/6.jpg');"></div>
<div style="background-image:url('images/7.jpg');"></div>
<div style="background-image:url('images/8.jpg');"></div>
</div>
<script type="text/javascript">
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50;
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
</script>
</body>
</html>
Hi there is small error in your code, kindly just remove semi colon from following line.
elevation:50;
It should be like following, just remove semi colon. Hope it will resolve your issue.
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
Here's the entire code for my loop.html file. It first pulls the list of urls from a separate XML file that is in the same directory and then loops through them, given specified time. The time element is the amount it will wait until it cycles to the next page. What I want to do is to use DIV to cycle through the URLs, since iframe is not supported in all the browsers and does not display some of the content when I run the html script. The thing I am not sure about is what to do with the "dashboard.url"--when i want to use a div?
I found this piece of code from a different site--that when you replace the frams['theDisplay'] line with, it sets the div to a webpage--but I want to have something like this, using the dashboard.url
$("#siteloader").html('<object data="http://latimes.com" />');
I am sorry if this is a really long question, and if you get frustrated. I am just trying to learn as I go. Thank you!
Example of list.xml format:
<list>
<url>
<link>http:latimes.com</link>
<time>2</time>
</url>
<url>
<link>http:stackoverflow.com</link>
<time>4</time>
</url>
</list>
Entire HTML code:
<!DOCTYPE HTML>
<!--Created by Megan Chiu - 30 June 2013-->
<html>
<!-- CSS -->
<style type="text/css">
displayArea {
margin: 0;
width: 100%;
}
html, body {
height: 100%
width: 100%;
}
div {
height: 100%;
width: 100%
}
object {
width: 100%;
min-height: 100%;
}
</style>
<head>
<meta charset="UTF-8">
<style type="text/css">
body, html { margin: 0; padding: 0; width: 100%; height: 100%;
overflow: hidden; }
iframe { border: none; }
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"
type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var Dash = {
nextIndex: 0,
dashboards: [],
loadXML: function() {
$.ajax( {
type: "GET",
url: "list.xml",
dataType: "xml",
success: Dash.renderXML
});
},
renderXML: function(xml) {
$(xml).find("url").each(function() {
var _link = $(this).find('link').text();
var _time = $(this).find('time').text();
Dash.dashboards.push({url:_link, time:_time});
});
Dash.display();
},
display: function()
{
var dashboard = Dash.dashboards[Dash.nextIndex];
frames['theDisplay'].location.href = dashboard.url;
Dash.nextIndex = (Dash.nextIndex + 1) % Dash.dashboards.length;
setTimeout(Dash.display, dashboard.time * 1000);
}
};
window.onload = Dash.loadXML;
</script>
</head>
<body>
</body>
<iframe id="theDisplay" width="100%" height="100%"></iframe>
</html>
<div id="content1"></div>
<script>
document.getElementById("content1").innerHTML='<object type="text/html" data="header.php" ></object>';
alert('Load_Ok');
</script>
You cannot load content from another website just with pure JavaScript. Period.
http://en.wikipedia.org/wiki/Same_origin_policy
So what you can do? You can make a web request from your server and get Http response from remote server and put them into div element.
<div><%=(new WebClient()).DownloadString("http://www.stackoverflow.com")%></div>
But one of biggest problem is that, since you will download all styles and scripts from remote website then your page probably will not look good. Not even human readable. And if you will keep hitting from same IP to those servers you will may blocked by them.
Good luck.