I found this code while looking for a way to create popups and it does work but I am trying to figure out how make it work with multiple dynamically created divs.
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});
I would like to be able to use multiple buttons to control individual divs such as a button with id "pop1" will open the div "popup1" and button with id "pop2" will open div with id "popup2" etc.
<button id="pop1">Open popup</button>
<button id="pop2">Open popup</button>
<div id="popup1" class="popup">
<h2>This is my popup 1</h2>
<button name="close">Close popup</button>
</div>
<div id="popup2" class="popup">
<h2>This is my popup2</h2>
<button name="close">Close popup</button>
</div>
I create the buttons and divs dynamically with php so there is no set amount and I would like to make sure that they all work no matter how many are generated. For each new div it increments the number on the id like you can see above.
I tried doing this but the buttons will print everything in all available divs because I am not targeting them individually. I can't figure that part out.
$(document).ready(function () {
$("button[id*=pop]").on("click", function() {
popupOpenClose("[id*=popup]");
});
});
Anyone have any suggestions? Thanks.
I have made some change on your html as it would be easy to get element this way
<button id="pop_1" class="btnpopUpOpen">Open popup</button>
<button id="pop_2" class="btnpopUpOpen">Open popup</button>
<div id="popup_1" class="popup">
<h2>This is my popup 1</h2>
<button name="close">Close popup</button>
</div>
<div id="popup_2" class="popup">
<h2>This is my popup2</h2>
<button name="close">Close popup</button>
</div>
Jquery Code:
$("button.btnpopUpOpen").on("click", function(e) {
e.preventDefault();
var myID=$(this).prop('id').split('_')[1];
popupOpenClose('div.popup_'+myID);
});
$("form button[name=close]").off().on('click',function(e){
e.preventDefault();
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(this).parent().hide();
});
Note: If your are trying to add div dynamically after page is loaded.Make sure to re-register your event as well
Related
I am trying to create a toggle on a sidebar so that the toggle button opens the sidebar. This works great on desktop, however, if I am using mobile, the toggle button gets hidden. Is it possible to add a close button in the sidebar which can close the sidebar without breaking the script? The script I have is:
<div id="sidebar">content</div>
<div id="filter-icon">Refine Selection <div id="filterswitch"></div></div>
<script>
jQuery(document).ready(function() {
jQuery("#filter-icon").click(function() {
jQuery("#filterswitch").toggleClass('active');
jQuery("#sidebar").toggleClass('show-sidebar');
});
});
</script>
Shouldn't be a problem, have you tried something like this?
<div id="sidebar"><button id="closeSidebar">Close</button></div>
<div id="filter-icon">Refine Selection <div id="filterswitch"></div></div>
<script>
const toggleSidebarAndSwitch = () => {
jQuery("#filterswitch").toggleClass('active');
jQuery("#sidebar").toggleClass('show-sidebar');
}
jQuery(document).ready(() => {
jQuery("#filter-icon").click(() => {
toggleSidebarAndSwitch()
});
jQuery("#closeSidebar").click(()=>{
toggleSidebarAndSwitch()
})
});
</script>
Yes it's possible just add another div in your sidebar like this:
<div id="sidebar">
content
<div class="filterswitch"></div>
</div>
<div id="filter-icon">
Refine Selection
<div class="filterswitch"></div>
</div>
If you ad the class filterswitch to both div's jQuery will automatically listen for clicks on both elements.
When clicking button on elements, overlay box only works with first one, not the rest
I tried already to add 2 classes but not working as I read that that might be the issue, but I am not able to make it work properly.
<div class="container">
<input type="button" value="Contactar ahora" id="Overly" class="overly"
/>
</div>
<div id="ogrooModel" class="modalbox ogroobox" >
<div class="dialog">
<button title="Close" onClick="overlay()" class="closebutton" id="close">close</button>
<div style="min-height: 150px;">
</div>
</div>
</div>
<script>
//only javascript
document.getElementById("Overly").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display = 'block';
}) ;
document.getElementById("close").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display= 'none';
});
</script>
What exactly to change in that code so the rest of elements display the box after clicking on button?
You don't need onClick="overlay()" for your close button, as you are already binding it with a click event listener in your script.
I have a button that toggles the playlistHolder div. In addition, when '.albumImage a' is selected, it also unhides the playlist. I am trying to change the text of the button to 'Show Playlist' if the playlist is hidden and 'Hide Playlist' if it is not hidden. I have tried click functions with if(('.playlist').is(:hidden)) but have not had any luck with getting it to work. I am new to Jquery so I understand that my code below can use much improvement, here is my setup now that works when the album image is selected as well as when the toggle button is selected without changing the text:
HTML
<div class="togglePlaylist">
<button id="togglePlaylistBT">Show/Hide Playlist</button>
<!-- POPUP LAUNCHER -->
</div>
<div class="playlistHolder">
<div class="componentPlaylist">
<div class="playlist_inner">
<!-- playlist items are appended here! -->
</div>
</div>
<!-- preloader -->
<div class="preloader"></div>
</div>
<div class="albumWrapper">
<div class="albumCovers">
<div class="albumImage"> <img class="img-responsive" src="media/music/Album_Covers/Swag_Brothers.jpg" alt="thumb" />
<p class="nowPlaying">Now Playing</p>
</div>
</div>
</div>
Javascript/JQuery
$('#togglePlaylistBT, .albumImage a').on('click', function() {
var $this = $('#togglePlaylistBT');
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide('slow');
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show('slow');
$this.text('Show Playlist');
}
});
Try this snippet of code:
$('.togglePlaylist button').on('click', function() {
var $this = $(this);
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide();
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show();
$this.text('Show Playlist');
}
});
Working JSFiddle
When you hide and show the playlist just run document.getElementById("togglePlaylistBT").value="Show Playlist";
For example:
function change()
{
var elem = document.getElementById("playlistButton");
if (elem.value=="Open Playlist") { elem.value = "Close Playlist"; closeBox(); }
else { elem.value = "Open Playlist"; openBox(); }
}
function openBox() {
alert("open");
}
function closeBox() {
alert("closed");
}
<input onclick="change()" type="button" value="Open Playlist" id="playlistButton"></input>
Make sure to change openBox() and closeBox() functions to your box code!
I have a dropdown menu activated on click.
I use toggle to activate it when you click on the .hello_panel
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello </div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
jQuery
$('.hello_panel').bind('click', function(){
$('.menu_popup').toggle();
})
if I click it it works fine, it does the show and hide effect when the .hello_panel
is clicked.
what I want is it to be shown if the .hello_panel is clicked and hidden back if when clicking anything else on the page except the .menu_popup
You can hide it whenever you click on the document
JavaScript
$(document).click(function () {
$('.menu_popup:visible').hide();
});
$('.hello_panel').bind('click', function (e) {
$('.menu_popup').toggle();
e.stopPropagation();
});
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello</div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
<div style="display:none" class="menu_popup">menu_popup</div>
Demo
http://jsfiddle.net/6bo1rjrt/16/
Another way if you don't want to stopPropagation is passing a call back function that registers a once time click listener to that document to hide the menu
$('.hello_panel').bind('click', function () {
$('.menu_popup').show(function () {
$(document).one('click', function () {
$('.menu_popup:visible').hide();
});
});
});
Demo
http://jsfiddle.net/6bo1rjrt/17/
I have a slew of buttons in different levels within a nested JQuery accordion. This is functioning kind of like a phone book, and when buttons are clicked, numbers are added to a communication tool.
I was hoping to put a button at the top of each sublevel in the accordion that would add all of the rest of the buttons within that sublevel to the "To:" field. I imagine there is an elegant way to do what I would otherwise be accomplishing by brute force in an ugly manner. Thanks!
<div id="accordion-nest">
<h3>First group</h3>
<div>
<button id="allGroupOne">Add all of Group One</button> <-----Button I want
<button id="Guy1">Biff 555-1111</button>
<button id="Guy2">Tagg 555-1112</button>
<button id="Guy3">Mitt 555-1113</button>
......
</div>
<h3>Second group</h3>
<div>
<button id="Guy13">Jeb 555-2222</button>
</div>
<h3>Third group</h3>
<div>
<button id="Guy33">Uncle Jesse 555-99999</button>
</div>
</div>
JS/JQuery
$('button').click(function () {
var last8 = (this.textContent).slice(-8);
if (pageNames == '') {
pageNames = (this.textContent).slice(0, -8);
} else {
pageNames = pageNames + " " + (this.textContent).slice(0, -8);
}
if ($('#pageTo').val() != '') {
$('#pageTo').val($('#pageTo').val()+', '+ areaCode + last8);
} else {
$('#pageTo').val(areaCode+last8);
}
}
I'd add the same class to all the 'Add All' buttons:
<button class="allGroup">Add all of Group One</button>
And would also add the same class to all the other phone buttons:
<button class="phone" id="Guy1">Biff 555-1111</button>
Also, add a class to the divs that contains each group, like this:
<div class="groupContainer">
Then, this would be the jquery when clicking an 'Add all' button:
$(".allGroupOne").click(function(){
var $parent = $(this).closest('.groupContainer'); //The parent div
$parent.find(".phone").trigger('click'); //This simulates each button click
});
That's it!
Cheers