How to ensure only 1 box will be created?

How to ensure only 1 box will be created? - javascript

I have a web application that allows users to duplicate boxes which are elements.However i am having a slight problem.Everytime when i click one the button to duplicate the box,there will have multiple boxes appearing when there should be just 1 box.How do I fix this issue?
JQUERY:
function getElem(element) {
var name = $(element).attr('name');
console.log(name);
var dupBtn = document.getElementById('duplicateBox');
$(dupBtn).on('click', function () {
var check = document.getElementById("box0");
if (check === null || $(check).attr('name') == null) {
$(document.getElementById('errorMessage')).text("Please create a box and label it first");
document.getElementById('errorMessage').style.display = 'block';
alert("Please create a box and label it first");
}
else{
document.getElementById('errorMessage').style.display = 'none';
document.getElementById("save").style.pointerEvents = ("auto");
var div = document.createElement('div');
$(div).attr('id', 'box' + i);
$(div).attr('class', 'box');
$(div).attr('name', name);
div.style.width = element.style.width;
div.style.height = element.style.height;
div.style.border = element.style.border;
div.style.background = element.style.background;
$(div).draggable({
containment: "#canvas"
});
$(div).resizable({
handles: 'ne, se, sw, nw'
});
$(div).addClass("Copyof" + name);
i++;
$('#boxContain').append(div);
if (div.getAttribute('name') == null) {
} else {
var p = document.createElement("p");
$(p).text(name);
$(p).attr('id', "Copyof" + name);
$(p).attr('class', name);
$(p).addClass('lbl');
$(p).addClass($(div).attr('id'));
$("#existingLbl").append(p);
}
}
});
}
$(div).attr('onclick', 'getElem(this); ');
HTML:
<form name="imageLblForm" method="post" id="imageLblForm" enctype="multipart/form-data" runat="server" action="#">
Sign out
<h4 id="errorMessage"></h4>
<section name="nav" class="nav">
<ul>
<li><input type="file" id="my_file" name="file1" onchange="" accept=".bmp,.jpg, .png, image/jpg, image/bmp, image/png" style="display:none" multiple /><input type="button" id="openBtn" class="openBtn" value="Open" onclick="document.getElementById('my_file').click();" /></li>
<li><input type="submit" value="Save" id="save" onclick="document.getElementById('hiddenLink').click(); return false; "><a onclick="document.execCommand('SaveAs','true','<?php if(isset($_FILES['file1'])){echo pathinfo($_FILES['file1']['name'], PATHINFO_FILENAME);}?>.xml');" id="hiddenLink">Save</a></li>
<li>
<hr />
</li>
<li><button onclick="createBox(); return false;" id="createBoxBtn">Create Rect Box</button></li>
<li><button onclick="addBox(); return false;" id="duplicateBox">Duplicate Rect Box</button></li>
<li><button onclick="deleteDiv(); return false;" id="deleteBox">Delete Rect Box</button></li>
<li><button id="zoomInBtn" onclick="return false;">Zoom In</button></li>
<li><button id="zoomOutBtn" onclick="return false;">Zoom Out</button></li>
</ul>
</section>
<section name="canvas" class="canvas" id="canvas">
<div id="boxContain"></div>
<div class="imageContainer" id="imageContainer">
</div>
</section>
<section id="rightPanel" name="rightPanel" class="rightPanel">
<div class="label" name="label" id="label">
<p id="sectionLbl">Box Labels</p>
<button id="editLblBtn" class="lbls" onclick="return false;">Change Label</button>
<hr />
<div id="existingLbl"></div>
<div id="lblList" class="modal">
<div class="modal-content">
<select id="labels">
<option disabled selected value> -- select a label -- </option>
<?php
$file_lines = file('lbls/predefined_classes.txt');
foreach($file_lines as $line){
?>
<option value="<?php echo $line; ?>">
<?php echo $line; ?>
</option>
<?php
}
?>
</select>
<span class="close">&cross;</span>
<input type="button" onclick="return false;" id="submitLbl" value="Select" />
<input type="button" onclick="return false;" id="editLbl" value="Edit" />
</div>
</div>
</div>
<div class="files" name="files" id="files">
<p>File List</p>
</div>
</section>
</form>
I HAVE TRIED:
$('#boxContain').on('click', function (event) {
var dupBtn = document.getElementById('duplicateBox');
var selBox = event.target;
var name = $(selBox).attr('name');
$(dupBtn).on('click', function () {
var check = document.getElementById("box0");
if (check === null || $(check).attr('name') == null) {
$(document.getElementById('errorMessage')).text("Please create a box and label it first");
document.getElementById('errorMessage').style.display = 'block';
alert("Please create a box and label it first");
} else {
document.getElementById('errorMessage').style.display = 'none';
document.getElementById("save").style.pointerEvents = ("auto");
var div = document.createElement('div');
$(div).attr('id', 'box' + i);
$(div).attr('class', 'box');
$(div).attr('name', name);
div.style.width = event.target.style.width;
div.style.height = event.target.style.height;
div.style.border = event.target.style.border;
div.style.background = event.target.style.background;
$(div).draggable({
containment: "#canvas"
});
$(div).resizable({
handles: 'ne, se, sw, nw'
});
$(div).addClass("Copyof" + name);
i++;
$('#boxContain').append(div);
if (div.getAttribute('name') == null) {
} else {
var p = document.createElement("p");
$(p).text(name);
$(p).attr('id', "Copyof" + name);
$(p).attr('class', name);
$(p).addClass('lbl');
$(p).addClass($(div).attr('id'));
$("#existingLbl").append(p);
}
}
}); //end of dupBtn onclick
}); //end of boxContain onclick
The codes are like this.When user creates a box,it will have a onclick attribute which calls the getElem() function.In this function,when the user clicks Duplicate Box button,the selected box will be duplicated and only ONE box should appear.But i keep having multiple boxes appearing.Please help me..Thank you.

