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!
Related
EDIT: It turns out it was only an issue on my computer, but an explanation would still be helpful if you have one. Thanks again!
I am attempting to create a development page for a website I am working on, and have a blank index.html page that redirects you to the development page. This all works as intended. I am using svelte to make things easier in future, however, when I deploy it, the svelte "Hello World" that shows up upon creating a new svelte project keeps appearing on top of the development page HTML. The odd thing about this is that it only happens when I deploy it, not when I load up the static HTML, not when I load up a local server. It doesn't even show up if I don't use a custom domain name. I am using cloudflare pages and cloudflare to redirect the domain name to the cloudflare page. My domain is registered with GoDaddy, if that at all matters.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Book Planet UK</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/public/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
app.js
window.onload = function() {
window.location.replace("under-construction/under-construction.html");
}
under-construction/under-construction.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Book Planet UK</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='under-construction.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
<script src="under-construction.js"></script>
<div class="overlay">
<h1 class="title">Book Planet UK is currently undergoing development.</h1>
<span class="title">We are hoping to be back by 2023, so hold tight until then! 🚀️</span>
<br>
<button onclick="location.href = '/public/staff/index.html';">Staff Login</button>
</div>
</body>
</html>
under-construction/under-construction.css
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
background-image: url("https://webgradients.com/public/webgradients_png/008%20Rainy%20Ashville.png");
}
.title {
background: transparent;
font-family: 'Roboto', sans-serif;
padding-top: 20px;
padding-left: 5%;
padding-right: 5%;
}
.overlay {
background: rgba(240, 248, 255, 0.375);
border-radius: 10px;
padding-left: 5%;
padding-right: 5%;
width: auto;
max-width: max-content;
height: auto;
}
button {
background: transparent;
font-family: 'Roboto', sans-serif;
width: 20%;
height: 35px;
color: #242024;
border: 2px solid #242024;
border-width: 2px;
margin-left: 5%;
align-items: center;
border-radius: 3px;
margin-top: 25px;
margin-bottom: 25px;
transition: 0.25s ease;
}
button:hover {
transform: scale(1.05);
cursor: pointer;
}
src/app.svelte
<script lang="ts">
</script>
<main>
</main>
<style>
</style>
The non-custom-domain website is deployed at https://book-planet-uk.pages.dev/.
The domain is https://bookplanetuk.co.uk/. I get the feeling that this may be a "its on my machine" kinda thing, so let me know if it doesn't appear for you on the domain. I have restarted my computer just to check.
Thank you in advance for any and all help!
Your code is linked via the path /build/bundle.js, this looks like the path will remain the same, even if the code changes. That can easily lead to caching issues, where browsers will not get a newer version of the code.
To prevent this, build systems often add a hash to the file name or to a query string, so the URL will be different and the browser will get the new file. Would recommend doing something along those lines.
(This also applies to other resources like CSS.)
Remove the reference to bundle.js.
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>
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.
So, I'm trying to learn some javascript and css. To to this I've forked som code and are trying to paste it together with some of my own idea. You can see my page were i work here: web page for learning
I've reached a problem. I'm using a javascript I've forked to emulate a terminal like interface. This is called jsterm. I also have a box a the bottom of the page with some share options and flairs. I would like to make these 'static' so that the jsterm emulated terminal doesn't go underneath the box at the bottom. Where should I attack this? I've tried changing the height: value in css but jsterm still covers the full page.
div.jsterm {
background: black;
font-family: monospace;
font-size: 16px;
color: #E0E0E0;
top:0%;
left:0%;
width: 100%;
height: 100px;
margin-bottom: 20px;
white-space: pre-wrap;
}
.share_box{
display: inline;
position:fixed;
height: 10%;
width:100%;
bottom:0%;
left:0%;
border:3px solid #a1a1a1;
background:#FFF;
padding:15px;
}
And the HTML
<!doctype html>
<html>
<head>
<title>Erik Sorensen</title>
<link rel="shortcut icon" href="/images/favicon.ico">
<meta name="description" content="Erik's webpage">
<link type="text/css" rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class='cmd_box'>
<script type="text/javascript" src="/commands/com1.js"></script>
<script type="text/javascript" src="/config/config.js"></script>
<script type="text/javascript" src="/js/jsterm.js"></script>
</div>
<div class="share_box">
<!-- Twitter -->
Tweet
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Google + -->
<g:plusone size="tall"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!--Stackoverflow flair -->
<a href="http://stackoverflow.com/users/2394561/eriksorensen">
<img src="http://stackoverflow.com/users/flair/2394561.png" width="208" height="58" alt="profile for ErikSorensen at Stack Overflow, Q&A for professional and enthusiast programmers" title="profile for ErikSorensen at Stack Overflow, Q&A for professional and enthusiast programmers">
</a>
</div>
</body>
</html>
Answer, after #jascha poked me somewhat in the right direction.
changed margin-bottom: 20px; to margin-bottom: 10%; for jsterm
the link to github links to eriksire. instead of eriksore. ;)
to get scrollbars and the .jsterm div to adhere to the height you set try:
.jsterm {
overflow-y: scroll;
}
to get the console to always be above the share_box, making the share box disappear on smaller resolutions:
.jsterm {
z-index: 2;
position: relative;
}
.share_box {
z-index: 1;
}
I'm trying to change the cursor to a custom image with a sound effect. My current problem is the cursor disappears but the replacement image does not show up, and the sound clip is not playing. What did I do wrong?
<head>
<style type="text/css">
#apDiv1 {
position:absolute;
width:1152px;
height:864px;
z-index:2;
left:25px;
top:25px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function setCursor() {
oBoxInner.innerText=sInput.value;
oBoxInner.style.display='block';
oBox.style.cursor="crosshair.gif";
}
</SCRIPT>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML="<embed src=\""+gunshot.mp3+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<body bgcolor="#000000">
<div id="apDiv1">
<span id="gunShot" onclick="playSound('gunshot.mp3');">
<a href="3.html" onmouseover="setCursor" onmouseclick="playSound('gunshot.mp3')"> <img src="score.gif" width="1152" height="864" alt="yep" />
</a></span>
</div>
</body>
Thank you for your help.
EDIT:
I'm using dreamweaver with both PC and Mac for multiple browser compatibility, mainly IE, Firefox, Chrome, and Safari. I was thinking the .gif might be part of the issue instead of .cur. The other cursor code I'm using is this:
<head>
<script type="text/javascript">
$(document).ready(function(){
$('#test-area').mouseout(function(){
$('#mycursor').hide();
return false;
});
$('#test-area').mouseenter(function(){
$('#mycursor').show();
return false;
});
$('#test-area').mousemove(function(e){
$('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
});
});
</script>
<style type="text/css">
#test-area {
height: 1152px;
width:864px;
border: 3px dashed #CCCCCC;
background: #FFFFFF;
padding: 20px;
cursor: none;
top: 25px;
left: 25px;
z-index:1;
}
#mycursor {
cursor: none;
width: 100px;
height: 100px;
background: url(crosshairs.cur);
repeat: no-repeat;
position: absolute;
display: none;
top: 0;
left: 0;
z-index: 10000;
}
</style>
</head>
<body bgcolor="#000000">
<div id="test-area">
Move mouse over this area.
</div>
<div id="mycursor">
</div>
</body>
you have a few errors in the code
oBox is not defined. oBox.style.cursor="crosshair.gif";
The cursor is best to be .cur
the embed tag i only think supports MIDI, and your referencing gunshot.mp3 in your oncick and trying to call reffrence to \""+gunshot.mp3+"\" in the src, should be soundfile
and you have document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML TWICE?
What browsers are you wanting to support the sound? Netscape, IE6, Chrome.. ect