JavaScript variables importing via <input>, processing and exporting - javascript

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
<script>
calculus() {
floor_height = 0
height_input_code = document.getAttributeById("height_input").value
floor_height = height_input_code / 2.7
console.log('This height is approximately', floor_height, 'floors of a regular living building', target='output')
}
</script>
</style>
</head>
<body>
<div id="input">
<input type="number" step="any" id="height_input" style="margin:0; width: 1000px; height: 50px; font-size:2vw; border: solid 2px black">
<button type="button" onClick="calculus()" placeholder="✓" style="width: 50px; height: 50px; margin:0; font-size:1vw; border: solid 2px black">
</div>
<div id="output">
</div>
</body>
</html>
I've been trying to do a somewhat of a converter but i dont know how to submit variables through button and process them.
I tried 'attaching' to , after which is pressed, the code outputs an equivalent of meters in floors of a building for demonstration, but the log says that "calculus() is not defined", though it is cleadly in the and named accordingly. What am i doing wrong?

There are some errors on your code.
Firstly, your script is inside the style tag, but it shoud be outside.
Secondly, to define the function calculus you should use the function keyword function calculus() {}.
Thirdly, if you want to write the text into the output element, yous can not use the console.log function.
Finally, you should use getElementById instead of getAttributeById to fetch the element and then get the value.
The final code should be the next one:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
</style>
<script>
function calculus() {
floor_height = 0
height_input_code = document.getElementById("height_input").value
floor_height = height_input_code / 2.7
document.getElementById("output").textContent = 'This height is approximately ' + floor_height + ' floors of a regular living building'
}
</script>
</head>
<body>
<div id="input">
<input type="number" step="any" id="height_input" style="margin:0; width: 1000px; height: 50px; font-size:2vw; border: solid 2px black">
<button type="button" onClick="calculus()" placeholder="✓" style="width: 50px; height: 50px; margin:0; font-size:1vw; border: solid 2px black">
</div>
<div id="output">
</div>
</body>
</html>

