I want to select multiple modals through Javascript. I have already set an id on every modal.
So far I am able to loop through the elements but I don't know how to grab every id of modals.
Here is my HTML:
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Here is my Javascript:
const projects = document.querySelectorAll('.projects > div');
for(var i = 0; i< projects.length;i++){
var thisBtn = projects[i];
thisBtn.addEventListener('click', ()=> {
var modal = document.getElementById(this.dataset.modal);
modal.style.display = 'block';
}, false);
}
I saw this.dataset.modal implement at one of the solutions. But unfortunately, it didn't work. How can I grab that particular id of element when its parent modal is clicked.
Any help would be appreciated.
Code for closing modal when clicking outside:
window.addEventListener('click',function(){
for(var i = 0; i<coffeeGrounds.length; i++){
var x = coffeeGrounds[i].getAttribute('data-modal');
var a = document.getElementById(x);
console.log(a);
if(a.style.display === 'block'){
a.setAttribute('style','display:none');
}
}
});
Open modeal: The first loop puts "addEventListener" which takes date information with the ID of the modal.
Close modal: The second loop takes all the "close" buttons. Puts "addEventListener" when this button is pressed, it applies a style display:none; to the parent item
const projects = document.querySelectorAll('.projects > div');
for (var i = 0; i < projects.length; i++) {
projects[i].addEventListener('click', function () {
var x = this.getAttribute('data-modal');
document.getElementById(x).setAttribute('style', 'display:block;');
});
}
const close = document.querySelectorAll('.close');
for (var i = 0; i < close.length; i++) {
close[i].addEventListener('click', function () {
var x = this.parentElement;
x.setAttribute('style', 'display:none;');
});
}
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1" style="display:none;">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2" style="display:none;">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
There is no this in arrow (=>) function syntax, use normal function syntax instead.
Demo:
const projects = document.querySelectorAll('.projects > div');
for(var i = 0; i < projects.length;i++){
var thisBtn = projects[i];
thisBtn.addEventListener('click', function() {
var modal = document.getElementById(this.dataset.modal);
modal.style.display = 'block';
console.log('You have clicked: ' +this.dataset.modal);
}, false);
}
.project-card{
display: none;
}
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Related
I'm trying to build a simple game where the player can move between multiple levels.
The player is an image in my case i tried to move it by using javascript but it's not moving! I have tried multiple websites suggestions but none of them has worked
var avatar = document.getElementByClassName("alien-avatar");
var avatarStyle = document.getComputedStyle("alien-avatar");
var topValue = avatarStyle.getPropertyValue("top").replace("px", "");
function moveDown(element) {
var eStyle = window.getComputedStyle(element);
var topValue = eStyle.getPropertyValue("top").replace("px", "");
element.style.top = (Number(topValue) + 20) + "px";
}
moveDown("element");
// Subtract from the top style attribute to go up
function moveUp(element) {
var elStyle = window.getComputedStyle(element);
var topValue = elStyle.getPropertyValue("top").replace("px", "");
element.style.top = (Number(topValue) - 20) + "px";
}
// Add to the left style attribute to go right
function moveRight(element) {
var elStyle = window.getComputedStyle(element);
var leftValue = elStyle.getPropertyValue("left").replace("px", "");
element.style.left = (Number(leftValue) + 20) + "px";
}
// Subtract from the left style attribute to go left
function moveLeft(element) {
var elStyle = window.getComputedStyle(element);
var leftValue = elStyle.getPropertyValue("left").replace("px", "");
element.style.left = (Number(leftValue) - 20) + "px";
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="main-game-table">
<div class="top-items-wrapper">
<div class="profile">
<div class="avatar"></div>
<span class="nickname">Nickname</span>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Complated Total Missions</div>
</div>
<div class="settings-btn">
<div class="setting-log"></div>
<ul class="drop-menu show-sett-drop">
<li class="setting-btn">Settings</li>
<li class="exit-btn">Exit</li>
</ul>
</div>
</div>
<!---->
<div class="game-planets">
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet1-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
</div>
<div class="celeb-message">
<span>GREAT!</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet2-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star.png" alt="">
</div>
<div class="celeb-message">
<span>nice!</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet3-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star.png" alt="">
<img src="images/mission-star.png" alt="">
</div>
<div class="celeb-message">
<span>keep it up</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet4-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star.png" alt="">
</div>
<div class="celeb-message">
<span>nice!</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="current-planet">
<div class="alien-avatar" style="
width:100%;
height:100%;
top:0px;
left:0px;
"><img src="images/default-avatar.png" alt=""></div>
<div class="box" style="--n:20;--b:5px;width:150px;--c:#2beeff"></div>
</div>
</div>
<div class="planet-containers"></div>
<div class="planet-containers"></div>
<div class="planet-containers"></div>
<div class="planet-containers"></div>
</div>
<button class="start-btn">start</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
any help would be highly appreciate it!
please note that im still a beginner in this field
You are using getComputedStyle to remember what the position of an element is, but I would recommend keeping track of your elements positions in your code and not just in the HTML/CSS. Just a short example:
let avatar = document.getElementById("alien-avatar");
let avatarx = 20;
let avatary = 20;
function movePlayerUp() {
avatary--;
avatar.style.top = avatary + "px";
}
Update
You can also use getBoundingClientRect to check an element's position in the DOM
function moveRight() {
let position = avatar.getBoundingClientRect();
let newposition = position.x + 10;
avatar.style.left = newposition + "px";
}
The player element needs an id.
<div id="alien-avatar"...></div>
Hi I am new to the world of Greasemonkey and JavaScript..
I want to replace every onclick function with a part of its related img src link
the source looks like this:
<div id="playlist_container">
<div id="video_container" onclick="playvid('a1a1a1a1a1',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('b2b2b2b2bb2',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
i want to replace the onclick 'playvid' a1a1a1a1a1 & b2b2b2b2bb2 & c3c3c3c3c3c3 ... with part of img src link
to become like this:
<div id="playlist_container">
<div id="video_container" onclick="playvid('ABCD',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('EFGH',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
Here's what i've tried so far:
var els = $("#playlist_container");
var cod = $("div#thumbnail img").prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
for(var i=0;i<els.length;i++){
var el = els[i];
el.innerHTML = el.innerHTML.replace(/playvid(.)(.)(\w+)(.)/gi, "playvideo('" + cod +"'");
}
this works for me but the issue is that it puts the first cod 'ABCD' to all the following 'playvid()' functions as shown below:
<div id="playlist_container">
<div id="video_container" onclick="playvid('ABCD',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('ABCD',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
another issue is when i try $("#video_container") it doesnt work i dont know why, I'm very confused and can't find anything on it
Your html has duplicate ID values which can cause issues when finding the correct element. Try using class if you want to target multiple elements.
This code only gets the first element value
var cod = $("div#thumbnail img").prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
Try this code and let me know how it goes
var images = $("div.thumbnail img");
images.each(function(img) {
var name = $(this).prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
var container = this.closest("div.video_container");
var evt = $(container).attr("onclick").replace(/playvid(.)(.)(\w+)(.)/gi, "playvideo('" + name +"'");
$(container).attr("onclick", evt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="playlist_container">
<div class="video_container" onclick="playvid('a1a1a1a1a1',3201)" class="playing">
<div class="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div class="title"></div>
<div class="synopsis">Vid 1</div>
</div>
<hr>
<div class="video_container" onclick="playvid('b2b2b2b2bb2',3202)" >
<div class="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div class="title"></div>
<div class="synopsis">Vid 2</div>
</div>
Can you please help me with this? How can I count the number of div's with 'image-item' class I have for each tabcontent and append the number to the html for the tablinks buttons corresponding to that data-id? something like London (2). Paris (1). Tokyo (3)
I have a simple example here
https://jsfiddle.net/cz87ph6w/
let handleClick = e => {
Array.from(document.querySelectorAll(".active"), e => e.classList.remove("active")); // remove `active` class from every elements which contains him.
e.target.classList.add("active");
document.querySelector(`div.tabcontent[data-id*="${e.target.dataset.id}"]`).classList.add("active");
};
Array.from(document.getElementsByClassName("tablinks"), btn => btn.addEventListener('click', handleClick, false));
<div class="first-tab-component">
<div class=" tab">
<button class="tablinks" data-id="1">London </button>
<button class="tablinks" data-id="2">Paris</button>
<button class="tablinks" data-id="3">Tokyo</button>
</div>
<div data-id="1" class="tabcontent">
<div class="image-item">
<img src="https://via.placeholder.com/150" />
</div>
<div class="image-item">
<img src="https://via.placeholder.com/150" />
</div>
</div>
<div data-id="2" class="tabcontent">
<div class="image-item">
<img src="https://via.placeholder.com/150" />
</div>
</div>
<div data-id="3" class="tabcontent">
<div class="image-item">
<img src="https://via.placeholder.com/150" />
</div>
<div class="image-item">
<img src="https://via.placeholder.com/150" />
</div>
<div class="image-item">
<img src="https://via.placeholder.com/150" />
</div>
</div>
</div>
You can modify your loop slightly:
Array.from(document.getElementsByClassName("tablinks"), btn => {
btn.addEventListener('click', handleClick, false);
const count = document.querySelectorAll(`div[data-id*="${btn.dataset.id}"] .image-item`).length;
btn.appendChild(document.createTextNode(` (${count})`));
});
You'll then get something like this for your button texts:
London (2)
Paris (1)
Tokyo (3)
After a look I foun some options
JQuery:
$('.tabcontent').each(function(){
var count = $(this).children().length;
//add count variable to correct tab
})
Plain JS:
var tabs = document.getElementsByClassName('tabcontent');
for(var i = 0; i < tabs.length; i++)
{
var count = tabs[i].childElementCount;
//add count variable to correct tab
}
I just need each div to fade in once, doesn't need to fade out. Only .landing and .about fade in. .images and .contact don't fade in at all, but I can still click the invisible button on the .images div. If you need my CSS for the ids, please let me know. I'm still a JavaScript beginner, so this could be an easy fix.
<div class="landing">
<div class="content" id="fadein"> <!-- "fadein" is for my onload function -->
<div class="header">
<h1 style="margin: 0;">Placeholder</h1>
<h4 style="margin: 0;">Placeholder</h4>
</div>
<div class="down">
<a href="#about">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="about"></a>
<div class="wrapper">
<div class="content" id="fadeinclick">
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<h3 style="margin: 0;">Placeholder</h3>
<div class="down">
<a href="#images">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="images"></a>
<div class="wrapper">
<div class="content" id="fadeinclick"> <!-- first div that won't fade in -->
<h3>Images</h3>
<div class="activity">
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
</div>
<div class="down">
<a href="#contact">
<img src="down.png">
</a>
</div>
</div>
</div>
<a id="contact"></a>
<div class="wrapper">
<div class="content" id="fadeinclick"> <!-- second div that won't fade in -->
<h3>Contact</h3>
<div class="activity">
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
<img src="placeholder.png"></img>
</div>
</div>
</div>
<!-- Fade scripts -->
<script>
window.onload = function() {
document.getElementById("fadein").style.opacity = 1;
}
</script>
<script>
window.onclick = function() {
document.getElementById("fadeinclick").style.opacity = 1;
}
</script>
opacity isn't a child of style, but rather a property. Just do
elem.style = "opacity:100%"
But keep in mind it won't fade. My advice?
var fade = 0
var elem = document.getElementById('imageId')
rate = 1
function step() {
fade = fade + 1
}
function start() {
if (fade < 100) {
step()
setInterval(function() {start}, rate)
};
};
Each text belongs to a specific image, so when someone is moving the cursor over that image. The text should be shown up and when the cursor goes mouseout the text should be hidden. No jQuerty required please, must be in pure JavaScript. Anyone an idea how I should fix that.
function show() {
document.getElementsByClassName("text").style.visibility = "visible";
}
function hide() {
document.getElementsByClassName("text").style.visibility = "hidden";
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="www.bbc.com" target="_blank" class="image" onmouseover="show()" onmouseout="hide()">
<img src="img/a-print-screen.png" class="project" alt="a-print-screen"/>
<div class="text">A-picture</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="www.cnn.com" target="_blank" class="image" onmouseover="show()" onmouseout="hide()">
<img src="img/x-picture.png" class="project" alt="x-print-screen"/>
<div class="text">x-picture</div>
</a>
</div>
</div>
</div>
The command document.getElementsByClassName("text"); returns a List of elements opposed to document.getElementById("text"); which returns just one element.
So to use one element to change its style you have to use array notation document.getElementsByClassName("text")[0] for example for the first element.
I used a for loop to iterate over every list element in the code sample below:
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="www.bbc.com" target="_blank" class="image" >
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" class="project" alt="a-print-screen" onmouseover="show('text1')" onmouseout="hide('text1')"/>
<div class="text1">A-picture</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="www.cnn.com" target="_blank" class="image" >
<img src="https://www.dreamhost.com/blog/wp-content/uploads/2015/10/DHC_blog-image-01-300x300.jpg" class="project" alt="x-print-screen" onmouseover="show('text2')" onmouseout="hide('text2')" />
<div class="text2">x-picture</div>
</a>
</div>
</div>
</div>