My fadeOut function (animation) doesn't work

My fadeOut function (animation) doesn't work - javascript

I have problem here;
$("#anan").click(function(){
$("input[type='text']").fadeToggle();
});
I would like my input box to disappear and appear with a fade effect. Currently, it only appears and disappears without a fading effect. Can someone help me as to why it doesn't fade in/out?
Note: In the preview, it doesn't even disappear/appear for some reason but when I actually run the html on Chrome it functions alright, except the fading animation.
$("ul").on("click", "li", function() {
$(this).toggleClass("completed");
});
$("ul").on("click", "span", function(event) {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
event.stopPropagation();
})
$("input[type ='text']").on("keypress", function(event) {
if (event.which === 13) {
var inputtext = $(this).val();
$(this).val("");
$("ul").append("<li><span><i class='fas fa-trash'></i></span> " + inputtext + "</li>")
}
})
$("#anan").click(function() {
$("input[type='text']").fadeToggle();
});
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.fa-plus {
float: right;
}
body {
background: #ff6e7f;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #bfe9ff, #ff6e7f);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #bfe9ff, #ff6e7f);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: Roboto;
}
li {
background: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
input {
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
box-sizing: border-box;
padding: 13px 13px 13px 20px;
border: 3px solid rgba(0, 0, 0, 0);
}
input:focus {
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
li:nth-child(2n) {
background: #f7f7f7;
}
li span {
background: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
#container {
width: 360px;
margin: 100px auto;
background: #f7f7f7;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ToDo List App</title>
<script type="text/javascript" src="assets/js/lib/jquery-3.3.1.min.js">
</script>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<div id="container">
<h1>To-Do List <span id="anan"><i class="fas fa-plus"></i></span></h1>
<input type="text">
<ul>
<li><span><i class="fas fa-trash"></i></span> Go to Potions Class</li>
<li><span><i class="fas fa-trash"></i></span> Buy new robes</li>
<li><span><i class="fas fa-trash"></i></span> Visit anan</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/mycustom.js">
</script>
</body>
</html>

You are missing JQuery script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
}
);
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500, function(){
$(this).remove();
});
event.stopPropagation();
}
)
$("input[type ='text']").on("keypress", function(event){
if(event.which === 13) {
var inputtext = $(this).val();
$(this).val("");
$("ul").append("<li><span><i class='fas fa-trash'></i></span> "+ inputtext + "</li>")
}
})
$("#anan").click(function(){
$("input[type='text']").fadeToggle();
});
h1 {
background: #2980b9;
color:white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.fa-plus{
float:right;
}
body {
background: #ff6e7f; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #bfe9ff, #ff6e7f); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #bfe9ff, #ff6e7f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: Roboto;
}
li {
background: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
input {
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
box-sizing: border-box;
padding: 13px 13px 13px 20px;
border: 3px solid rgba(0,0,0, 0);
}
input:focus{
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
li:nth-child(2n){
background: #f7f7f7;
}
li span {
background: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
#container {
width: 360px;
margin: 100px auto;
background: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div id="container">
<h1>To-Do List <span id="anan"><i class="fas fa-plus"></i></span></h1>
<input type="text">
<ul>
<li><span><i class="fas fa-trash"></i></span> Go to Potions Class</li>
<li><span><i class="fas fa-trash"></i></span> Buy new robes</li>
<li><span><i class="fas fa-trash"></i></span> Visit anan</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/mycustom.js">
</script>

in our codepen you have not included jquery and in your css that text box background is #f5f5f5 which is same as it's background.So you need to change text box's background color to see fade effect . Example you can set red for testing. In JS you are required to mention parameters on fadeToggle
$("input[type='text']").fadeToggle("2000", "linear");
Here, 2000 stands for 2second . You can increase as you wish. For more detail you are required to check document on http://api.jquery.com/fadetoggle/
I have edited on codepen : https://codepen.io/hirakumar/pen/aKpQNN?editors=0001

Related

Menu disappears when device width is smaller

I'm making a menu but I have a problem with my JavaScript.
I messed up the JavaScript file, but it works in general. The thing is that when you load the page and your with is less than 858px and then you click in one of the items of the menu, if then you make your width larger the menu disappears. So I want to not disappear it.
JavaScript, HTML and CSS:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<script src="./main.js"></script>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>

The function "hide()" makes the navigation disappear. For example, you said in the navigation that if you click on the list element, the navigation should disappear. If you remove the "display: none" everything should work as you wanted it to.
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
Try it this way:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>
Happy Coding!

Text input fadeToggle jQuery issues

I am working on a simple todo list, I have the code posted below so you can run it and see exactly what I'm talking about.
I want to be able to click on the heart icon inside of the h1 and toggle the todo list "text" input.
I am almost positive my code is correct, yet obviously not because, clicking on the heart icon does nothing.
I am using jQuery 3.2.1 through a cdn and font awesome 5.
I tried selecting the fa-heart icon and giving it the argument that when clicked to toggle the fade i/o for text inputs. It didn't work and I am at a loss. Any help would be appreciated.
// Check Off Specific Todos By Clicking
$("ul").on("click", "li", function() {
$(this).toggleClass("completed");
});
//Click on X to delete Todo
$("ul").on("click", "span", function(event) {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event) {
if (event.which === 13) {
//grabbing new todo text from input
var todoText = $(this).val();
$(this).val("");
//create a new li and add to ul
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>")
}
});
$(".fa-heart").click(function() {
$("input[type='text']").fadeToggle();
});
#container {
width: 360px;
margin: 100px auto;
background: #d4d1ca;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
h1 {
background: #abc3a8;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto Mono', monospace;
background: #abc3a8/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #c9b7b3, #97a794);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #c9b7b3, #97a794);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
li {
background-color: #c9b7b3;
height: 40px;
line-height: 40px;
color: #666;
}
li:nth-child(2n) {
background-color: #d4d1ca;
}
input {
font-size: 18px;
color: #abc3a8;
background-color: #d4d1ca;
width: 100%;
padding: 13px 13px 13px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 3px rgba(0, 0, 0, 0);
}
input:focus {
background-color: #d4d1ca;
border: 3px solid #abc3a8;
outline: none;
}
.fa-heart {
float: right;
}
span {
background-color: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Honey-do List</title>
<script type="text/javascript" src="assets/js/lib/jquery-3.2.1.min.js">
</script>
<link rel="stylesheet" href="assets/css/honeyDew.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script>
</head>
<body>
<div id="container">
<h1>Honey-do List <i class="fas fa-heart"></i></h1>
<input type="text" placeholder="New Honey Do!">
<ul>
<li><span><i class="fa fa-trash"></i></span> Go get Milk</li>
<li><span><i class="fa fa-trash"></i></span> Take the dogs out</li>
<li><span><i class="fa fa-trash"></i></span> Buy flowers</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/honeyDew.js"></script>
</body>
</html>

Put div around your icon
Click event will not work with tag
Honey-do List
// Check Off Specific Todos By Clicking
$("ul").on("click", "li", function() {
$(this).toggleClass("completed");
});
//Click on X to delete Todo
$("ul").on("click", "span", function(event) {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event) {
if (event.which === 13) {
//grabbing new todo text from input
var todoText = $(this).val();
$(this).val("");
//create a new li and add to ul
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>")
}
});
$(".fa-heart").click(function() {
alert('test');
});
#container {
width: 360px;
margin: 100px auto;
background: #d4d1ca;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
h1 {
background: #abc3a8;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto Mono', monospace;
background: #abc3a8/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #c9b7b3, #97a794);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #c9b7b3, #97a794);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
li {
background-color: #c9b7b3;
height: 40px;
line-height: 40px;
color: #666;
}
li:nth-child(2n) {
background-color: #d4d1ca;
}
input {
font-size: 18px;
color: #abc3a8;
background-color: #d4d1ca;
width: 100%;
padding: 13px 13px 13px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 3px rgba(0, 0, 0, 0);
}
input:focus {
background-color: #d4d1ca;
border: 3px solid #abc3a8;
outline: none;
}
.fa-heart {
float: right;
}
span {
background-color: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Honey-do List</title>
<script type="text/javascript" src="assets/js/lib/jquery-3.2.1.min.js">
</script>
<link rel="stylesheet" href="assets/css/honeyDew.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script>
</head>
<body>
<div id="container">
<h1>Honey-do List <div class="fa-heart"><i class="fas fa-heart"></i></div></h1>
<input type="text" placeholder="New Honey Do!">
<ul>
<li><span><i class="fa fa-trash"></i></span> Go get Milk</li>
<li><span><i class="fa fa-trash"></i></span> Take the dogs out</li>
<li><span><i class="fa fa-trash"></i></span> Buy flowers</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/honeyDew.js"></script>
</body>
</html>

Why isn't my form submitting

I have a Login Popup that has a form in it. The problem is that the form is doing nothing on submit. Why is this? I've tried moving around the form elements, but nothing is working. Am I misunderstanding some part of input? The action is hi on purpose, so I would go to a completely different page. But nothing happens...
/***********************\
Modal Module - Title CSS FTW
\***********************/
body {
padding: 0;
margin: 0;
}
#nav_logo {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
position: relative;
left: 188px;
top: 9px;
}
#search_engine {
background: white;
color: #353535;
outline: none;
width: 500px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
padding: 7px 30px 7px 10px;
border: none;
border-radius: 3px;
position: relative;
top: 9px;
left: 210px;
}
#search_engine::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #353535;
}
#search_engine:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #353535;
opacity: 1;
}
#search_engine::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #353535;
opacity: 1;
}
#search_engine:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #353535;
}
#login_nav_div, #signup_nav_div {
float: right;
font-family: 'Open Sans', sans-serif;
color: #353535;
font-size: 17px;
padding: 7px 30px 7px 10px;
border-radius: 3px;
margin-right: 10px;
position: relative;
left: -66px;
background: white;
top: 6px;
}
#login, #signup {
position: relative;
top: -1px;
left: 9px;
}
#nav {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}
.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 390px;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
z-index: 50;
}
.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 2px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #C5C5C5;
color: #fff;
}
.Modal .close:before {
content: '\2715';
}
.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
transition: background .35s;
transition-delay: .1s;
z-index: 40;
}
.Modal.is-visible .content {
transform: translate(-50%, -30%) scale(1);
transition: transform .35s;
}
/* Model */
#login_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}
#login_username, #login_password {
outline: none;
border: 1px solid #ccc;
color: #353535;
padding: 12px 10px 12px 10px;
border-radius: 3px;
font-size: 16px;
position: relative;
left: -30px;
width: 425px;
}
#login_username:focus, #login_password:focus {
border: 1px solid #4096ee;
}
#login_submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 19px;
width: 445px;
font-weight: normal;
position: relative;
top: 5px;
border-radius: 3px;
float: left;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
cursor: pointer;
position: relative;
left: -28px;
font-weight: bold;
}
#login_submit:focus, #login_submit:hover {
background: rgb(37,141,200);
}
/* End of Model */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
</head>
<body>
<div id="Popup" class="Modal">
<div class="content">
<span id='login_title'> Welcome Back </span> <br>
<form action='hi' method='post'>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<input type='submit' value='Login' id='login_submit'>
</form>
<span class="close"></div>
</div>
</div>
<!-- nav -->
<div id='nav'>
<span id='nav_logo'> Logo </span>
<!-- Search Engine -->
<input id='search_engine' placeholder='Search Courses'>
<!-- End of Search Engine -->
<!-- Sign Up -->
<a href='#' class='model_link2'> <div id='signup_nav_div'>
<span id='signup'> Sign Up </span>
</div> </a>
<!-- End of Sign Up -->
<!-- Login -->
<a href="#Popup" class="button"> <div id='login_nav_div'>
<span id='login'> Login </span>
</div> </a>
<!-- End of Login -->
</div>
<!-- end of nav -->
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $("a[href=" + this.selector + "]");
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$trigger.on("click", function(e) {
e.preventDefault();
$modal.trigger("expose:open");
});
$modal.add($modal.find(".close")).on("click", function(e) {
e.preventDefault();
// if it isn't the background or close button, bail
if (e.target !== this)
return;
$modal.trigger("expose:close");
});
return;
}
$("#Popup").expose();
// Example Cancel Button
$(".cancel").on("click", function(e) {
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
</script>
</body>
EDIT #Arun P Johny
This is what my code now looks like:
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $('a[href="' + this.selector + '"]');
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$modal.on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
$modal.add($modal.find(".close")).on("click", function(e) {
e.preventDefault();
// if it isn't the background or close button, bail
if (e.target !== this)
return;
$modal.trigger("expose:close");
});
return;
}
$("#Popup").expose();
// Example Cancel Button
$(".cancel").on("click", function(e) {
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
</script>
Is this right?

There are 2 issues in your code
The selector used for $trigger is throwing an error - You have VM736 jquery.js:1502 Uncaught Error: Syntax error, unrecognized expression: a[href=#Popup] in your console
$trigger = $('a[href="' + this.selector + '"]')
Also the click handler for $model and close button is preventing the default action of the submit button click event
$modal.on("click", function(e) { //instead of $modal.add($modal.find(".close")).on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
Demo: Fiddle

When strictly comparing two equal values stored in an array, how come the output does not return equal?

I am creating the array clickedBoxesArray and passing class names to it on each click. I am then comparing those class names. When the class name of the element I've just clicked matches the class name of the Item I have clicked previously, I then want to add classes to those elements.
When the values of the object at clickedBoxesArray[clickedBoxesCounter] is the same as clickedBoxesArray[prevClickedBoxCounter], the if statement does not trigger. But if the value at those two positions is Undefined, the if statement evaluates the two values as equal and changes classes as desired. Why will the statement work if the values are `undefined but not if the values are identical lists of classes?
JS/JQuery:
$(document).ready(function(){
"use strict";
//this function populates the game body with a user selected # of cards
$(".submit").on("click", function(){
var boxAmt = 2 * Math.round(parseInt($(".boxNum").val())/2);
for (var b = 1; b <= boxAmt; b++){
$(".game-body").append("<span class='card'><i class='fa fa-heart fa-4x'></i></span>");
// $(".game-body").append("<span class='card'><i class='fa " + iconChoices[Math.floor(Math.random()*(200-0+1))+0] + " fa-4x'></i></span>");
};
if(boxAmt%5 === 0){
$(".game-body").css({marginLeft : "20%", marginRight : "20%"});
}//closes %5 if/else
else if(boxAmt%4 === 0){
$(".game-body").css({marginLeft : "28%", marginRight : "20%"});
}
});
//this function flips cards
$(".game-body").on("click", ".card", function(){
$(this).addClass("fliparoo");
$(this.children).addClass("game-icon");
});
//this function counts clicks and matches cards
var count = 0;
var clickedBoxesArray = []
$(".game-body").click(function(){
count+=1;
function logClicksCurrent(input){
clickedBoxesArray.push(input);
}
logClicksCurrent($(".game-body").find(".fliparoo").children()[count -1]);
var clickedBoxesCounter = clickedBoxesArray.length-1;
var prevClickedBoxCounter = clickedBoxesArray.length-2
console.log(clickedBoxesArray[clickedBoxesCounter]);
console.log(clickedBoxesArray[prevClickedBoxCounter]);
console.log(clickedBoxesArray)
if(count%2 === 0 && clickedBoxesArray[clickedBoxesCounter] === clickedBoxesArray[prevClickedBoxCounter]){
$(".game-body").find(".fliparoo").addClass("match-card");
$(".game-body").find(".fliparoo").addClass("match-icon");
}
});
HTML:
<!DOCTYPE html>
<html>
<head>
<title>MEMORY | easy mode</title>
<link href="./assets/css/reset.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">
<link href="./assets/css/animations.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<audio src="./assets/audio/got-theme.mp3"></audio>
<div id="entrance-animation" class="fadeIn">
<header>
<div class="header">
<div class="memory-name">
<span>Mem</span><i class="fa fa-lightbulb-o"></i> <span>ry</p>
</div>
</div>
<!-- class="heart-row">
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-heart-o"></i>
</ul> -->
<span class="timer"></span>
</header>
<div class="enter-boxes">HOW MANY BOXES DO YOU WANT?</div>
<input type="text" value="" class="boxNum">
<input class="submit" type="submit" value="gimme boxes">
<section class="game-body group">
</section>
</main>
<footer>
<nav>
<div class="return-to-menu">Back to menu</div>
</nav>
</footer>
</div>
<script src="./assets/js/scripts.js"></script>
</body>
</html>
CSS:
/*********************************************************
element and cross-page styling
**********************************************************/
*{
box-sizing: border-box;
}
body {
background: blue;
font-family: 'Orbitron', sans-serif;
color: white
}
a {
text-decoration: none;
color: white;
}
.memory-name {
text-align: justify;
font-family: 'Orbitron', sans-serif;
color: white;
font-size: 4em;
}
/*********************************************************
new-game page styling
**********************************************************/
.choice-menu {
display: inline-block;
margin: 10% 0 0 40%;
}
.new-game-text {
display: inline-block;
margin: 0 0 0 40px;
padding: 40px 0 0 0;
text-align: center;
font-size: 2em;
}
.easy-mode-box {
text-align: center;
font-size: 2em;
border: 2px solid white;
margin: 50px 0 0 20px;
padding: 10px 0;
background: blue;
transform: perspective(200px) rotateY(-15deg)
}
.hard-mode-box {
text-align: center;
font-size: 2em;
border: 2px solid white;
margin: 20px 0 0 20px;
padding: 10px 0;
background: blue;
transform: perspective(200px) rotateY(15deg)
/*add transform here*/
}
.easy-mode-box:hover {
-webkit-transition-property: background;
background: paleturquoise;
}
.hard-mode-box:hover {
-webkit-transition-property: background;
background: turquoise;
}
/*********************************************************
easy mode page styling (index.html)
**********************************************************/
/****header****/
.easy-mode-header {
display: block;
margin: 0 0 0 40%;
}
.heart-row {
display: inline-block;
margin: 0 0 0 16%;
}
.timer {
float: right;
margin: 0 16% 0 0;
}
/****game body****/
.game-body {
margin: 5% 15%;
position: relative;
/*margin: auto;*/
}
.game-body span {
position: relative;
float: left;
overflow: hidden;
}
.card {
width: 10em;
height: 10em;
background: steelblue;
display: block;
transition: background 1s, -webkit-transform 1s;
border-radius: .4em;
border: 1px solid darkblue;
margin: 3px;
color: rgba(255,255,255,0);
text-align: center;
padding-top: 5%;
}
.card:hover {
box-shadow: 2px 2px 2px 2px darkblue;
}
/****click transitions****/
.fliparoo {
background: powderblue;
-webkit-transform: rotateY(180deg);
}
.game-icon {
color:rgba(255,255,255,1);
transition-delay: .5s;
}
.match-card{
background: limegreen;
}
.match-icon{
color:rgba(200,200,200,1);
}
/*********************************************************
footer
**********************************************************/
.return-to-menu {
display: inline-block;
text-align: center;
font-size: 2em;
/*border: 2px solid white;*/
margin: 50px 0 20px 42%;
padding: 10px 10px 5px 10px;
background: blue;
border-radius: .3em;
}
.enter-boxes {
display: block;
font-size: 1em;
/*border: 2px solid white;*/
background: blue;
border-radius: .3em;
}
.return-to-menu:hover {
-webkit-transition-property: background;
background: cornflowerblue;
box-shadow: 2px 2px 2px 2px steelblue;
}
/*********************************************************
clearfix (experimental-prolly not relevant)
**********************************************************/
.group:after {
content: "";
display: table;
clear: both;
}
/*********************************************************
media queries
**********************************************************/
#media (max-width: 1420px) {
.game-body{
width: 2000px;
}
}
#media (min-width: 1620px) {
.margin-fix {
margin: 2% 0 0 15%;
}
}
#media (min-width: 1620px) {
.margin-fix-2 {
margin: 2% 0 0 23%;
}
}

I can't seem to be able to link in my .js file

I'm trying to implement and link up CSS as well as JS to an HTML file provided by a friend of mine for a project I'm working on.
I've linked up the CSS with no problems, but the .js file I'm trying to link just won't work. Because the script won't work, my HTML keypad doesn't work :(
Anyone notice anything I'm doing wrong?
window.pass = 1234;
window.redirectURL = 'http://www.google.com';
$(document).ready(function() {
start();
});
function start() {
window.tries = 0;
$(".key").click(function(){
var n = $(this).html();
$('.screen').append( n );
window.tries++;
updateFlasher();
validate();
});
}
function updateFlasher() {
if (window.tries <=3) {
var dis = window.tries * 55;
$('.flasher').css({
'left' : dis + 'px'
});
}
else {
$('.flasher').css({
'left' : '20px',
'display' : 'none'
});
}
}
function validate() {
if (window.tries >= 4){
checkWin();
$('.screen').html('');
window.tries = 0;
$('.flasher').css({
'display' : 'block'
});
}
}
function checkWin() {
var w = $('.screen').html();
if (w == window.pass){
$('.success').show().delay(5000).queue(function(n) {
$('.success').hide(); n();
});
var u = window.redirectURL;
$(location).attr('href', u );
}
else {
$('.error').show().delay(1000).queue(function(n) {
$('.error').hide(); n();
});
}
}
#charset "UTF-8";
/* CSS Document */
/*basic reset*/
/*browsers have built in values for elements so we'll reset a few things to zero, you can add to this or remove items as needed*/
div,p,body,header,footer,section,article,nav
{
margin: 0;
padding: 0;
}
img
{
border: none;
margin: 0;
padding: 0;
}
/* html selectors */
body
{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #333;
background-color: #1d1d1d;
}
a:link, a:visited
{
text-decoration:none;
}
a:hover, a:active
{
text-decoration:none;
}
/* hide elements from browser but show for doc outline */
.hidden
{
display: none;
}
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body
{
background-color: #1d1d1d;
}
::selection
{
background-color: transparent;
}
.screen{
height: 75px;
width: 225px;
border-radius: 15px;
border: 8px solid #2b2b2b;
background-color: #111;
font-size: 50px;
color: limegreen;
padding: 0px 20px 0px 20px;
letter-spacing: 26px;
font-family: 'VT323', monospace;
position: relative;
}
.flasher {
content: "";
display: block;
width: 30px;
height: 5px;
background-color: limegreen;
position: absolute;
top: 55px;
left: 20px;
animation: blink 1s linear infinite;
-webkit-animation: blink 1s linear infinite;
}
.keypad_wrapper {
position: relative;
width: 225px;
height: 375px;
background-color: #2b2b2b;
margin: 100px auto;
}
.key {
width: 75px;
height: 75px;
float: left;
border-radius: 15px;
border: 8px solid #2b2b2b;
line-height: 58px;
text-align: center;
font-size: 50px;
background-color: #3b3b3b;
box-shadow: inset 0px -2px 0px rgba(0,0,0,.5), inset 0px 1px 0px rgba(255,255,255,.2);
cursor: pointer;
text-shadow: 0px -2px 2px rgba(0,0,0,.5), 0px 1px 2px rgba(255,255,255,.4);
color: #eee;
}
.key:hover {
background-color: #4b4b4b;
}
.key:active {
background-color: #333;
box-shadow: inset 0px -1px 0px rgba(255,255,255,.2), inset 0px 2px 0px rgba(0,0,0,.5);
color: #aaa;
line-height: 62px;
}
.key.last {
position: relative;
left: 75px;
}
.notification {
color: limegreen;
font-family: 'VT323', monospace;
text-align: center;
font-size: 40px;
position: absolute;
width: 225px;
top: 15px;
display: none;
}
#keyframes blink {
0%{opacity: 0;}
50%{opacity: 1;}
100%{opacity: 0;}
}
#-webkit-keyframes blink {
0%{opacity: 0;}
50%{opacity: 1;}
100%{opacity: 0;}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="main.js"></script>
</head>
<div class="keypad_wrapper">
<div class="screen"></div>
<div class="flasher"></div>
<div class="error notification">ERROR</div>
<div class="success notification">SUCCESS</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key last">0</div>
</div>
</body>
</html>

Works in my browser, all I added to your code was:
<link rel="stylesheet" type="text/css" href="style.css" />
But I assume from your question that you had this working already.
You could try downloading jquery to your machine locally and referencing it locally. Perhaps it gets stuck there.

We Keep Coding

JavaScript is the programming language of the Web.

My fadeOut function (animation) doesn't work - javascript

Related

Menu disappears when device width is smaller

Text input fadeToggle jQuery issues

Why isn't my form submitting

When strictly comparing two equal values stored in an array, how come the output does not return equal?

I can't seem to be able to link in my .js file

Categories

Resources