We Keep Coding

Event listener on span requires me to refresh the page in order for it to be clickable

I have this problem which I know is a bug, if anyone has had the same problem could you explain it, essentially the span "excla" requires the user to refresh the page before they can click on it, after the user refreshes the page they can click on it how many times they want, I am trying to make it clickable from the get go, does anyone know why this is happening?
<div class="popupz" id="popupx" href="javascript:void(0);" href="javascript:;">
<span class="popuptext" id="myPopup">Content</span>
<span id="excla" class="ddop" onclick="myFunctionz()" style="background-color:#fff;"
href="javascript:void(0);" href="javascript:;">
!
</span>
</div>
<script>
// When the user clicks on div, open the popup
const element = document.getElementById("excla");
element.addEventListener("click", function() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
});
</script>

You seem to have a lot of extraneous code. I've trimmed it down to the minimum to show and hide myPopup
You just need to add in some css.
// When the user clicks on div, open the popup
const element = document.getElementById("excla");
element.addEventListener("click", function() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
});
#myPopup
{
visibility:hidden;
}
#myPopup.show
{
visibility:visible;
}
<div class="popupz" id="popupx">
<span class="popuptext" id="myPopup">Content</span>
<span id="excla" class="ddop" style="background-color:#fff;">
!
</span>
</div>

JQuery data attribute used for multiple popups but to trigger a specific one on mouseleave

jquery
function initPopup() {
//----- OPEN
$('[data-popup-open]').on('click', function (e) {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function (e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
}
$(document).ready(function () {
initPopup();
});
Above is my jquery code that is used to show specific popup data using an attribute.
HTML
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<h2>TEST</h2>
<p>TEST</p>
<p>TEST</p>
<a data-popup-close="popup-1" href="#" class="close">Close</a>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
<div class="popup" data-popup="popup-2">
<div class="popup-inner">
<h2>TEST</h2>
</div>
<a data-popup-close="popup-2" href="#" class="close">Close</a>
<a class="popup-close" data-popup-close="popup-2" href="#">x</a>
</div>
I would like it so that on a mouseleave event of body that it shows the data-popup="popup-2"
I am very new to jquery but like jumping into the deep end, if you are able to suggest a better way/different way to do this I am happy to learn.
Thanks for taking the time to read.
George

If what you want is to bind a mouseleave event on the html body (I do not understand your use case) what you can do is the following:
$("body").on("mouseleave", function() {
$("[data-popup='popup-2']").show();
});
$("body").on("mouseenter", function() {
$("[data-popup='popup-2']").hide();
});
This code will reset the state, that mean it will not preserve the opened popup when the mouse reenter the body. If you want to preserve the state, an easy way to do this could be:
var isPopupShown = $"([data-popup='popup-2']").is(":visible");
$("body").on("mouseleave", function() {
isPopupShown = $"([data-popup='popup-2']").is(":visible");
$("[data-popup='popup-2']").show();
});
$("body").on("mouseenter", function() {
$("[data-popup='popup-2']").show();
if (!isPopupShown) {
$("[data-popup='popup-2']").hide();
 }
});
This code will show the popup-2 when the mouse leave the body, and restore the original state when the mouse is inside the body (has not been tested, but thats the idea).
There is many way to achieve a popup, personnally i only use css (js is not needed for a simple popup) for simple case. You can create a piece of reusable css and just reproduce the html structure:
HTML:
<label for="foobaz">click here</label>
<input type="checkbox" class="hide popup-controller" id="foobaz"/>
<div class="popup" id="popup1">
<div>foo</div>
</div>
CSS:
.popup-controller {
display: none;
}
.popup {
display: none;
}
.popup-controller:checked + .popup {
display: block;
}
/** This show the popup if the mouse is out the body **/
body:not(:hover) #popup1.popup {
display: block;
}
using this you are free of js (associated jsbin).
Using this code, if the input is checked or the mouse is not in the body, it will show the popup. You just have to use the same html structure to have the same effect on others popup.
Using this, you can control the popup in JS using trigger on the checkbox.
If you are really into JS, i would recommend to create an object and make a code where you specify "popup-1" less as possible. You can do this easily:
$( ".popup" ).on( "click", function( event ) {
if ($(event.target).is('.close')) {
$(this).hide();
event.stopImmediatePropagation();
event.preventDefault();
}
});
In this case, even if you have many "close" inside your popup, it will close the popup, without the need of specifying popup-1 (you can keep your open code).

Add to pop-up you want to close on leave, another data-attribute something like data-bodyclose (or mettere name). Then in body event, check if the .popup has that attribute, if true close It (maybe better trigger event of data-close-popup child)

