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>
Related
I am trying to make a show & hide div. I use the tutorial from w3schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show) but in this the div is already shown and then you hide it while mine is hidden and then shown. So in the example, I just add display: none; to #myDIV:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
When I first click the Try it button then the div doesn't show... Why? From that point on if I reclick it it shows and disappears normally... How can I fix this? Ty
Because first time, x.style.display is not defined!
Modify your condition to if (x.style.display === "none" || !x.style.display)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none" || !x.style.display) {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Under #myDIV you have set display: none remove that line and it will automatically show up
I have converted my .swf to HTML5 using Google Swiffy. But recently one Media Agency says the banners had a problem opening 2 new tabs instead of just one.
This is the code I always used and its having the double tab, the agency says it redirects to a route on the device ex: file:///Users/folder/folder/UNDEFINED and the other one to the DCM server.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
<title>GOOGLE DCM</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>
<script>
swiffyobject = { blablabla swiffy code};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<a href="javascript:window.open(window.clickTag)" style="width:300px; height:250px; display: block; position: absolute; z-index:999;">
<div id="swiffycontainer" style="width: 300px; height: 250px; border:1px solid black; box-sizing: border-box; ">
</div>
</a>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
</body>
</html>
so, I found a solution to this problem in this question
And I'm also not sure if this is correct for a DCM file since I don't know if an exit URL can be defined without a clicktag
[EDIT] The agency now tells me that they don't have the problem of two windows opening, but they got the error that no clicktag was found... and of course. So I don't know what to do here.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>
<style>
#bg-exit {
background-color: rgba(255,255,255,0);
cursor: pointer;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
</style>
<title>GOOGLE DCM</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>
<script>
swiffyobject = { blablabla swiffy code};
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="bg-exit">
<div id="swiffycontainer" style="width: 120px; height: 600px; border:1px solid black; box-sizing: border-box; ">
</div>
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
<script>
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
}
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
</script>
</body>
</html>
I really need to fix this as soon as possible, otherwise I'll have to redo 35 banners in GWD in just a few hours so any help will be greatly appreciated. Thanks in advance.
looks like you have a bgExit event but no clicktag ?
var clickTag = "http://www.google.com";
GOOGLE DCM
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;
}
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%;
}