I have a script when the button is clicked. An image will pop up..
And I want to have multiple buttons and multiple images but same div to have same animation on script.
But the problem is, the script only work on just 1 button.
And it doens't show the image.
HTML CODE
<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
<div id="PopUpText">Popup contents here</div>
<button id="CloseBtn">Close</button>
</div> </div>
<div id="img2">
<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup" img src="newfinal/images/portfolio6.jpg">
<div id="PopUpText">Popup contents here</div>
<button id="CloseBtn">Close</button>
</div> </div>
<div>
some other content that will be behind the popup
</div>
Javascript Code
window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("CloseBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
}
};
Here's the demo..
http://jsfiddle.net/j4c7U/
You have the same id for both buttons. The id should be unique for each element.
Change LearnMoreBtn of the second button to LearnMoreBtn1 and check.
Here is the Fiddle
Because you use same id for all the buttons. getElementById will always return the first element with given id.
You can simplify by using query:
http://jsfiddle.net/j4c7U/129/
<button class="LearnMoreBtn">Learn More</button>
<button class="LearnMoreBtn">Learn More2</button>
$('.LearnMoreBtn').click(function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
});
Related
I want to show-hide the display of these layers with a button click. I can't figure out how to do it with 2 buttons, and 2 divs...
Html:
<div id="first">This is the FIRST div</div>
<div id="second">This is the SECOND div</div>
<button id="toggle">Show first div and hide second div</button>
<button id="toggletoo">Show second div and hide first div</button>
Css:
#first {
display: none;
}
#second {
display: none;
}
Js:
const targetDiv = document.getElementById("first");
const btn = document.getElementById("toggle");
btn.onclick = function () {
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "block";
} else {
targetDiv.style.display = "none";
}
}
https://codepen.io/MaaikeNij/pen/YzrgbQw
Try with the following code:
#first{
display: block; /* <--- change */
}
#second {
display: none;
}
const firstDiv = document.getElementById("first");
const secondDiv = document.getElementById("second");
document.getElementById("toggle").onclick = function () {
if (firstDiv.style.display === "none") {
firstDiv.style.display = "block";
secondDiv.style.display = "none";
} else {
firstDiv.style.display = "none";
secondDiv.style.display = "block";
}
}
There's lots of ways to do this. One common way I've seen in various templates is to add and remove classes. Another way is to call the function from the button's onclick attribute. But my favorite is to write a function that requires no editing of the div HTML because I don't want to interfere with the HTML guy's work, I just want to put functioning code in there. (BTW, I am positive there is a more elegant way to write this, but here ya go!)
const firstDiv = document.querySelector("#first");
const secondDiv = document.querySelector("#second");
const firstButt = document.querySelector("#toggle");
const secondButt = document.querySelector("#toggletoo");
firstButt.addEventListener("click",toggleDivShowHide);
secondButt.addEventListener("click",toggleDivShowHide);
function toggleDivShowHide() {
if (firstDiv.style.display !== "none") {
firstDiv.style.display = "none";
secondDiv.style.display = "block";
} else {
firstDiv.style.display = "block";
secondDiv.style.display = "none";
}
}
You're saying "if the first div is set to none, then set it to block and set the second div to none. Otherwise, do the opposite."
I tried something different, this is working :)))
<div id="first" style="display:none;"> This is the FIRST div</div>
<div id="second" style="display:none;"> This is the SECONDdiv</div>
<input type="button" name="answer" value="Show first div and hide second div" onclick="showDivOne()" />
<input type="button" name="answer" value="Show second div and hide first div" onclick="showDivTwo()" />
function showDivOne() {
document.getElementById('first').style.display = "block";
document.getElementById('second').style.display = "none";
}
function showDivTwo() {
document.getElementById('second').style.display = "block";
document.getElementById('first').style.display = "none";
}
https://codepen.io/MaaikeNij/pen/vYeMGyN
Correction: you should add event Listener for both toggle & toggletoo.
Solution: solution with reusable code.
const Toggles = document.querySelectorAll('.toggle');
const Hides = document.querySelectorAll('.hide');
Toggles.forEach((el) => {
el.addEventListener("click", (e) => {
Hides.forEach((el) => {
el.parentElement.firstElementChild.classList.add('hide');
});
e.target.parentElement.firstElementChild.classList.toggle('hide');
});
})
.hide {
display: none;
}
<div>
<div class="hide">This is the FIRST div</div>
<button class="toggle">Show first div and hide first div</button>
</div>
<div>
<div class="hide">This is the SECOND div</div>
<button class="toggle">Show second div and hide first div</button>
</div>
<div>
<div class="hide">This is the Third div</div>
<button class="toggle">Show Third div and hide first div</button>
</div>
<div>
<div class="hide">This is the Fourth div</div>
<button class="toggle">Show Fourth div and hide first div</button>
</div>
For precisely such cases, javascript has the toggle function. I rewrite your code a little bit.
const btns = document.querySelectorAll(".toggleBtn");
btns.forEach(b => {
b.onclick = function (e) {
reset();
console.log(e.target.getAttribute('data-target'))
const target = e.target.getAttribute('data-target');
const t = document.querySelector('#' + target);
t.classList.toggle('hide');
}
});
function reset() {
const divs = document.querySelectorAll('.out');
divs.forEach(d => d.classList.add('hide'))
}
.hide {
display: none;
}
<div id="first" class="out hide">This is the FIRST div</div>
<div id="second" class="out hide">This is the SECOND div</div>
<button class="toggleBtn" data-target="first">Show first div and hide second div</button>
<button class="toggleBtn" data-target="second">Show second div and hide first div</button>
I'm new on here aswell as new to HTML, CSS and JS.I want to create a button that makes one visible while at the same time making four other 's invisible. I've tried
function ShowGraphics() {
element = document.querySelector("#Graphics");
element.style.visibility = "visible";
element = document.querySelector("#Photos");
element.style.visibility = "hidden";
element = document.querySelector("#Renders");
element.style.visibility = "hidden";
element = document.querySelector("#Videos");
element.style.visibility = "hidden";
element = document.querySelector("#Mods");
element.style.visibility = "hidden";
}
before - including its' variations for each button- , but nothing happened. I've also tried giving each "element" a unique name, made no difference. Maybe one of you could help me out there. Thx in Advance :)
Try this code below
function ShowGraphics() {
element = document.querySelector("#Graphics");
element.style.display= "block";
element = document.querySelector("#Photos");
element.style.display = "none";
element = document.querySelector("#Renders");
element.style.display = "none";
element = document.querySelector("#Videos");
element.style.display = "none";
element = document.querySelector("#Mods");
element.style.display = "none";
}
<div id="Graphics">
Hello
</div>
<div id="Photos">
Hello
</div>
<div id="Renders">
Hello
</div>
<div id="Videos">
Hello
</div>
<div id="Mods">
Hello
</div>
<button onclick="ShowGraphics()">Click</button>
And if you dont to change the position of button this is your solution :
function ShowGraphics() {
document.getElementById("Graphics").style.visibility = "visible";
document.getElementById("Photos").style.visibility = "hidden";
document.getElementById("Renders").style.visibility = "hidden";
document.getElementById("Videos").style.visibility = "hidden";
document.getElementById("Mods").style.visibility = "hidden";
}
<div id="Graphics">
Hello
</div>
<div id="Photos">
Hello
</div>
<div id="Renders">
Hello
</div>
<div id="Videos">
Hello
</div>
<div id="Mods">
Hello
</div>
<button onclick="ShowGraphics()">
Click
</button>
I am looking for a way to avoid rewriting the same code again and again.
I am making a web page that has divs with hide and show option, with the help of a button you toggle between hide and show. I found an easy way to achieve the effect with this code:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
This works perfectly but gets a bit tedious when you have a dozen or more divs with said effect. Is there a way to avoid having to rewrite the function for each and every div?
Thank you! :)
Easy, parameterize the id:
function myFunction(divId) {
var x = document.getElementById(divId);
and in the HTML pass the id to the function:
<button onclick="myFunction('myDIV')">Try it</button>
<div id="myDIV"> ...</div>
<button onclick="myFunction('myOtherDIV')">Try it</button>
<div id="myOtherDIV"> ...</div>
... and so on ...
You can keep one single function and handle as many divs as you want.
You could run the javascript function with a parameter. So you only have one function and then you only need to change the parameter name. See the example below.
function myFunction(div) {
var x = document.getElementById(div);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction('myDIV')">Try it</button>
<button onclick="myFunction('myDIV2')">Try it2</button>
<div id="myDIV">
This is my DIV element.
</div>
<div id="myDIV2">
This is my DIV2 element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
Just pass the div id to a function
function toggleDiv(divId) {
var x = document.getElementById(divId);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
This works perfectly but gets a bit tedious when you have a dozen or
more divs with said effect
Create an array of such div ids to be toggled and iterate the same, for example
var divIds = ["myDIV1", "myDIV2", "myDIV3"];
divIds.forEach( s => toggleDiv(s) );
Pass a parameter into the function.
function myFunction(divName) {
var x = document.getElementById(divName);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction('myDIV')">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<button onclick="myFunction('myDIV2')">Try it</button>
<div id="myDIV2">
This is my DIV2 element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
using event target and operating relatively on elements, can do the task.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<hr>
<div class="wrapper">
<button onclick="myFunction(event)">Try first</button>
<div class="content">
This is my DIV element.
</div>
</div>
<hr>
<div class="wrapper">
<button onclick="myFunction(event)">Try second</button>
<div class="content">
This is my DIV element.
</div>
</div>
<hr>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction(event) {
var wrapper = event.target.parentElement;
var content = wrapper.querySelector('.content');
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
</script>
</body>
</html>
function myFunction() {
var x = document.getElementsByClassName("myDIV");
for (let i = 0; i < x.length; i++){
x[i].style.display = x[i].style.display == "none" ? "block" : "none";
}
}
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div class="myDIV">
This is my DIV element.
</div>
<div class="myDIV">
This is my DIV element.
</div>
<div class="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
function toggleVisibility(selector) {
const elements = document.querySelectorAll(selector);
elements.forEach( element => {
const isVisible = element.offsetHeight;
if (isVisible) {
element.setAttribute('hidden', '');
} else {
element.removeAttribute('hidden');
}
});
}
<button onclick="toggleVisibility('#myDIV')">Try it</button>
<button onclick="toggleVisibility('.toggle')">Try it with className</button>
<div id="myDIV">
This is my DIV element.
</div>
<div class="toggle">
This is my DIV element.
</div>
<div class="toggle">
This is my DIV element.
</div>
i want to hide button when i click it. But i want my content to be shown when i click the button.
#sectiontohide{
display: none;}
function toggle_div_fun(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
<button onclick="toggle_div_fun('sectiontohide');">Display Content</button>
<div id="sectiontohide">`
this is the content i'd like to show when i click the button and button should disappear
Try this:
function toggle_div_fun(id, btn) {
var divelement = document.getElementById(id);
btn.style.display = "none";
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
<button onclick="toggle_div_fun('sectiontohide', this);">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>
If you do not need to reuse the code, maybe this is simpler:
<button onclick="document.getElementById('sectiontohide').style.display='block'; this.style.display='none'">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>
I'm trying to get a javascript popup on my webpage and it's not working. I've written it all out in jsfiddle - http://jsfiddle.net/68vGZ/
and the code is here:
HTML
<div id="header-links">
<button id="aboutinfo">About</button>
<div id="overlay"></div>
<div id="popup">
<p>About Info Here</p>
<button id="closeaboutinfo">Close</button>
</div>
<button id="contactinfo">Contact</button>
<div id="overlay"></div>
<div id="popup">
<p>Contact with this email address</p>
<button id="closecontactinfo">Close</button>
</div>
</div>
CSS
#overlay {
display:none;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#000;
opacity:0.5;
z-index:99999;
}
#popup {
display:none;
position:fixed;
left:50%;
top:50%;
width:300px;
height:150px;
margin-top:-75px;
margin-left:-150px;
background:#FFFFFF;
border:2px solid #000;
z-index:100000;
}
JavaScript
window.onload - function () {
document.getElementById("aboutinfo").onclick = function () {
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("closeaboutinfo").onclick = function () {
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
};
document.getElementById("contactinfo").onclick = function () {
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("closecontactinfo").onclick = function () {
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
};
}
The buttons show and the text is hidden, but i just can't work out why they won't trigger... Thanks for your help!
Three problems:
Firstly, this isn't valid:
window.onload - function () {
^
Your - symbol needs to be changed to a =:
window.onload = function () {
Secondly you have multiple elements with the same id attribute - this is invalid HTML and your JavaScript will only detect the first matched element. You should change these to class attributes and use getElementsByClassName instead of getElementById.
Thirdly, you need to tell JSFiddle to place your JavaScript in the document body.
Fixed JSFiddle demo.
I would look into using Bootstrap. They make it easy for you to create nice looking popups with rich functionality right out of the box. Here is a link where you can get bootstrap http://getbootstrap.com
They have much more to offer besides nice popups (modals). Definitely worth checking out even if this answer doesn't help you out.