gradient box dynamically append jquery

gradient box dynamically append jquery - javascript

If click on button some boxes are append. next you will click on that boxes gradient box will append but gradient boxes are not appending.its append only first box if click on another box gradient box doesn't append
My Fiddle
<script src="https://cdn.office24by7.com/add-templates/gradX.js"></script>
<button class="clbtn" name="button" value="button">button</button>
<div class="appenddiv">
</div>
<script>
$(document).ready(function(){
var i = 0;
$(".clbtn").click(function(el){
$.fn.myFunction = function(){
gradX("#clrpik", {
targets: [".target"]
});
}
$(".appenddiv").append('<div class="target"><div class="target_text">Click Here for gradient</div></div>');
$(".target").click(function(){
$(".appenddiv").append('<div id="clrpik"></div>').myFunction();
});
});
});
</script>

Gradient box appending on other div click but it's stick to first div
use this to set:
$(this).append('<div id="clrpik"></div>').myFunction();
});
$(document).ready(function(){
var f = 0;
$(".clbtn").click(function(el){
$.fn.myFunction = function(){
gradX("#clrpik", {
targets: [".target"]
});
//f++;
}
$(".appenddiv").append('<div class="target"><div class="target_text">Click Here for gradient</div></div>');
$(".target").one('click', function(){
$(this).append('<div id="clrpik"></div>').myFunction();
});
});
});
.targets {
margin:0 auto;
text-align: center;
border: 1px solid #ccc;
background: #f8f8f8;
margin: 0 auto;
border-radius: 4px;
width:auto;
padding:10px;
}
.target_text {
margin: 0px auto;
margin-top: 40%;
background: #f8f8f8;
width: 70px;
border: 1px solid #ddd;
padding: 2px;
border-radius: 2px;
color: #111;
}
.target {
border: 1px solid;
margin: 0px 10%;
width: 150px;
height: 150px;
display:inline-block;
}
#target {
border-radius: 150px;
}
.result {
text-align: center;
text-transform: uppercase;
font-weight: bold;
padding:12px;
padding-left: 15px;
margin: 10px 0px;
border: 1px solid #ddd;
background: #f8f8f8;
}
.clrpik {
height: 200px;
margin: 100px 34%;
}
<link href="https://cdn.office24by7.com/add-templates/colorpicker.css" rel="stylesheet"/>
<link href="https://cdn.office24by7.com/add-templates/gradX.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/dom-drag.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/colorpicker/js/colorpicker.js"></script>
<script src="https://cdn.office24by7.com/add-templates/gradX.js"></script>
<button class="clbtn" name="button" value="button">button</button>
<div class="appenddiv">
</div>

Related

Auto resize text element not working with keyup

In my below jQuery I have an element that reflects the written input within a secondary element. At the same time the element with the reflected text needs to resize, this is working, but there are 2 problems I cannot resolve:
1. When holding a backspace down, it doesn't keep up.
2. When you press single backspace, it skips a character and field cannot be emptied.
Please see below snippet:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').bind('keypress keyup blur', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>

