I have a JavaScript to open a DIV as popup.
But now I want to open several different popups from different DIVS and I can't get it to work properly.
I use the following JavaScript:
<script>
window.onload = function()
{
var show = document.getElementById('show-div');
var hide = document.getElementById('hide-div');
var popup = document.getElementById('popup-div');
show.onclick = function(e)
{
popup.style.visibility = 'visible';
return false;
}
hide.onclick = function(e)
{
popup.style.visibility = 'hidden';
return false;
}
}
</script>
and for the div I use the followin code:
<a id="show-div" href="#">link</a>
<div id="popup-div">
<div id="popup-header">
<div id="popup-title">...Popup title...</div>
<a id="hide-div" href="#">X</a></div>
<div id="popup-body">
<p>This is the content of the div....</p>
</div>
</div>
This works for 1 link but even when I use a different DIV ID's (and associated var element like "var popup1 = document.getElementById('popup-div1');" and popup1 onclick events) I can't get it work properly.
How can I make it work with several links with all it's own DIV with content.
(as I can't answer my own question, here is how I fixed it)
I made it work with the following code:
<script>
window.onload = function()
{
var show = document.getElementById('show-div');
var show2 = document.getElementById('show-div2');
var hide = document.getElementById('hide-div');
var hide2 = document.getElementById('hide-div2');
var popup = document.getElementById('popup-div');
var popup2 = document.getElementById('popup-div2');
show.onclick = function(e)
{
popup.style.visibility = 'visible';
return false;
}
show2.onclick = function(e)
{
popup2.style.visibility = 'visible';
return false;
}
hide.onclick = function(e)
{
popup.style.visibility = 'hidden';
return false;
}
hide2.onclick = function(e)
{
popup2.style.visibility = 'hidden';
return false;
}
}
</script>
and
<a id="show-div" href="#">link</a>
<div id="popup-div">
<div id="popup-header">
<div id="popup-title">...Popup title...</div>
<a id="hide-div" href="#">X</a></div>
<div id="popup-body">
<p>This is the content of the div....</p>
</div>
</div>
<a id="show-div2" href="#">link2</a>
<div id="popup-div2">
<div id="popup-header">
<div id="popup-title">...Popup title2...</div>
<a id="hide-div2" href="#">X</a></div>
<div id="popup-body">
<p>This is the content of the div2....</p>
</div>
</div>
I believe following is that you want....
Demo
JS Code:
var show = document.getElementById('show-div');
var hides = document.getElementsByClassName('hide-div');
var popups = document.getElementsByClassName("popup-div");
show.onclick = function (e) {
for (var i = 0; i < popups.length; i++) {
popups[i].style.visibility = 'visible';
}
return false;
}
for (var j = 0; j < hides.length; j++) {
hides[j].onclick = function (e) {
this.parentNode.parentNode.style.visibility = 'hidden';
return false;
}
}
HTML Code:
<a id="show-div" href="#">Show/Hide</a>
<div id="popup-div" class="popup-div">
<div id="popup-header">
<div id="popup-title">...Popup title...</div>
<a id="hide-div" class="hide-div" href="#">X</a>
</div>
<div id="popup-body">
<p>This is the content of the div....</p>
</div>
</div>
<div id="popup-div" class="popup-div">
<div id="popup-header">
<div id="popup-title">...Popup title...</div>
<a id="hide-div" class="hide-div" href="#">X</a>
</div>
<div id="popup-body">
<p>This is the content of the div....</p>
</div>
</div>
Related
I have the following function which I have used for hiding and showing respective pages based on different button clicks. Now I am using JQuery and I want to be able to do the same thing but just with JQuery. There must be something wrong the way I am translating it cause it doesn't work.
function showPages() {
var aBtnShowPages = document.getElementsByClassName("btnShowPage");
// this is an array
for (var i = 0; i < aBtnShowPages.length; i++) {
aBtnShowPages[i].addEventListener("click", function () {
//console.log( "WORKS" );
// Hide the pages
var aPages = document.getElementsByClassName("page");
for (var j = 0; j < aPages.length; j++) {
aPages[j].style.display = "none";
}
var sDataAttribute = this.getAttribute("data-showThisPage");
//console.log( sDataAttribute );
document.getElementById(sDataAttribute).style.display = "flex";
});
}
}
JQuery version:
function showPages() {
let $aBtnShowPages = $(".btnShowPage");
// this is an array
for (let i = 0; i < $aBtnShowPages.length; i++) {
$aBtnShowPages[i].click(function () {
//console.log("WORKS");
// Hide the pages
let $aPages = $('.page');
for (let j = 0; j < $aPages.length; j++) {
$aPages[j].hide();
}
let $sDataAttribute = $(this).attr("data-showThisPage");
//console.log( $sDataAttribute );
$(sDataAttribute).show();
});
}
}
This shows how to toggle between those with "false" and those with "true" values. Pretty verbose and could simply be one function using .toggle(true) instead.
I put some fake markup in place since you provided none.
$(function() {
$(".btnShowPage").on("click", function() {
let $aPages = $('.page');
$aPages.hide();
$aPages.filter(function() {
return $(this).data("showThisPage") == true;
}).show();
}).trigger('click'); // set initial state ;
$(".btnHidePage").on("click", function() {
let $aPages = $('.page');
$aPages.show();
$aPages.filter(function() {
return $(this).data("showThisPage") == true;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page" data-show-this-page="true">showme1</div>
<div class="page" data-show-this-page="true">showme2</div>
<div class="page" data-show-this-page="true">showme3</div>
<div class="page" data-show-this-page="false">showme4</div>
<div class="page" data-show-this-page="true">showme5</div>
<div class="page" data-show-this-page="true">showme6</div>
<button id="showem" class="btnShowPage" type="button">showem</button>
<button id="hideem" class="btnHidePage" type="button">hideem</button>
Just show those with true set.
$(function() {
$(".btnShowPage").on("click", function() {
// just show those with true set
$('.page').each(function(index) {
let showme = $(this).data("showThisPage") == true;
$(this).toggle(showme);
});
}).trigger('click'); // set initial state ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page" data-show-this-page="true">showme1</div>
<div class="page" data-show-this-page="true">showme2</div>
<div class="page" data-show-this-page="true">showme3</div>
<div class="page" data-show-this-page="false">showme4</div>
<div class="page" data-show-this-page="true">showme5</div>
<div class="page" data-show-this-page="true">showme6</div>
<button id="showem" class="btnShowPage" type="button">showem</button>
Show just a targeted element and hiding/showing all:
$(function() {
$(".btnShowPage").on("click", function() {
// just show those with the target
let showTarget = $(this).data("target");
switch (showTarget) {
case -1:
$('.page').hide();
break;
case "all":
$('.page').show();
break;
default:
$('.page').eq(showTarget).toggle(true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page">showme0</div>
<div class="page">showme1</div>
<div class="page">showme2</div>
<div class="page">showme3</div>
<div class="page">showme4</div>
<div class="page">showme5</div>
<div class="page">showme6</div>
<button id="showem" class="btnShowPage" type="button" data-target="all">showem all</button>
<button id="showem" class="btnShowPage" type="button" data-target="1">showem 1</button>
<button id="showem" class="btnShowPage" type="button" data-target="2">showem 2</button>
<button id="showem" class="btnShowPage" type="button" data-target="5">showem 5</button>
<button id="showem" class="btnShowPage" type="button" data-target="-1">hide all</button>
I'm wondering how to change the color of an active page? This function isn't working and I don't really want to make it as input type="button"... as it looks way worse. What am I missing here?
<form1>
<script>
function btnColor(btn, color) {
var property = document.getElementById(btn)
property.style.backgroundColor = color;
}
</script>
<div class="pagination">
<a id="pageOne" onclick="btnColor('pageOne','#ffcce9');">1</a>
<a id="pageTwo" onclick="btnColor('pageTwo','#ffcce9');">2</a>
<a id="pageThree" onclick="btnColor('pageThree','#ffcce9');">3</a>
</div>
</form1>
let's try this ( on click event in html is not a good practice )
<form1>
<div class="pagination">
<a id="pageOne">1</a>
<a id="pageTwo">2</a>
<a id="pageThree">3</a>
</div>
</form1>
<script>
links = document.querySelectorAll("a")
links.forEach(function (item) {
item.addEventListener('click', function () {
//reset the color of other links
links.forEach(function (item) {
item.style.backgroundColor = '#fff'
})
// apply the style to the link
this.style.backgroundColor = '#ffcce9'
});
})
</script>
<form1>
<script>
window.addEventListener("onload",function(){
console.log("loaded");
["pageOne","pageTwo","pageThree"].forEach(function(id){
console.log(id);
document.getElementById(id).addEventListener("click",function(){
console.log(this);
this.style.backgroundColor=,'#ffcce9';
});
});
});
</script>
<div class="pagination">
<a id="pageOne" >1</a>
<a id="pageTwo" >2</a>
<a id="pageThree" >3</a>
</div>
</form1>
Simply use the js onclick to listen to all clicks...
You can loop through all your page tabs and determine if they are active. If not, remove the css class from the inactive ones and add a css class on the active one
Example below
.color{
background:#ffcce9
}
.pages:hover{
cursor:pointer
}
<form1>
<script>
function btnColor(btn, color) {
property = document.getElementById(btn);
property.classList.add("color");
var all_pages = document.getElementsByClassName("pages");
for (x = 0; x < all_pages.length; ++x) {
if (all_pages[x].classList.contains("color") && all_pages[x] != property) {
all_pages[x].classList.remove("color");
} //end if
}
}
</script>
<div class="pagination">
<a id="pageOne" class="pages" onclick="btnColor('pageOne','#ffcce9');">1</a>
<a id="pageTwo" class="pages" onclick="btnColor('pageTwo','#ffcce9');">2</a>
<a id="pageThree" class="pages" onclick="btnColor('pageThree','#ffcce9');">3</a>
</div>
</form1>
The whole point is to change the background color of the page, right? This should do the trick. As mentioned previously, onclick is not great practice.
<body>
<button data-color="black">Page 1</button>
<button data-color="blue">Page 2</button>
<script>
var buttons = document.querySelectorAll('button');
buttons.forEach(function (button) {
button.addEventListener('click', function () {
var color = button.dataset.color;
document.body.style.background = color;
});
});
</script>
</body>
http://jsbin.com/guxoyok/edit?html,js,console,output
This code is supposed to be looping and adding multiple divs, but it isn't working. When I click it, only one div appears. If I click again, nothing happens.
<body>
<div class="start" >
<div id = "coba">
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function () {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Thanks for your help
Your code does not work because you did not do anything with the variable "i" in the for statement. If you look at the fiddles of user2181397 & meghan Armes you will see how they added a line in the script to put it to work.
I tested the below in my IDE and it works just fine:
<body>
<div class="start" style="margin-top:50px; color:black;">
<div id = "coba">
<p>Click Me</p>
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function() {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
di.innerHTML=i;
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
My html code looks like this:
<div id="register" class="dropdown">
<button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button>
<div id="container1" style="display:'none';">
</div>
</div>
<div id="login" class="dropdown">
<button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button>
<div id="container2" style="display:'none';"></div>
</div>
and this is my js code:
function toggle_visibility(id) {
var x = document.getElementById(id); {
if(x.style.display == 'block') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
}
The question is, How can I make these divs to be "when one div is visible, the other one is hidden" ?
sorry for my bad English lang :# :3
Firstly add a class to each of the divs here i have it as container
then hide all of them, and show the 1 specific div
<div id="register" class="dropdown">
<button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button>
<div id="container1" class='container' style="display:none;">test
</div>
</div>
<div id="login" class="dropdown">
<button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button>
<div id="container2" class='container' style="display:none;">test
</div>
</div>
<script>
function toggle_visibility(id) {
var x = document.getElementById(id);
var divsToHide = document.getElementsByClassName('container'); //divsToHide is an array so we loop through them
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.display = "none";
}
x.style.display = 'block';
}
</script>
If you only need these two divs, you can simply use their div id's and a simple conditional:
function toggle(divNumber) {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
if (divNumber == 1) {
div1.style.display = 'none';
div2.style.display = 'block';
} else {
div2.style.display = 'none';
div1.style.display = 'block';
}
}
Fiddle:
https://jsfiddle.net/8480twew/
I have 10 different buttons and i want to show a hidden div exactly down from the button the user pressed.the div is currenlty showing exactly at the block the code of div is istead of taking new cords top: left:
THE function call:
<img style="position:relative;float:right;padding-top:7px;" onclick="find_pos(this)" src="images/view_comments.png"></li></a>
function find_pos(ele) {
var x=0;
var y=0;
while(true){
x += ele.offsetLeft;
y += ele.offsetTop;
if(ele.offsetParent === null){
break;
}
ele = ele.offsetParent;
}
hidden_comment_form.style.display='block';
hidden_comment_form.style.top=y;
hidden_comment_form.style.left=x;
}
I give you 2 options :
option 1 :
<div class="main">
<button class="btn">a</button>
<div class="toggle"> a toggle this </div>
</div>
<div class="main">
<button class="btn">b</button>
<div class="toggle"> b toggle this </div>
</div>
<script>
$(document).ready(function() {
$('button.btn').on('click', function() {
var $div = $(this).siblings('.toggle');
$div.toggle();
})
})
</script>
option 2:
<button class="btn">a</button>
<div class="toggle"> a toggle this </div>
<button class="btn">b</button>
<div class="toggle"> b toggle this </div>
<script>
$(document).ready(function() {
$('button.btn').on('click', function() {
var $div = $(this).next();
$div.toggle();
})
})
</script>
i suggest option 1 is better