I wrote the following jinja2 html file for my flask app to render:
<!DOCTYPE html>
<html lang='en-US'>
<head>
<style type='text/css' media='screen'>
body {
background-image: url( {{ url_for('static', filename='img/background.png') }} );
}
textarea {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<script src={{ url_for('static', filename='script/CodeMirror/lib/codemirror.js') }}></script>
<link rel="stylesheet" href={{ url_for('static', filename='script/CodeMirror/lib/codemirror.css') }}>
</head>
<body>
<title>icc eval webapp</title>
<textarea id="text" rows="4" cols="10"></textarea>
<script>
var codeMirror = CodeMirror.fromTextArea(document.getElementById("text"), {
value: '(32.3333333333+1.6666667)/7-0.8571426+(5^2*2)-12.0000002619',
lineNumbers: true,
lineWrapping: true,
fixedGutter: true,
showCursorWhenSelecting: true,
cursorHeight: 0.85
});
codeMirror.setSize(800, 400);
</script>
</body>
</html>
Unfortunately, I cannot seem to get the to center. It keeps showing up to the left of the page, and I was hoping for it to be center, with a wide margin on either side and above it. Any help would be appreciated.Thanks.
Wrap tour textarea in div
<div class="test">
<textarea id="text" rows="4" cols="10"></textarea>
</div>
css:
.test {
width: 100%;
text-align: center;
margin: 0 auto;
}
Related
I have a button modal that I need move it to the right side, I have tried with bootstrap classes as :
float:right, mt:20
and they did not work. My code is this one :
<b-modal ref="my-modal" hide-footer title="Using Component Methods" v-model="modalShow">
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-button class="mt-3" variant="outline-danger" block #click="hideModal">Close Me</b-button>
</b-modal>
How can I fix it? Thanks
Let me help. You can use the position with top and right direction. I sai sorry if i wrng
app = new Vue({ //not vue, it is Vue
el: "#app",
data: {
myclass: ['myclass']
},
methods: {
showModal: function(){
this.$refs.myModalRef.show()
}
}
})
.myclass > div {
position:absolute !important;
top: -10px !important;
right: -10px !important;
background-color:yellow !important;
}
.myclass > .modal-dialog > .modal-content {
background-color:red !important;
}
.b_button{
position:absolute !important;
top: 10px !important;
right: 10px !important;
}
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button #click="showModal" class="b_button">
Open Modal
</b-button>
<b-modal ref="myModalRef" :modal-class="myclass" size="lg">
<h2>Test</h2>
</b-modal>
</div>
I am new to HTML and I face a problem with my code regarding the form onSubmit.
When I do not use the form and have the onSubmit="Move()" in input as onClick="Move", then the function Move works perfectly fine.
However, when I include the form and put onSubmit="Move()" then the function does not work at all.
May someone point out my mistake and provide a solution to this? This really drives me mad.
<!doctype html>
<html lang="en">
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
<head>
<meta charset="utf-8">
<title>Hello</title>
<link rel=stylesheet type=text/css href='{{ url_for('static',filename='style.css')}}'>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--<link rel=stylesheet type=text/css href='/static/style.css'>-->
</head>
<body>
<div id="content">
<h1>Hello</h1>
<div class=metanav>
<h4>Please enter a stock ticker eg. GOOG, and check desired features.</h4>
<form onsubmit="Move()">
<input type="submit" value="Submit"/>
</form>
<div id="myProgress">
<div id="myBar">10%</div>
</div>
<script>
function Move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
<hr>
{% block content %}{% endblock %}
</div>
</div>
</body>
I want to make a textarea where you can type inside of it, with a black background and green text and the ">_" blinks. How would i go about making this?
You can use this in your CSS:
textarea {
background-color: #000;
border: 1px solid #000;
color: #00ff00;
padding: 8px;
font-family: courier new;
}
<!doctype html>
<html>
<head>
<style>
</style>
<meta charset="utf-8" />
<title>Demo -TextArea</title>
<link rel="stylesheet" type="text/css" href="jqueryui.css">
<script src="jquery.js"></script>
<script src="jqueryui.js"></script>
<script>
$(document).ready(function() {
$("#myTextArea").html(">_");
setInterval(function(){
removeAndAppendBlickWraper();
},2000);
});
function removeAndAppendBlickWraper(){
removeAndAppendBlick(function(){
var text = $("#myTextArea").val(),
withCursortext =text+">_";
$("#myTextArea").val(withCursortext);
});
}
function removeAndAppendBlick(callback){
var text = $("#myTextArea").val();
var witoutCursor = text.substr(0,text.lastIndexOf(">_"));
$("#myTextArea").val(witoutCursor);
setTimeout(function(){
callback();
},1500);
}
</script>
</head>
<body>
<textarea id="myTextArea" style="background-color: black;color: green;" row="5"></textarea>
</body>
</html>
DEMO (thanks to amit kate)
I'm trying to add the textAngular toolbar at bottom of the texteditor-div. Right now it renders at the top.
I've been trying playin around with the css alot but with no sucess.
JS:
var app = angular.module('myApp', ['textAngular']);
app.controller('AppCtrl', function($scope, $http) {
$scope.htmlcontent = "<h2>New Note...</h2>";
$scope.save =function() {
console.log( $scope.htmlcontent );
$http.post("/Home/SaveWNote", { jsonData: $scope.htmlcontent });
}
});
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular.min.js'></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body ng-app="myApp">
<div ng-controller="AppCtrl">
<div text-angular ng-model="htmlcontent "></div>
<button ng-click="save()">Save</button>
<br/>
Your htmlcontent <pre>{{htmlcontent}}</pre>
</div>
</body>
</html>
PREVIEW:
http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
You can use the attribute ta-target-toolbars on the text-angular directive to have it register with an alternate toolbar:
<div text-angular ta-target-toolbars="toolbar" ng-model="htmlcontent"></div>
<div text-angular-toolbar class="toolbar" name="toolbar"></div>
Here is an example: http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview
The relevant lines of code involcing ta-target-toolbars from textAngular are available here: https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656
you can play a bit with css to move toolbar under text area
please see here http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
.ta-editor {
height: 400px;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin: 20px 0;
position: absolute;
top: 0;
width: 100%;
}
.editor-wrapper {
position: relative;
height: 470px;
}
.ta-toolbar {
position: absolute;
bottom: 0;
width: 100%;
}
How can i solve this overflow at the top when I scroll down? This is an application in a facebook page. This is a google chrome snapshot.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo TITLE ?></title>
<link href="<?php echo CSS; ?>style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>-->
<script type="text/javascript" src="js/UnityObject2.js"></script>
<script type="text/javascript">
var config = {
width: 760,
height: 827,
params: {enableDebugging: "0"},
};
var u = new UnityObject2(config);
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();
u.observeProgress(function(progress) {
switch (progress.pluginStatus) {
case "broken":
$brokenScreen.find("a").click(function(e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$brokenScreen.show();
break;
case "missing":
$missingScreen.find("a").click(function(e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "GermsBuster.unity3d");
});
</script>
<style type="text/css">
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
}
a:link, a:visited {
color: #000;
}
a:active, a:hover {
color: #666;
}
p.header {
font-size: small;
}
p.header span {
font-weight: bold;
}
p.footer {
font-size: x-small;
}
div.content {
margin: auto;
width: 760px;
}
.back{
z-index:10 !important;
}
div.broken,
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.broken a,
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.broken img,
div.missing img {
border-width: 0px;
}
div.broken {
display: none;
}
div#unityPlayer {
cursor: default;
height: 827px;
width: 760px;
}
</style>
</head>
<body style="margin:0px; padding:0px;">
<div id="fb-root" class="_56b8"></div>
<div class="video-ar" style="display:none">
<a class="fancybox fancybox.iframe" href="Products_ar.php">video ar</a>
</div>
<div class="video-en" style="display:none">
<a class="fancybox fancybox.iframe" href="Products_en.php">video en</a>
</div>
<div class="fb-app-requests-container" style="display:none">request</div>
<div class="fb-user-info-container" style="display:none">user info</div>
<p class="header" style="display:none"><span><!--Unity Web Player | --></span><?php echo TITLE ?></p>
<div class="content" style="z-index:-1000 !important;">
<div id="unityPlayer" style="display:block; z-index:-1000 !important">
<div class="missing">
<a href="https://unity3d.com/webplayer/" target="_blank" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="images/getunity.png" width="193" height="63" />
</a>
</div>
<div class="broken">
<a href="https://unity3d.com/webplayer/" target="_blank" title="Unity Web Player. Install now! Restart your browser after install.">
<img alt="Unity Web Player. Install now! Restart your browser after install." src="images/getunityrestart.png" width="193" height="63" />
</a>
</div>
</div>
</div>
<!-- LIGHTBOX -->
<script type="text/javascript" src="js/lightbox.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css?v=2.1.4" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
<!-- LIGHTBOX -->
</body>
</html>
The fan page "Canvas URL" is not designed by facbook to handle unity applications, use the app page "Canvas Page" instead. You will not face this issue there.
Add style in HTML tag-
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden">
Hope it helps