Related

Bootstrap Modal won't close on Chrome and Safari

PROBLEM: I want to click on the X (font awesome icon) and close the modal of the pop up, but it won't close.
IT ONLY WORKS ON CERTAIN BROWSERS AND CONDITIONS:
So far the x close the modal only IE and Firefox, but on Chrome and Safari browser it doesn't close at all. Another thing that works is when I type the letter "x" and don't use any other tags inside the button tag. However, I want to use the font awesome icon for design purposes.
PLEASE HELP:
I don't know much JavaScript at all, and I can't seem to solve this issue using the current modal setup for my signup/login.
Here's a Fiddle to play around with: https://jsfiddle.net/o5vpt6ck/
HTML:
<div class="cd-signin-modal js-signin-modal"> <!-- this is the entire modal form, including the background -->
<div class="cd-signin-modal__container"> <!-- this is the container wrapper -->
<ul class="p-0 cd-signin-modal__switcher js-signin-modal-switcher js-signin-modal-trigger">
<li>Sign in</li>
<li>New account</li>
</ul>
<div class="cd-signin-modal__block js-signin-modal-block" data-type="login"> <!-- log in form -->
<form id="login-form" class="cd-signin-modal__form" action="confirm" method="post">
<h3 class="bigsentence black text-center font-weight-bold">Log in</h3>
<p class="cd-signin-modal__fieldset">
<div class="sentence" id="noenter">This account doesn't exist please try again or create a new account.</div>
<label class="cd-signin-modal__label font-weight-bold cd-signin-modal__label--image-replace" for="signin-email">Enter your email or username</label>
<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" required id="username" name="username" type="text" placeholder="Email or username">
</p>
<p class=" cd-signin-modal__fieldset">
<label class="cd-signin-modal__label cd-signin-modal__label--password cd-signin-modal__label--image-replace" for="signin-password">Enter your password</label>
<input required name="password" class="passpad cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="password" type="text" placeholder="Password">
Hide
</p>
<p class="cd-signin-modal__fieldset">
<input class="cd-signin-modal__input cd-signin-modal__input--full-width" name="submit" type="submit" value="LOG IN">
</p>
</form>
<p class="m-0 cd-signin-modal__bottom-message js-signin-modal-trigger sentence">Forgot your password?</p>
</div> <!-- cd-signin-modal__block -->
<div class="cd-signin-modal__block js-signin-modal-block" data-type="signup"> <!-- sign up form -->
<form id="signup-form" class="cd-signin-modal__form" action="" method="post">
<h3 class="bigsentence black text-center font-weight-bold">Create</h3>
<p class="cd-signin-modal__fieldset">
<label class="cd-signin-modal__label cd-signin-modal__label--email cd-signin-modal__label--image-replace" for="signup-email">Enter your email address</label>
<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border signupfield" id="email" type="email" name="email" placeholder="Enter your email address">
</p>
<p class="cd-signin-modal__fieldset">
<input class="cd-signin-modal__input cd-signin-modal__input--full-width" name="submit" type="submit" value="GET STARTED">
</p>
</form>
</div> <!-- cd-signin-modal__block -->
<div class="cd-signin-modal__block js-signin-modal-block" data-type="reset"> <!-- reset password form -->
<form id="password-form" class="cd-signin-modal__form" action="" method="post">
<h3 style="padding:0!important; margin:0!important; height:20px!important; " class="bigsentence black text-center font-weight-bold">Reset your Password</h3>
<p class="cd-signin-modal__fieldset">
<label class="cd-signin-modal__label cd-signin-modal__label--email sentence" for="reset-email">Please enter the email address associated with your account.</label>
<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="email" type="email" name="email" placeholder="Enter your email address">
</p>
<p class="cd-signin-modal__fieldset">
<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding" type="submit" name="submit" value="Reset password">
</p>
</form>
<p class="m-0 cd-signin-modal__bottom-message js-signin-modal-trigger">Back to log in</p>
</div> <!-- cd-signin-modal__block -->
<button type="button" class="js-close close" data-dismiss="modal" aria-label="Close">
<i style="position:absolute; top:-30px!important;" aria-hidden="true" class="text-white fas fa-times"></i>
</button>
</div> <!-- cd-signin-modal__container -->
</div> <!-- cd-signin-modal -->
<nav class="navbar navbar-expand fixed-top bg-white">
<div class="container-fluid">
</div>
<ul class="container-fluid navbar-nav js-signin-modal-trigger justify-content-end list-unstyled" id="navbar2SupportedContent">
<!-- inser more links here -->
<li>Log in</li>
<li>Sign up</li>
</ul>
</nav>
JS:
(function(){
//Login/Signup modal window - by CodyHouse.co
function ModalSignin( element ) {
this.element = element;
this.blocks = this.element.getElementsByClassName('js-signin-modal-block');
this.switchers = this.element.getElementsByClassName('js-signin-modal-switcher')[0].getElementsByTagName('a');
this.triggers = document.getElementsByClassName('js-signin-modal-trigger');
this.hidePassword = this.element.getElementsByClassName('js-hide-password');
this.init();
};
ModalSignin.prototype.init = function() {
var self = this;
//open modal/switch form
for(var i =0; i < this.triggers.length; i++) {
(function(i){
self.triggers[i].addEventListener('click', function(event){
if( event.target.hasAttribute('data-signin') ) {
event.preventDefault();
self.showSigninForm(event.target.getAttribute('data-signin'));
}
});
})(i);
}
//close modal
this.element.addEventListener('click', function(event){
if( hasClass(event.target, 'js-signin-modal') || hasClass(event.target, 'js-close') ) {
event.preventDefault();
removeClass(self.element, 'cd-signin-modal--is-visible');
}
});
//close modal when clicking the esc keyboard button
document.addEventListener('keydown', function(event){
(event.which=='27') && removeClass(self.element, 'cd-signin-modal--is-visible');
});
//hide/show password
for(var i =0; i < this.hidePassword.length; i++) {
(function(i){
self.hidePassword[i].addEventListener('click', function(event){
self.togglePassword(self.hidePassword[i]);
});
})(i);
}
//IMPORTANT - REMOVE THIS - it's just to show/hide error messages in the demo
this.blocks[0].getElementsByTagName('form')[0].addEventListener('submit', function(event){
event.preventDefault();
self.toggleError(document.getElementById('signin-email'), true);
});
this.blocks[1].getElementsByTagName('form')[0].addEventListener('submit', function(event){
event.preventDefault();
self.toggleError(document.getElementById('signup-username'), true);
});
};
ModalSignin.prototype.togglePassword = function(target) {
var password = target.previousElementSibling;
( 'password' == password.getAttribute('type') ) ? password.setAttribute('type', 'text') : password.setAttribute('type', 'password');
target.textContent = ( 'Hide' == target.textContent ) ? 'Show' : 'Hide';
putCursorAtEnd(password);
}
ModalSignin.prototype.showSigninForm = function(type) {
// show modal if not visible
!hasClass(this.element, 'cd-signin-modal--is-visible') && addClass(this.element, 'cd-signin-modal--is-visible');
// show selected form
for( var i=0; i < this.blocks.length; i++ ) {
this.blocks[i].getAttribute('data-type') == type ? addClass(this.blocks[i], 'cd-signin-modal__block--is-selected') : removeClass(this.blocks[i], 'cd-signin-modal__block--is-selected');
}
//update switcher appearance
var switcherType = (type == 'signup') ? 'signup' : 'login';
for( var i=0; i < this.switchers.length; i++ ) {
this.switchers[i].getAttribute('data-type') == switcherType ? addClass(this.switchers[i], 'cd-selected') : removeClass(this.switchers[i], 'cd-selected');
}
};
ModalSignin.prototype.toggleError = function(input, bool) {
// used to show error messages in the form
toggleClass(input, 'cd-signin-modal__input--has-error', bool);
toggleClass(input.nextElementSibling, 'cd-signin-modal__error--is-visible', bool);
}
var signinModal = document.getElementsByClassName("js-signin-modal")[0];
if( signinModal ) {
new ModalSignin(signinModal);
}
// toggle main navigation on mobile
var mainNav = document.getElementsByClassName('js-main-nav')[0];
if(mainNav) {
mainNav.addEventListener('click', function(event){
if( hasClass(event.target, 'js-main-nav') ){
var navList = mainNav.getElementsByTagName('ul')[0];
toggleClass(navList, 'cd-main-nav__list--is-visible', !hasClass(navList, 'cd-main-nav__list--is-visible'));
}
});
}
//class manipulations - needed if classList is not supported
function hasClass(el, className) {
if (el.classList) return el.classList.contains(className);
else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
function addClass(el, className) {
var classList = className.split(' ');
if (el.classList) el.classList.add(classList[0]);
else if (!hasClass(el, classList[0])) el.className += " " + classList[0];
if (classList.length > 1) addClass(el, classList.slice(1).join(' '));
}
function removeClass(el, className) {
var classList = className.split(' ');
if (el.classList) el.classList.remove(classList[0]);
else if(hasClass(el, classList[0])) {
var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)');
el.className=el.className.replace(reg, ' ');
}
if (classList.length > 1) removeClass(el, classList.slice(1).join(' '));
}
function toggleClass(el, className, bool) {
if(bool) addClass(el, className);
else removeClass(el, className);
}
//credits http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
function putCursorAtEnd(el) {
if (el.setSelectionRange) {
var len = el.value.length * 2;
el.focus();
el.setSelectionRange(len, len);
} else {
el.value = el.value;
}
};
})();

