javascript/Jquery pop up - only open one pop at a time - javascript

I have 3 separate scripts for 3 pop ups, Im sure there is a better way to structure these into one script? I also want to be able to only open one pop up at a time, so if .popup-new is active and i click to open .popup-new-b then .popup-new will automatically close. Any help would be much appreciated.
<script>
$(document).ready(function () {
$(".popup-trigger").click(function () {
$(".popup-new").fadeIn(300);
});
$(".popup-new > span, .popup-new").click(function () {
$(".popup-new").fadeOut(300);
});
});
</script>
<script>
$(document).ready(function () {
$(".popup-trigger-b").click(function () {
$(".popup-new-b").fadeIn(300);
});
$(".popup-new-b > span, .popup-new-b").click(function () {
$(".popup-new-b").fadeOut(300);
});
});
</script>
<script>
$(document).ready(function () {
$(".popup-trigger-c").click(function () {
$(".popup-new-c").fadeIn(300);
});
$(".popup-new-c > span, .popup-new-c").click(function () {
$(".popup-new-c").fadeOut(300);
});
});
</script>

Since I cannot see your HTML. I have added some with CSS. I hope this is what you are looking for. Ofcourse I could've asked clarify but I do not have enough reputation to add comment :(
$('button').click(function(){
$('.popup').removeClass('popped');
$('#popup-new'+$(this).attr('class')).addClass('popped');
});
.popup{
position:fixed;
width:70%;
height:70%;
top:50%;
left:50%;
margin-top:-5%;
margin-left:-35%;
background-color:#ccc;
z-index:100;
display:none;
}
.popped{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup-new" class="popup">HI I am POPUP NEW</div>
<div id="popup-new-b" class="popup">HI I am POPUP-NEW-B</div>
<div id="popup-new-c" class="popup">HI I am POPUP-NEW-C</div>
<button class="">Pop up New</button>
<button class="-b">Pop up New B</button>
<button class="-c">Pop up New C</button>

You could do something like this:
popups = ['.popup-new','.popup-new-b','.popup-new,-c']
// Pass an additional parameter to popup_click, which is the index of the popup in the array
$('.popup-trigger').click({popup: 0}, popup_click);
$('.popup-trigger-b').click({popup: 1}, popup_click);
$('.popup-trigger-c').click({popup: 2}, popup_click);
function popup_click(event) {
// Here write the code to open the popup
// You can access the popup through $(popups[event.data.popup])
for (var i in popups) {
if (i != event.data.popup) { // event.data.popup contains the index that we passed
// Here write the code to close each of the other popups
// Access them through $(popups [i])
}
}
}
$('html').click(function() {
for (var i in popups) {
$(popups[i]).hide();
}
});
$('.popup-btn-close').click(function(e) {
for (var i in popups) {
$(popups[i]).hide();
}
});
$('.popup-new').click(stop_propagation);
$('.popup-new-b').click(stop_propagation);
$('.popup-new-c').click(stop_propagation);
function stop_propagation(e) {
e.stopPropagation();
}
It is generally a good idea to use arrays or objects whenever you have repetitive code you want to factor.
Note that passing parameters to an event handler this way only works with jQuery; in raw JavaScript you will have to use closures.
You can even simplify both blocks of three lines by using another array and loop (see below).
Also note that as #404UserNotFound wrote, if all of your popups share a common class, you can simplify these lines:
for (var i in popups) {
$(popups[i]).hide();
}
And turn them into:
$('.yourClassNameHere').hide(); // Will select all the elements of the right class
Which leaves you with this compact code:
popups = ['.popup-new', '.popup-new-b', '.popup-new,-c']
popup_triggers = ['.popup-trigger', '.popup-trigger-b', '.popup-trigger-c']
// Pass an additional parameter to popup_click, which is the index of the popup in the array
for (i in popup_triggers) {
$(popup_triggers[i]).click({popup: i}, popup_click);
}
function popup_click(event) {
// Here write the code to open the popup
// You can access the popup through $(popups[event.data.popup])
for (var i in suffixes) {
if (i != event.data.popup) { // event.data.popup contains the index that we passed
// Here write the code to close each of the other popups
// Access them through $(popups [i])
}
}
}
$('html').click(function() {
$('.yourClassNameHere').hide();
});
$('.popup-btn-close').click(function(e) {
$('.yourClassNameHere').hide();
});
for (i in popups) {
$(popups[i]).click(stop_propagation);
}
function stop_propagation(e) {
e.stopPropagation();
}
And finally, if all of your popups and triggers are always named the same way, with a suffix, you could condense it even further (with a few more tricks to save some space):
suffixes = ['', '-b', '-c']
for (let i in suffixes) {
$('.popup-trigger' + suffixes[i]).click(function(i) {
return function(e) {
hideAllPopups();
$('.popup-new' + suffixes[i]).toggle();
//e.stopPropagation(); // HERE
}
}(i));
}
$('.popup-btn-close').click(hideAllPopups);
//$('html').click(hideAllPopups); // HERE
function hideAllPopups() {
$('.popup').hide();
}
// Uncomment the two lines marked "HERE" to make the popups disappear whenever you click somewhere in the page (except on the buttons)
.popup {
margin: 20px auto;
padding: 20px;
background: #ccc;
width: 30%;
position: relative;
}
.popup-btn-close {
position: absolute;
top: 20px;
right: 30px;
font-weight: bold;
}
.box {
background: rgba(0,0,0,0.2);
padding: 5px;
background-clip: padding-box;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="box popup-trigger">Trigger popup #1</span>
<span class="box popup-trigger-b">Trigger popup #2</span>
<span class="box popup-trigger-c">Trigger popup #3</span>
<hr/>
<div class="popup-new popup" style="display:none">Popup #1 <span class="popup-btn-close">X</span></div>
<div class="popup-new-b popup" style="display:none">Popup #2 <span class="popup-btn-close">X</span></div>
<div class="popup-new-c popup" style="display:none">Popup #3 <span class="popup-btn-close">X</span></div>

Related

How can I delete an editable div by clicking on it and then pressing the Delete key on the keyboard with Jquery?

I have a div with the attribute contenteditable = true. I can activate the div content editing by double clicking the div, this is because my div is draggable, so I use the dooble click event to activate the div edition. The fact is that I want to eliminate the complete div by clicking on it and then pressing the Delete key on the keyboard. How can I do that? How can I make it so that when I write something on the div and press the delete key, the entire div will not be deleted? I only want to delete the div when the div edition is not activated, just click on the div and then hit the delete key and voila, it is deleted.
This is my HTML Code:
$(document).ready(function() {
$('.draggable').draggable({
containment: "parent"
});
$(".draggable").resizable();
$('#MyFirstDiv').click(function() {
//HERE I WANT TO PUT THE CODE TO DELETE THE DIV.
});
$("#myContainer").on("dblclick", "#MyFirstDiv", function(e) {
e.preventDefault();
$(".draggable").draggable('disable');
this.querySelector(":scope > :first-child").focus();
});
$("#myContainer").on("blur", "#MyFirstDiv", function(e) {
e.preventDefault();
$(".draggable").draggable('enable');
});
});
#myContainer {
border: 1px solid black;
height: 400px;
width: 100%;
}
#DraggableDiv {
border: 1px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title>My Delete Div</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="myContainer">
<div id="MyFirstDiv">
<div class="draggable" contenteditable="true" id="DraggableDiv">
THIS IS MY TEXT INSIDE THE DIV
</div>
</div>
</div>
</body>
</html>
Easiest way to to capture the keydown on the delete key.
$('#MyFirstDiv').click(function(e){
e.preventDefault();
});
$('#MyFirstDiv').keydown(function(e){
e.preventDefault();
if(e.keyCode == 46) {
this.remove();
}
});
You could first just make a variable: divClicked, I store the clicked state of the div
var divClicked = false;
Then in your event listener, update divClicked (it'll be a toggled button):
$("#MyFirstDiv").click(function(e) {
e.preventDefault();
divClicked = !divClicked;
}
Finally, add a delete key event listener like so:
$("#MyFirstDiv").keydown(function(e) {
e.preventDefault();
if (e.keyCode == 46) {
if (divClicked) {
$(this).remove();
} else {
alert("Click the div first then press Delete to remove it");
}
}
})
Full code:
var divClicked = false;
$("#MyFirstDiv").click(function(e) {
e.preventDefault();
divClicked = !divClicked;
}
$("#MyFirstDiv").keydown(function(e) {
e.preventDefault();
if (e.keyCode == 46) {
if (divClicked) {
$(this).remove();
} else {
alert("Click the div first then press Delete to remove it");
}
}
})
It is not advisable to use Delete while the content is being edited. You will want to ensure that the user can click the <div> element itself without editing the content.
Since the <div> is draggable, I would advise using a handle since the click event and keypress events may get capture for content editing and not for your script.
$(function() {
function disDrag(part) {
var drag = part.closest(".draggable");
drag.draggable("disable");
$(".drag-content", drag).removeAttr("contenteditable").blur();
part.toggleClass("ui-icon-locked ui-icon-unlocked");
}
function enDrag(part) {
var drag = part.closest(".draggable");
drag.draggable("enable");
$(".drag-content", drag).attr("contenteditable", true).focus();
part.toggleClass("ui-icon-locked ui-icon-unlocked");
}
function delDrag(part) {
var drag = part.closest(".draggable");
var res = confirm("Are you sure you wish to delete this item?");
if (res) {
drag.remove();
}
}
$('.draggable')
.draggable({
containment: "parent",
handle: ".ui-drag-handle",
start: function() {
$(".ui-drag-handle", this).data("selectable", false);
},
stop: function() {
$(".ui-drag-handle", this).data("selectable", true);
}
})
.resizable();
$(".ui-drag-handle")
.data("selectable", true)
.click(function(e) {
var drag = $(this).closest(".draggable");
if ($(this).data("selectable")) {
drag.toggleClass("drag-selected");
}
});
$(".btn").click(function(e) {
switch (true) {
case $(this).hasClass("ui-icon-unlocked"):
disDrag($(this));
break;
case $(this).hasClass("ui-icon-locked"):
enDrag($(this));
break;
case $(this).hasClass("ui-icon-close"):
delDrag($(this));
break;
}
});
$(document).keyup(function(e) {
if (e.which == 46 && $(".drag-selected").length) {
delDrag($(".drag-selected"));
}
});
});
#myContainer {
border: 1px solid black;
height: 400px;
width: 100%;
}
.draggable {
border: 1px solid blue;
}
.draggable.drag-selected {
border: 1px solid #0f0;
}
.center {
margin-left: 50%;
}
.right {
float: right;
}
.ui-icon.btn {
border: 1px solid #ccc;
border-radius: 3px;
margin-top: 0px;
margin-left: 1px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="myContainer">
<div class="draggable ui-widget" id="DraggableDiv">
<div class="ui-widget-header">
<span class="right ui-icon ui-icon-close btn" title="Delete the item."></span>
<span class="right ui-icon ui-icon-unlocked btn" title="Lock and disable Drag"></span>
<div class="ui-drag-handle" style="width: calc(100% - 42px);">
<span class="center ui-icon ui-icon-grip-dotted-horizontal"></span>
</div>
</div>
<div class="drag-content" contenteditable="true">
THIS IS MY TEXT INSIDE THE DIV
</div>
</div>
</div>
You can see that this is draggable, resizable, and editable. The user can disable drag by clicking the lock icon. If the select the div and click Delete (or key code 46), or they click the close icon, they will be prompted to confirm that they want to delete the item. Once they confirm that Yes they want to, the item is removed.
Since the delete could be triggered by two different ways, I created a delete function.
In regards to structure, you may not be able to get away with such simple HTML structures when dealing with more complex UI interactions. This one <div> element had all sorts of interactions tied to the click event. The user clicks to edit, select, drag... It is better to make more specific targets for some of these events so that you can better script your events.
You could save yourself a lot of time by using Dialog Widget: https://jqueryui.com/dialog/
Hope that helps.
Test
Click on the text to select.
Press D to delete. [sadly delete key didn't work on stack overflow. Simply change the key code in the if statement to change the key from D to DELETE]
Explanation
There are two functions that help solve this problem.Select: Selected the div clicked.EventListener:Listens for the keypress and deletes the selected div.
Select function
Global variable selected stores the information on the div selected.
In select function we are fetching the id name of the div clicked by using currentTarget.id from the event object 'e'.
If statements inside the select function select and deselect the div.
EventListener
Uses event object from the keypress listener to fetch the key pressed.
e.keyCode gives the key. e.which is a fallback. [for ie users]
If they keyCode is 100 (D key), then use the selected variable to get the selected div and change its css display to 'none'.
Additionally there is a else statement, where u can add js to when nothing is selected and the key is pressed.Also the css for class selected is for feedback of when the div is selected.
Here is the code snippet:
let selected;
const select = e => {
//If already selected, this will deselect the div
if(selected == e.currentTarget.id) {
document.getElementById(selected).classList.remove('selected'); //some CSS
selected = null;
} else {
//select this div
selected = e.currentTarget.id;
document.getElementById(selected).classList.add('selected'); //some CSS
}
}
window.addEventListener('keypress', e => {
//Get key pressed
let key = e.keyCode || e.which;
if(selected != undefined) {
if(key == 100) {//If D is pressed
let target = document.getElementById(selected); //get the div
target.style.display = 'none'; //hide div
console.log('deleted: ' + selected);
}
} else {
//Runs if nothing is selected. Do as you please here.
}
})
.selected {
background: black;
color: white;
}
#DraggableDiv {
user-select: none;
cursor: pointer;
font-family: sans-serif;
width: 400px;
text-align: center;
padding: 10px 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Delete Div</title>
</head>
<body>
<div id="myContainer">
<div id="MyFirstDiv">
<div id="DraggableDiv" onclick="select(event)">
Click me and press D
</div>
</div>
</div>
</body>
</html>

javascript don't .toggleClass() if clicked again?

I've put this in the simplest terms for this question.
if element is clicked, 'active' class is added to element, 'active' class is removed from other elements.
However, if the element is 'active' and it's clicked for a second time the 'active' class should not be "re-applied" (or called for a second time).
$(".class").click(function(){
$('.class').not(this).removeClass('active');
$(this).addClass('active');
}
For example when button 1 is clicked and has the 'active' class -> doFunction;
if ( $(".active").is("#1") ) {
doFunction();
}
when it's clicked again, a second time, the function is fired again even though the element is already 'active'. If the element is active and is clicked a second time I don't want to call the functions again. How can I achieve this?
Codepen Example: https://codepen.io/anon/pen/yvZXOB?editors=1111
Thanks!
Since you didn't specify exactly how you want to limit the functions from being called, let's look at two possibilities.
First possibility: each button you can click to activate and call some function at most one time. After that, toggling buttons will toggle the classes but not calling the other function again.
In this scenario, you can use jQuery's .one().
$(".class").one('click', function(){
$('.class').not(this).removeClass('active');
$(this).addClass('active');
if ( $(".active").is("#1") ) {
doFunction();
}
if ( $(".active").is("#2") ) {
doFunction();
}
function doFunction() {
console.log("function fired!");
}
});
.class {
padding: 10px;
border-radius: 5px;
background: #392;
width: 100px;
color: white;
text-align: center;
margin: 25px;
display: inline-block;
cursor: pointer;
}
.active {
background: #932;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class" id="1">
button
</div>
<div class="class" id="2">
another
</div>
Second possibility: when you click between buttons, the active state is toggled, but clicking a button that's already active won't keep running the other function. However, toggling away from a button and back to it will allow that button's function to run again.
In this case, you can set some kind of flag via a variable and then check the flag to see if you're allowed to run the other function again. Function runs, flag goes up. Different button gets clicked, flag goes back down.
var preventFunction;
$(".class").on('click', function(){
if($(this).hasClass('active')) {
preventFunction = true;
} else {
preventFunction = false;
}
$('.class').not(this).removeClass('active');
$(this).addClass('active');
if ( $(".active").is("#1") ) {
if(preventFunction !== true) {
doFunctionOne();
}
}
if ( $(".active").is("#2") ) {
if(preventFunction !== true) {
doFunctionTwo();
}
}
});
function doFunctionOne() {
console.log("function one fired!");
preventFunctiong = true;
}
function doFunctionTwo() {
console.log("function two fired!");
preventFunction = true;
}
.class {
padding: 10px;
border-radius: 5px;
background: #392;
width: 100px;
color: white;
text-align: center;
margin: 25px;
display: inline-block;
cursor: pointer;
}
.active {
background: #932;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class" id="1">
button
</div>
<div class="class" id="2">
another
</div>
Since you are dynamically adding/removing classes, the correct apporach is to use event delegation like this:
$(document).on('click', ".class:not(.active)", function(){
$('.class').removeClass('active');
$(this).addClass('active');
console.log("click triggered!");
})
https://codepen.io/connexo/pen/PQVKNY?editors=1111
This trick will work(just use one global variable and hold the last active item's id),
var last_act_id = 0;
$(".class").click(function(){
if($(this).attr('id') != last_act_id) {
last_act_id = $(this).attr('id');
$('.class').removeClass('active');
$(this).addClass('active');
doFunction();
}
function doFunction() {
console.log("function fired!");
}
});
Demo: https://codepen.io/anon/pen/Nyovjr?editors=0001
Just check to see if that event target has the class already. Since you're using jQuery you could do something like
if($('.selector').hasClass('active')) {
$('.selector').removeClass('active')
} else {
$('.selector').addClass('active')
}
Try this
$("#1").click(function(){
$('#2').removeClass('active');
if (!$("#1").hasClass('active')) {
$("#1").addClass('active');
doFunction();
}else{
console.log("already clicked");
}
});
$("#2").click(function(){
$('#1').removeClass('active');
if (!$("#2").hasClass('active')) {
$("#2").addClass('active');
doFunction();
}else{
console.log("already clicked");
}
});
function doFunction() {
console.log("function fired!");
}
I hope it helps

Check if a CSS class (added by clicking a button) exist and do something

I want to detect if a class exist and I'm trying to use this simple function to detect if an element has a class but it doesn't work.
var parent = document.querySelector('.menu'),
child = document.querySelector('.liked');
if (parent.contains(child)) {
$('.empty').addClass("none")
}
Any help would be greatly appreciated.
Thanks in advance.
$(document).on("click", ".click", function() {
$(".submenu").addClass("liked")
})
var parent = document.querySelector('.menu'),
child = document.querySelector('.liked');
if (parent.contains(child)) {
$('.empty').addClass("none")
}
body {
font: 10vw/1.2em -apple-system, BlinkMacSystemFont, sans-serif
}
.none {
display: none
}
.liked {
color: red
}
button {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=click>
ADD CLASS LIKED
</button>
<div class=menu><br>
<span class=submenu>ONE</span>
<span class=submenu>TWO</span>
<span class=submenu>THREE</span>
</div>
<div class=empty><br>IF CLASS 'VISITED' EXIST, THIS TEXT MUST GO</div>
First, I'm not a fan of mixing jQuery with plain JS. Bouncing back and forth feels slightly sloppy, so as a bit of cleanup, my answer below will be solely jQuery.
Second, if you want to check again on the click of the button, then your code has to be in the click handler. Currently, you're only evaluating on the page load.
$(function() {
checkIfParentContainsChild(); //Run on page load
$(document).on("click", ".click", function() {
$(".submenu").addClass("liked");
checkIfParentContainsChild(); //Run on button click
});
});
function checkIfParentContainsChild() {
var $child = $(".menu .liked"); //Select all .liked with parent .menu
var childExists = ($child.length > 0); //Result will be true or false
//EDITED PER COMMENT
if (childExists) {
$('.empty').addClass("none");
} else {
// ...DOESN'T EXIST
}
}
Your logic is only running once on page load. If you add it into a function like so, you can also run it in the click event.
function childCheck() {
var parent = document.querySelector('.menu'),
child = document.querySelector('.liked');
if (parent.contains(child)) {
$('.empty').addClass("none")
}
}
childCheck(); // run on page load (optional)
$(document).on("click", ".click", function() {
$(".submenu").addClass("liked")
childCheck(); // run here on click event
})
body {
font: 10vw/1.2em -apple-system, BlinkMacSystemFont, sans-serif
}
.none {
display: none
}
.liked {
color: red
}
button {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=click>
ADD CLASS LIKED
</button>
<div class=menu><br>
<span class=submenu>ONE</span>
<span class=submenu>TWO</span>
<span class=submenu>THREE</span>
</div>
<div class=empty><br>IF CLASS 'VISITED' EXIST, THIS TEXT MUST GO</div>

Replace DIV with JQuery passing parameters

I'm having a problem here to create a generic function on JQuery for my "boxes".
I have a visible box with contents, but I will have some other boxes(all DIVs) with another contents and forms. It can be just a DIV ou a full scructured content.
For exemple, a structure like this:
| DIV CONTAINER
|---- DIV CONTACT FORM
|---- ---- DIV RESET PASSWORD
|---- DIV RESET PASSWORD
|---- DIV SIGN UP FORM
|---- DIV RULES
|---- TERMS
Right now I'm doing the box exchanging manually like this code:
$( "#contact-form-link" ).on( "click", function()
{
$( "#contact-form-link" ).fadeOut( "normal", function()
{
$( "#reset-password-form" ).fadeIn( "normal" );
});
});
$( "#reset-password-form" ).on( "click", function()
{
$( "#reset-password-form" ).fadeOut( "normal", function()
{
$( "#contact-form-link" ).fadeIn( "normal" );
});
});
It's unecessary so much code!
I would like to create a function with parameters, so, I can call it from a LINK inside any part of the current box.
A function like:
function exchangeBoxes(box_fadeout,box_fadein)
{
$("box_fadeout").on("click", function()
{
$("box_fadeout").fadeOut( "normal", function()
{
$("box_fadein").fadeIn( "normal" );
});
});
};
So this way, I can call this function from a link passing which DIV will fadeOut and which will fadeIn.
I'm in #contact-form and want to change to #reset-password-form?
Click Here
I need to be able to call the function from any link, anywhere on the page, WITHOUT setting a ID or CLASS for the link, only for the DIVS.
I'm using one function inside another so the IN page only loads when the OUT page is done.
ONLY ONE div can be displayed at time. When one fades out, the other one called will fadeIN. Always callig by the ID, never by CLASS.
Any help to create this generic function is welcome!
Thanks!
You can attach the event to parent div, check id of element at click event, pass the element as either first or second parameter to exchangeBoxes depending on the id of the element.
function exchangeBoxes(a, b) {
$(a).fadeOut( "normal", function() {
$(b).fadeIn( "normal" );
});
}
var elems = ["contact-form-link", "reset-password-form"];
$("#container").on("click", "[id]", function(e) {
if (this.id === elems[0]) {
exchangeBoxes("#" + elems[0], "#" + elems[1])
}
if (this.id === elems[1]) {
exchangeBoxes("#" + elems[1], "#" + elems[0])
}
});
or use multiple selectors when assigning click event
var elems = ["contact-form-link", "reset-password-form"];
$("#contact-form-link, #reset-password-form")
.on("click", function(e) {
exchangeBoxes(this, "#"
+ elems.filter(function(id) {return id !== e.target.id})[0])
});
You could attach a class e.g. exchange to your link and use a data attributes to store the ID of the elements you want to fade in and out.
<a class="exchange" href="#" data-out="#contact-form" data-in="#reset-password-form">Click Here</a>
<a class="exchange" href="#" data-out="#reset-password-form" data-in="#contact-form">Click Here</a>
Then attach an event handler
$(".exchange").on("click", function () {
var data = this.dataset;
$(data.out).fadeOut("normal", function () {
$(data.in).fadeIn("normal");
});
});
If you strictly only focusing on those two DIVs, you could also use fadeToggle() without having to use data attributes
$(".exchange").on("click", function () {
$('#contact-form').fadeToggle("normal", function () {
if ($(this).is(':visible')) {
$("#reset-password-form").fadeOut("normal");
} else {
$("#reset-password-form").fadeIn("normal");
}
});
});
In addition to the answer above, you can also acheive this without using inline onclick. I prefer to keep the javascript separate.
Give each link a data-link with the box they link to. e.g.
Go to box 2
Then in js you can pick this up and do the required fade in/out as per the example:
p.s. sorry for the css I'm really bored with nothing better to do.
$(".box a").click(function() {
linkTo = $(this).data("link");
$(this).parent().fadeOut("normal", function() {
$(linkTo).fadeIn();
});
});
body {
background: #333;
color: #ccc;
font-family:sans-serif;
}
.box {
margin: 0 auto;
width: 300px;
border: 1px solid #ccc;
text-align: center;
display:none;
}
.box a {
text-decoration: none;
color: #ccc;
border:1px solid #ccc;
padding: 10px;
margin: 0 0 10px 0;
display: inline-block;
}
.box a:hover {
background: #333;
color: #ccc;
}
#box1 {
background: #CD5C5C;
display:block;
}
#box2 {
background: #6B8E23;
}
#box3 {
background: #6A5ACD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" id="box1">
<h3 class="title"> I am Box 1 </h3>
Go to box 2
<br>
Go to box 3
</div>
<div class="box" id="box2">
<h3 class="title"> I am Box 2 </h3>
Go to box 1
<br>
Go to box 3
</div>
<div class="box" id="box3">
<h3 class="title"> I am Box 3 </h3>
Go to box 1
<br>
Go to box 2
</div>
</div>
Well, thank you all!
I put all responses together and came up with this:
<div id="contact">
<h3>CONTACT</h3>
<p>My form</p>
Reset Password
About
</div>
<div id="reset" style="display:none">
<h3>RESET</h3>
<p>Reset password form</p>
Back to contact
</div>
<div id="about" style="display:none">
<h3>ABOUT</h3>
<p>Some info.</p>
Back to contact</li>
</div>
And the JQuery very clean:
function exchangeBoxes(a, b)
{
var a = "#" + a;
var b = "#" + b;
$(a).fadeOut( "normal", function()
{
$(b).fadeIn( "normal" );
});
}
Thank you very much, guys!

When I try to dynamically load a div, all the classes and ids aren't registering, even with .on

EDIT: REQUESTED MORE CODE:
In my index.html tags, it contains two divs:
<div id="index-banner">
blabla
</div>
<div id="java-cheatsheet-placeholder"> </div>
Then my java-cheatsheet.html contains:
<div id="content">
<h1>Java Cheat Sheet </h1>
<input type="button" value="Show Keywords" id="keywordButton">
<p> To help with remembering, some keywords will be hidden. Simply click or tap the box to reveal the
important keyword(s). e.g. There are <span class="answer">eight</span> bits in a byte. Disable/Enable all the
hidden words by tapping the button at the top right. </p>
</div>
I then have a bunch of code, that is tested and works properly, if I push on the button(with an id of "keywordButton"), it either reveals or hides ALL the span elements with a class of "answer", but if you click on a specific span, it will hide/show that and only that word. This is fully functional on its own. But if I try using this (in my custom.js file):
$("#javaCheatSheet").click(function () {
$("#java-cheatsheet-placeholder").load('../java-cheatsheet/javaSummary2.html');
$("#index-banner").hide();
});
it loads the data, but clicking the button or the spans NO longer works, unless I also add
<script type="text/javascript" src="../js/custom.js"></script>
in my java-cheatsheet.html file at the bottom. I of course don't want to do this, and would rather have .on() working with jquery, but if I try what most people have suggested:
$("#javaCheatSheet").on('click', '#keywordButton, .answer', function () {
$("#java-cheatsheet-placeholder").load('../java-cheatsheet/javaSummary2.html');
$("#index-banner").hide();
});
it doesn't even load the html into index.html at all >_>.
Is this what you were looking for?
$("#javaCheatSheet").on("click", "#keywordButton, .answer", function () {
$("#index-banner").load('../java-cheatsheet/javaSummary2.html');
});
Edit:
$("#java-cheatsheet-placeholder").on("click", "#keywordButton, .answer", function () {
// Show/hide answers here
});
You haven't added jquery. With jquery your code works fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
see below.
var toggleColorNotVisible = "rgb(0, 0, 0)";
var toggleColorVisible = "rgb(0, 0, 0)";
var backgroundColorVisible = "rgb(255, 255, 255)";
var showAnswersButton = false;
$(document).on('click', '#keywordButton', function() {
if (showAnswersButton) {
$(".answer").css("color", toggleColorNotVisible);
$(".answer").css("background-color", toggleColorNotVisible);
$(".answer").each(function() {
this.hideAnswers = false;
});
} else {
$(".answer").css("color", toggleColorVisible);
$(".answer").css("background-color", backgroundColorVisible);
$(".answer").each(function() {
this.hideAnswers = true;
});
}
showAnswersButton = !showAnswersButton;
});
$(document).on('click', '.answer', function() {
console.log("LOL")
this.hideAnswers = this.hideAnswers || false;
if (this.hideAnswers) {
$(this).css("color", toggleColorNotVisible);
$(this).css("background-color", toggleColorNotVisible);
} else {
$(this).css("color", toggleColorVisible);
$(this).css("background-color", backgroundColorVisible);
}
this.hideAnswers = !this.hideAnswers;
});
.answer {
font-weight: bold;
color: #000000;
background-color: #000000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#keywordButton {
position: fixed;
top: 10%;
right: 1%;
opacity: 0.9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Show/Hide Keywords" id="keywordButton">
<hr>
<h2> Intro </h2>
<p>Stuff</p>
<hr>
<p>To help with remembering, some keywords will be hidden. Simply click or tap the box to reveal the important keyword(s). e.g. There are <span class="answer">eight</span> bits in a<span class="answer"> byte</span>. Disable/enable using button for all!

Categories