Make your style and your script tags separate
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0;
background: #595959;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
#input {
position: absolute;
margin-top: 50vh;
margin-left: 3vw;
bottom: 70%;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
bottom: 50vh;
}
</style>
<script>
calculus() {
floor_height = 0
height_input_code = document.getAttributeById("height_input").value
floor_height = height_input_code / 2.7
console.log('This height is approximately', floor_height, 'floors of a regular living building', target='output')
}
</script>
2 function compute needs to be defined as
function compute(e) {
3 You can't use console.log to send your log to an html element. Here's how to do it
document.getElementById("output").textContent = floor_height;

Related

How to insert content on top of each PDFObject div?

I'm presenting some PDFs in a horizontal design with the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly{
width: 100%;
height: 800px;
/*overflow: auto;*/
/*overflow-y: hidden;*/
margin: 5 auto;
white-space: nowrap
}
.pdfobject-container {
/*width: 100%;*/
max-width: 800px;
height: 800px;
margin: 5em 0;
display: inline;
}
.pdfobject { border: solid 1px #666; max-width: 40%;}
</style>
</head>
<body>
<div id='scrolly'>
<div id="pdf1" ></div>
<div id="pdf2" ></div>
<div id="pdf3" ></div>
</div>
<script src="PDFObject-master/pdfobject.js"></script>
<script>
PDFObject.embed("../../overleaf/a/report.pdf", "#pdf1", {pdfOpenParams:{toolbar: '0'}, page: '1'});
PDFObject.embed("../../overleaf/b/report.pdf", "#pdf2", {pdfOpenParams:{toolbar: '0'}, page: '2'});
PDFObject.embed("../../overleaf/c/report.pdf", "#pdf3", {pdfOpenParams:{toolbar: '0'}, page: '3'});
// PDFObject.embed("../../overleaf/d/report.pdf", "#pdf4", options);
// PDFObject.embed("../../overleaf/e/report.pdf", "#pdf5", options);
</script>
</body>
</html>
I would like to put some text on top of each PDF div, like a brief description about the PDF document. How might I do that?
Snippet
// each pdf must have a heading stored in the array headings
var headings = ["This is the heading for pdf1", "This is the heading for pdf2", "This is the heading for pdf3"]
//get all pdfs container
all_pdf = document.getElementById("scrolly").children;
//loop through and change innerHTML of pdf
for (var x = 0; x < all_pdf.length; ++x) {
all_pdf[x].innerHTML = "<h1>" + headings[x] + "</h1>" + all_pdf[x].innerHTML;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly {
width: 100%;
height: 800px;
/*overflow: auto;*/
/*overflow-y: hidden;*/
margin: 5 auto;
white-space: nowrap
}
.pdfobject-container {
/*width: 100%;*/
max-width: 800px;
height: 800px;
margin: 5em 0;
display: inline;
}
.pdfobject {
border: solid 1px #666;
max-width: 40%;
}
</style>
</head>
<body>
<div id='scrolly'>
<div id="pdf1">PDF details1</div>
<div id="pdf2">PDF details2</div>
<div id="pdf3">PDF details3</div>
</div>
<script src="PDFObject-master/pdfobject.js"></script>
<script

JavaScript - Swap colors

In this JavaScript example when user clicks on 'Change colors' button, it need to swap colors of two div elements. But it doesn't.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
background-color: red;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
background-color: green;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
But when I change it a little bit and remove 'background-color' from <style> and put it within <div> then it's working.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first" style="background-color: red;">Random text.</div>
<div id="second" style="background-color: green;">Random text.</div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
So is there any way to make it works for solution when 'background-color' is within <style> in <head>?
Element.style only applies to styles within the style attribute of the element. If you want the computed style, which factors in stylesheets and the like...
var firstElem = document.getElementById('first'),
secondElem = document.getElementById('second'),
firstBackground = window.getComputedStyle(firstElement).backgroundColor,
secondBackground = window.getComputedStyle(secondElement).backgroundColor;
firstElem.style.backgroundColor = secondBackground;
secondElem.style.backgroundColor = firstBackground;
This should swap the two colours, regardless of where they are defined.
For this case it whould be more common to use 3 classes in css. One for defining the common style of the divs. And two for defining the differences. Switching the appearance in that case whould just require switching of classes. Such a set-up is far more flexible also for example in combination with annimations.
A way to alter style using Javascript, without inline styling:
https://jsfiddle.net/6tyw211s/10/
<html>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
.color{
background-color: red;
}
.color1{
background-color: green;
}
</style>
<body>
<input type="button" id="color" value="Change colors" />
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
</body>
<script>
var y= document.getElementById('color');
var f=document.getElementById('first');
var s=document.getElementById('second');
y.addEventListener('click', function(){
if (f.className === "color1") {
f.className = "color";
}
else {
f.className = "color1";
}
if(s.className==="color"){
s.className="color1";
}
else{
s.className="color";
}
})
</script>
</html>
You can use switchClass() in jqueryui to do it.
That way, you don't have to specify the background-color values to the divs.
$("#color").click(function myFunction() {
$(".first").switchClass("first", "second", 200, "easeInOutQuad");
$(".second").switchClass("second", "first", 200, "easeInOutQuad");
});
Here is a working version with jqueryui
http://api.jqueryui.com/switchclass/

How to make divs have 100% body height after adding position: absolute div below the page bottom?

Please give me a clue how to achieve that with pure css?
I need to make 2 divs side by side and I have some element that is adding to the one of that divs, but far below it's bottom. The page automatically resizes then, but these 2 divs heights stays unchanged. Is it possible to make them still fit whole page as it is described in the css, or the only solution is to specify their exact heights by script?
Or maybe there's another way to make such a layout with a div added by script?
Let me show it in the fiddle:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
Thank you!
Short update: I just found, that neither html nor body heights were not updated after adding, but browser lets scroll to the newly added div. It's very strange behavior even for the css/html
I'm not sure exactly what you're aiming for, but maybe overflow: hidden is what you need? It will make it so the div won't expand to include that addition...
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
overflow: hidden;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
If you don't need scrolling - try position:fixed instead of absolute.
You don't need all this CSS, all you need to do is to set their height in CSS explicitely:
first to height: 100vh
after you add new element, to height: calc(100vh + X) where X is distance from initial divs bottom to bottom of the added element.
EDIT: Another solution with removed position: absolute:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html {
height: 100%;
}
body
{
display: flex;
min-height: 100%;
margin: 0 5rem 0 0;
}
div#col1
{
background: #eee;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
width: calc(100vw - 10rem);
}
div#dd
{
background: #f99;
border: 2px solid red;
margin-top: 2000px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>

buttons disappear after pressed

I am learning javascript, and I am practicing what I learned by making a blackjack game. I have a system that deals cards fairly, but when I press the "deal" button the value of the card comes up but the buttons disappear. Why is this happening? Any help will be much appreciated. here is my code:
<!DOCTYPE html>
<html>
<head>
<title>casino game.</title>
<input type="button" value="deal" onclick="document.write(random)" id="deal">
<input type="button" value="hit" onclick="hit" id="hit">
</head>
<body>
<script type="text/javascript">
var deck = [11,2,3,4,5,6,7,8,9,10,10,10];
var random = deck[Math.floor(Math.random()*deck.length)]
</script>
<style type="text/css">
#deal{
position: fixed;
width: 50px;
height: 40px;
top: 100px;
}
#hit{
position: fixed;
width: 50px;
height: 40px;
top: 200px;
}
body{
text-align: center;
font-size: 30px;
background: url("");
}
</style>
</body>
</html>
Move your <input> inside <body> instead of <head>, and by using document.write() you are overwriting all the content of your HTML. You might want to write the result in a <div> instead.
<!DOCTYPE html>
<html>
<head>
<title>casino game.</title>
<style type="text/css">
#deal{
position: fixed;
width: 50px;
height: 40px;
top: 100px;
}
#hit{
position: fixed;
width: 50px;
height: 40px;
top: 200px;
}
body{
text-align: center;
font-size: 30px;
background: url("");
}
</style>
</head>
<body>
<input type="button" value="deal" onclick="deal()" id="deal">
<div id="result"></div>
<input type="button" value="hit" onclick="hit" id="hit">
<script type="text/javascript">
var deck = [11,2,3,4,5,6,7,8,9,10,10,10];
function deal() {
var random = deck[Math.floor(Math.random()*deck.length)];
document.getElementById('result').innerHTML = random;
}
</script>
</body>
</html>
DEMO