Add Class name btn-js-close and include this class in your JS Condition
Working code - JSFiddle
HTML Change:
<i style="position:absolute; top:-30px!important;" aria-hidden="true" class="btn-js-close text-white fas fa-times"></i>
JS Change:
if( hasClass(event.target, 'js-signin-modal') || hasClass(event.target, 'btn-js-close') ) {
removeClass(self.element, 'cd-signin-modal--is-visible');
event.preventDefault();
}

determine the membership of the list

In the text field inputAddLabel some character is entered. When you click the Add tag button, the eventpushLabel ()is triggered. However, not every symbol should be added, but only one that is contained in listAlphabet. That is, a check must be carried out on the belonging of the added label to the alphabet.
function pushAlphabet() {
var alph = document.getElementById("inputAddAlphabet").value;
if(alph.length == 1){
var li = document.createElement("li");
li.textContent = alph + " ";
document.getElementById("listAlphabet").appendChild(li);
} else { alert('error');}
}
function pushLabel() {
var label = document.getElementById("inputAddLabel").value;
console.log("label", label);
var li = document.createElement("li");
li.textContent = label + " ";
document.getElementById("listLabels").appendChild(li);
}
<div class="alphabet">
<form>
<input id="inputAddAlphabet" type="text">
<input type="button" value="add symbol" onclick="pushAlphabet()">
</form>
<ul id="listAlphabet"></ul>
</div>
<div class="labels">
<form>
<input type="text" id="inputAddLabel">
<input type="button" value="add label" onclick="pushLabel()">
</form>
<ul id="listLabels"></ul>
</div>

