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.
Related
Internal CSS works, but external doesn't. I've tried the external with the code !important, but it just didn't made any sense.
I want to add a gallery to my site. But I have a problem. As I've seen in the browser some margin overwrites the ext. CSS. But here's the thing, I have no margins in the HTML code. The only thing I can imagine is that the Bootstrap is doing something with high priority.
div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
position: static;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="gallery">
<a target="_blank" href="gtrr35.jpg">
<img src="gtrr35.jpg" alt="Nissan GT-R R35 Nismo">
</a>
<div class="desc">Nissan GT-R R35 Nismo</div>
</div>
Where is your custom css stylesheet linked?
It should be the last of all the other tags (fromm top-left to bottom -right), otherwise it gets overwritten due the cascading aspect of CSS...
I'm sure its something simple but I've googled way too many different solutions to know where i went wrong now.
I plan to make this a full site in good time but i am still fresh. Any help is appreciated. Here's the header and nav followed by css I've been tinkering with
/*General Styles*/
body{
padding: 0;
margin: 0;
background-color: #007bff;
}
header nav #left{
background: #0f6674;
color: #f2f2f2;
padding-top: 50px;
min-height: 70px;
border-bottom: #c82333;
}
header nav {
color: #f2f2f2;
text-decoration: none;
font-size: 14px;
}
header ul{
padding: 0;
margin: 0;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
/*Positions Container*/
.container{
position:relative;
width: 80%;
margin: auto;
overflow: hidden;
}
:
<!doctype HTML>
<html>
<head>
<title> Artistic Audio & Visual D.C. </title>
<meta name="description" content="Distributed Home Systems"/>
<meta name = "author" content ="Elishua S. Brown"/>
<meta name="authorURL" content="http://www.artavdc.com/index.html"/>
<!--Mobile Specific-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Internet Explorer-->
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
<!--Bootstrap-->
<link href="bootstrap.css" rel="stylesheet"/>
<!-- Reset page styles & Add Custom Styles-->
<link href="Styles.css" rel="stylesheet" />
<link href="Reset.css" rel="stylesheet" />
<script src="Homepage.js"> </script>
<title> Artistic Audio/Visual | Welcome! </title>
</head>
<body>
<header>
<!--Navigation Bar-->
<!--Add Logo to SRC-->
<img src= "src/img/Artav-logo-w.jpg" id="logo" alt="" />
<div id= NavBarImg"></div>
<nav>
<ul id="left">
<h1>You Imagine It, We Create It</h1>
<li>Artistic Home</li>
<li>Audio Installation</li>
</ul>
<ul id="right">
<li><input type="search" id="navSearch" placeholder="Search"></li>
<h2>Subscribe to Recieve Special Offers & Updates</h2>
<form>
<input type="text" placeholder="Company Name.."/>
<input type="email" placeholder="Email.."/>
<button type="submit">Subscribe</button>
</form>
<!--Add link to Appointment Request Form-->
<li>Request Appointment</li>
</ul>
</nav> <!--End Nav-->
To my knowledge, I've closed and used all tags properly. It must be something fairly simple, I'm not really sure.
You should use ./Reset.css when you want to include files that are in the same directory.
If your files are in another directory you should use ./css/Reset.css.
Also be aware that your files should be named with uppercase if you want it to work.
Based on your paths that you have left in comments you should include them like this:
./src/CSS/Styles.css
Was looking into this issue for more than an hour, need your help guys, nothing I could find on internet. I want that when on mouse over the image changed to text like "home" and on mouse out it would change back to the image. But the webpage has multiple links on nav bar for example - Home/About/Contact...
nav {
font-size: 40px;
}
nav:hover {
content: "home"
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
</nav>
</body>
</html>
You can use nav:hover::after as the selector for the text (i.e. a pseudo-element), with position: absolute and a white background to cover/hide the icon (and position: relative on the nav element itself to make it the anchor for the absolute position)
nav {
font-size: 40px;
position: relative;
}
nav:hover:after {
content: "home";
position: absolute;
top: 0;
left: 0;
background: #fff;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
</nav>
</body>
This is a simpler and cleaner approach to the task: it involves showing and hiding different elements instead to edit an element type and format on runtime:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<span>text</span>
</nav>
</body>
</html>
CSS
nav {
font-size: 40px;
}
nav span {
display: none;
}
nav:hover a {
display: none;
}
nav:hover span {
display: inline-block;
}
https://jsfiddle.net/b2ycwjtu/
by the way... ?
nav { font-size: 40px }
nav span { display: none }
nav:hover span { display:inline }
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<span>HOME</span>
</nav>
</body>
As you can probably tell CSS is the way to go for this, but that being said if you wanted to do it with javascript you could use something like this:
HTML
<html>
<head>
<title>Image/Text Switching</title>
</head>
<div>
<h1>
Image/Text Switching
</h1>
<div>
<div id="container">
<img id="imgToReplace" src="https://via.placeholder.com/150"/>
<div id="textContainer"></div>
</div>
</div>
</div>
</html>
JS
var replacementText = "Home";
var imgElement = document.getElementById('imgToReplace');
var textContent = document.createTextNode(replacementText);
var textContainer = document.getElementById('textContainer');
var container = document.getElementById('container');
container.addEventListener("mouseover", function(){
imgElement.style.display = "none";
textContainer.appendChild(textContent);
});
container.addEventListener("mouseout", function(){
imgElement.style.display = "unset";
textContainer.innerHTML = "";
});
CSS
#container{
border: 1px solid black;
display: inline-block;
min-height: 150px;
min-width: 150px;
}
One caveat with this approach is that the #textContainer element and the #imgToReplace element must be the same height and width. If you do decide to go this route maybe use some js to set the height and width of the created #textContainer element.
The fiddle can be found here.
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;
}
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"