Why Colorbox doesn't work on click event?

I'm using Colorbox in my app. What I'm looking for is, on page load hide div (.box) and when I click on the link, it opens (div.box) and shows it's title (My Box) and style.
<div class="click" href="link">Click here!</div>
<div class="box" style="width:700; height:800;" title="My Box">
<p>Content goes here</p>
</div>
Here is what i have tried.
<script>
$(document).ready(function () {
$('.box').hide();
$('.click').click(function () {
open_colorbox(newWidth, newHeight, newTitle);
});
function open_colorbox(c_width, c_height, c_title) {
var options = {
width: c_width,
height: c_height,
title: c_title,
overlayClose: false
};
$.colorbox(options);
}
});
</script>
The above solution doesn't work. What am I missing here?
UPDATE 1:
Based on the below comments and answer(s) I only use one line to open colorbox, but still not working!!!
<script>
$(document).ready(function () {
$('.box').hide();
$('.click').click(function () {
$(".box").colorbox({ open: true });
});
});
</script>
UPDATE 2:
Thanks to #Franklin. His solution is the correct one. Here is an example of how simple Colorbox can be done. http://codepen.io/egyamado/pen/Jnxvi

Inside your click function, can't you just do...
Try adding #id of the div
$(".box").colorbox({href:"#id", inline:true});
Or
$("a.click").colorbox({href:"#id", inline:true});

Load external JSP page onclick

I am not sure if I can do this. I have a menu in menu.jsp file. Till now, I included the menu in my original.jsp. Now, I want to provide a button instead of my menu.jsp and when the user clicks on the button, I want to load menu.jsp. How can I do that? I want to make my page look like Microsoft outlook Navigation Pane. I have this right now... button is in original.jsp. Other div's are in menu.jsp
$(document).ready(function() {
$('#showmenu').click(function() {
var hidden = $('.sidebarmenu').data('hidden');
$('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
if(hidden){
$('.sidebarmenu,.image').animate({
left: '0px'
},500)
} else {
$('.sidebarmenu,.image').animate({
left: '-210px'
},500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);
});
});
<div id="content">
<div id="pageNav" style="z-index:9999; position:relative;height:180px;">
<button id="showmenu" type="button">Hide menu</button>
<div class="sidebarmenu" style="position: absolute;">
Menu List
<img class="image" src="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg">
</div>
</div>

Problems with manipulating divs within simplemodal dialog popup - Further Edit

Ok, I'm having a major headache with simplemodal - I know I'm almost there, but can't get this to quite work right. I have a simplemodal dialog that has several dynamically created divs inside it, such as
<html>
<head>
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id='container'>
<h1>Test Page</h1>
<div id='content'>
<div id='confirm-dialog'>
Page Content Goes Here
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Header Text</span></div>
<div class='message'>
<div id='optionDiv0'><input type='radio' id='options' name='options' value='0' />Option0</div>
<div id='optionDiv1'><input type='radio' id='options' name='options' value='1' />Option1</div>
<div id='optionDiv2'><input type='radio' id='options' name='options' value='2' />Option2</div>
</div>
<div class='buttons'>
<div class='yes'>OK</div>
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script>
<script type="text/javascript">
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("", function () {
for(var k = 0; k <= 3; k++) {
if(options[k].checked) {
var ele = document.getElementById("optionDiv" + k);
ele.style.display = "none;";
//alert("Stop Here");
}
}
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
containerCss: {
height: 300,
width: 450,
backgroundColor: '#fff',
border: '3px solid #ccc'
},
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
</script>
</body>
</html>
In the click code, I'm trying to make it so when the user clicks on one of the radio buttons, then clicks 'OK', that item is no longer visible in the popup. If I follow that code with an alert("Stop here");(shown in the code above, commented out), then I can see the div disappear from the popup. But once I clear the alert box, (or if I comment it out so it never runs), the next time I activate the dialog, the div that I hid is re-appearing. How can I keep it hidden, so that it remains hidden the next time the dialog is activated, or is that possible? Thanks in advance.
FINAL EDIT: Found the solution for the dialog box reverting to its original state every time it opens. I pasted this in just above the jquery code, and it works like a charm:
<script> $.modal.defaults.persist = true; </script>
Found on this site in another thread, as part of a different question. Thanks for all who helped.

Your code still doesn't look complete to me, but as for your confirm function callback
confirm("", function(){
$('#confirm input[type=radio]').each(function(){
if($(this).is(':checked'))
$(this).parent().empty();
});
});
Like that?