Modal window (popup) alert show on error field using angularJs - javascript

i created sample program for business validation, here error message showing , but its not showing particular error field , how to solve this issue,
Thanks in advance .................................................................
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.save=function()
{
if($scope.firstName == undefined)
{
$('#popup1').fadeIn($(this).data());
// in the RC of 1.3 there is function.link only the function customs Validation.compile which
// needs to be invoked to get at the functions.
setTimeout(function(){
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
}
if($scope.lastName = undefined){
$('#popup1').fadeIn($(this).data());
// in the RC of 1.3 there is function.link only the function customs Validation.compile which
// needs to be invoked to get at the functions.
setTimeout(function(){
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('lastName');
if (element)
element.focus();
}
}
});
.modal-box {
display: none;
position: absolute;
z-index: 1000;
width: 98%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 20px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
#media (min-width: 32em) {
.modal-box { width: 180px; top: 215px; left: 390px; }
}
.modal-box header,
.modal-box .modal-header {
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box .modal-body { padding:22px; background-color: #dd4b39;
border-radius: 20px; height: 0px;
color: white;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<input type="submit" ng-click="save()">
</div>
<div id="popup1" class="modal-box">
<div class="modal-body">
<span style="position:absolute;top:10px;">Please Enter the Value </span>
</div>
</div>
</body>

why you are opting this way to carry out validations on form fields when angular have self validation functions/operations. And your method isn't good enough to be considered as best practice when you're with angularJs
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try leaving the first input field blank:</p>
<form name="myForm">
<p>Name:
<input name="firstName" ng-model="firstName" required>
<span ng-show="myForm.firstName.$touched && myForm.firstName.$invalid">The First name is required.</span>
</p>
<p>Adress:
<input type="text" name="lastName" ng-model="lastName" required>
<span ng-show="myForm.lastName.$touched && myForm.lastName.$invalid">The Addressis required.</span>
</p>
</form>
</body>
</html>
And after this you could customize styling for span used for error as well as JQUERY for animation effects. In your external css & Js scripts.
And it is considered to be the best practices for angularjs too. As well reduces headache of writing jquery code manually for validation. Thanks & Cheers :)

I edit your code please compare and verify
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<style type="text/css">
.modal-box
{
display: none;
position: absolute;
z-index: 1000;
width: 98%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 20px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
#media (min-width: 32em)
{
.modal-box { width: 180px; top: 215px; left: 390px; }
}
.modal-box header,
.modal-box .modal-header
{
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box .modal-body
{
padding:22px; background-color: #dd4b39;
border-radius: 20px; height: 0px;
color: white;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<input type="submit" ng-click="save()">
<div id="popup1" class="modal-box">
<div class="modal-body">
<span style="position:absolute;top:10px;">{{error}}</span>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope,$http,$sce)
{
$scope.save=function()
{
if($scope.firstName == undefined)
{
$('#popup1').fadeIn($(this).data());
setTimeout(function()
{
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
$scope.error = "Please enter first name.";
return;
}
if($scope.lastName == undefined)
{
$('#popup1').fadeIn($(this).data());
setTimeout(function()
{
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
$scope.error = "Please enter last name.";
return;
}
}
});
</script>
</body>
</html>

Related

Multiple modals on one page only showing 1 modal

This may be a duplicate, but I can't figure this out.
I can't figure out why the same modal is showing for both buttons. I've tried making separate classes for each modal but that didn't work.
// emailmodal.js
var emailModal = document.getElementById("email-modal");
var emailBtn = document.getElementById("email");
var emailSpan = document.getElementsByClassName("email-close")[0];
emailBtn.onclick = function() {
emailModal.style.display = "block";
}
emailSpan.onclick = function() {
emailModal.style.display = "none";
}
window.onclick = function(event) {
if (event.taget == emailModal) {
emailModal.style.display = "none";
}
}
// phonemodal.js
var phoneModal = document.getElementById("phone-modal");
var phoneBtn = document.getElementById("phone");
var phoneSpan = document.getElementsByClassName("phone-close")[0];
phoneBtn.onclick = function() {
phoneModal.style.display = "block";
}
phoneSpan.onclick = function() {
phoneModal.style.display = "none";
}
window.onclick = function(event) {
if (event.taget == phoneModal) {
phoneModal.style.display = "none";
}
}
.fa {
padding: 80px;
font-size: 50px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 10px 10px;
border-radius: 10%;
color: white;
transition: 0.7s;
}
.fa-envelope-o {
background: #199cad;
}
.fa-phone {
background: #121e88;
}
.container {
text-align: center;
padding: 50px;
}
.middle-colour {
color: #00ffff;
}
.email-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.phone-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.socials-modal-content {
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
color: white;
font-size: 20px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #888888;
text-decoration: none;
cursor: pointer;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/contact.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="socials-3">
<a class="fa fa-envelope-o" id="email" href="#Email"></a>
<div id="email-modal" class="email-modal">
<div class="socials-modal-content">
<span class="close email-close">×</span>
<p>fun<span class="middle-colour">#</span>wbf<span class="middle-colour">.</span>com</p>
</div>
<script src="js/emailmodal.js"></script>
</div>
<a class="fa fa-phone" id="phone" href="#Phone"></a>
<div id="phone-modal" class="phone-modal">
<div class="socials-modal-content">
<span class="close phone-close">×</span>
<p>01234567890</p>
</div>
<script src="js/phonemodal.js"></script>
</div>
</div>
</div>
</div>
</body>
</html>
It's probably something simple but would be a big help if someone can find out the issue.
Edit:
Changed code to snippet.
Try giving your phone element variables their phone element equivalents. Right now they're all referring to email elements.
i.e. change this:
var phoneModal = document.getElementById("email-modal");
var phoneBtn = document.getElementById("email");
var phoneSpan = document.getElementsByClassName("email-close")[0];
to this:
var phoneModal = document.getElementById("phone-modal");
var phoneBtn = document.getElementById("phone");
var phoneSpan = document.getElementsByClassName("phone-close")[0];
Edit
You also have multiple typos: event.taget should be event.target, and you might want to use strict equality (===) instead of normal equality (==). Both equalities will work, however.
Here's a working example based on your code.
You can change the style of socials-modal-content in your CSS file.
For example, define two classes for email and phone like below code:
.socials-modal-content-email {
background-color: rgb(100, 800, 0);
background-color: rgba(0, 0, 0, 0.4);
margin: 15% auto;
padding: 20px;
border: 10px solid #888;
width: 25%;
color: green;
font-size: 30px;
}
.socials-modal-content-phone {
background-color: rgb(1, 0, 0);
background-color: rgba(1, 0, 0, 0.4);
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
color: white;
font-size: 20px;
}
Then in your HTML file spread both of them like:
<div class="socials-modal-content-email">
<div class="socials-modal-content-phone">
Overall, you can edit and combine your HTML and JS like:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/contact.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="socials-3">
<a class="fa fa-envelope-o" onclick="show_email()" id="email" href="#Email"></a>
<div id="email-modal" class="email-modal">
<div class="socials-modal-content-email">
<span class="close email-close" onclick="close_eamil()">×</span>
<p>fun<span class="middle-colour">#</span>wbf<span class="middle-colour">.</span>com</p>
</div>
</div>
<a class="fa fa-phone" id="phone" onclick="show_phone()" href="#Phone"></a>
<div id="phone-modal" class="phone-modal">
<div class="socials-modal-content-phone">
<span class="close phone-close" onclick="close_phone()">×</span>
<p>01234567890</p>
</div>
</div>
</div>
</div>-
</div>
</body>
</html>
<script type="text/javascript" >
var emailModal = document.getElementById("email-modal");
var phoneModal = document.getElementById("phone-modal");
function show_email(){
emailModal.style.display = "block";
}
function close_eamil(){
emailModal.style.display = "none";
}
function show_phone(){
phoneModal.style.display = "block";
}
function close_phone(){
phoneModal.style.display = "none";
}
</script>

How do I check two fields for identity using an external script like "signup.js"?

I work with Electron.
I have three files in my project.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/styles.css">
<script src="../js/preload.js"></script>
<script src="../js/signup.js"></script>
</head>
<body>
<form action="" onsubmit="return validate()">
<label for="email"><b>Почта</b></label>
<input type="text" placeholder="Введите почту..." name="email" required>
<label for="psw"><b>Пароль</b></label>
<input type="password" placeholder="Введите пароль..." id="psw" required>
<label for="psw-repeat"><b>Подтверждение пароля</b></label>
<input type="password" placeholder="Повторите пароль..." id="psw-repeat" required>
<hr>
<p id = "terms">Создавая аккаунт, вы соглашаетесь с нашими условиями пользования и приватности.</p>
<button type="submit" class = registerbtn>Зарегистрироваться</button>
</form>
</body>
</html>
styles.css
#import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body {
font-family: 'Raleway', sans-serif;
}
.sign_up {
padding: 16px;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
font-family: 'Raleway', sans-serif;
}
hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: darkcyan;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
}
#warning {
color: crimson;
}
signup.js
function validate()
{
var password = document.getElementById(psw).value;
var password_repeat = document.getElementById(psw-repeat).value
if(password != password_repeat)
{
document.getElementById(psw).insertAdjacentHTML("afterend", "<p id = \"warning\">Пароли не совпадают!</p>")
}
}
The project itself is written in Russian. I want to use the file signup.js to check the identity of the fields "psw" and "psw-repeat", but when the program runs, nothing happens. As for the content of the fields, they are emptied when the button is clicked.
The onsubmit value should only have method call, not with "return".
So, I suggest you to use something like this:
onsubmit="validate()"
Documentation
Also, the submit button have issue with "class" css, it should look like this:
<button type="submit" class="register btn">Зарегистрироваться</button>

Can't catch input ID when calling JS function from PHP

I don't know why but JavaScript can't catch my input:
Mensaje: <input id="mensaje" type="text" name="mensaje" value="" style="width:30%;" placeholder="Escribe un mensaje a enviar...."/>
Is built to when I submit the PHP detect it and call the JS function:
function ClearFields() {
var e = document.getElementById("mensaje");
e.value='';
}
My form never reload the page and I can submit a text without reloading. The problem is that the value of textbox is always kept. That's why I'm trying to use JavaScript, to clear this textbox when it is submitted.
I get this error in JS console:
(index):24 Uncaught TypeError: Cannot set property 'value' of null(…)
Full code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<title>Chat de SL</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript">
$(document).ready(function() {
rsdfsdfsd();
asd();
});
function rsdfsdfsd() {
$('#nax').load('./funcionmensaje.php');
setTimeout(rsdfsdfsd, 200);
}
function ClearFields() {
var e = document.getElementById("mensaje");
e.value = '';
}
</script>
<script>
var contador = 0;
function asd() {
if (contador < 2) {
contador++;
var elem = document.getElementById('nax');
elem.scrollTop = elem.scrollHeight;
setTimeout(asd, 100);
}
}
</script>
<script>
</script>
</head>
<body>
<?php
if(isset($_POST['subname'])) {
echo '<script>',
'ClearFields();',
'</script>'
;
if ($_POST['mensaje'] == "") {
}
else {
file_put_contents('mensajeaenviar', $_POST['mensaje']);
file_put_contents('var', '0');
$fp = fopen('mensaje.php', 'a');
$mensaje = $_POST['mensaje'].PHP_EOL;
fwrite($fp, 'Tú: '.$mensaje .'<br>');
}
}
?>
<fieldset>
<font color="#c50000">Lugar:</font> Attached |
<font color="#c50000">Avatares cercanos:</font>
</fieldset>
<fieldset>
<legend>Chat</legend>
<td>
<div id="nax" style="height:70%; overflow:auto">
</div>
</td>
</fieldset>
<style>
nax {
font-family: 'Open Sans', serif;
font-size: 18px;
}
fieldset {
font-family: sans-serif;
border-radius: 10px;
background: #eee;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
position: relative;
border: 2px groove threedface;
}
legend {
position: absolute;
top: -2px;
background: #fff;
padding: 10px 20px;
border: 2px groove threedface;
border-top: none;
box-shadow: inset 0 -5px 5px rgba(0, 0, 0, .2);
text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
font-weight: bold;
}
legend span {
display: block;
margin: -20px;
background: #fff;
padding: 0px 20px;
}
footer {
font-family: sans-serif;
margin-top: 2%;
background: #ddd;
border-radius: 5px;
padding: 15px;
}
iframe {
display: none;
}
</style>
<fieldset style="margin-top:10px;height:3%;">
<form id="formulario" method="post" target="tar">
Mensaje: <input id="mensaje" type="text" name="mensaje" value="" style="width:30%;" placeholder="Escribe un mensaje a enviar...." />
<input type='submit' value='Enviar' name='subname' />
</form>
</fieldset>
<iframe name="tar" src="localhost/a.php">
</iframe>
</body>
<footer>EnriqueGF Utilities</footer>
</html>
You post to the iframe so, as you said yourself, the page is not reloaded and therefore the ClearFields function isn't executed on submit. Add an onsubmit handler to your form and call ClearFields from that.

How to toggle a div from right to left in jquery

I have this fiddle where I am trying to create a floating div which should toggle from right to left .
I am very new to UI so my code is bit messy
here is my code and FIddle
$(".widget-toggle-btn").click(function() {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('.widget').toggle(effect, 'right', duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>
So if you click on that toggle button I am getting error that n.easing[this.easing] is not a function
Can any one help me fix this thanks
you can use float values in jquery.
$(".widget-toggle-btn").click(function() {
alert('ss');
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
/* $('.widget').animate({
width: 'toggle'
}, 400);*/
$('.widget').css('float','left');
$('.widget-toggle-btn').css('float','right');
});
Here is your update code. https://jsfiddle.net/KFmLv/6753/
You can do it like this also. refer the working demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.mydiv{
width: 0px;
height: 100px;
position: absolute;
left: 70px;
top: 20px;
background-color: orange;
overflow: hidden;
text-align: center;
color: white;
}
#mybutton{
width: 70px;
height: 100px;
color: white;
position: absolute;
top:20px;
left:0px;
background-color: black;
color: orange;
}
</style>
<body>
<div class="mydiv">Hello StackOverflow ......</div>
<button id="mybutton">Click on me</button>
<script type="text/javascript">
var theNum = 0;
$("#mybutton").click(function(){
theNum = theNum +1;
if(theNum%2 != 0)
{
$("div.mydiv").animate({width:500},1000);
}
else
{
$("div.mydiv").animate({width:0},1000);
}
});
</script>
</body>
</html>
NOTE : This answer is for your request. refer the below working demo.click on the button to see. hope this will help to you. change the positions and sizes as your need.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.holder{
width: 400px;
height: 600px;
position: absolute;
right: 0;
}
div.holder div.formholder{
width: 0px;
height: 600px;
background-color: orange;
position: absolute;
right: 0;
}
#mybutton{
width: 50px;
height: auto;
position: absolute;
right: 0px;
}
</style>
<body>
<div class="holder">
<div class="formholder"></div>
<button id="mybutton">C<br>L<br>I<br>C<br>K<br><br> O<br>N<br> <br>M<br>E</button>
</div>
<script type="text/javascript">
var my_val = 0;
$("#mybutton").click(function(){
my_val = my_val+1;
if (my_val%2 != 0)
{
$("div.formholder").animate({width:300},1000);
$("#mybutton").animate({right:300},1000);
}
else
{
$("div.formholder").animate({width:0},1000);
$("#mybutton").animate({right:0},1000);
}
});
</script>
</body>
</html>
You need to download the jquery ui plugin. all the effects are binding in a single file.
Link for Jquery UI Effects
Sorry I can't add a comment, but the button is fixed because it does not have class .widget
you missed the jQuery ui library.
And in your https://jsfiddle.net/KFmLv/6752/ fiddle you called multiple time jquery, jquery ui library.
$(".widget-toggle-btn").click(function() {
alert('ss');
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
/* $('.widget').animate({
width: 'toggle'
}, 400);*/
$('.widget').toggle(effect,'left', duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
margin-left: 19px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>
Updated
$(".widget-toggle-btn").click(function() {
var effect = 'slide';
var options = { direction: 'right' };
var duration = 500;
$('.widget').toggle(effect, options, duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
display: none;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
margin-left: 19px;
}
#popup-x{
position: absolute;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>
You don't need jQuery for this effect. Doing it with css transforms is more performant.
const button = document.querySelector('button')
const box = document.querySelector('.box')
button.addEventListener('click', function() {
box.classList.toggle('show')
})
body {
background-color: mediumseagreen;
}
button {
border: 1px solid #fff;
border-radius: 3px;
background: none;
padding: 5px;
margin: 5px;
}
.box {
display: inline-block;
padding: 10px;
margin: 5px;
background-color: seagreen;
transform: scaleX(0);
transform-origin: left;
transition: transform 500ms ease-in-out;
}
.show {
transform: scaleX(1);
}
<button>Toggle</button>
<div class="box">
I'm just a simple box!
</div>
You have an error in this row:
$('.widget').toggle(effect,'left', duration);
effect and duration are the property names.. you can't just copy it and hope that it's gonna work.
if you want to fix it, change it to:
$('.widget').toggle('left');
but if you want to study, read some jQuery tutorial
this one for example: http://www.w3schools.com/jquery/

form hides as the onscreen keyboard appears in mobile

Here is the jsfiddle link https://jsfiddle.net/109qve4t/
Here is the code for a mobile website design.The problem here i face is that my form remains static on the window.But what i want is tha the form should jump to the top of the window as the user writes his query in the "Enter your starting" city text box.I dont want to use jquery to accomplish it.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
#form_1 {
width: 20%;
}
}
#form_1 {
position: relative;
border-radius: 15px;
width: 80%;
margin: 15% auto;
padding: 20px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
display: table;
border :solid 2px black;
padding: 15px;
}
.row {
display:table-row;
}
.row label {
text-align: right;
}
</style>
</head>
<body>
<div id="yt" >
<img src="bg.jpg" class="bg">
<form id="form_1" tabindex="0">
<label>Enter Starting City</label>
<div class="row">
<input type="text" name="s_city"></br>
</div>
<div class="row">
<label>Wait While The Cities Appear
</label></br>
<textarea rows="10" cols="30"></textarea></br>
<div class="row">
</form>
</div>
</body>
</html>
I don't think that you can do that without jquery or other javascript. Mostly cause you have to detect focus/blur on a child element (the input) and then modify the parent (form). CSS rules don't have the ability to change parent behaviour.
Some kind of user action is required. A solution using jQuery would be following:
https://jsfiddle.net/6gbk76fx/4/
$(function () {
$('form input, form textarea').on("focus", function (event) {
$(event.target).closest('form').addClass('jump');
});
$('form input, form textarea').on("blur", function (event) {
$(event.target).closest('form').removeClass('jump');
});
});

Categories