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"
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.
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 am using jQuery UI resizable and I want to have a title for each handler.
Like if I an hovering on 'east -handler' then a tooltip should appear saying 'that move to the right'. I was trying to do with jQuery attr() but not able to do so. Any help is appreciated. And one more thing I am having more than one element on which I am applying resizable method so all should get the same "title".
$(document).ready(function() {
$('.ui-icon-gripsmall-diagonal-e').each(function() {
$(this).attr('title', 'hello');
});
});
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
text-align: center;
margin: 0;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$("#resizable").resizable();
});
</script>
</head>
<body>
<!-- HTML -->
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Pull my edges to resize me!!</h3>
</div>
</body>
</html>
You need to run your code after you initialise the plugin. Like this:
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
text-align: center;
margin: 0;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$("#resizable").
resizable().
find('.ui-resizable-se').attr('title', 'hello');
});
</script>
</head>
<body>
<!-- HTML -->
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Pull my edges to resize me!!</h3>
</div>
</body>
</html>
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;
}