So, I am trying to make a Gamebook that takes the players input in a form and then, when clicked, shows the text. Depending on what the player has answered, the game will reply, and so on. It has the idea of this game: https://jsfiddle.net/MacroG0D/9g1130pm/
So, below you can see that I do understand how to add text, using click and append. I just can't figure out how MacroG0D (in the fiddle) applied it to his game. Because I can't get it to work.
I also want to have the players-name shown as well and have this interaction. Since I can't seem to get it to work, it feels like it would be stupid to write the whole game first since I can't test it if this doesn't work.
Can someone maybe explain how it was done in the jsfiddle or have some tips?
$(document).ready(function() {
$("#button").click(function() {
var toAdd = $("input[name=checkListItem]").val();
$(".list").append('<div class="item">' + toAdd + '</div>');
});
});
h2 {
font-family: arial;
}
form {
display: inline-block;
}
#button {
display: inline-block;
height: 20px;
width: 70px;
background-color: #cc0000;
font-family: arial;
font-weight: bold;
color: #ffffff;
border-radius: 5px;
text-align: center;
margin-top: 2px;
}
.list {
font-family: garamond;
color: #cc0000;
}
<!DOCTYPE html>
<html>
<head>
<title>Gamebook</title>
<link rel="stylesheet" type="text/css" href="CODEC.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="CODEC.js"></script>
</head>
<body>
<h2>The Dutch Golden Age</h2>
<p>Contains an introduction story </p>
<p>Are you ready to play the game?</p>
<form name="checkListForm">
<input type="text" name="checkListItem" />
</form>
<div id="button">Answer</div>
<br/>
<div class="list"></div>
</body>
</html>
Related
Neither in the IDE when I preview does the button click nor in the various browsers I used. (Mozilla, Chrome)
I want the button to click but I can not do it although the IDE does not get an error. Take the following piece of code:
function increment() {
console.log("The button was clicked")
}
increment()
html,
body {
margin: 0;
padding: 0;
}
button {
border: none;
padding-top: 10px;
padding-bottom: 10px;
color: white;
font-weight: bold;
width: 200px;
margin-bottom: 5px;
border-radius: 5px;
}
#increment-btn {
background: darkred
}
<!DOCTYPE html>
<html lang="el">
<head>
<title>Page Count</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>People enter:</h1>
<h2 id="count">100</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<script src="index.js"></script>
</body>
</html>
in your Javascript file don't call the function again. as you are already calling it on button,
i mean on button you have added " onclick " handler it should work just fine. just remove last line in Javascript file
Hello I have one confusion in my head.
I'm trying to make a logic in JS when some one click on BUTTON then automatically lead to next page after 1s.
I tried to use onclick function but I'm getting error.
I included simple html and css in purpose of texting.
Can some one help me.
Also That logic must apply to any pages.
Cheers!
#btn {
position: relative;
width: 300px;
height: 80px;
content: 'Button';
background: blue;
border-radius: 9px;
color: white;
vertical-align: center;
}
#next {
position: relative;
width: 300px;
height: 80px;
content: 'Button';
background: blue;
border-radius: 9px;
color: white;
margin-top:50px;
}
#text {
margin:auto;
position: relative;
width: 80px;
height: 40px;
padding-top: 30px;
}
<<!DOCTYPE html>
<html>
<head>
<title>!!!AAA!!!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="btn"><div id="text">Button</div></div>
<div id="next"><div id="text">next</div></div>
</body>
</html>
To go to a different page after 1 second you'll want to use a combination of setTimeout() and window.location and an onclick event on your button.
I am assuming you want to use the button next to make this happen.
First thing create a second html test page.
<html>
<body>
<h1>Page 2</h1>
</body>
</html>
and in the code you shared, after the closing </div> tag for id next add the following:
<!DOCTYPE html>
<html>
<head>
<title>!!!AAA!!!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="btn">
<div id="text">Button</div>
</div>
<div id="nextPage">
<button id="next" onclick="switchLocation(0)">next</button>
</div>
<script>
function switchLocation(counter) {
if (counter == 0) {
counter = 1;
setTimeout(function() {
switchLocation(counter);
}, 1000);
} else {
window.location = "page2.html";
}
}
</script>
</body>
</html>
I edited your code slightly. Removed the extra < on the first line and changed the "next" div to a button.
Some of you may know those cool audio fades on scroll. i am trying to use that method on a "vimeo iframe". my intention is to let the sound of a video fade scrolling down the page and letting it get louder back again scrolling up. to be honest i am a super newbie at js and not even an advanced user of html and css so i am sorry if i am asking for too much if its not possible at all please tell me.
this is what im working with: (credits to http://codepen.io/envira/pen/AuGKh)
its basicaly a vimeo clip and the script effect for an audio fade
<html>
<head>
<meta charset="utf-8">
<title>soundtest</title>
<link href="soundcss - Kopie.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var events=["abort","canplay","canplaythrough","durationchange","emptied","ended",
"error","loadeddata","loadedmetadata","loadstart","pause","play","playing",
"progress","ratechange","readystatechange","seeked","seeking","stalled",
"suspend","timeupdate","volumechange","waiting"]
$(document).ready(function() {
var audioElm = $('#scrollaudio').get(0);
audioElm.play();
var height = $(document).height() - $(window).height();
$(window).scroll(function() {
audioElm.volume = 1 - $(window).scrollTop() / height;
console.log(audioElm.volume);
});
});
</script>
<style>
.article1 {
height:800px;
background:#124A70;
color: #fff;
font-size: 2em;
text-align: center;
padding: 10px;
}
.article2 {
height: 900px;
background: #E04006;
color: #fff;
font-size: 2em;
text-align: center;
padding: 10px;
}
p {
font-family: Tahoma, Arial, sans-serif;
text-shadow: 0px 1px 1px #111;
}
#charset "utf-8";
.vimeoFrame {width:638px; height:358px; overflow:hidden; margin:0 auto;} .vimeoFrame .vimeoXtra {margin-top:-100px;}
.vimeo {display:block; width:638px; height:358px; margin:0 auto;}
.vimeoXtra {display:block; width:638px; height:558px; margin:0 auto;}
#wrapper{
height:358px;
width:638px;
background-color:
overflow:hidden;
}
</style>
</head>
<body>
<div class="article1"><p> Scroll Down</p>
<div id=wrapper">
<div class="vimeoFrame"> <iframe class="vimeoXtra" src="https://player.vimeo.com/video/98417189?autoplay=1&loop=1" frameborder="0"></iframe></div>
</div>
<audio loop id="scrollaudio" src="Material/8_Mile_Battle_Instrumental.mp3"></audio>
</div>
<div class="article2">
</div>
</body>
</html>
I am sorry if i am acting stupid and scrub-ish but i hope you can help me
kindest regards
Everything works fine - just mp3 file in your example is not available for direct download. Try other mp3: http://codepen.io/anon/pen/RPMQmq
<div class="article1"><p> Scroll Down</p>
<audio loop id="scrollaudio" src="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"></audio>
</div>
P.S. Use the browser console to debug the application - a great idea!
The question says it all. I'm trying to make the example under examples/hash/ in the page.js examples work the same way it does, only using the { hashbang: true } option, but no avail.
I've also tried setting <base href="/hash/">, but that seems to get into an infinite redirection. After that, removing page.base('/hash') seems to do the trick, but then the location bar displays http://localhost:4000/hash/#!/hash/ and the # and #subsection links stop working properly.
This is the code:
<!DOCTYPE html>
<html>
<head>
<title>Hash</title>
<style>
body p {
color: #333;
font-family: verdana;
}
#sections p {
height: 500px;
margin: 30px;
padding: 30px;
line-height: 40px;
background-color: #eee;
border: 1px solid #ccb;
font-size: 30px;
}
#sections p a {
display: block;
float: right;
font-size: 14px;
}
</style>
<script src="/page.js"></script>
</head>
<body>
<h1 id="top">Hash</h1>
<ul>
<li>#</li>
<li>#subsection</li>
<li>section?name=tana</li>
<li>section?name=tana#subsection</li>
</ul>
<div id="sections">
<p><strong>A</strong>top</p>
<p><strong>B</strong>top</p>
<p id="subsection"><strong>C</strong>top</p>
</div>
<script>
page.base('/hash');
page('/:section', section);
page();
function section(ctx, next) {
console.log('path: ', ctx.path);
console.log('querystring: ', ctx.querystring);
console.log('hash: ', ctx.hash);
console.log(' ');
}
</script>
</body>
</html>
How can I do this ?
Thanks
I'm having the same problem and couldn't find a solution. What I ended up doing was use a hacky workaround.
You can push the correct version of your url using history.pushState if you don't have to support old browsers.
history.pushState('','',location.pathname + location.search);
This cosmetically fixes the problem, but deep linking to complex paths will require a bit more logic.
I have 2 buttons and when you click the buttons , a <div> will pop up so its like popbox .
I managed to get the first button to pop a <div> called bigbox but when I try to click on the second button , It doesn't pop another <div> called editbox .
But it works when I deleted the jquery function which controls the first button.
<html>
<head>
<title>Page</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style type="text/css">
.bigbox {
background-color: #F5E49C;
color: #000;
padding: 0 5px;
width:280px;
text-align: center;content: "";display: none;
padding-bottom: 30px;
padding-top: 10px;
}
.editbox {
background-color: #F5E49C;
color: #000;
padding: 0 5px;
width:280px;
height:500px;
text-align: center;content: "";
display: block;
padding-bottom: 70px;
padding-top: 10px;
position: absolute;left:300px;top:1px;
}
</style>
</head>
<body>
<button id="ClickMe">Click Me</button>
<div id="moveableBox" data-display="hidden" class="bigbox">
</div>
<br>
<button id="Click">Second pop box</button>
<div id="ableBox" data-display="hidden" class="editbox">
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$("#ClickMe").click(function (e) {
e.preventDefault();
/*if (.attr("data-display") == "visible") {};*/
$("#moveableBox").fadeToggle();
});
$("#moveableBox").draggable({
handle: "#moveBox"
});
});
</script>
</body>
</html>
First of all there is an error showing up in the browser console that
Uncaught TypeError: Object [object Object] has no method 'draggable'
So you'll have to import jquery-ui as well to get your JS execute to the end, or simply remove the draggable methods.
Secondly, you are calling a toggle function on #ableBox so that disappears because it was visible initially.