document.getElementById("button1").addEventListener("click", mouseOver1);
function mouseOver1(){
document.getElementById("button1").style.color = "red";
}
document.getElementById("button2").addEventListener("click", mouseOver);
function mouseOver(){
document.getElementById("button2").style.color = "purple";
}
$("#button1").hover(function() {
$(this).css('cursor','pointer');
});
$("#button2").hover(function() {
$(this).css('cursor','pointer');
});
$(document).ready(function() {
$(".login").validate({
rules: {
existingUsername: {
required: true,
minlength: 10
},
existingPassword:{
required: true,
minlength: 10
},
messages: {
existingUsername: {
required: "You must enter a valid existing user account",
minlength: "Your username must be at least 10 characters long"
},
existingPassword: {
required: "You must enter a valid password associated with an account",
minlength: "Your username must be at least 10 characters long"
}
intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#para1 {
padding: 0px 1050px 0px 20px;
}
#para2 {
padding: 0px 1099px 0px 20px;
}
.username-label,
.password-label {
margin: 10px 0px 0px 300px;
position: relative;
top: -70px;
}
.existing1-username-input-textbox,
.existing2-password-input-textbox
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 390px;
position: relative;
top: -50px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -200px;
position: relative;
top: -30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 300px;
position: relative;
top: -70px;
}
.username-new-input-textbox,
.password-new-input-textbox,
.email-new-input-textbox,
.reenter-new-input-textbox{
position: relative;
top: -70px;
margin-left: 20px;
}
span{
color: red;
}
<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" value="">
<span id="username_error1">*</span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password" value="">
<span id="password_error2">*</span><br>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="newUsername">Username</label>
<input class="newUsername" type="text" value="">
<br/><br/>
<label class="Password-label2" for="newPassword">Password</label>
<input class="newPassword" type="password" value="">
<br/><br/>
<label class="Email-label3" for="newEmail">Email Address</label>
<input class="newEmail" type="email" value="" >
<br/><br/>
<label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
<input class="repeatEmail" type="email" value="">
<button id="button2">Create Account</button>
</div>
</div>
</div>
<br/>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
<script src="Home.js"></script>
</body>
</html>
How can I validate each of (upper textboxes) using AJAX to see if the username and password is correct and if they are not correct, display the error messages in red below each respective textbox. Here is my code. Any suggestions would be help. I know I could use the $.ajax() method, but I don't know how I can translate my current validate function into the sensible ajax method.
$(".selector").validate({
rules: yourRules,
messages: {
username: {
remote: "Username already exists"
}
}
})
// This is cited from Stack Overflow. Would this how Ajax work internally?
*/http://stackoverflow.com/questions/6772154/using-the-jquery- validate-plugin-with-the-remote-option?rq=1 /*
Related
So I am trying to get the user to input two numbers, then click a button to run a JS function and display the result on the page. However, when I run the code, it spits back
NaN
How do I solve this problem? Is there a way I can get the tip to display on the web page?
My HTML:
<!DOCTYPE html>
<html>
<head>
<title> Tip Calculator by Jonah </title>
<div id = "links">
<script src = "functions.js"></script>
<link type = "text/css" rel = stylesheet href = "design.css">
<link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">
</div>
</head>
<body>
<div id = "cool_main">
<h1 id = "title"> Tip Calculator </h1>
<h2 id = "developer"> Developed by Jonah Johnson </h2>
</div>
<p id = "main_para"><b> Enter the meal cost then a tax percentage,and hit OK!</b></p>
<form id = "meal_cost">
Meal Total Here :<br>
<input type="text" id = "meal__cost" name="mealcost" /><br>
</form>
<form id = "tax_percent">
Tax Here (in percent) :<br>
<input type ="text" id = "tax_per" name="taxpercent" ><br>
</form>
<h4 id = "per"> % </h4>
<button id = "getTip" onclick = "addTogether()"> OK </button>
</body>
</html>
My JS:
var taxValue = document.getElementById("tax_per").value;
var meal__Cost = document.getElementById("meal__cost").value;
function addTogether() {
document.write(taxValue * meal__cost);
}
My CSS:
div {
position: relative;
left: -490px;
}
#title {
font-family: "Bitter", sans-serif;
border: 0px solid black;
width: 225px;
padding: 10px 24px;
background-color: #dbdbcb;
border-radius: 4px;
box-shadow: 10px 10px 5px #888888;
position: relative;
left: 531px;
font-size: 40px;
text-align: center;
}
#developer {
font-family: "Bitter", sans-serif;
border: 0px solid black;
width: 300px;
padding : 5px 10px;
text-align: center;
background-color: #dbdbcb;
border-radius: 10px 10px;
box-shadow: 10px 10px 5px #888888;
position: relative;
left: 510px;
}
#main_para {
border: 1px solid black;
width: 415px;
position: relative;
left: 0px;
font-family: "Bitter", sans-serif;
padding: 4px 10px;
background-color: #dbdbcb;
border-radius: 10px 10px;
}
#meal_cost {
border: 0px solid black;
width: 400px;
height: 100px;
padding: 10px 10px;
text-align: center;
font-family: "Bitter", sans-serif;
background-color: #dbdbcb;
box-shadow: 10px 10px 5px #888888;
position: relative;
left: 550px;
bottom: 200px;
font-size: 40px;
}
#tax_percent {
border: 0px solid black;
width: 400px;
padding: 10px 10px;
text-align: center;
font-family: "Bitter", sans-serif;
font-size: 40px;
background-color: #dbdbcb;
position: relative;
box-shadow: 10px 10px 5px #888888;
left: 550px;
bottom: 170px;
}
#per {
position: relative;
left: 856px;
bottom: 226px;
width: 10px;
font-family: "Bitter", sans-serif;
}
Any help would be appreciated. It would also be good if the displayed value was customizable in css.
function addTogether() {
var taxValue = parseInt(document.getElementById("tax_per").value);
var meal__Cost = parseInt(document.getElementById("meal__cost").value);
document.write(taxValue * meal__Cost);
}
<div id = "cool_main">
<h1 id = "title"> Tip Calculator </h1>
<h2 id = "developer"> Developed by Jonah Johnson </h2>
</div>
<p id = "main_para"><b> Enter the meal cost then a tax percentage,and hit OK!</b></p>
<form id = "meal_cost">
Meal Total Here :<br>
<input type="text" id = "meal__cost" name="mealcost" /><br>
</form>
<form id = "tax_percent">
Tax Here (in percent) :<br>
<input type ="text" id = "tax_per" name="taxpercent" ><br>
</form>
<h4 id = "per"> % </h4>
<button id = "getTip" onclick = "addTogether()"> OK </button>
You need to parse it into Integer or Float, as the data you are manipulating is string
var taxValue = parseInt(document.getElementById("tax_per").value);
var meal__Cost = parseInt(document.getElementById("meal__cost").value);
You can use parseFloat as well if you reuire
You wrong with variable name case and you must retrieve the value when user clicks the button:
<!DOCTYPE html>
<html>
<head>
<title> Tip Calculator by Jonah </title>
</head>
<body>
<div id = "cool_main">
<h1 id = "title"> Tip Calculator </h1>
<h2 id = "developer"> Developed by Jonah Johnson </h2>
</div>
<p id = "main_para"><b> Enter the meal cost then a tax percentage,and hit OK!</b></p>
<form id = "meal_cost">
Meal Total Here :<br>
<input type="text" id = "meal__cost" name="mealcost" value="0" /><br>
</form>
<form id = "tax_percent">
Tax Here (in percent) :<br>
<input type ="text" id = "tax_per" name="taxpercent" value="0"><br>
</form>
<h4 id = "per"> % </h4>
<button id = "getTip" onclick = "addTogether(); return false;"> OK </button>
<div id = "links">
</div>
<script >
function addTogether() {
var taxValue = parseFloat(document.getElementById("tax_per").value);
var meal__cost = parseFloat(document.getElementById("meal__cost").value);
document.getElementById("links").innerHTML= taxValue * meal__cost;
return false;
}
</script>
</body>
</html>
document.getElementById("button1").addEventListener("click", mouseOver1);
function mouseOver1(){
document.getElementById("button1").style.color = "red";
}
document.getElementById("button2").addEventListener("click", mouseOver);
function mouseOver(){
document.getElementById("button2").style.color = "purple";
}
$("#button1").hover(function() {
$(this).css('cursor','pointer');
});
$("#button2").hover(function() {
$(this).css('cursor','pointer');
});
$(document).ready(function(){
$('#button1').on('click', function () {
if($(".existingUsername").get(0).value == "S0104675" && $(".existingPassword").get(0).value == "honor433")
{
$('#para1').animate({'left': '-100%'});
$('.username-label').animate({'left': '-105%'});
$('.existingUsername').animate({'left': '-105%'});
$('.password-label').animate({'left': '-105%'});
$('.existingPassword').animate({'left': '-105%'});
$('#button1').animate({'left': '-105%'});
}else{
document.getElementById("username_error1").innerHTML= "Please enter an existing valid username";
document.getElementById("password_error2").innerHTML= "Please enter an existing valid password";
}
});
});
.intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#para1 {
padding: 0px 1050px 0px 20px;
}
#para2 {
padding: 0px 1099px 0px 20px;
}
.username-label,
.password-label {
margin: 10px 0px 0px 350px;
position: relative;
top: -70px;
}
.existingUsername,
.existingPassword,
#username_error1,
#password_error2
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 425px;
position: relative;
top: -70px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -200px;
position: relative;
top: -30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 300px;
position: relative;
top: -70px;
}
.newUsername,
.newPassword,
.newEmail,
.repeatEmail{
position: relative;
top: -70px;
margin-left: 20px;
}
span{
color: red;
margin-left: 300px;
}
<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password"/><br><span id="password_error2"></span><br>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="newUsername">Username</label>
<input class="newUsername" type="text" value="">
<br/><br/>
<label class="Password-label2" for="newPassword">Password</label>
<input class="newPassword" type="password" value="">
<br/><br/>
<label class="Email-label3" for="newEmail">Email Address</label>
<input class="newEmail" type="email" value="" >
<br/><br/>
<label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
<input class="repeatEmail" type="email" value="">
<button id="button2">Create Account</button>
</div>
</div>
</div>
<br/>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
<script src="Home.js"></script>
</body>
</html>
Hello Everyone,
I have created a webpage that allows me to enter username and password on my webpage (upper content), but the problem I am having is how can I get it to display the span error message only if the username is incorrect or if the password is incorrect? Right now, it will animate both textboxes off the screen even if password is not entered or not correct. And vice versa, when the username isn't correct or not entered. How can I fix this problem? Do I need to make my if statements more restricted? Here is my code.
You can populate your error on the fly as each field is read, and set a variable that keeps track of whether there are any errors. If there are no errors, run the code that does whatever you want when the form is submitted.
$("#button1").on("click", function() {
var error = 0,
usernameError = document.getElementById("username_error1"),
passwordError = document.getElementById("password_error2");
if ($(".existingUsername").get(0).value != "S0104675") {
usernameError.innerHTML = "Please enter an existing valid username";
error = 1;
} else {
usernameError.innerHTML = '';
}
if ($(".existingPassword").get(0).value != "honor433") {
passwordError.innerHTML = "Please enter an existing valid password";
error = 1;
} else {
passwordError.innerHTML = '';
}
if (error == 0) {
console.log('form is ok');
$("#para1").animate({ left: "-100%" });
$(".username-label").animate({ left: "-105%" });
$(".existingUsername").animate({ left: "-105%" });
$(".password-label").animate({ left: "-105%" });
$(".existingPassword").animate({ left: "-105%" });
$("#button1").animate({ left: "-105%" });
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password" /><br><span id="password_error2"></span><br>
<button id="button1">Log in</button>
$("#button1").on("click", function() {
var error = 0;
usernameError = document.getElementById("username_error1");
passwordError = document.getElementById("password_error2");
if ($(".existingUsername").get(0).value != "S0104675") {
usernameError.innerHTML = "Please enter an existing valid username";
error = 1;
} else {
usernameError.innerHTML = '';
}
if ($(".existingPassword").get(0).value != "honor433") {
passwordError.innerHTML = "Please enter an existing valid password";
error = 1;
} else {
passwordError.innerHTML = '';
}
if (error == 0) {
console.log('form is ok');
$("#para1").animate({ left: "-100%" });
$(".username-label").animate({ left: "-105%" });
$(".existingUsername").animate({ left: "-105%" });
$(".password-label").animate({ left: "-105%" });
$(".existingPassword").animate({ left: "-105%" });
$("#button1").animate({ left: "-105%" });
}
});
document.getElementById("button1").addEventListener("click", mouseOver1);
function mouseOver1(){
document.getElementById("button1").style.color = "red";
}
document.getElementById("button2").addEventListener("click", mouseOver);
function mouseOver(){
document.getElementById("button2").style.color = "purple";
}
$("#button1").hover(function() {
$(this).css('cursor','pointer');
});
$("#button2").hover(function() {
$(this).css('cursor','pointer');
});
if($(".existing1-username-input-textbox").get(0).val()== "Micheal22" && $(".existing2-password-input-textbox").get(0).val()== "honor7thG")
{
$('#button1').on('click', function () {
$('.username-label').animate({'left': '-105%'});
// but I want all the old content to slide to the left if username and password match above
// then new content should slide in from the right.
});
}else{
$(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
$(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct";
}
.intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#para1 {
padding: 0px 1050px 0px 20px;
}
#para2 {
padding: 0px 1099px 0px 20px;
}
.username-label,
.password-label {
margin: 10px 0px 0px 300px;
position: relative;
top: -70px;
}
.existing1-username-input-textbox,
.existing2-password-input-textbox
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 390px;
position: relative;
top: -50px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -200px;
position: relative;
top: -30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 300px;
position: relative;
top: -70px;
}
.username-new-input-textbox,
.password-new-input-textbox,
.email-new-input-textbox,
.reenter-new-input-textbox{
position: relative;
top: -70px;
margin-left: 20px;
}
<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="username-part1">Username</label>
<input class="existing1-username-input-textbox" type="text" value="" />
<br/><br/>
<label class="password-label" for="password-part2">Password</label>
<input class="existing2-password-input-textbox" type="password" value="" />
<br/>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="new-user-name-part-1">Username</label>
<input class="username-new-input-textbox" type="text" value="" />
<br/><br/>
<label class="Password-label2" for="password-new-part2">Password</label>
<input class="password-new-input-textbox" type="password" value="" />
<br/><br/>
<label class="Email-label3" for="email-new">Email Address</label>
<input class="email-new-input-textbox" type="text" value=""/>
<br/><br/>
<label class="Repeat-Email-label4" for="repeat-new-email">Repeat Email Address</label>
<input class="reenter-new-input-textbox" type="text" value="" />
<button id="button2">Create Account</button>
</div>
</div>
</div>
<br/>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
<script src="Home.js"></script>
</body>
</html>
How can I get my current content to slide to the left and bring in new content from the right (after clicking on button 1) when an existing student's username and password are correct, and if it's not correct display error messages that either the username or password isn't correct below each respective textbox .I am thinking about using an if/else condition. Also, how would I load the student's existing account information upon sliding it from the right, if I haven't created the content yet? If I already created the content to be slide in from the right, where do I hold that information until it's time to display that new content. Here is my code so far.
Below piece of code will execute when page get loaded and at that time username and password fields will be blank, so no event will get associated with login button :
if($(".existing1-username-input-textbox").get(0).val()== "Micheal22" && $(".existing2-password-input-textbox").get(0).val()== "honor7thG")
{
$('#button1').on('click', function () {
$('.username-label').animate({'left': '-105%'});
// but I want all the old content to slide to the left if username and password match above
// then new content should slide in from the right.
});
}else{
$(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
$(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct";
}
You should change this to below :
$('#button1').on('click', function () {
if($(".existing1-username-input-textbox").get(0).value== "Micheal22" && $(".existing2-password-input-textbox").get(0).value== "honor7thG")
{
$('.username-label').animate({'left': '-105%'});
// but I want all the old content to slide to the left if username and password match above
// then new content should slide in from the right.
}else{
$(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
$(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct";
}
});
Now this will associate click event with login button on page load, so when you click login, it will first check the username and password, if matched then the animation part will take effect otherwise else part will execute.
one quick way to do it is via JQuery's .animate function.
Here is a little fiddle with the example:
http://jsfiddle.net/f7VdQ/135/
$(function () {
$('a').on('click', function () {
$('.left').animate({'left': '-105%'});
$('.right').animate({'left': '0px'});
});
$('p').on('click', function () {
$('.left').animate({'left': '10'});
$('.right').animate({'left': '105%'});
});
})
PS.: If you dont want to the current content to be overlayed (that's an additional funcionallity of the fiddle) just dont use z-indexes on the CSS and also use relative positioning.
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/
I'm trying to set up user accounts with my Meteor app. Right now I have the login and register forms made, but they don't work. Does anyone know how to do this? Here is the code I have: http://jsfiddle.net/5AMWE5T/X8aJf/1/
html:
<body>
<div id="topbar">
<form id="login-form" action="/">
<div>
<input type="email" id="login-email" />
<input type="password" id="login-password" />
<input type="submit" class="btn btn-info" id="login-button" value="Sign in" />
</div>
</form>
</div>
<div id="register-box">
<form id="register-form" action="action">
<div>
<input type="username" id="account-username" placeholder=" Username" />
<input type="email" id="account-email" placeholder="Email" />
<input type="password" id="account-password" placeholder="Password" />
<input type="submit" class="btn btn-success" id="create-account" value="Sign up" />
</div>
</form>
</div>
css:
#topbar {
height: 40px;
width: 100%;
opacity: 1;
background-color: #47a7d3;
box-shadow: 0.1em 0.1em 0.1em;
position: absolute;
top: 0;
left: 0;
padding: 0;
}
#register-form {
text-align: center;
margin-top: 15px;
}
#account-username {
margin-bottom: 0.75em;
border-radius: 0.3em;
border-width: 0.1em;
border-color: #ffffff;
width: 15.4em;
margin-left: 0.1em;
height: 1.8em;
box-shadow: 0 0 0.1em #676767;
}
#login-form {
position: absolute;
width: 100%;
top: 0.3em;
letter-spacing: 0.1em;
right: 0.33em;
text-align: right;
}
#login-email {
width: 180px;
}
#login-password {
width: 100px;
}
#login-button {
position: relative;
top: -5px;
font-family:'Montserrat Alternates';
font-size: 12px;
color: #ffffff;
letter-spacing: 0.05em;
}
javascript:
Template.login.events({
'submit #login-form': function (e, t) {
e.preventDefault();
// retrieve the input field values
var email = t.find('#login-email').value,
password = t.find('#login-password').value;
// Trim and validate your fields here....
var trimInput = function (val) {
return val.replace(/^\s*|\s*$/g, "");
}
var email = trimInput(email);
// If validation passes, supply the appropriate fields to the
// Meteor.loginWithPassword() function.
Meteor.loginWithPassword(email, password, function (err) {
if (err)
// The user might not have been found, or their password
// could be incorrect. Inform the user that their
// login attempt has failed.
console.log("Your email or password are incorrect")
else
// The user has been logged in.
console.log("You have been logged in!")
});
return false;
}
});
Your code wouldn't work with a fiddle btw.
A couple of things:
Make sure you have accounts-password installed you can do this with meteor add accounts-password
You haven't given the code for registrations but assuming you use an email for registration, you should log in this way with the {email: email}.
Meteor.loginWithPassword({email: email, password, function (err) {
It would also be a bit more helpful if you gave a bit more info on how you feel it doesn't work. Does submitting the page refresh the page? Do you have any javascript errors in your console? Do you get an error message back?