I'm trying to get a setup where clicking on a div plays audio (this is working), and changes the background image of another div (not working). The audio also pauses if the button is clicked again during playing, and the background image needs to keep up, as it's similar to a pause/play visual.
What've I got wrong here that it isn't working?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>Janice's Button</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#button {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
background-size: contain;
}
#clicker {
z-index: 1000;
position: absolute;
left: 30%;
top: 10%;
width: 40%;
border: 1px solid red;
border-radius: 100%;
}
.unpressed {
background: url("ButtonImgUnpressed.jpg") no-repeat center top;
}
.pressed {
background: url("ButtonImgPressed.jpg") no-repeat center top;
}
#clicker:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.new
</style>
</head>
<body>
<div id="button" class="unpressed">
</div>
<div id="clicker" onClick="play()"></div>
<audio id="audio" src="Rocky.mp3"></audio>
<script>
function play() {
var audio = document.getElementById('audio');
var button = document.getElementById('button')
if (audio.paused) {
audio.play();
$('#button').removeClass('unpressed');
$('#button').addClass('pressed');
}else{
audio.pause();
audio.currentTime = 0
$('#button').removeClass('pressed');
$('#button').addClass('unpressed');
}
}
</script>
</body>
Thank you so much! I'm sure it's a silly mistake/simple fix - I'm very new to js...
Related
By the way, this is coming from a beginner coder, so don't expect any great amount of organization. I may have missed something obvious.
I couldn't get it to work here as a snippet (for security reasons, it won't allow images to be loaded, not even showing the failing to load icon), so I made a copy of it here.
The issue is that, while hovering over a folder, it works fine, but when I begin hovering over the menu that pops up while hovering over the folder, it starts flashing rapidly. Yes, the menu is supposed to delete itself when the user stops hovering over the folder and show when the user hovers over the folder.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Something</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
</head>
<body>
<!-- See CSS code for more explanation -->
<div class="sidebar">
<h1 style="padding: 1vw;">Todo</h1>
<div class="folder">
Folder 1
</div>
<div class="folder">
Folder 2
</div>
<div class="folder">
Folder 3
</div>
<div class="addBtn">+ Folder</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS code:
/* might have something to do with css; please read my hastily made comments */
/* self explanatory */
html,body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: black;
}
/* sets some defaults */
* {
padding: 0px;
margin: 0px;
border: 0px;
overflow: hidden;
font-family: Poppins;
background-color: inherit;
}
/* sets text selection color to nothing */
*::selection {
background: inherit;
}
/* styling for the sidebar (the part that says "todo", shows folders, etc.) */
.sidebar {
background: #9caeb0;
display: inline-block;
width: calc(20% - 2vw);
height: 100vh;
padding: 1vw;
}
/* the text that says todo */
h1 {
font-size: 30px;
font-weight: 700;
}
/* a folder. */
.folder {
width: calc(15.4vw);
background-color: #8c9ca3;
padding: .6vw;
padding-left: 1.25vw;
padding-right: 1.25vw;
border-radius: 0px 5px 5px 0px;
font-weight: 200;
cursor: pointer;
transition: .45s;
margin: .6vw;
margin-left: -1vw;
margin-right: calc(0vw);
font-size: 15px;
position: relative;
}
/* uses css animations to change the folder upon hovering */
.folder:hover {
background-color: #75828a;
cursor: pointer;
margin-top: .8vw;
margin-bottom: .8vw;
margin-left: -2vw;
padding-left: 2.25vw;
width: 15.8vw;
font-size: 17px;
}
/* the add folder button */
.addBtn {
width: 15.4vw;
background-color: rgba(0,0,0,0);
padding: .6vw;
padding-left: 1.25vw;
padding-right: 1.25vw;
border-radius: 0px 5px 5px 0px;
font-weight: 200;
cursor: pointer;
transition: .45s;
margin-left: -1vw;
font-size: 15px;
border: 3px solid #8c9ca3;
border-left: 0;
/*position: absolute;
bottom: 4vh;*/
}
/* changes bg color upon hovering over add folder button */
.addBtn:hover {
background-color: #8c9ca3;
}
.smallMenu {
position: absolute;
height: 17px;
top: 50%;
width: 17px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 0.5vw;
border-radius: 99px;
}
.menuBtn {
position: absolute;
height: 14px;
top: 1.5px;
left: 7px;
padding: 0px;
margin: 0px;
}
JS Code:
// probably can ignore these functions; scroll down to line 45; there's a lot of code here for purposes that I haven't quite finished yet
function inLocalStorage(item) {
if(!localStorage.getItem(item)) {
return false;
} else {
return true;
}
}
function lsAdd(label,value) {
localStorage.setItem(label, value);
}
function lsGet(item) {
return localStorage.getItem(item);
}
function lsClear() {
localStorage.clear();
}
function lsRemove(item) {
localStorage.removeItem(item);
}
var el;
var mouseOver = false;
// checks if the user has visited
if (!inLocalStorage('visited')) {
alert("Don't mind this alert");
lsAdd('visited','yes');
lsAdd('folders','1');
lsAdd('js','');
} else {
// load from local storage; execute stored JS
new Function(lsGet('js'))();
// upon mouseover of folder, show mini menu icon
for (let i = 0; i < document.getElementsByClassName("folder").length; i++) {
document.getElementsByClassName("folder")[i].addEventListener("click", function() {
console.log("You have clicked.");
});
// add menu upon mouseover
document.getElementsByClassName("folder")[i].addEventListener("mouseover", function() {
mouseOver = false;
el = document.createElement("div");
// this image obviously doesn't load but that's not important; the image is an svg with three vertical dots, and the image is transparent
el.innerHTML = '<div class="smallMenu"><img src="abc.svg" class="menuBtn" style="height:14px;"></div>';
el.setAttribute("id","menu");
document.getElementsByClassName('folder')[i].appendChild(el);
el = document.getElementsByClassName('smallMenu')[0];
el.addEventListener('mouseover', function() {
mouseOver = true;
console.log(mouseOver);
});
el.addEventListener('mouseout', function() {
mouseOver = false;
console.log(mouseOver);
});
});
// remove menu upon mouse out
document.getElementsByClassName("folder")[i].addEventListener("mouseout", function() {
if (mouseOver === false) {
el = document.getElementById("menu");
el.remove();
}
});
}
}
I am new to Javascript and CSS. I have a div that will contain an image. The below code, I pieced it together after watching some YouTube videos and going over some documentation, however I am sure that this is not the right code.
https://jsfiddle.net/0hp97a6k/
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div {
margin: 0;
}
.headerspace {
width: 100%;
height: 20px;
background-color: white;
}
.header {
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headerspace"></div>
<div class="header">
<div class="logo" id="logoid">
</div>
</div>
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function() {
var value = window.scrollY;
logo.style.marginleft = value * 0.5 + 'px';
})
</script>
</body>
</html>
How do I set the left margin based on scroll?
Also can scroll based properties be applied to two margins, say top and right at the same time?
marginleft should be marginLeft in your javascript
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
})
</script>
And then if you want to edit the left and top you can do the following
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
logo.style.marginTop = value * 0.5 + 'px';
})
</script>
To make sure the logo element goes back where it started you should edit the css like this
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div{
margin: 0;
}
.headerspace{
width: 100%;
height: 20px;
background-color: white;
}
.header{
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
padding-top: 50px;
padding-left: 50px;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
I have removed the margin from .logo because that will be overwritten and added those values as padding to the parent (.header)
Visual of element placement
I am trying to make a little “pet the dog game” and I would like to put a div over his head and when you click the DIV it will trigger a JS function to change the photo to a .gif then back again here is my code
JS:
function pet_head(){
var image = getElementById("image");
image.src="DogPet.gif";
setTimeout(function(){
image.src="dog.jpeg";
}, 1000//length of gif
);
};
HTML:
<div class="main">
<img id="image" src="dog.jpeg">
<div class="click></div>
</div>
CSS:
img{
height:100%;
width100%;
position:absolute;
}
If you use absolute in the image it will always be on top of everything else.
Take a look below and see if that is what you looking for.
function pet_head(event) {
/*var image = getElementById("image");
image.src = "DogPet.gif";
setTimeout(function() {
image.src = "dog.jpeg";
}, 1000 //length of gif
);*/
alert('changed');
};
document.getElementById('click').addEventListener('click', pet_head);
img {
height: 100%;
width: 100%;
}
div {
/* This will center the image horizontally */
display: flex;
justify-content: center;
position: absolute;
}
div#click {
color: green;
border: 2px solid red;
top: 14%;
height: 45%;
width: 300px;
position: absolute;
}
<div class="main">
<div id="click"></div>
<img id="image" src="https://i.insider.com/5df126b679d7570ad2044f3e?width=1100&format=jpeg&auto=webp" />
</div>
Here is a working version of your code. Also note that (besides removing code typos) I added object-fit: cover to your img, so that it preserves aspect ratio as the viewport size changes.
function pet_head() {
// var image = document.getElementById("image");
alert("petting the dog");
/* image.src = "DogPet.gif";
setTimeout(function() {
image.src = "dog.jpeg";
}, 1000 //length of gif
); */
};
document.querySelector(".click").addEventListener("click", pet_head);
img {
height: 100%;
width: 100%;
position: absolute;
object-fit: cover;
}
.click {
position: absolute;
left: 49%;
top: 22px;
height: 13vh;
width: 17vw;
cursor: pointer;
}
/* Presentational styles */
.click {
background: yellow;
opacity: .1;
}
html, body {
margin: 0;
}
*, *::before, &::after {
box-sizing: border-box;
}
<div class="main">
<img id="image" src="https://i.stack.imgur.com/FthXz.jpg">
<div class="click"></div>
</div>
jsFiddle
I have got a basic video player and i followed a tutorial on how to create it, but when you click on the play button, then nothing happens as it does not play the video. Also I have got a red bar on the video as the progress, which is displayed all the time, but i only want it to be displayed on hove, so how can I achieve this as i followed the same youtube video as above.
I have followed a youtube and searched the internet, but i have been unable to fin a solution.
HTML
<div class="c-video">
<video class="galaxy-video" src="../videoplayer/intro.mkv"></video>
<div class="controls">
<div class="blue-bar">
<div class="blue-juice"></div>
</div>
<div class="buttons">
<button id="play-pause"></button>
</div>
</div>
</div>
CSS
.galaxy-video{
width: 100%;
height: 700px;
}
.c-video{
width: 100%;
position: relative;
overflow: hidden;
}
.c-video:hover .controls{
transform: translateY(0);
}
.controls{
display: flex;
position: absolute;
bottom: 5px;
width: 1245px;
margin-left: 155px;
flex-wrap: wrap;
background: rgba(0, 0, 0, 0.7);
transform: translateY(100%);
transition: all 0.2s;
}
.buttons{
padding: 10px;
}
.buttons button{
background: none;
border:0;
outline: 0;
cursor: pointer;
}
.buttons button:before{
content: '\f144';
font-family: 'Font Awesome 5 Free';
width: 30px;
height: 30px;
display: inline-block;
font-size: 28px;
color: #fff;
-webkit-font-smoothing: antialiased;
}
.buttons button.play:before{
content: '\f144';
}
.buttons button.pause:before{
content: '\f28b';
}
.blue-bar{
height: 10px;
top: 0;
left:0;
width: 100%;
background: #000;
}
.blue-juice{
height:10px;
background-color: #ff0000;
}
Javascript
var video = document.querySelector(".galaxy-video");
var juice = document.querySelector(".blue-juice");
var btn = document.getElementById("play-pause");
function togglePlayPause() {
if (video.paused) {
btn.className = "pause";
video.play();
} else {
btn.className = "play";
video.pause();
}
}
btn.onclick = function() {
togglePlayPause();
};
Here is a screen shot of the red bar that i wish to only be displayed on hover:
https://imgur.com/AqtYNg4
Any help appreciated and thanks in advance.
(1)
"When you click on the play button, then nothing happens as it does not play the video."
You need to attach a listener to your button (listening for a "click" event).
<button id="play-pause" onClick="togglePlayPause();"> </button>
Then that should respond to your function togglePlayPause like this...
function togglePlayPause()
{
if (video.paused) { video.play(); btn.className = "pause"; }
else { video.pause(); btn.className = "play"; }
}
(2)
"Also I have got a red bar on the video as the progress, which is displayed all the time, but I only want it to be displayed on hover"
Simply add a "Hover" rule to the CSS of your target element.
.myDivID :hover {
//some hover-related code here...
}
The final setup could look like:
a) The target div is styled to have zero opacity (now is fully transparent).
<div class="blue-bar" style="opacity: 0">
b) Then your CSS rules would be like below (where opacity is animated to increase to 1.0)...
.blue-bar{
height: 10px;
top: 0;
left:0;
width: 100%;
background: #000;
}
.blue-bar:hover {
opacity: 1.0;
transition: transform 1.5s;
}
.blue-juice{
height:10px;
background-color: #ff0000;
}
In one of my projects, I have requirement of multiple pop up div's on the same page. That means when user clicks on a link, some content should open in a pop up. There will be many such links with their own pop ups. With little knowledge of javascript, I have tried to write a javascript for it but it works only for one pop up. When I click on second, third... links, only first pop up opens rather than opening second, third... pop ups. Here is my code. Please tell the modifications to it.
<!DOCTYPE html>
<html >
<head>
<script>
window.document.onkeydown = function (e)
{
if (!e)
{
e = event;
}
if (e.keyCode == 27)
{
lightbox_close();
}
}
function lightbox_open()
{
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close()
{
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<style>
#fade
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light
{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
</style>
</head>
<body>
Open 1
<div id="light">div 1</div>
<div id="fade" onClick="lightbox_close();"></div>
Open 2
<div id="light">div 2</div>
<div id="fade" onClick="lightbox_close();"></div>
Open 3
<div id="light">div 3</div>
<div id="fade" onClick="lightbox_close();"></div>
</body>
</html>
Here's a way to achieve what you want. I'm sure it can be improved, but it's up to you then.
First, IDs should be unique across the page. If you want to group elements, give them a shared class instead.
With the changes, your HTML would look like this:
Open 1
<div class="light">div 1</div>
<div class="fade" onClick="lightbox_close()"></div>
Open 2
<div class="light">div 2</div>
<div class="fade" onClick="lightbox_close()"></div>
Open 3
<div class="light">div 3</div>
<div class="fade" onClick="lightbox_close()"></div>
Your CSS:
html, body {
width: 100%;
height: 100%;
}
.fade {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.light {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
And your Javascript:
window.document.onkeydown = function (e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
// Note that the function is receiving the clicked element reference.
function lightbox_open(el) {
window.scrollTo(0,0);
// All the anchors that have a class lightbox.
var anchors = document.querySelectorAll('a.lightbox');
// All the elements with class light.
var light = document.querySelectorAll('.light');
// All the elements with class fade.
var fade = document.querySelectorAll('.fade');
// Iterate over the anchors elements.
for (var i = 0; i < anchors.length; i++) {
// If the anchor matches the clicked one.
if (anchors[i] == el) {
// Look for the light and fade with the same index
// and display them.
light[i].style.display = 'block';
fade[i].style.display = 'block';
}
}
}
function lightbox_close() {
// All the elements with class light or fade.
var els = document.querySelectorAll('.light, .fade');
// Loop through the list.
for (var i = 0; i < els.length; i++) {
// Hide them.
els[i].style.display = 'none';
}
}
Demo