I'm using jQuery to create a to-do list and centered everything on the page using text-align: center with body in my CSS file. But how can I left-align newly added list items below the form?
Here's the JavaScript portion of the code I'm currently using (my guess is this is what I'd need to change), but you can also view my CodePen to view the CSS and HTML.
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
// clears input box after clicking 'add'
$('input[name=checkListItem]').val('');
});
$('input[name=checkListItem]').keypress(function(e) {
if (e.which == 13) {
$('.button').click();
// e.preventDefault() prevents default event from occuring, e.stopPropagation() prevents event from bubbling up, and return false does both
return false;
}
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
You're simply looking for:
.item {
text-align: left;
}
This can be seen in the following:
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
// clears input box after clicking 'add'
$('input[name=checkListItem]').val('');
});
$('input[name=checkListItem]').keypress(function(e) {
if (e.which == 13) {
$('.button').click();
// e.preventDefault() prevents default event from occuring, e.stopPropagation() prevents event from bubbling up, and return false does both
return false;
}
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
body {
text-align: center;
background: #dfdfdf;
font-family: Helvetica;
color: #666;
background: linear-gradient(to left, #DA4453, #89216B);
}
.container {
padding: 30px;
padding-top: 10px;
width: 300px;
/* 0 is for top-bottom and auto (set to equal values for each by browser) for left-right */
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;
}
form {
/* needed for the same property/value to work to display the button next to form */
display: inline-block;
}
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 15em;
color: #666;
}
.button {
/* makes button display next to form */
display: inline-block;
box-shadow: inset 0px 1px 0 0 #fff;
/* starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
background-color: #c00;
font-size: 0.7em;
font-family: Arial;
font-weight: bold;
border-radius: 0.33em;
/* padding is space between element's content and border. First value sets top and bottom padding; second value sets right and left */
padding: 0.5em 0.9em;
text-shadow: 0 1px #fff;
text-align: center;
}
.button:hover {
cursor: pointer;
opacity: .8;
}
.item {
text-align: left;
}
<html>
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="stylesheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" />
</form>
<div class="button">Add</div>
<br>
<div class="list"></div>
</div>
</body>
</html>
Note that you'll probably also want to add some margin-top to the first element, which can be done with the :first-of-type pseudo-class:
.item:first-of-type {
margin-top: 20px;
}
Adding this as well can be seen in the following:
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
// clears input box after clicking 'add'
$('input[name=checkListItem]').val('');
});
$('input[name=checkListItem]').keypress(function(e) {
if (e.which == 13) {
$('.button').click();
// e.preventDefault() prevents default event from occuring, e.stopPropagation() prevents event from bubbling up, and return false does both
return false;
}
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
body {
text-align: center;
background: #dfdfdf;
font-family: Helvetica;
color: #666;
background: linear-gradient(to left, #DA4453, #89216B);
}
.container {
padding: 30px;
padding-top: 10px;
width: 300px;
/* 0 is for top-bottom and auto (set to equal values for each by browser) for left-right */
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;
}
form {
/* needed for the same property/value to work to display the button next to form */
display: inline-block;
}
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 15em;
color: #666;
}
.button {
/* makes button display next to form */
display: inline-block;
box-shadow: inset 0px 1px 0 0 #fff;
/* starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
background-color: #c00;
font-size: 0.7em;
font-family: Arial;
font-weight: bold;
border-radius: 0.33em;
/* padding is space between element's content and border. First value sets top and bottom padding; second value sets right and left */
padding: 0.5em 0.9em;
text-shadow: 0 1px #fff;
text-align: center;
}
.button:hover {
cursor: pointer;
opacity: .8;
}
.item {
text-align: left;
}
.item:first-of-type {
margin-top: 20px;
}
<html>
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="stylesheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" />
</form>
<div class="button">Add</div>
<br>
<div class="list"></div>
</div>
</body>
</html>
I put this in the css of your pen and it seemed to do the trick:
.list {
text-align: left;
margin-left: 40px;
}
and you can tweak the margin as necessary.
you can use
.list {
text-align: left;
}
Related
I want to change the color of the button border to black on scroll. Currently when user scrolls the header background color switches to white and the text color to black. How can I switch the border of the button switch from white to black?
See example: Jsfiddle
$(function() {
$(window).on("scroll", function() {
if ($(window).scrollTop() > 50) {
$("header").addClass("sticky");
} else {
//remove the background property so it comes transparent again (defined in your CSS)
$("header").removeClass("sticky");
}
});
});
$('.header-button').on('click', function() {
$(this).toggleClass("active");
});
$(function() {
$(window).on("scroll", function() {
if ($(window).scrollTop() > 50) {
$("header").addClass("sticky");
$(".buttons div.header-button").addClass("changeHeaderButtom");
} else {
//remove the background property so it comes transparent again (defined in your CSS)
$("header").removeClass("sticky");
$(".buttons div.header-button").removeClass("changeHeaderButtom")
}
});
});
$('.header-button').on('click', function() {
$(this).toggleClass("active");
});
body {
background-color: lightcoral;
height: 200vw;
}
header {
display: flex;
position: fixed;
align-items: center;
top: 0;
right: 0;
left: 0;
height: 70px;
transition: all 0.5s;
color: white;
}
.buttons {
display: flex;
justify-content: space-between;
flex: 1;
margin: 0 100px 0 100px;
}
.button {
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
cursor: pointer;
}
.header-button {
padding: 5px 10px;
border: 1px solid transparent;
}
.header-button:hover {
border: 1px solid white;
cursor: pointer;
border-radius: 4px;
}
.header-button.changeHeaderButtom,.header-button.changeHeaderButtom:hover{
border:1px solid black;
}
.sticky {
background-color: white;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10);
color: black;
}
.active {
border: 1px solid white;
cursor: pointer;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="buttons">
<div class="button header-button active">You are here</div>
<div class="button header-button">Contact</div>
<div class="button header-button">About me</div>
</div>
</header>
You can add a class to your css that apply the border to the buttons, and when the scroll condition is satisfied you can apply this class to the buttons. Remove that class when the scroll is less than 50px
I am trying to write a script in a web page that will sort of copy and paste a button and it's hidden content and then append in on the bottom of the first button. The problem is I am not very literate in JS.
So when one would press the "Add" button, button "Test Button #1" will be copied and appended to the bottom as "Test Button #2". Keep in mind that the button may contain a dropdown of sort in the actual script, this one was just shortened, so the second button would have to contain the same info as the first. Any help would be very much appreciated.
Please use my attempt at the bottom script as a template:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
min-width: 250px;
}
.testBtn {
width: 100%;
background-color: grey;
color: white;
border: none;
}
/* Style the header */
.header {
background-color: black;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
border: none;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover {
background-color: #bbb;
}
</style>
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px">Test Button List</h2>
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<div class="myUL" id="myUL">
<button class="testBtn">Test Button #1</button>
</div>
<script>
function newElement() {
var li = document.createElement("button");
var inputValue = document.getElementById("myUL").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === !"") {
document.getElementById("myUL").appendChild(li);
}
}
</script>
</body>
</html>
#################EDITED
I tried the node.clone() method, but still cannot append the button. Any suggestions?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
min-width: 250px;
}
.testBtn {
width: 100%;
background-color: grey;
color: white;
border: none;
}
/* Style the header */
.header {
background-color: black;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
border: none;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover {
background-color: #bbb;
}
.Btn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.Btn:hover {
background-color: #bbb;
}
</style>
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px">Test Button List</h2>
<span onclick="newSample()" class="addBtn">Add</span>
</div>
<div class="testBtn" id="testBtn">
<button class="Btn">Test Button #1</button>
</div>
<script>
function newSample() {
var p = document.getElementById("testBtn");
var p_prime = p.cloneNode(true);
node.appendChild(p_prime);
}
</script>
</body>
</html>
So here's a few problems.
var li = document.createElement("button");
If it's a <button> why are you calling it var li? Use a meaningful name here.
var inputValue = document.getElementById("myUL").value;
#myUL is a <div> (so why it's called UL is another mystery). You are treating it like an <input /> by trying to get its value. If you want the HTML content, use innerHTML...
var t = document.createTextNode(inputValue);
... but you're creating a text node, so I don't know what you're expecting any more. It's all very confusing.
li.appendChild(t);
This is probably fine. You're appending a text node to a button. Seems ok.
if (inputValue === !"") {
Translation: "if inputValue is identical to true" - this can never happen because inputValue is a string and true is a boolean. Did you mean inputValue !== ""?
On the whole, it's a mess. What you probably want to do is get your "template" button and use .cloneNode(true) on it, then append that to the container.
I am trying to get a delete button working on my To Do List project. I have tried a lot of different things but I am not having any luck. I believe the issue stems from the fact that I am trying to reference a button in an HTML li tag that is created by Javascript/jQuery when a user enters a new task in the To Do List. I probably am messing up the syntax relation between the two. Any help would be greatly appreciated. Thanks ahead of time.
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Project 4 - To Do List</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="page">
<h1 id="header"></h1>
<h2>To Do List <span id="counter"></span></h2>
<h3>"If you can dream it, you can do it" - Walt Disney</h3>
<div id="newItemButton"><button href="#" id="showForm">New Entry</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Enter goal" />
<input type="submit" id="add" value="Submit"/>
</form>
<ul>
<!--<li id="one">Exercise</li>
<li id="two">Study</li>
<li id="three">Practice a New Language</li>
<li id="four">Work on Personal Project</li>-->
</ul>
</div>
<div class="about">
<a id="link" href="x">About</a>
</div>
<script src="jquery-1.11.0.js"></script>
<script src="javascript_jquery.js"></script>
</body>
<footer>
<div id="footer">To do List Icons made by <a id="link" href="http://www.freepik.com" title="Freepik">Freepik</a> from <a id="link" href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a id="link" href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
</div>
<div id="footer">Trash Icons made by <a id="link" href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a id="link" href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a id="link" href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</footer>
</html>
Here is the Javascript/jQuery. The focus of my issue is on the Delete function at the bottom and probably the .append part under "Check as Complete."
/*eslint-env jquery*/
/* eslint-env browser */
$(document).ready(function() {
// SETUP
var $list, $newItemForm, $newItemButton;
var item = ''; // item is an empty string
$list = $('ul'); // Cache the unordered list
$newItemForm = $('#newItemForm'); // Cache form to add new items
$newItemButton = $('#newItemButton'); // Cache button to show form
// ITEM COUNTER
function updateCount() { // Create function to update counter
var items = $('li[class!=complete]').length; // Number of items in list
$('#counter').text(items); // Added into counter circle
}
updateCount(); // Call the function
// SETUP FORM FOR NEW ITEMS
$newItemButton.show(); // Show the button
$newItemForm.hide(); // Hide the form
$('#showForm').on('click', function() { // When click on add item button
$newItemButton.hide(); // Hide the button
$newItemForm.show(); // Show the form
});
// ADDING A NEW LIST ITEM
$newItemForm.on('submit', function(e) { // When a new item is submitted
e.preventDefault(); // Prevent form being submitted
var text = $('input:text').val(); // Get value of text input
$list.append('<li>' + text + '</li>'); // Add item to end of the list
$('input:text').val(''); // Empty the text input
updateCount(); // Update the count
});
//Check as Complete
$list.on('click', 'li', function() {
var $this = $(this);
var complete = $this.hasClass('complete');
if (complete !== true) {
item = $this.text(); // Get the text from the list item
$this.remove(); // Remove the list item
$list // Add back to end of list as complete
.append('<li class=\"complete\">' + item + '<button type="button" class="trashbutton" src="/images/icon-trash.png" alt="Trash Icon"></button>' + '</li>')
.hide().fadeIn(300); // Hide it so it can be faded in
complete = true;
}
updateCount();
});
/*//Check as Incomplete
$list.on('click', 'li', function() {
var $this = $(this);
var complete = $this.hasClass('complete');
if (complete === true) {
item = $this.text();
$this.remove();
$list
.append('<li>' + item + '</li>')
.hide().fadeIn(300);
}
updateCount();
});*/
// Delete
$list.on('click', 'li', function() {
var $this = $(this);
var readyToDelete = $this.hasClass('trashbutton');
if(readyToDelete === true) {
$this.animate({
opacity: 0.0,
paddingLeft: '+=180'
}, 500, 'swing', function() {
$this.remove();
});
}
updateCount;
});
});
Here is the CSS just in case.
#import url(http://fonts.googleapis.com/css?family=Oswald);
body {
background-color: whitesmoke;
font-family: 'Oswald', 'Futura', sans-serif;
margin: 0;
padding: 0;
}
#page {
background-color: black;
margin: 0 auto 0 auto;
position: relative;
text-align: center;
}
/* Responsive page rules at bottom of style sheet */
h1 {
background-image: url('/images/icon.png');
background-repeat: no-repeat;
background-position: center center;
text-align: center;
text-indent: -1000%;
height: 75px;
line-height: 75px;
width: 117px;
margin: auto auto auto auto;
padding: 30px 10px 20px 10px;
}
h2 {
color: #fff;
font-size: 24px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
letter-spacing: .3em;
display: inline-block;
margin: 0 0 23px 0;
}
h2 span {
background-color: #fff;
color: green;
font-size: 12px;
text-align: center;
letter-spacing: 0;
display: inline-block;
position: relative;
border-radius: 50%;
top: -5px;
height: 22px;
width: 26px;
padding: 4px 0 0 0;
}
h3 {
color: white;
}
ul {
border:none;
padding: 0;
margin: 0;
}
li {
background-color: yellowgreen;
color: black;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
font-size: 24px;
letter-spacing: .05em;
list-style-type: none;
text-shadow: 1px 1px 1px grey;
text-align: left;
height: 50px;
padding-left: 1em;
padding-top: 10px;
padding-right: 1em;
}
/* unvisited link */
#link:link {
color: yellowgreen;
}
/* visited link */
#link:visited {
color: green;
}
/* mouse over link */
#link:hover {
color: darkseagreen;
}
/* selected link */
#link:active {
color: forestgreen;
}
.about {
text-align: center;
}
#footer {
background:none;
color: black;
text-align: center;
}
.complete {
background-color: #999;
color: white;
border-top: 1px solid #666;
border-bottom: 1px solid #b0b0b0;
text-shadow: 2px 2px 1px #333;
}
.trashbutton {
background-image: url('/images/icon-trash.png');
background-position: center;
background-repeat: no-repeat;
background-size: 12px 12px;
margin: auto !important;
position: relative;
top: 35%;
transform: translateY(-50%);
}
/* FORM STYLES */
form {
padding: 0 20px 20px 20px;
}
input[type='text'], input[type='password'], textarea {
background-color: whitesmoke;
color: black;
font-size: 24px;
width: 96%;
padding: 4px 6px;
border: 1px solid #999;
border-radius: 8px;}
input[type='submit'], a.add, button, a.show {
background-color: yellowgreen;
color: black;
border-radius: 8px;
border: none;
padding: 8px 10px;
margin-top: 10px;
font-family: 'Oswald', 'Futura', sans-serif;
font-size: 18px;
text-shadow: 1px 1px 1px grey;
text-decoration: none;
text-transform: uppercase;}
input[type='submit'], button {
float: right;
}
input[type='submit']:hover {
background-color: green;
color: #fff;
cursor: pointer;
}
/* form example */
#newItemButton {
padding: 10px 20px 75px 20px;
display: none;
}
#newItemForm {
padding-top: 20px;
}
#itemDescription {
width: 325px;
}
#newItemForm input[type='submit'] {
margin-top: 0;
text-align: center;
}
/* Attributes example */
#group {
margin: 10px;
border: 2px solid #fff;
}
/* Small screen:mobile */
#media only screen and (max-width: 500px) {
body {
background-color: #403c3b;
}
#page {
max-width: 480px;
}
}
#media only screen and (min-width: 501px) and (max-width: 767px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
/* Larger screens act like a demo for the app */
#media only screen and (min-width: 960px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
h1{
background-image: url('/images/icon.png');
background-size: 100px 100px;
}
}
Some screenshots of what works so far. You can see the tasks as incomplete in green, completed in grey, and the trash button shows up when the task is grey.
When app first loads
One incomplete task and one complete task. Notice trash button that does not work.
NOTE: I should mention that, while heavily altered, the HTML and JS code is derived from an example from Jon Duckett's Javascript and jQuery book. This is my first time ever working with jQuery and the purpose of this assignment is to learn the basics.
Here is how you can get it working:
Change $list.on('click', 'li', function() { to $list.on('click', 'li > button', function() { (your list items doesn't have 'trashbutton' class).
Update code you use to delete element since after clicking on a button you have to delete parent element (li), not the button itself.
Take a look at this in action:
$(document).ready(function() {
// SETUP
var $list, $newItemForm, $newItemButton;
var item = ''; // item is an empty string
$list = $('ul'); // Cache the unordered list
$newItemForm = $('#newItemForm'); // Cache form to add new items
$newItemButton = $('#newItemButton'); // Cache button to show form
// ITEM COUNTER
function updateCount() { // Create function to update counter
var items = $('li[class!=complete]').length; // Number of items in list
$('#counter').text(items); // Added into counter circle
}
updateCount(); // Call the function
// SETUP FORM FOR NEW ITEMS
$newItemButton.show(); // Show the button
$newItemForm.hide(); // Hide the form
$('#showForm').on('click', function() { // When click on add item button
$newItemButton.hide(); // Hide the button
$newItemForm.show(); // Show the form
});
// ADDING A NEW LIST ITEM
$newItemForm.on('submit', function(e) { // When a new item is submitted
e.preventDefault(); // Prevent form being submitted
var text = $('input:text').val(); // Get value of text input
$list.append('<li>' + text + '</li>'); // Add item to end of the list
$('input:text').val(''); // Empty the text input
updateCount(); // Update the count
});
//Check as Complete
$list.on('click', 'li', function() {
var $this = $(this);
var complete = $this.hasClass('complete');
if (complete !== true) {
item = $this.text(); // Get the text from the list item
$this.remove(); // Remove the list item
$list // Add back to end of list as complete
.append('<li class=\"complete\">' + item + '<button type="button" class="trashbutton" src="/images/icon-trash.png" alt="Trash Icon"></button>' + '</li>')
.hide().fadeIn(300); // Hide it so it can be faded in
complete = true;
}
updateCount();
});
/*//Check as Incomplete
$list.on('click', 'li', function() {
var $this = $(this);
var complete = $this.hasClass('complete');
if (complete === true) {
item = $this.text();
$this.remove();
$list
.append('<li>' + item + '</li>')
.hide().fadeIn(300);
}
updateCount();
});*/
// Delete
$list.on('click', 'li > button', function() {
var $this = $(this);
var readyToDelete = $this.hasClass('trashbutton');
if(readyToDelete === true) {
$this.parent().animate({
opacity: 0.0,
paddingLeft: '+=180'
}, 500, 'swing', function() {
$(this).remove();
});
}
updateCount;
});
});
#import url(http://fonts.googleapis.com/css?family=Oswald);
body {
background-color: whitesmoke;
font-family: 'Oswald', 'Futura', sans-serif;
margin: 0;
padding: 0;
}
#page {
background-color: black;
margin: 0 auto 0 auto;
position: relative;
text-align: center;
}
/* Responsive page rules at bottom of style sheet */
h1 {
background-image: url('/images/icon.png');
background-repeat: no-repeat;
background-position: center center;
text-align: center;
text-indent: -1000%;
height: 75px;
line-height: 75px;
width: 117px;
margin: auto auto auto auto;
padding: 30px 10px 20px 10px;
}
h2 {
color: #fff;
font-size: 24px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
letter-spacing: .3em;
display: inline-block;
margin: 0 0 23px 0;
}
h2 span {
background-color: #fff;
color: green;
font-size: 12px;
text-align: center;
letter-spacing: 0;
display: inline-block;
position: relative;
border-radius: 50%;
top: -5px;
height: 22px;
width: 26px;
padding: 4px 0 0 0;
}
h3 {
color: white;
}
ul {
border:none;
padding: 0;
margin: 0;
}
li {
background-color: yellowgreen;
color: black;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
font-size: 24px;
letter-spacing: .05em;
list-style-type: none;
text-shadow: 1px 1px 1px grey;
text-align: left;
height: 50px;
padding-left: 1em;
padding-top: 10px;
padding-right: 1em;
}
/* unvisited link */
#link:link {
color: yellowgreen;
}
/* visited link */
#link:visited {
color: green;
}
/* mouse over link */
#link:hover {
color: darkseagreen;
}
/* selected link */
#link:active {
color: forestgreen;
}
.about {
text-align: center;
}
#footer {
background:none;
color: black;
text-align: center;
}
.complete {
background-color: #999;
color: white;
border-top: 1px solid #666;
border-bottom: 1px solid #b0b0b0;
text-shadow: 2px 2px 1px #333;
}
.trashbutton {
background-image: url('/images/icon-trash.png');
background-position: center;
background-repeat: no-repeat;
background-size: 12px 12px;
margin: auto !important;
position: relative;
top: 35%;
transform: translateY(-50%);
}
/* FORM STYLES */
form {
padding: 0 20px 20px 20px;
}
input[type='text'], input[type='password'], textarea {
background-color: whitesmoke;
color: black;
font-size: 24px;
width: 96%;
padding: 4px 6px;
border: 1px solid #999;
border-radius: 8px;}
input[type='submit'], a.add, button, a.show {
background-color: yellowgreen;
color: black;
border-radius: 8px;
border: none;
padding: 8px 10px;
margin-top: 10px;
font-family: 'Oswald', 'Futura', sans-serif;
font-size: 18px;
text-shadow: 1px 1px 1px grey;
text-decoration: none;
text-transform: uppercase;}
input[type='submit'], button {
float: right;
}
input[type='submit']:hover {
background-color: green;
color: #fff;
cursor: pointer;
}
/* form example */
#newItemButton {
padding: 10px 20px 75px 20px;
display: none;
}
#newItemForm {
padding-top: 20px;
}
#itemDescription {
width: 325px;
}
#newItemForm input[type='submit'] {
margin-top: 0;
text-align: center;
}
/* Attributes example */
#group {
margin: 10px;
border: 2px solid #fff;
}
/* Small screen:mobile */
#media only screen and (max-width: 500px) {
body {
background-color: #403c3b;
}
#page {
max-width: 480px;
}
}
#media only screen and (min-width: 501px) and (max-width: 767px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
/* Larger screens act like a demo for the app */
#media only screen and (min-width: 960px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
h1{
background-image: url('/images/icon.png');
background-size: 100px 100px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<h1 id="header"></h1>
<h2>To Do List <span id="counter"></span></h2>
<h3>"If you can dream it, you can do it" - Walt Disney</h3>
<div id="newItemButton"><button href="#" id="showForm">New Entry</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Enter goal" />
<input type="submit" id="add" value="Submit"/>
</form>
<ul>
<!--<li id="one">Exercise</li>
<li id="two">Study</li>
<li id="three">Practice a New Language</li>
<li id="four">Work on Personal Project</li>-->
</ul>
</div>
<div class="about">
<a id="link" href="x">About</a>
</div>
<script src="jquery-1.11.0.js"></script>
<script src="javascript_jquery.js"></script>
It would be easier for you to accomplish your task by giving the trashbutton class a click event to remove its parent li from the list. This can be accomplished with the following code.
// Delete
$('.trashbutton').click(function (e) {
e.preventDefault();
$(this).parent().animate({
opacity: 0.0,
paddingLeft: '+=180'
}, 500, 'swing', function() {
$(this).parent().remove();
});
}
updateCount();
})
how can hide a div when i clicked on a button to show another div?
I just want to show one div at a time when you click on a button and hide the rest with a slide-up effect, I hope I made myself understood. its my first time asking questions here and my English is not that good :C
I have this now and its terrible haha im not very good.
$(document).ready(function() {
$('.button1').on('click', function() {
$('.div1').slideToggle();
});
$('.button2').on('click', function() {
$('.div2').slideToggle();
});
$('.button3').on('click', function() {
$('.div3').slideToggle();
});
$('.button4').on('click', function() {
$('.div4').slideToggle();
});
});
* {
margin: 0;
padding: 0;
}
.toggler-wrap {
background-color: royalblue;
}
.buttondiv {
display: flex;
justify-content: space-around;
padding: 20px;
}
.buttons {
padding: 10px 30px;
display: block;
border: 3px solid whitesmoke;
color: whitesmoke;
text-align: center;
font-family: cursive;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
.buttons:hover {
background-color: whitesmoke;
color: royalblue;
}
.divs {
height: 400px;
color: whitesmoke;
font-family: cursive;
text-align: center;
line-height: 400px;
font-size: 500%;
display: none;
}
.div1 {
background-color: orange;
}
.div2 {
background-color: green;
}
.div3 {
background-color: red;
}
.div4 {
background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="Toogler.css">
<title></title>
</head>
<body>
<div class="toggler-wrap">
<div class="buttondiv">
button 1
button 2
button 3
button 4
</div>
<div class="div1 divs">Div1</div>
<div class="div2 divs">Div2</div>
<div class="div3 divs">Div3</div>
<div class="div4 divs">Div4</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="Toogler.js"></script>
</body>
</html>
Use the .divs selector and call .slideUp(). Also, instead of sliding up all the div's (including the selected one), you can use the .not() method to select only the other div's:
$(document).ready(function(){
$('.button1').on('click', function(){
$('.divs').not('.div1').slideUp();
$('.div1').slideDown();
});
$('.button2').on('click', function(){
$('.divs').not('.div2').slideUp();
$('.div2').slideDown();
});
$('.button3').on('click', function(){
$('.divs').not('.div3').slideUp();
$('.div3').slideDown();
});
$('.button4').on('click', function(){
$('.divs').not('.div4').slideUp();
$('.div4').slideDown();
});
});
UPDATE:
You can also simplify the code by using a data-target attribute on the <a> element, as suggested by Rik. For example:
button 1
Then, your JavaScript code would be reduced to:
$(document).ready(function() {
$('.buttons').on('click', function() {
var target = $(this).data('target');
$('.divs').not(target).slideUp();
$(target).slideDown();
});
});
Full example: https://jsfiddle.net/6jb3etjs/
When the button is clicked, retract all divs by their common class (those already hidden will stay this way). Then slide the corresponding div down.
$(document).ready(function(){
$('.button1').on('click', function(){
$('.divs').slideUp();
$('.div1').slideDown();
});
$('.button2').on('click', function(){
$('.divs').slideUp();
$('.div2').slideDown();
});
$('.button3').on('click', function(){
$('.divs').slideUp();
$('.div3').slideDown();
});
$('.button4').on('click', function(){
$('.divs').slideUp();
$('.div4').slideDown();
});
});
To make them all begin as hidden:
.divs {
height: 400px;
color: whitesmoke;
display: none;
}
Try this :
$(document).ready(function(){
$(".buttons").on("click",function(){
var which = $(this).index();
$(".divs").slideUp(500);
$(".divs").eq(which).slideDown(500);
})
})
Final code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
.toggler-wrap {
background-color: royalblue;
}
.buttondiv {
display: flex;
justify-content: space-around;
padding: 20px;
}
.buttons {
padding: 10px 30px;
display: block;
border: 3px solid whitesmoke;
color: whitesmoke;
text-align: center;
font-family: cursive;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
.buttons:hover {
background-color: whitesmoke;
color: royalblue;
}
.divs {
height: 400px;
color: whitesmoke;
font-family: cursive;
text-align: center;
line-height: 400px;
font-size: 500%;
display: none;
}
.div1 {
background-color: orange;
}
.div2 {
background-color: green;
}
.div3 {
background-color: red;
}
.div4 {
background-color: purple;
}
</style>
<title></title>
</head>
<body>
<div class="toggler-wrap">
<div class="buttondiv">
button 1
button 2
button 3
button 4
</div>
<div class="div1 divs">Div1</div>
<div class="div2 divs">Div2</div>
<div class="div3 divs">Div3</div>
<div class="div4 divs">Div4</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".buttons").on("click",function(){
var which = $(this).index();
$(".divs").slideUp(500);
$(".divs").eq(which).slideDown(500);
})
})
</script>
</body>
</html>
I'm having trouble trying to check if a user has inputted a specific letter or word(s) and if the letter or word(s) is correct then it will unhide a button.
Any help would be great!
This is what I have so far:
$(document).ready(function() {
$(".textArea").keyup(function() {
if ($(this).val() == 'a') {
$(".continue").css("visibility", "visible");
}
});
});
body {
margin: 0;
padding: 0;
background-color: #3f2860;
}
.codeArea {
width: 50%%;
height: 500px;
border: 2px solid #ef6d3b;
box-sizing: border-box;
font-size: 20px;
background-color: transparent;
color: #ffffff;
outline-width: 0;
position: relative;
float: left;
margin-right: 5px;
}
.textArea {
width: 100%;
height: 100%;
resize: none;
font-size: 20px;
background-color: transparent;
color: #ffffff;
outline: none;
border: none;
white-space: normal;
position: relative;
float: left;
}
.boxContainer {
width: 98%;
}
.boxContainer {
margin: 0 auto;
}
.continue {
background-color: #ef6d3b;
width: 6em;
text-align: center;
font-size: 15px;
border: none;
height: 25px;
color: #000000;
outline: none;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
position: relative;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="codeArea">
<textarea class="textArea">
<h1>Test</h1> <style> h1{ } </style>
</textarea>
</div>
<div class="buttonContainer">
<a href="#">
<button class="continue" type="button">Continue</button>
</a>
</div>
Your problem seems to be in the checking of the value in your textarea. Right now you are grabbing all the text and seeing if it is =='a'. Instead try something like this
if($(this).val().indexOf('word') !== -1)
Where 'word' is whatever you wanted to check for. This will search for the text in the textarea and determine if it exists or not.
In this block of code:
$(document).ready(function() {
$(".textArea").keyup(function() {
if ($(this).val() == 'a') {
$(".continue").css("visibility", "visible");
}
});
});
$(this).val() starts out with the value <h1>Test</h1> <style> h1{ } </style>, so will never be equal to 'a' unless you removed all the text and typed a single letter 'a'.
You need to be using indexOf('a') as such...
$(document).ready(function() {
$(".textArea").keyup(function() {
if ($(this).val().indexOf('a') !== -1) {
$(".continue").css("visibility", "visible");
}
});
});
Currently you are saying if the complete contents of .textarea equals a then show the button. Even it the contents contains a whitespace before and or after a it won't show the button.
If you want "show me the button when .textarea contains" then you need to make use of .indexOf()
$(document).ready(function() {
$(".textArea").keyup(function() {
if ($(this).val().indexOf('a') !== -1) {
$(".continue").css("visibility", "visible");
}
});
});
Above example with your original code can be tested here: https://jsfiddle.net/m410xphk/8/