Keep track of the pushed symbols (alphabet) and use them to filter the label:
var allowedLabels = [];
function pushAlphabet() {
var alph = document.getElementById("inputAddAlphabet").value;
allowedLabels.push(alph);
var li = document.createElement("li");
li.textContent = alph + " ";
document.getElementById("listAlphabet").appendChild(li);
document.getElementById("inputAddAlphabet").value = "";
}
function pushLabel() {
var label = document.getElementById("inputAddLabel").value;
console.log("label", label);
if (allowedLabels.indexOf(label) >= 0) {
var li = document.createElement("li");
li.textContent = label + " ";
document.getElementById("listLabels").appendChild(li);
document.getElementById("inputAddLabel").value = "";
} else { alert('error');}
}
<div class="alphabet">
<form>
<input id="inputAddAlphabet" type="text">
<input type="button" value="add symbol" onclick="pushAlphabet()">
</form>
<ul id="listAlphabet"></ul>
</div>
<div class="labels">
<form>
<input type="text" id="inputAddLabel">
<input type="button" value="add label" onclick="pushLabel()">
</form>
<ul id="listLabels"></ul>
</div>

How to add a checked checkbox element into Div dynamically?

I want to make a JavaScript function, which, after pressing a button, takes the list of checkbox elements with their content, checks all the checkboxes, creates a div element with these checkboxes and writes the result to the HTML form.
Here is my code:
function confirmDrivers() {
$('#selectedList').find('.chk').prop("checked", true);
var list = document.getElementById('selectedList').getElementsByTagName("li");
var myForm = document.getElementById('formInput');
var text = "<strong>Selected Drivers: </strong> <br><br>";
var myDiv = document.createElement("div");
myDiv.setAttribute("id","selectedInputDrivers");
myDiv.style.overflowY = "auto";
myDiv.style.maxHeight = "100px";
myDiv.style.maxWidth = "250px";
for (i = list.length - 1; i >= 0; i--) {
myDiv.innerHTML = list[i].innerHTML+'<br>'+myDiv.innerHTML;
}
$("formInput").find('.chk').prop("checked", true);
myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML;
myForm.innerHTML = text + myForm.innerHTML;
}
Here is the HTML Div element with the list of checkbox elements. They also appear dynamically. Initially, Div is empty.
<div id = "selectedList" class = "col" style=" max-height:200px; max-width:500px;display: inline-block; background:#A8D9F1; overflow-y:auto">
<strong style="margin-right:10px">Selected List of Drivers</strong>
<input type="button" style="margin-right:10px" value="Remove All" name="removeAllDr" onclick="removeAllDrivers()" />
<input type="button" id="confirmD" value="Confirm" name="confirm" onclick="confirmDrivers()" />
<br><br>
</div>
And this is the HTML form, where I want my result to appear:
<form id="formInput">
</form>
The problem here is that it checks all the checkboxes in my list, but in the resulting HTML form they appear unchecked again. What is wrong with it? Thank you