make plugin to embed video player on wordpress

I want from anyone to do plugin WordPress that add my special link video to post.
I have this page that is work good and I want to change it to do as plugin wordpress.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ace Stream</title>
<style type="text/css">
* {
font-family: Arial;
}
body {
background-color: #222
}
.modal {
background-color:#fff;
display:none;
width: 500px;
padding:15px;
text-align:left;
border:2px solid #333;
font-size: 12px;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal input {
font-size: 12px;
}
.button-long {
display: inline-block;
background: transparent url(http://static.torrentstream.org/htmlplayer/img/sprite-player-black.png) no-repeat 100% -129px;
height: 27px;
line-height: 24px;
cursor: pointer;
position: relative;
margin-left: 17px;
top: -3px;
padding-right: 12px;
width: 115px;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 14px;
}
.button-long b {
background: transparent url(http://static.torrentstream.org/htmlplayer/img/sprite-player-black.png) no-repeat -579px -129px;
height: 27px;
width: 17px;
position: absolute;
left: -17px;
}
</style>
<!-- black style -->
<link type="text/css" rel="stylesheet" href="http://static.torrentstream.org/jsapi/css/ts-controls-black.css" />
<!-- api files -->
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/ts/core.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.scrollText.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/cufon/cufon.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/cufon/a_LCDNova_400.font.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/ts/player.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/ts/controls.js"></script>
<script type="text/javascript">
function init() {
var useInternalControls = true;
var controls = new TorrentStream.Controls("tsplayer", {
style: useInternalControls ? "internal" : "ts-black",
debug: true
});
try {
var player = new TorrentStream.Player(controls.getPluginContainer(), {
debug: true,
useInternalControls: useInternalControls,
bgColor: "#000000",
fontColor: "#ffffff",
onLoad: function() {
this.registerEventHandler(controls);
controls.attachPlayer(this);
try {
var p = this;
this.loadPlayer("f47d788d767eaec24320f265e9c0cec5307d94ab", {autoplay: true});
}
catch(e) {
console.log("init: " + e);
}
}
});
}
catch(e) {
controls.onSystemMessage(e);
}
}
</script>
</head>
<body>
<div id="player_container" style="background-color: #000; width: 800px; height: 483px; margin: 0 auto 0 auto;">
<div id="tsplayer" style="width: 100%; height: 100%; color: #fff; text-align: center;">
<div style="padding-top: 232px; background-color: #000000;">Подождите, идет загрузка плеера...</div>
</div>
</div>
<script type="text/javascript">
init();
</script>
</body>
</html>​
when add these code in this page to my post on wordpress is work good but it is difficult to add all this codes with all new posts
just my changeable with all my new post is this "f47d788d767eaec24320f265e9c0cec5307d94ab"
I want the plugin to use above codes when add [/tv_vid]link[/tv_vid] to my post
for example
[/tv_vid]f47d788d767eaec24320f265e9c0cec5307d94ab[/tv_vid]
Also I want the height and width of player suitable with browsers and mobile devises
I don't know any programming language.
please help me and thank you for all.

Categories