The problem is that the .bind('keypress keyup blur', function() { is not cooping well with updating the values. When the key is down it needs an update and is waiting for up, it then skips, and vice versa.
So the solution here is to use .on('input', function() { instead.
See below outcome:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').on('input', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>

HTML/CSS/PHP/JavaScript | Dropdown content is not appearing near the selected dropdown button

A little bit of backstory and info about my knowledge of code:
I have been learning code for 2-3 years and I am currently working on a Web application with a classmate, and we are nearly done. I mainly did the HTML/CSS part and he mainly did the PHP/JavaScript part, so my knowledge is mostly HTML and CSS.
My problem:
My classmate has coded a system where certain 'badges' are in certain levels, and you can drag them around into different levels. These badges are retrieved from a database, and then made using some form of a loop that runs for every badge in the database. This happens with some HTML code in PHP. This part works fine.
Image of badges and levels here
Now comes my problem: I'm trying to create some form of a dropdown menu within each individual 'badge', but while the dropdown buttons appear in every 'badge', the dropdown content only appears near the first button. I don't know if it is the same content that is triggered by every button, or if it is different content that is appearing in the same spot for some reason.
If someone could tell me what is exactly going wrong and how to fix it, that would be greatly appreciated. (we have to have our project finished on 5 or 6 febuary 2019).
First dropdown button clicked
Fourth dropdown button clicked
As you can see, it appears in the same spot yet different buttons are clicked.
Code used:
Main code consisting of HTML, PHP and JavaScript:
<!DOCTYPE html>
<head>
<title>Badges</title>
<link rel="stylesheet" href="main.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="BadgePage.js"></script>
</head>
<body style="margin:0">
<div id="container">
<div id="home">
<a href="workinprogress.html">
<button class="home-button">
<img src="img/MCC.png" width="200" height="60">
</button>
</a>
</div>
<div id="BP-link" class="nav">
<button class="bpbutton">Badges</button>
</div>
<div id="lln_page" class="nav">
<button class="llnpbutton">Leerlingen</button>
</div>
<div id="main">
<div class="main">
<?php
$link = mysqli_connect("localhost", "root", "", "badgedb");
$lev = 1;
$levAantal = 3;
for($lev;$lev<=$levAantal;$lev++){
echo '<div id="level' . $lev . '" class="levelID">';
echo '<p class="level">Level ' . $lev . '</p>';
echo '<ul class="itemList Level-' . $lev . ' ui-sortable" id="L' . $lev . '">';
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "SELECT * FROM badges";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
} else{
echo "No records matching your query were found.";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
while($row = mysqli_fetch_array($result)){
if($row['level'] == $lev){
echo " <li class='item'>
<link rel='stylesheet' href='side.css' />
<script type='text/javascript'>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById('myDropdown').classList.toggle('show');
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName('dropdown-content');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<img src='img/" . $row['afbeelding'] . "' alt='Item Number " . $row['ID'] . "' class='itemImage' id='" . $row['ID'] . "'>
<div class='dropdown'>
<button onclick='myFunction()' class='dropbtn'>Dropdown</button>
<div id='myDropdown' class='dropdown-content'>
<button href='#'>Link 1</button>
<button href='#'>Link 2</button>
</div>
</div>
</li>";
}
}
echo "</ul>";
echo "</div>";
}
?>
<script type="text/javascript">
function onSubmit(){
var badgeID;
var Alpha = 1;
const search = $('.main > div.levelID > ul > li > img');
const badges = {};
const hrefDir = location.href.replace(/(^.*\/).*?$/, '$1'); // http://localhost/PWS/Testing2.php -> http://localhost/PWS/
for (const badge of search) {
const levelID = parseInt(badge.parentElement.parentElement.id.replace('L', ''));
if (badge.id){
badgeID = parseInt(badge.id);
}
else {
badgeID = 0;
}
const badgeImg = badge.src.replace(hrefDir + 'img/', '');
badges[Alpha] = {
level: levelID,
afbeelding: badgeImg,
ID: badgeID
}
Alpha++;
}
$.ajax('api/update-order.php', {
data: badges
});/*.done((data)=>{
console.log(data)
});
console.log(badges);/**/
alert("Data uploaded!");
}
</script>
<input type="button" onclick="onSubmit()" value="submitter">
<!-- <div class="optionsButton">
<div class="dropdown">
<button class="dropbtn"><img src="img/cogwheel.png" alt="opties" class="options"></button>
<div class="dropdown-content">
<p>YEET</p>
</div>
</div>
</div> -->
</div>
</div>
</div>
</body>
Main CSS document:
* {
box-sizing: border-box;
}
#myInput {
background-color: white;
width: 40%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
margin-left: 30%;
}
#myTable {
border-collapse: collapse;
width: 80%;
border: 1px solid #ddd;
font-size: 18px;
margin: 0 auto;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
body {
margin: 0;
}
}
.dropbtn {
background-color: darkgray;
border-left: solid;
border-top: solid;
border-top-left-radius: 10px;
max-height: 10%;
max-width: 5%;
height: 100px;
width: 100px;
position: fixed;
bottom: 0px;
right: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 100%;
top: 0%;
background-color: darkgray;
width: auto;
}
.main {
height: 100%;
}
.options {
height: 100%;
width: 100%;
}
p.level {
width: inherit;
text-align: center;
background-color: gray;
color: white;
padding: 5px;
margin-top: 0;
font-size: 20px;
border-radius: 10px;
border: solid darkgray;
}
ul.itemList {
height: auto;
min-height: 50px;
}
.ui-sortable-handle {
width: auto;
}
li.item {
display: inline-block;
border: 1px black double;
background-color: lightgrey;
padding: auto;
padding-left: 1%;
padding-right: 1%;
margin-left: 0px;
}
img.itemImage {
height: 150px;
width: 150px;
}
button.bpbutton {
height: 100%;
width: 100%;
color: white;
background-color: #F44336;
border: solid;
border-color: #F44336;
}
button.bpbutton:hover {
background-color: #cc1c0e;
color: lightgray;
}
button.llnpbutton {
height: 100%;
width: 100%;
color: white;
background-color: #F44336;
border: solid;
border-color: #F44336;
}
button.llnpbutton:hover {
background-color: #cc1c0e;
color: lightgray;
}
button.home-button {
height: 100%;
width: 100%;
color: white;
background-color: #F44336;
border: solid;
border-color: #F44336;
}
#container {
display: grid;
grid-template-columns: 0fr 1fr 1fr;
grid-template-rows: 1fr 14fr;
grid-template-areas:"home BP-link lln_page"
"main"
}
#home {
background-color: #F44336;
padding-left: 10px;
border-right: dashed #f22615;
border-bottom: solid #f22615;
color: white;
padding-top: 1%;
}
#zoek {
background-color: #F44336;
border-right: dashed;
border-color: #f22615;
color: white;
text-align: center;
border-bottom: solid #f22615;
}
#BP-link {
background-color: #F44336;
color: white;
text-align: center;
border-bottom: solid #f22615;
border-right: dashed #f22615;
}
#lln_page {
background-color: #F44336;
color: white;
text-align: center;
border-bottom: solid #f22615;
}
#main {
background-color: lightgray;
width: 100%;
grid-column: 1 / end;
}
#workinprogress {
background-image: url(https://www.scansys.eu/scansysfld/uploads/2017/06/Work_In_Progress.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: lightgray;
width: 100%;
grid-column: 1 / end;
}
th, td, table {
border: 1px black solid;
border-collapse: collapse;
}
textarea.comment {
resize:none;
height:50px;
width:90%;
}
.buttonForSubmit {
text-align: center;
}
#submitButton {
height:50px;
width:60px;
}
CSS document specifically for the dropdown components:
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #304870;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content button {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
width: 100%;
}
.dropdown-content button:hover {background-color: #ddd}
.show {display:block;}
Image of Database, should you need it.
Thank you for reading, and I hope you or someone else can help us.
Please tell me if you need anything else.

To Do List Delete Button within HTML <li> element

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();
})