Besides replacing prop() to attr() as Rik Lewis correctly recommended you can alternately put the line
$("formInput").find('.chk').prop("checked", true);
at the bottom of the function and add the # character in front the selector id like this:
function confirmDrivers() {
$('#selectedList').find('.chk').prop("checked", true);
var list = document.getElementById('selectedList').getElementsByTagName("li");
var myForm = document.getElementById('formInput');
var text = "<strong>Selected Drivers: </strong> <br><br>";
var myDiv = document.createElement("div");
myDiv.setAttribute("id","selectedInputDrivers");
myDiv.style.overflowY = "auto";
myDiv.style.maxHeight = "100px";
myDiv.style.maxWidth = "250px";
for (i = list.length - 1; i >= 0; i--) {
myDiv.innerHTML = list[i].innerHTML+'<br>'+myDiv.innerHTML;
}
myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML;
myForm.innerHTML = text + myForm.innerHTML;
$("#formInput").find('.chk').prop("checked", true);
}
function confirmDrivers() {
$('#selectedList').find('.chk').prop("checked", true);
var list = document.getElementById('selectedList').getElementsByTagName("li");
var myForm = document.getElementById('formInput');
var text = "<strong>Selected Drivers: </strong> <br><br>";
var myDiv = document.createElement("div");
myDiv.setAttribute("id", "selectedInputDrivers");
myDiv.style.overflowY = "auto";
myDiv.style.maxHeight = "100px";
myDiv.style.maxWidth = "250px";
for (i = list.length - 1; i >= 0; i--) {
myDiv.innerHTML = list[i].innerHTML + '<br>' + myDiv.innerHTML;
}
myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML;
myForm.innerHTML = text + myForm.innerHTML;
$("#formInput").find('.chk').prop("checked", true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectedList" class="col" style=" max-height:200px; max-width:500px;display: inline-block; background:#A8D9F1; overflow-y:auto">
<strong style="margin-right:10px">Selected List of Drivers</strong>
<input type="button" style="margin-right:10px" value="Remove All" name="removeAllDr" onclick="removeAllDrivers()" />
<input type="button" id="confirmD" value="Confirm" name="confirm" onclick="confirmDrivers()" />
<br>
<br>
<ul>
<li>
<input type="checkbox" class="chk" value="test" />
</li>
<li>
<input type="checkbox" class="chk" value="test" />
</li>
<ul>
</div>
<form id="formInput">
</form>

<div id="cblist">
<input type="checkbox" value="first checkbox" id="cb1" /> <label for="cb1">first checkbox</label>
</div>
<input type="text" id="txtName" />
<input type="button" value="ok" id="btnSave" />
<script type="text/javascript">
$(document).ready(function() {
$('#btnSave').click(function() {
addCheckbox($('#txtName').val());
});
});
function addCheckbox(name) {
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
var html = '<input type="checkbox" id="cb'+id+'" value="'+name+'" /> <label for="cb'+id+'">'+name+'</label>';
container.append($(html));
}
</script>

Close pop-up box with mouse click outside boundary

I have made this homepage. That has pop up boxes with log-in fields. When there is a pop up the background is dimmed. But the pop up should close if the user clicks any where outside the boundaries of the box. I have created the function closeOverlay, which works when the user hits "esc" on the keyboard, but when the user clicks outside the boundary of the box nothing happens. How can I make it so it works in both cases, when the user hits escape, or takes the mouse outside of the box boundaries and clicks
This is the HTML code
<head>
<link rel="stylesheet" type="text/css" href="LAb2css.css">
</head>
<script>
window.onload = function() {
setInterval(move, 10000);
}
function move() { //makes the box move in relation to the box div
var d = document.getElementById('moveQuestion');
var boxh = document.getElementById('boxDIV').clientHeight - 100; //keeps the image in the box by subtracting height
var boxw = document.getElementById('boxDIV').clientWidth - 100; //keeps the image in the box by subtracting the width
document.onmousemove = function calc(e) {
var x = e.clientX ;
var y = e.clientY;
if (x < boxw) {
d.style.left = x +'px';
}
if (y < boxh) {
d.style.top = y +'px';
}
};
};
function signin() { //displays the sign in form
var lg = document.getElementById('login');
var ov = document.getElementById('BackDIV');
ov.style.display = 'block';
lg.style.display = 'block';
};
function join() { //calls the join form for users to register
var lg = document.getElementById('signup');
var ov = document.getElementById('BackDIV');
ov.style.display = 'block';
lg.style.display = 'block';
activeForm = 1; //sets the active form counter to 1; a form is active
};
function recoverPass() { //displays the recoverPassword form for the user to recover password
var ov = document.getElementById('BackDIV');
ov.style.display = 'block';
var rp = document.getElementById('recoverPassword');
rp.style.display = 'block';
//sets the active form counter to 1; a form is active
};
function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none
var ov = document.getElementById('BackDIV');
var rp = document.getElementById('recoverPassword');
var lg = document.getElementById('login');
var sg = document.getElementById('signup');
ov.style.display = 'none';
rp.style.display = 'none';
lg.style.display = 'none';
sg.style.display = 'none';
};
function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none
var ov = document.getElementById('BackDIV');
var rp = document.getElementById('recoverPassword');
var lg = document.getElementById('login');
var sg = document.getElementById('signup');
ov.style.display = 'none';
rp.style.display = 'none';
lg.style.display = 'none';
sg.style.display = 'none';
};
function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none
var ov = document.getElementById('BackDIV');
var rp = document.getElementById('recoverPassword');
var lg = document.getElementById('login');
var sg = document.getElementById('signup');
ov.style.display = 'none';
rp.style.display = 'none';
lg.style.display = 'none';
sg.style.display = 'none';
};
document.onkeydown = function(evt) { //makes the escape key to call the closeOverlay() function
evt = evt || window.event;
if (evt.keyCode == 27) {
closeOverlay();
}
};
</script>
<body onload = move()>
<div id="BackDIV">
</div>
<p>
<?php
// Just for displaying the display type for testing
echo 'Display type = ' . $display_type . '<br><br>';
if ($display_type == 'Start') {
echo 'StartPage<br>';
}
else if ($display_type == 'SignIn') {
echo "StartPage with 'SignIn' popup box<br>";
}
else if ($display_type == 'Join') {
echo "StartPage with 'Join' popup box<br>";
}
else if ($display_type == 'ForgotPassword') {
echo "StartPage with 'ForgotPassword' popup box<br>";
}
else {
echo 'StartPage with no popup box<br>';
}
?>
</p>
<div id = "main">
<div id = "dateDIV"><?php $t = time(); echo (date("Y-m-d H:i:s", $t)); ?></div>
<div id = "titleDIV">
<h2>Thompson Rivers University - Question/Answers</h2>
</div>
<div id ="dopDownDIV">
<ul>
<li>
<img src="images/responsive_menu.png" title="MENU" alt="Menu" id="MenuIMG" height="50PX" width="50px" />
<ul>
<li>SIGN IN</li>
<li>JOIN</li>
<li>FORGOT PASSWORD</li>
</ul>
</li>
</ul>
</div>
<div id="boxDIV"> <img src ="images/question-mark.png" id="moveQuestion" title= "Image moving In Box" alt="ImgInbox" height = "100px" width = "100px"</div>
<div id= "BottomDIV">
About Us
</div>
</div>
<!--Div for Signup form on click -->
<div id="signup" onclick="closeOverlay()">
<form action="main.html" method="get" autocomplete="on">
<input type="text" name="username" autofocus><br /><p>Your email address</p>
<input type="password" name="password"><br /><p>Password</p>
<br /><br /><br />
<input id="formButton" type="submit" value="Join">
<a href="StartPage.html">
<input type="button" value="Cancel"/>
</a>
</form>
</div>
<!--DIv for recoverPassword -->
<div id="recoverPassword" onclick="closeOverlay()">
<!--<h1>Recover Password</h1> -->
<form action="main.html" method="get" autocomplete="on">
<input type="text" name="recoveremail" placeholder="The email address you registered with" autofocus><br /><p>Username (or email address)</p>
<input id="formButton" type="submit">
<a href="StartPage.html">
<input type="button" value="Cancel"/>
</a>
</form>
</div>
<!--Div for Login -->
<div id="login" onclick="closeOverlay()">
<form action="controller.php" method="post" autocomplete="on" >
<input type='hidden' name='command' value='SignIn'>
<input type="text" name="user" autofocus value="<?php echo $username ?>"> <?php echo $error_msg_username; ?> ><br /> <p>Username (or email address)</p>
<input type="password" name="pass" value="<?php echo $password ?>"> <?php echo $error_msg_password ?> ><br /><p>Password</p>
<br/>
<input type="submit" id="formButton" value="Sign In" >
<a href="StartPage.html">
<input type="button" value="Cancel"/>
</a>
</form>
</div>
</body>
</html>

