I need to play a movie in another page (page2.html) by clicking on a button in page1.html.
On a main page I have multiple buttons which runs movies on separate pages. I need to connect those buttons with the appropriate movie ID.
Could you give me some advice on how to do that?
JS
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Eagle+Lake" rel="stylesheet">
<link rel="Stylesheet" type="text/css" href="view.css" />
<script type="text/javascript" scr="video_play.js"></script>
</head>
<body>
<center>
<button onclick="playPause()">Play/Pause</button>
</center>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Eagle+Lake" rel="stylesheet">
<link rel="Stylesheet" type="text/css" href="view.css" />
<script type="text/javascript" scr="video_play.js"></script>
</head>
<body>
<div style="text-align:center">
<br><br>
<video id="video1" width="420">
<source src="/Applications/XAMPP/xamppfiles/htdocs/filmy/xxx.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
CSS
body {
font-family: 'Eagle Lake', cursive;
}
input {
width: 40px;
text-align: center;
}
video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
Related
I am new to javascript, I tried to change the color of an element (circle) when clicking on a button but it doesn't work for me and i don't know what to do, here is the script:
I have 2 files(html and css):
html file:
<!DOCTYPE html>
<html>
<head> <title> www.tothemoon.com</title>
<link rel="stylesheet" type="text/css" href="Mpage.css"/>
</head>
<body>
<button id= "but" onclick="FM()" style="font-size:50px; background-color:blue; border:none">try me </button>
<div class="circle", style="color:#1c87c9"> text </div>
<script>
var cir=document.querySelector(".circle");
function FM(){
cir.style.backgroundColor ="yellow";
}
</script>
</body>
</html>
CSS file:
.circle {
background-color: #ccb22e;
width: 200px;
height: 200px;
border-radius: 50%;
}
It works great, it's exactly the code you attached
.circle {
background-color: #ccb22e;
width: 200px;
height: 200px;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head> <title> www.tothemoon.com</title>
<link rel="stylesheet" type="text/css" href="Mpage.css"/>
</head>
<body>
<button id= "but" onclick="FM()" style="font-size:50px; background-color:blue; border:none">try me </button>
<div class="circle", style="color:#1c87c9"> text </div>
<script>
var cir=document.querySelector(".circle");
function FM(){
if(cir.style.backgroundColor == "yellow")
cir.style.backgroundColor = "#ccb22e";
else
cir.style.backgroundColor ="yellow";
}
</script>
</body>
</html>
I'm new to this topic and I have an index.html file and there I want to use three.js
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
I also try this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
</body>
</html>
and my css file :
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
My problem is that div for menubar didn't show in front of the canvas.
what should I do?
Thanks.
Transform your HTML into something like below:
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
then remove position, left and top properties from webgl class.
What I want is one HTML page filled with buttons to choose your flash game, and every button redirects to one page. This one page contains an embed and that's all. Since the buttons redirect to the same thing, I would just want to change the source on the embed. I don't completely understand why my code isn't working so feel free to make any suggestions.
Game Chooser Page
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="../Other/favicon.ico">
<!-- Favicon -->
<title>GridOff</title>
<script src="../JavaScript/index.js"></script>
</head>
<body>
<a href="gamesrc.html">
<input type="button" value="Dig to China" id="dtcpicker" class="flashpickbtn" onclick="srcDtc()">
</a>
<style>
#dtcpicker {
top: 10px;
left: 10px;
}
.flashpickbtn {
position: absolute;
font-size: 1em;
text-align: center;
width: 120px;
height: 60px;
border: 3px solid #000000;
border-radius: 2px;
}
</style>
<script>
function srcDtc() {
document.getElementById("gameplayer").src = "../Games/dig-to-china.swf";
}
</script>
</body>
</html>
Game Player Page
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="../Other/favicon.ico">
<!-- Favicon -->
<title>GridOff</title>
<script src="../JavaScript/index.js"></script>
</head>
<body>
<object>
<param name="allowFullScreen" value="true">
<embed id="gameplayer" src="">
</object>
<style>
#gameplayer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</body>
</html>
On the Game Changer page, you are trying to target the element on the Game Player page, but this won't work strictly with just HTML, because you have no way of carrying information between pages. You might be able to create a cookie, save info to that cookie, and read it on the new page, or use local storage perhaps. But if you placed the <object></object> on the Game Changers page, you would be one step closer for this to work, because the element with the ID "gameplayer" is in the DOM. The DOM can't read information on a page other than itself.
I have 2 files, filter.html and filter.js.
In filter.html I have a div with the id "test" and in filter.js I have a variable with the name "finishedHTML".
Now I want to write the content of "finishedHTML" into the test div as html code, but the html things "finishedHTML" is empty.
How can I solve this problem?
Source:
var finishedHTML = "<h2>Yes it works</h2>"
header {
display: block;
background: #A2AFBC;
top: 0;
height: 50px;
position: fixed;
width: 100%;
text-align: center;
}
footer {
height: 50px;
width: 100%;
bottom: 0px;
left: 0px;
background: #A2AFBC;
position: fixed;
}
.headerTitle {
font-size: 2.0em;
font-family: Verdana;
font-weight: 100;
color: #506B84;
margin: 0em;
font-weight: bold;
}
h2 {
font-size: 3.0 em;
color: red;
}
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 300px;">
<h1>This is a test text</h1>
</div>
<script language="javascript" type="text/javascript">
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
Thanks four your help!
You can use the variable finishedHTML only after it has been declared. So declare it at any point before setting the innerHTML and it will work.
var finishedHTML = "<h2>Yes it works</h2>";
document.getElementById('test').innerHTML = finishedHTML;
header {
display: block;
background: #A2AFBC;
top: 0;
height: 50px;
position: fixed;
width: 100%;
text-align: center;
}
footer {
height: 50px;
width: 100%;
bottom: 0px;
left: 0px;
background: #A2AFBC;
position: fixed;
}
.headerTitle {
font-size: 2.0em;
font-family: Verdana;
font-weight: 100;
color: #506B84;
margin: 0em;
font-weight: bold;
}
h2 {
font-size: 3.0 em;
color: red;
}
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<!-- style="margin-left: 300px; padding-top: 300px;"-->
<div id="test" style="margin-top: 100px;">
<h1>This is a test text</h1>
</div>
<footer>
</footer>
</body>
</html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 300px;">
<h1>This is a test text</h1>
</div>
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
<script language="javascript" type="text/javascript">
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
put <script> inside body can solve your asysnc loading script issue
Hey just check this its working fine for me.
Thanks
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 30px;">
<h1>This is a test text</h1>
</div>
<script language="javascript" type="text/javascript">
var finishedHTML = "<h2>Yes it works</h2>";
console.log(finishedHTML);
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
Move document.getElementById('test').innerHTML = finishedHTML; into filter.js.
Hello everyone I am creating a math game for kids and I want the user to be able to change the background image of their game when he/she clicks a button
I have a space / jungle / desert theme I tried this code that i found online but it won't work it works here though http://jsfiddle.net/Eqdfs/27/
how come?
Please keep in mind that I am using jquery mobile in my original program and I have a default background set with this code
<style>
body {
background-image: url("http://s21.postimg.org/9bj52fal3/sdfsdfdsf.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
background-size:100% 100%;
}
.ui-page {
background: transparent;
}
.ui-content{
background: transparent;
}
</style>
then i found this code that claims it can add buttons that will change the background image but I cant get it to work in this simple html file yet alone in my actual game
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="//http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.js></script>
<script src="//http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
body {
background-repeat:repeat;
background-position:top-left;
}
body.class1 {
background-image:url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif');
}
body.class2 {
background-image:url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png');
}
body.class3 {
background-image:url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png');
}
</style>
<script>
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1');
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2');
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3');
});
</script>
</head>
<body>
<a id="btn1">Noise BG</a><br/>
<a id="btn2">RVB BG</a><br/>
<a id="btn3">dunno BG</a>
</body>
</html>
the real problem is the jquery-mobile and jquery-UI are conflicting each other. Also there are few markup problems in your design. Try this code and check if its working
EDIT Updated jquery. Now the background is changing with single click.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style type="text/css">
body {
background-repeat: repeat;
background-position: top-left;
}
a#btn1,
a#btn2,
a#btn3 {
color: #fff;
cursor: pointer;
background: #333;
padding: 0px 15px;
}
body.class1 {
background-image: url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif');
}
body.class2 {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png');
}
body.class3 {
background-image: url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png');
}
</style>
</head>
<body>
<a id="btn1">Noise BG</a>
<br/>
<a id="btn2">RVB BG</a>
<br/>
<a id="btn3">dunno BG</a>
<script>
$("#btn1").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class1');
});
$("#btn2").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class2');
});
$("#btn3").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class3');
});
</script>
</body>
</html>
Your fiddle code actually worked for me running inside MS Edge.
Just Change this line:
<SCRIPT LANGUAGE="JavaScript">
to
<script>
Additionally, You aren't defining type while including script files, Add this line too in each opening <script> tag
type="text/javascript"