I'm creating a "social media comment section" (you can add your own comments by typing in a comment box at the bottom.) I want to add an edit button which can change as to what ever comment the edit button was clicked on. I am very unfamiliar with how do to do this. I've tried adding a click function that creates a text box where you can put text into but it creates the text box on every comment that has an edit button. How can I make the "Edit" button more specific to which ever comment was clicked?
$(document).ready(function(){
let value;
let storeValues = []
let storeValueName;
let storeValueComment;
$('#addComment').click(function(){
storeValueName = getName();
storeValueComment = getComment();
storeValues.push(storeValueName);
storeValues.push(storeValueComment);
value = getName() + getComment();
function getName(){
let grabName;
$('#name').val(function(i, v){
grabName = v;
})
return grabName;
}
function getComment(){
let grabComment;
$('#bodyText').val(function(i, v){
grabComment = v;
})
return grabComment
}
console.log(storeValues);
$('.eachComment').prepend('<div class="comments">' +'<img class="imgClass" src="userImage.jpg">'+'<p class="nameVal">'
+ storeValueName +'</p>' + '<p class="commentVal">'+ storeValueComment +'</p>'+
'<input type="button" id="edit" value="Edit" />'+ '<input type="button" id="delete" value="Delete" />' + '</div>');
$('#edit').click(function(){
})
})
})
body{
background-color: #E5E5E5
}
#wholeForm{
margin: 0 auto;
width: 800px;
height: 400px;
position: relative;
background-color: #D3D3D3;
font-family: helvetica;
}
#question{
padding: 0px;
margin: 0px;
width: 780px;
height: 75px;
background-color: white;
padding:10px;
}
#nameOfPerson{
font-size:13px;
margin: 0;
padding: 0;
}
#commentOfPerson{
font-size:25px;
font-weight: bold;
margin: 0;
padding: 0;
}
.form2{
width: 800px;
height: 458px;
}
.comments{
background-color: white;
width: 780px;
height: 75px;
position: relative;
margin: 10px;
}
.form1{
padding:20px;
margin-bottom: 10px;
width: 758px;
position: absolute;
bottom: -10px;
background-color: white;
}
#addComment{
display: inline-block;
margin-left: 35px;
}
#name{
width: 125px;
}
#bodyText{
width: 500px;
}
.formInput{
display: inline-block;
}
.nameVal{
display: inline-block;
font-size: 12px;
position: absolute;
}
.commentVal{
display: inline-block;
position: absolute;
font-weight: bold;
font-size: 18px;
bottom: 5px;
}
.imgClass{
display: inline-block;
height: 65px;
width: 65px;
margin: 5px;
}
#edit{
position: absolute;
right:55px;
border: none;
text-decoration: underline;
color:#30D5C8;
background-color:white;
margin:5px;
}
#delete{
position: absolute;
right:0px;
border: none;
text-decoration: underline;
color:#30D5C8;
background-color:white;
margin:5px;
}
#edit:hover{
color:#DDA0DD
}
#delete:hover{
color:#DDA0DD
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='style.css' type='text/css' rel='stylesheet' />
</head>
<body>
<div id='wholeForm'>
<div id="question">
<p id="nameOfPerson">WhySoSerious45</p>
<p id="commentOfPerson">Trying to decide a career path? Programming is the move. Change my mind.</p>
</div>
<div class='form2'>
<div class='eachComment'>
<div class="comments">
<img class="imgClass" src="userImage.jpg">
<p class="nameVal">Jonny R</p>
<p class="commentVal">I wish I knew how to program! Maybe ill start learning?</p>
<input type="button" id="edit" value="Edit">
<input type="button" id="delete" value="Delete">
</div>
</div>
</div>
<div class='form1'>
<div class='formInput'>
<input type="text" id="name" placeholder="Display Name"/>
<input type='text' id="bodyText" placeholder="Comment"></textarea>
</div>
<input type="button" id="addComment" value="Submit">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.slim.min.js" integrity="sha256-MlusDLJIP1GRgLrOflUQtshyP0TwT/RHXsI1wWGnQhs=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
To answer your question in a general sense…
When you add an event listener, the specific element will show up on the event's target property. So, if we had something like this:
<div class="posts">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
We could actually add a click handler to the div, because events "bubble" up to it.
document.querySelector('.posts').addEventListener('click' (e) => {
console.log(e.target.textContent); // Button 1, Button 2, etc.
});
Related
So I taught myself coding a few years ago, and got it just enough to put together a few tools for work. I recently had to migrate my site out of CodePen and onto an actual web server. Now I'm having an issue where part of my javascript is executing properly (a portion that empties all other input fields when a user enters an input field using JQuery), but the button that calculates an answer will not work. I believe the .click is not picking it up. Either way I'm not getting error messages, the button just does nothing when I press it.
When I put the code in a snippet to share with you guys, it works (just like it did in CodePen), but the exact same code on my web host does not work. I'm really at a loss here and any help would be greatly appreciated. I feel like I'm missing some small line of code that's supposed to be included in all web files.
$(document).ready(function() {
//Clear out input fields when not selected
$("#sg").focusin(function() {
$("#density").val("");
});
$("#density").focusin(function() {
$("#sg").val("");
});
$("#pounds").focusin(function() {
$("#grams").val("");
$("#percentage").val("");
});
$("#grams").focusin(function() {
$("#percentage").val("");
$("#pounds").val("");
});
$("#percentage").focusin(function() {
$("#pounds").val("");
$("#grams").val("");
});
$(".input_field").focusin(function() {
$("#density").removeClass('highlight');
$("#sg").removeClass('highlight');
$("#pounds").removeClass('highlight');
$("#grams").removeClass('highlight');
$("#percentage").removeClass('highlight');
});
//Calculate on press of enter
$("#button").keypress(function(e) {
if (e.which == 13) {
alert("this is working");
}
});
$("#button").click(function() {
calculateButton();
});
//Calculate values on button hit
function calculateButton() {
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
function removeCommas(x) {
x = x.replace(",", "");
return x;
}
var results = 0;
//Pulling information from input cells
var densityStr = document.getElementById("density").value;
var sgStr = document.getElementById("sg").value;
var poundsStr = document.getElementById("pounds").value;
var gramsStr = document.getElementById("grams").value;
var percentageStr = document.getElementById("percentage").value;
//remove commas from string and then convert string to number
var densityNum = Number(removeCommas(densityStr));
var sgNum = Number(removeCommas(sgStr));
var poundsNum = Number(removeCommas(poundsStr));
var gramsNum = Number(removeCommas(gramsStr));
var percentageNum = Number(removeCommas(percentageStr));
if (densityStr.length !== 0) {
var sgConversion = densityNum / 8.3454;
$("#sg").val(sgConversion.toFixed(3));
$("#density").addClass('highlight');
} else if (sgStr.length !== 0) {
var densityConversion = sgNum * 8.3454;
$("#density").val(densityConversion.toFixed(3));
$("#sg").addClass('highlight');
}
if (poundsStr.length !== 0) {
$("#pounds").addClass("highlight");
densityNum = document.getElementById("density").value;
var gramsConversion = poundsNum * 119.83;
var percentageConversion = poundsNum / densityNum * 100;
$("#grams").val(gramsConversion.toFixed(0));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (gramsStr.length !== 0) {
$("#grams").addClass("highlight");
densityNum = document.getElementById("density").value;
var poundsConversion = gramsNum / 119.83;
var percentageConversion = poundsConversion / densityNum * 100;
$("#pounds").val(poundsConversion.toFixed(2));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (percentageStr.length !== 0) {
$("#percentage").addClass("highlight");
densityNum = document.getElementById("density").value;
var percentageDec = percentageNum / 100;
var poundsConversion = densityNum * percentageDec;
var gramsConversion = poundsConversion * 119.83;
$("#pounds").val(poundsConversion.toFixed(2));
$("#grams").val(gramsConversion.toFixed(2));
}
}
});
body {
margin: 0;
font-family: 'Lato', sans-serif;
background: #d2d2d2;
}
p {
text-align: center;
}
conatiner {
max-width: 1024px;
margin: 0 auto;
}
#navbarContainer {
background: #F44336;
overflow: hidden;
width: 100%;
margin: 0;
}
.navbar {
float: left;
display: block;
font-family: 'Lato', sans-serif;
height: 40px;
width: 200px;
line-height: 40px;
text-align: center;
background: #F44336;
text-decoration: none;
color: #212121;
}
.navbar:hover {
background: #E57373;
color: white;
}
.active {
background: #C62828;
color: white;
}
#formContainer {
width: 450px;
background: #FDFFFC;
margin: 50px auto;
padding: 0px;
border-radius: 8px;
overflow: hidden;
}
#formContainer header {
width: 100%;
height: 130px;
background-color: #3cba54;
overflow: auto;
color: white;
}
header h1 {
margin: 35px 0 0 0;
text-align: center;
line-height: 30px;
}
header h3 {
line-height: 40px;
text-align: center;
margin: 0;
}
#heading {
background-color: #3cba54;
height: 40px;
color: white;
margin-bottom: 25px;
margin-left: -30px;
}
#heading h3 {
line-height: 40px;
}
form {
padding: 20px 0 0 20px;
text-align: center;
}
label {
display: inline-block;
width: 220px;
text-align: right;
}
#myForm .input_field {
margin-left: 20px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 10px;
width: 125px;
height: 35px;
font-size: 17px;
border-radius: 3px;
background-color: #E0E0E0;
border: none;
}
#button {
display: block;
border-radius: 6px;
width: 200px;
height: 50px;
padding: 8px 15px 8px 15px;
margin: 0 auto;
margin-bottom: 50px;
font-size: 16px;
box-shadow: 0 6px #540000;
background-color: #FF3636;
border: none;
outline: none;
}
#button:active {
background-color: #B81B1B;
box-shadow: 0 1px #27496d;
transform: translateY(5px);
}
.highlight {
background: #FFEB3B !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
</body>
</html>
Sometimes putting script tags before the elements on the page can cause issues. You can try to put the scripts at the bottom of the body like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I am trying to make this website about time management for a project at school. I am trying to create a input (text box) that when the button "add task" is click it is placed (the text inside of it) in a paragraph or p2 and then the input is moved down.
This I think is the problematic section:
Sorry I have posted all the html, css, and Javascript in the html section of the code snippet
Please I really need help
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
<font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
<div>
<h2> Today <span class= "june13">June 13</span></h2>
<div class="line1">
<div> <br>
<div id= "bonus">
<p id= "p1"> </p>
</div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>
<div>
<button class="button" onclick ="addtask()"> Add Task </button>
<div id="div">
<button onclick ="appendRow()" value="Add Row">Add Row</button>
</div>
<div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
</div>
</div>
</div>
</div>
</div>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line1 {
width: 30%;
height: 2px;
background-color: #666;
opacity: 0.50;
margin-bottom: 10px;
}
.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
input {
margin-bottom: 10px;
}
</style>
</div>
<script>
function addtask() {
var 1 = document.getElementById("first").value;
document.getElementById("p1").innerHTML = var 1;
{
function generateRow() {
var d = document.getEleme ntById('div');
d.innerHTML+="<p><input type='text' name='food'>";
}
</script>
</body>
</html>
I think this is the problematic part
function addtask() {
var 1 = document.getElementById("first").value;
document.getElementById("p1").innerHTML = var 1;
{
This image is what it looks like. As you can see the text box is where you put in the task you want or other input and then when you click the green button it will place it will place it above the current input box as a p2 and then the user is able to add another task.
I know there is a lot of extra code however, I hope you get the basic idea
Something like this
You can't name a variable as a number. You'd need to name it something else - also note you shouldn't have the var when you're using the variable.
var val = document.getElementById("first").value;
document.getElementById("p1").innerHTML = val;
Here you go.
Obviously you can't add rows because that function isn't created yet
As an advice I suggest you to use placeholder in your input instead of value.
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
<font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
<div>
<h2> Today <span class= "june13">June 13</span></h2>
<div class="line1">
<div> <br>
<div id= "bonus">
<p id= "p1"> </p>
</div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>
<div>
<button class="button" onclick ="addtask()"> Add Task </button>
<div id="div">
<button onclick ="appendRow()" value="Add Row">Add Row</button>
</div>
<div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
</div>
</div>
</div>
</div>
</div>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line1 {
width: 30%;
height: 2px;
background-color: #666;
opacity: 0.50;
margin-bottom: 10px;
}
.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
input {
margin-bottom: 10px;
}
</style>
</div>
<script>
function addtask() {
var first = document.getElementById("first").value;
document.getElementById("p1").innerHTML = first;
}
function generateRow() {
var d = document.getElementById('div');
d.innerHTML+="<p><input type='text' name='food'>";
}
</script>
</body>
</html>
I am trying to get my document.on function to work when the user clicks on the p tag that has a class called card. So far the function is non responsive. What should I change so the function will respond when I click on the p tag that has a class called card. Here is my HTML and JQuery code.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append("<p class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></p><p class='back'>"+desc+"</p>");
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
Here is my css code
*{
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper{
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left{
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right{
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p{
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email{
margin-left: 45px;
}
button{
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card{
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back{
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea{
border: 2px solid black;
}
Somehow the p.class you were appending was broken, it was below the other elements and was not being identified as the sender by jQuery event.
The following works fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
var p = $('<p class="card">');
p.append("<h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p>");
$('div.right').append(p);
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
your code were not right , the appending elements not formatted as your wish , thats why the click function not working, check the below snippt i have fixed your code, hope fully this will help you
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append('<p class="card"></p>');
$('.card').html("<h1> first +' '+last</h1><h4>Click for description!'</h4><p class='back'>+desc+</p>"
);
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
* {
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper {
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left {
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right {
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p {
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email {
margin-left: 45px;
}
button {
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card {
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back {
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea {
border: 2px solid black;
}
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name:
<input type="text" name="fname" class="first">
</p>
<p >Last name:
<input type="text" name="lname" class="last">
</p>
<p class="desc">Description:</p>
<p>
<textarea rows="4" cols="50"></textarea>
</p>
<button>Add User</button>
</form>
</div>
<div class="right"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
looks like You're misusing the header tags.
I tried your DOM structure, and what's happening is that when Firefox/Chrome sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Developer Tools.
You should use <span> tags instead of header tags, check this it Works here
JS CODE:
$('div.right')
.append('<p class="card"><span>'+first+'<==>'+last+'</span>Click for Description!!!</p>');
Using developer tools inpsection, you'll see your added html is
<p class="card"></p><h1> </h1><h4>'Click for description!'</h4><p></p><p class="back"></p>`
No matter what I've tried, I can't get Firefox to create insert that html as you want it!! it's like it doesn't want to put h1/h4 inside a p so decides to close the p early!
change to
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></div><p class='back'>"+desc+"</p>");
and it all goes good - indeed, it's odd, that you already have css for div.card, but not p.card!!
You could do it in Javascript and impliment jquery in the function:
var div = document.getElementById('someid');
function foo(e) {
//Jquery Here
}
div.addEventListener('click', foo);
This is what I use for a lot of my functions.
Wrap card with <div/> instead of <p/> and it should work. As you have other block elements inside <p/>. It's breaking your html.
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p></div>");
And then change 'p.card' to 'div.card'.
I have an input[type=text] element and another div for selected elements in my form.
I need to create my own custom tag plugin container and my problem is in css style and layout for the tag container and appearance for it.
This is my actual stage (very poor): http://jsfiddle.net/db8upk61/1/
I want something like it:
challenges
how to simulate an input border between these elements?
how to remove border from input element like the example above?
how to mantain tags in the same line as input?
There are a lot of plugins that makes that, but, as you need to do.
You can create a container simulating an input and inside this container you can put the real input with border white, I made an example, take a look:
http://jsfiddle.net/93n2af0e/
CSS code:
.input-select-tag{
background-color: #FFFFFF;
boder: 1px solid #F1F1F1;
height: 36px;
width: 450px;
}
.selected-tags{
padding: 2px;
}
.button{
float: left;
padding: 5px;
margin-left: 2px;
}
.input{
float: left;
border: #FFFFFF;
margin-left: 2px;
padding: 5px;
}
.clear{
clear: both;
}
HTML:
<form class='form-horizontal well'>
<div class='control-group'>
<div class='input-select-tag'>
<div class='selected-tags'>
<span class='alert button alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span>
<span class='alert button alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>
</div>
<input type='text' name='selectTags' class='input' size="40"/>
<div class='clear'></div>
</div>
</div>
</form>
Hope it helps.
var i = 7;
$("input").focus(function(e) {
// set cursor position
if (!this.value.length) {
this.value = $.map(Array(i * $(".alert").length), function() {
return " "
}).join(" ")
}
}).change(function(e) {
// append new "tag"
$(".alert").first().clone().text(function(i, text) {
return text.replace(/tag1/, e.target.value)
}).appendTo($(".alert").parent());
$(this).val("").focus()
}).closest("form").submit(function(e) {
e.preventDefault()
})
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<form class='form-horizontal well'>
<div class='control-group'>
<div class='selected-tags'> <span class='alert alert-info'>tag1 <a href="javascript:;" title='remove' >x</a></span> <span class='alert alert-info'>tag2 <a href="javascript:;" title='remove' >x</a></span>
</div>
<label>Tags</label>
<br>
<input type='text' name='selectTags' />
</div>
</form>
<style>
.control-group {
position: relative;
}
.alert {
position: relative;
top: 47px;
font-size: 12px;
padding: 2px;
margin: 2px;
}
input {
white-space: pre;
width: 100%;
}
</style>
jsfiddle http://jsfiddle.net/db8upk61/2/
I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>
You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.