like this ? add an event listener to the window, remove the confirm if you want .
var pop=document.getElementById('over');window.addEventListener('click',function(){
confirm('close popup')?
pop.style.display="none":pop.style.display="block";
});
#over{min-width:80%;min-height: 100px;background-color:red;}
<div id="over">v</div>

Try this
<div id="BackDIV" onclick="closeOverlay();"></div>

Not able to access id attribute of text tag in javascript

I am not able to access the id attribute of the text tag and the lines of savepath function are not working in my javascript code.
function changeIt() {
var i = 1;
my_div.innerHTML = my_div.innerHTML + "<br><input type='text' id='path' value='For eg: \"C:\\face.txt\"' name='mytext'+ i></input>" + "<br><button id='submitpath' onclick='savepath()'>OK</button>"
}
var ipath;
function savepath()
{
ipath = document.getElementById("path").value;
document.getElementById("path").value = " ";
}
<body>
<div id="content-header">
<h2>EASY EDIT</h2>
<div class="wrapper" id="wrapper">
<br />
<script>
var i = 0;
function myfunction()
{
++i;
var image = document.getElementById('myImage');
if (i % 2 == 0) {
document.getElementById("para").innerHTML = "First select the text you want to use and then Click on the 'Save Selection' button ";
image.src = "bo.gif";
}
else {
document.getElementById("para").innerHTML = " ";
image.src = "bof.gif";
}
}
</script>
<button id="b1" onclick="myfunction()">?Help?</button>
<img id="myImage" src="bof.gif" width="25" height="50" align="right">
<p id="para" ></p>
<button id="get-data-from-selection" class="u">Track Selection</button>
<button id="writeToFile" >Write the Selections to File</button>
<div id="my_div"></div>
<br />
<div class="results" id="results"></div>
<p id="a"></p>
</div>
</div>
</body>

If you're trying to get a value out of a function, you need to have the function return the value:
function savepath()
{
ipath = document.getElementById("path").value;
document.getElementById("path").value = " ";
return ipath;
}

Develop Reference

JavaScript is the programming language of the Web.

How to ensure only 1 box will be created? - javascript

Related

Bootstrap Modal won't close on Chrome and Safari

determine the membership of the list

How to add a checked checkbox element into Div dynamically?

Close pop-up box with mouse click outside boundary

Not able to access id attribute of text tag in javascript

Categories

Resources