Can't Get If / Else Statement To Trigger

Here's my full code for what I'm working on:
https://codepen.io/sygilmore89/pen/BREvqG?editors=1010
The exact issue I'm having is that the if / else statement at the end isn't triggering like I would hope. I added the counter variable, and listed it to verify it's at the number I need, to account for an exact sequence of clicks to produce a particular outcome. If the player doesn't do that exact sequence, then the game should end in another way.
I'm puzzled as I don't see how it isn't triggering that counter is three AND the bottom left div is without text. Instead of putting the X where it should go at the point, it only continues to trigger the else statement. I probably should scrap it and try another method entirely but at this point I'm just confused as to why that exact line isn't working.
$(document).ready(function() {
var counter = 0;
$("#letterChoice").hide();
$("#button1").on("click", function() {
$("#letterChoice").show();
});
$("#buttonR").on("click", function() {
$("#letterChoice").show();
$("#topLeft").text("");
$("#topLeft").off("click");
$("#topCenter").text("");
$("#topCenter").off("click");
$("#topRight").text("");
$("#topRight").off("click");
$("#middleLeft").text("");
$("#middleLeft").off("click");
$("#middleMid").text("");
$("#middleMid").off("click");
$("#middleRight").text("");
$("#middleRight").off("click");
$("#bottomLeft").text("");
$("#bottomLeft").off("click");
$("#bottomMid").text("");
$("#bottomMid").off("click");
$("#bottomRight").text("");
$("#bottomRight").off("click");
counter = 0;
$("#test").text(counter);
});
$("#buttonX").on("click", function() {
$("#middleMid").text("O");
$("#middleMid").off("click");
if ($("#topLeft").text("")) {
$("#topLeft").on("click", function() {
$("#topLeft").text("X");
$("#topCenter").text("O");
counter++; //1
$("#test").text(counter);
});
}
if ($("#bottomMid").text("")) {
$("#bottomMid").on("click", function() {
$("#bottomMid").text("X");
$("#middleLeft").text("O");
counter++;
$("#test").text(counter);
});
}
if ($("#middleRight").text("")) {
$("#middleRight").on("click", function() {
$("#middleRight").text("X");
$("#topRight").text("O");
counter++;
$("#test").text(counter);
});
}
if ($("#bottomLeft").text("") && counter == 3) {
$("#bottomLeft").on("click", function() {
$("#bottomLeft").text("X");
$("#bottomRight").text("O");
});
} else {
$("#bottomLeft").on("click", function() {
$("#bottomLeft").text("X");
$("#bottomMid").text("O");
$("#topLeft").off("click");
$("#topCenter").off("click");
$("#topRight").off("click");
$("#middleLeft").off("click");
$("#middleMid").off("click");
$("#middleRight").off("click");
$("#bottomLeft").off("click");
$("#bottomMid").off("click");
$("#bottomRight").off("click");
});
}
});
});
body {
margin-top: 15px;
}
#board {
background-color: white;
width: 480px;
height: 480px;
}
.title {
margin-bottom: 15px;
}
#topLeft {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#topCenter {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#topRight {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#middleLeft {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#middleMid {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#middleRight {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#bottomLeft {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#bottomMid {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#bottomRight {
border: 1px solid black;
height: 160px;
width: 160px;
font-size: 92.5px;
}
#buttonX {
margin-bottom: 20px;
box-shadow: 0px 0px 1px 1px black;
border-radius: 2px;
outline: none;
background-color: #ccc;
}
#buttonR {
margin-bottom: 20px;
box-shadow: 0px 0px 1px 1px black;
border-radius: 2px;
outline: none;
background-color: #ccc;
}
#buttonO {
margin-bottom: 20px;
box-shadow: 0px 0px 1px 1px black;
border-radius: 2px;
outline: none;
background-color: #ccc;
}
#button1 {
margin-bottom: 20px;
box-shadow: 0px 0px 1px 1px black;
border-radius: 2px;
outline: none;
background-color: #ccc;
}
#letterChoice {
margin-left: 33.5px;
}
#choices {
margin-left: 175px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<div class="container text-center" id="board">
<h1 class="title">Tic Tac Toe</h1>
<div class="row" id="choices">
<input type="button" value="New Game" id="button1" />
<div id="letterChoice"><input type="button" value="X" id="buttonX" /> or <input type="button" value="O" id="buttonO" /></div>
</div>
<div><input type="button" value="Reset" id="buttonR" /></div>
<div id="test">Test it</div>
<div class="row" id="topRow">
<div id="topLeft">
</div>
<div id="topCenter">
</div>
<div id="topRight">
</div>
</div>
<div class="row" id="middleRow">
<div id="middleLeft">
</div>
<div id="middleMid">
</div>
<div id="middleRight">
</div>
</div>
<div class="row" id="bottomRow">
<div id="bottomLeft">
</div>
<div id="bottomMid">
</div>
<div id="bottomRight">
</div>
</div>
</div>

