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>
Related
I have a form that request user data(name) and then when they click the "check" button the form will get replaced by a div and display the name in it.
Then when the user clicks the "edit" button the user gets prompt back to the form but with the previous entered data. I want to know how to display the details back in the form.
<html>
<body>
<div id="container">
<h2 id="heading">Query Form</h2>
<br>
<div id="formdiv">
<form id="form" method="POST">
<div>
<label for="name">Name: </label>
<input id="name" name="name" type="text">
</div>
<br>
<button id="checkbutton" onclick=submitform()>Check</button>
<input type="submit" id="formbutton" value="Submit" onclick=validateForm()>
</form>
</div>
<div id="for_replacement">
<div id="display_replacment" style="display: none;">
<form>
<label for="name_submit">Name: </label><span id="name"></span>
<span id="display_name"></span><br><br>
<input type="submit" id="formbutton" value="Edit" onclick="editform()">
</form>
</div>
</div>
<script>
function validateForm() {
var formrefresh = document.getElementById("form");
function handleForm(event) {
event.preventDefault();
}
var namevalidate = document.getElementById("name").value;
if(namevalidate.length == 0) {
alert("Please Enter Name");
formrefresh.addEventListener("submit", handleForm);
return;
}else {
form.action = "mailto:mail#gmail.com"
}
}
function submitform() {
globalThis.name = document.getElementById("name").value;
document.getElementById('container').innerHTML = document.getElementById("display_replacment").innerHTML;
document.getElementById("display_name").innerText = name;
}
function editform() {
alert(globalThis.name);
}
</script>
</body>
</html>
What should happen is when edit is clicked the data entered in the form should be displayed again in the form to edit.
Instead of removing the form why don't you set its display to none:
document.getElementById('heading').style.display = "none";
document.getElementById('form').style.display = "none";
document.getElementById('display_replacment').style.display = "block";
and when you want the get it back reverse
document.getElementById('heading').style.display = "block";
document.getElementById('form').style.display = "block";
document.getElementById('display_replacment').style.display = "none";
and you can get the name from the display_name:
const name =document.getElementById("display_name").innerText;
document.getElementById("name").value = name;
what i would like are 2 input fields with a submit button.
the first field is the request for a username, the second field is a password.
if the user presses submit, the value of the fields should be below it.
but for a reason it doesn't quite work. if the user presses submit a second, then the result is written after it. and the intention is that the text of the first submit is completely replaced.
also the checker function does not work.
could anyone help?
var titles = [];
var usernameInput = document.getElementById("username");
var passwordBox = document.getElementById("password");
var messageBox = document.getElementById("display");
function CHECKER() {
if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value != "") {
user.title.value = "";
alert("GEEF EEN GELDIGE WAARDE AUB");
}
}
function insert() {
titles.push(usernameInput.value);
titles.push(passwordBox.value);
clearAndShow();
}
function clearAndShow() {
usernameInput.value = "";
passwordBox.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "De opgegeven gebruiksnaam en wachtwoord zijn: " + titles.join(", ") + "<br/>";
}
<html>
<head></head>
<body>
<div class="wb-stl-custom3">
<label for="username">gebruikersnaam:</label>
</div>
<div>
<input id="username" type="text" maxlength="15" onkeyup="CHECKER()">
</div>
<div class="wb-stl-custom3" ;>
<label for="password">wachtwoord: </label>
</div>
<div>
<input id="password" type="password" maxlength="30" onkeyup="CHECKER()">
</div>
<input type="submit" value="CHECH" onclick="insert()" />
<div class="wb-stl-custom3" , id="display"></div>
</body>
</html>
I changed your CHECKER() so it will check each input field. Your code was explicitly written to add and not replace content into your titles array. If you want the values to be replaced you will need something like the following:
var titles = [];
var usernameInput = document.getElementById("username");
var passwordBox = document.getElementById("password");
var messageBox = document.getElementById("display");
function CHECKER(inp) {
if (!inp.value.match(/[a-zA-Z]$/) && inp.value != "") {
inp.value = "";
alert("GEEF EEN GELDIGE WAARDE AUB");
}
}
function insert() {
titles=[usernameInput.value,
passwordBox.value];
clearAndShow();
}
function clearAndShow() {
usernameInput.value = "";
passwordBox.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "De opgegeven gebruiksnaam en wachtwoord zijn: " + titles.join(", ") + "<br/>";
}
<html>
<head></head>
<body>
<div class="wb-stl-custom3">
<label for="username">gebruikersnaam:</label>
</div>
<div>
<input id="username" type="text" maxlength="15" onkeyup="CHECKER(this)">
</div>
<div class="wb-stl-custom3" ;>
<label for="password">wachtwoord: </label>
</div>
<div>
<input id="password" type="password" maxlength="30" onkeyup="CHECKER(this)">
</div>
<input type="submit" value="CHECH" onclick="insert()" />
<div class="wb-stl-custom3" , id="display"></div>
</body>
</html>
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">✗</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.
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();
}
i have a div tag where i entered sime text. now i want, as the user clicks on the button, a cursor should pop-up and user edit the text. as user clicks on save button the text should displays min the div tag inplace of old text..
my div tag is as:
<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="btndiv" type="hidden" onclick="edit1();"/>
Div Tag
</div>
here i want to have a cursor when user clicks edit button and as user ebters text and clicks save the ' div tag ' text should get replaced by new text..
how this can be done using java script..
What you are doing makes no sense from either a technical or semantic view. Just use a textarea.
<textarea id="content" value="sample text" disabled="true" /></textarea>
<input type="button" id="edit" value="edit" onClick="edit()" />
<input type="button" id="save" value="save" onClick="save()" />
function edit() {
document.getElementById('edit').style.display = 'none';
document.getElementById('save').style.display = 'block';
document.getElementById('content').disabled = false;
}
function save() {
document.getElementById('save').style.display = 'none';
document.getElementById('edit').style.display = 'block';
document.getElementById('content').disabled = true;
}
#content {
width: 300px;
height: 200px;
}
#edit, #save {
padding: 2px;
width: 50px;
}
#save {
display: none;
}
Example here
// This sample code is with prompt (popup input) if you want to use textbox, the code to be replaced accordingly.
<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="btndiv" style='display:hidden' onclick="edit1();"/>
<div id="text1"> </div>
</div>
<script>
function button1()
{
document.getElementById ("btndiv").display = '';
}
function edit1()
{
var val = prompt ("Enter some value");
document.getElementById ("text1").innerHTML = val;
document.getElementById ("btndiv").display = 'hidden';
}
</script>
I suggest creating an internal div enclosing just the text, like this:
<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="editbtndiv" onclick="edit1();" value="edit"/>
<input type="button" id="savebtndiv" onclick="save1();" value="save"/>
<input type="text" id="inputdiv" style="display:none;" />
<div id="divtext"> Div Tag </div>
</div>
Then, to display the input field and hide the text:
var editObj = document.getElementById("editbtndiv");
editObj.style.display = "none";
var saveObj = document.getElementById("savebtndiv");
saveObj.style.display = "block";
var inputObj = document.getElementById("inputdiv");
inputObj.style.display = "block";
var txtObj = document.getElementById("divtext");
txtObj.style.display = "none";
Then user does his job, clicks save and you can hide the input field and show the text:
var editObj = document.getElementById("editbtndiv");
editObj.style.display = "block";
var saveObj = document.getElementById("savebtndiv");
saveObj.style.display = "none";
var inputObj = document.getElementById("inputdiv");
inputObj.style.display = "none";
var txtObj = document.getElementById("divtext");
txtObj.value = divObj.value;
txtObj.style.display = "block";