Your condition is setting the text and evaluating the result instead of checking if it equals an empty string. You're looking for:
if($("#bottomLeft").text() == '' && counter == 3)
What's happening with your existing code is it sets the text to an empty string and then evaluates the result, which is a jQuery object that will always evaluate to true.

jQuery onclick set css didn't work

This is my code
<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
function skinchange(link){
document.getElementById('inputtest').value = link;
}
</script>
<script type="text/javascript">
$(function() {
$('.imgstyles').click(function() {
$('.imgstyles').removeClass('selected');
$(this).addClass('selected')
});
});
</script>
.selected {
border: 10px solid #7EBEFC;
}
a:hover img.imgstyles {
border: 3px solid #7EBEFC;
opacity:0.15;
}
a:hover div.textcss {
display: block;
}
a img.imgstyles {
border: 2px solid #ffffff;
}
.textcss {
display: none;
margin-top: -147px;
font-size: 50px;
font-weight: bold;
margin-right: 20px;
color: #7EBEFC;
text-align: center;
}
<input type="text" name="inputtest" id="inputtest"/>
<a onclick="skinchange('https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/gred.xml')"><img class="imgstyles" src="https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/images/gred.jpg" width="95%" height="60%"><div class="textcss">Gred</div></a>
Function set value work, hover work but my selected css didn't, someone help me!

The problem is the css specificity.
The border rule set by .selected is overwritten by the more specific rule a img.selected.
So the solution is to create a more specific rule like img.imgstyles.selected
function skinchange(link) {
document.getElementById('inputtest').value = link;
}
$(function() {
$('.imgstyles').click(function() {
$('.imgstyles').removeClass('selected');
$(this).addClass('selected')
});
});
.selected, img.imgstyles.selected {
border: 10px solid #7EBEFC;
}
a:hover img.imgstyles {
border: 3px solid #7EBEFC;
opacity: 0.15;
}
a:hover div.textcss {
display: block;
}
a img.imgstyles {
border: 2px solid #ffffff;
}
.textcss {
display: none;
margin-top: -147px;
font-size: 50px;
font-weight: bold;
margin-right: 20px;
color: #7EBEFC;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<input type="text" name="inputtest" id="inputtest" />
<a onclick="skinchange('https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/gred.xml')">
<img class="imgstyles" src="https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/images/gred.jpg" width="95%" height="60%">
<div class="textcss">Gred</div>
</a>

Develop Reference

JavaScript is the programming language of the Web.

gradient box dynamically append jquery - javascript

Related

Auto resize text element not working with keyup

HTML/CSS/PHP/JavaScript | Dropdown content is not appearing near the selected dropdown button

To Do List Delete Button within HTML <li> element

Can't Get If / Else Statement To Trigger

jQuery onclick set css didn't work

Categories

Resources