We Keep Coding

Is it possible to create a button that only affects the div it is in, while buttons in other divs use the same script code?

I have Jquery code for unchecking form input checkboxes. I'm trying to figure out how to make it only affect the list item its contained in, but I can't find anything.
$(document).ready(function() {
$(".check").click(function() {
$(".myCheck").prop("checked", true);
});
$(".uncheck").click(function() {
$(".myCheck").prop("checked", false);
});
});
.appslist {
list-style: none;
padding: 0%;
display: block;
height: 90%;
}
.appslist li {
display: block;
width: 18.33%;
padding-left: 5.356%;
padding-right: 5.356%;
margin: 0%;
float: left;
max-height: 100%;
}
.ecard {
height: 100%;
}
.log {
height: 85%;
}
.logheader {
height: 15%;
}
.resetbutton {
float: left;
height: 100%;
width: 20%;
}
.logheader {
text-align: center;
border-bottom: 2px solid black;
border: 5px solid black;
display: flex;
justify-content: space-between;
align-content: center;
}
.logheader h1 {
margin: 0%;
font-size: 1.5vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul class="appslist">
<li>
<div class="ecard">
<div class="logheader">
<h1>Div1</h1>
<button type="button" class="uncheck resetbutton"></button>
</div>
<div class="log">
<form>
<div class="setinput">
<h6>
<input type="checkbox" class="myCheck">20</input> Set 1 </h6>
</div>
</form>
</div>
</div>
</li>
<li>
<div class="ecard">
<div class="logheader">
<h1>Div2</h1>
</div>
<div class="log">
<form>
<div class="setinput">
<h6><input type="checkbox" class="myCheck"> 20</input> Set 1 </h6>
</div>
</form>
</div>
</div>
</li>

find closest parent matching selector
$(this).closest('div.ecard').find(".myCheck").prop("checked", true);
$(this).closest('li') would also work.
$(document).ready(function(){
$(".check").click(function(){
$(this).closest('div.ecard').find(".myCheck").prop("checked", true);
});
$(".uncheck").click(function(){
$(this).closest('div.ecard').find(".myCheck").prop("checked", false);
});
});
.appslist{ list-style: none; padding: 0%; display: block; height: 90%; }
.appslist li{ display: block; width: 18.33%; padding-left: 5.356%; padding-right: 5.356%; margin: 0%; float: left; max-height: 100%;}
.ecard{height: 100%;}
.log{ height: 85%;}
.logheader{ height: 15%;}
.resetbutton{float: left; height: 100%; width: 20%;}
.logheader{text-align: center; border-bottom: 2px solid black; border: 5px solid black; display: flex; justify-content: space-between; align-content: center;}
.logheader h1{margin: 0%; font-size: 1.5vw;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul class="appslist">
<li><div class="ecard">
<div class="logheader">
<h1>Div1</h1>
<button type="button" class="uncheck resetbutton"></button>
</div>
<div class="log">
<form>
<div class="setinput"><h6><input type="checkbox" class="myCheck">20</input> Set 1 </h6> </div>
</form>
</div>
</div></li>
<li><div class="ecard">
<div class="logheader">
<h1>Div2</h1>
</div>
<div class="log">
<form>
<div class="setinput"><h6><input type="checkbox" class="myCheck"> 20</input> Set 1 </h6> </div>
</form>
</div>
</div></li>

The dynamically added template div doesn't persist and disappears within seconds

I am new to web development and am trying to make a chat interface as a mini project. So, I am testing whether the messages can be displayed in the chat history window. I wrote the code in such a way that when I click the send button(even without typing anything in textbox) , the chat history must add a message for itself.
To do this, I have put a template for every new message. And when send is clicked, I am trying to add it through appendChild(). But, when I am clicking the send button, the new message stays for a fraction of second and disappears. You can say, it blinks. But I want it to be visible completely. Is my way of doing it wrong or is there a better and easy way to do it.
I have read that using innerHTML will have some side-effects and I have no knowledge about jQuery. So, please answer with that perspective.
Other suggestions regarding my coding style are also appreciated.
<html>
<head>
<style>
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
</style>
<script>
function submitfun() {
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
</script>
</head>
<body>
<div id="nav">
</div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="submitfun()">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>
</html>

Because you're making use of a <form>, it attempts to submit the form by default.
To prevent this, you need to update your onsubmit to also pass the event:
<form onsubmit="submitfun(event)">
And prevent the default behaviour with:
function submitfun(e) {
e.preventDefault();
...
This can be seen in the following:
function submitfun(e) {
e.preventDefault();
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
<body>
<div id="nav"></div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="submitfun(event)">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>

Ideally you should not submit the form.
Try something like below
<html>
<head>
<style>
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
</style>
<script>
function submitfun() {
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
</script>
</head>
<body>
<div id="nav">
</div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="javascript:return false;">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND" onclick="submitfun();">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>
</html>

Popup window on landing page

I made a landing page with goods.
Every good has a description and a price.
When you click open a "popup window" should open, with the picture and description.
The question is, what if i have a lot of goods so with html and some framework popup, I will need to do all the description in html, can I somehow make a template of popup window, and provide description of goods in popup window through javascript ?

Basically you need a code which displays a modal window and the same code should also display full product details in it.
Normally, if you have a category page which displays product summary you would need to populate the modal window (which some call popup) with complete product details taken in via Ajax (the website should be able to output product data in JSON format if you got to an URL like mystore.com/ajax/p/10101 where 10101 is the product id. It depends on the website creator.
Anyways, an example JS code with modal window and which displays the product info from the page you are on is below.
$(".view").click(function(){
$(".overlay").show();
var pName = $(this).parent().children(".itemName").text();
var pPrice = $(this).parent().children(".itemPrice").text();
var pDescription = $(this).parent().children(".itemDescription").text();
$(".productName").text(pName);
$(".productPrice").text(pPrice);
$(".productDescription").text(pDescription);
});
$(".close").click(function(e){
e.preventDefault();
$(".overlay").hide();
});
.content {
display: block;
width: 100%;
position: relative;
}
.products {
width: 100%;
float: left;
display: block;
position: relative;
}
.item {
position: relative;
width: 45%;
float: left;
display: block;
margin-right: 10px;
border: solid 1px #ccc;
padding: 4px;
height: 150px;
box-sizing: border-box;
}
.itemImage {
width: 50%;
float: left;
height: 138px;
border: solid 1px green;
margin-right: 10px;
}
.itemName {
font: 500 20px/25px Arial;
}
.itemPrice {
font-weight: bolder;
}
.itemDescription {
font: 300 16px/18px Arial;
}
.view {
font: 100 9px/10px Arial;
}
.view:hover {
cursor: pointer;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 300px;
background: rgba(0,0,0,0.4);
}
.popup {
display: block;
position: absolute;
top: 50px;
left: 200px;
width: 300px;
height: 150px;
background: #fff;
}
.close {
position: absolute;
top: 10px;
right: 10px;
}
.product {
position: absolute;
top: 30px;
left: 20px;
}
.productImage {
width: 100px;;
display: block;
float: left;
margin-right: 10px;
position: relative;
height: 100px;
border: solid 1px red;
}
.productName {
font: 500 15px/16px Arial;
float: left;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="products">
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 1</div>
<div class="itemPrice"> $100 </div>
<div class="itemDescription"> Description 1 in here.</div>
<span class="view">View popup</span>
</div>
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 2</div>
<div class="itemPrice"> $300 </div>
<div class="itemDescription"> Description 2 in here.</div>
<span class="view">View popup</span>
</div>
</div>
<div class="overlay">
<div class="popup">
Close X
<div class="product">
<div class="productImage"><img src="" /></div>
<div class="productName"> xxxxxx</div>
<div class="productPrice"> uuuuuuuu </div>
<div class="productDescription"> tttttttt </div>
</div>
</div>
</div>
</div>

Codepen sign up/log in

I have tried to get this sign up thing into Notepad. I'm hopeless and whatever I tried didn't work. I would appreciate if someone could take a look at the code and explain what each code file is going to look like (html,css ect).
Here is the link to the website: http://codepen.io/jack-doyle/pen/XXYXWp
Below you will find what I've copied so far.
Thank you for looking into it.
(function() {
var signup = $('.container--static .button--signup');
var login = $('.container--static .button--login');
var signupContent = $('.container--sliding .slider-content.signup');
var loginContent = $('.container--sliding .slider-content.login');
var slider = $('.container--sliding');
signup.on('click', function() {
loginContent.css('display', 'none');
signupContent.css('display', 'initial');
slider.animate({
'left': '30%'
}, 350, 'easeOutBack');
});
login.on('click', function() {
signupContent.css('display', 'none');
loginContent.css('display', 'initial');
slider.animate({
'left': '70%'
}, 350, 'easeOutBack');
});
})();
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
background: url(https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Montserrat';
overflow: auto;
}
a,
a:focus,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
.container {
padding: 5%;
border-radius: 3px;
}
.container.container--static {
width: 80%;
min-width: 600px;
height: 40%;
min-height: 250px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000;
color: #eee;
opacity: 0.6;
}
.container.container--sliding {
width: 35%;
height: 50%;
min-height: 300px;
background-color: #fefefe;
position: absolute;
top: 50%;
left: 65%;
transform: translate(-50%, -50%);
box-shadow: 3px -2px 6px 0px rgba(0, 0, 0, 0.4);
}
.container.container--sliding .slider-content.signup {
display: none;
}
.info-box {
width: 40%;
margin: 5% auto;
}
.info-box.left {
float: left;
}
.info-box.right {
float: right;
}
.heading {
font-family: 'Montserrat';
font-size: 1.2em;
}
.heading.alt {
margin-bottom: 10%;
text-transform: uppercase;
color: #E26A6A;
}
.info-text {
font-family: 'Roboto';
font-size: 0.7em;
font-weight: 300;
letter-spacing: 1px;
}
.info-text.alt {
color: #aaa;
}
.button {
width: 35%;
margin-top: 15px;
padding: 2% 5%;
background-color: transparent;
color: #eee;
border: 2px solid #ccc;
border-radius: 3px;
font-family: 'Montserrat';
font-size: 0.7em;
text-transform: uppercase;
cursor: pointer;
}
.button.alt {
margin-bottom: 15px;
background-color: #E26A6A;
border: 0;
}
.button:focus {
outline: 0;
}
form {
margin-bottom: 10%;
}
form input {
display: block;
width: 100%;
margin-bottom: 15px;
padding: 5px;
border: 0;
border-bottom: 2px solid #ddd;
font-family: 'Montserrat';
}
form input:focus {
outline: 0;
}
<html>
<head>
<script type="text/javascript" src="hey.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<!-- Static container -->
<div class="container container--static">
<!-- Signup prompt -->
<div class="info-box left">
<h2 class="heading">Don't have an account?</h2>
<p class="info-text">Ethical celiac hashtag taxidermy squid. Wayfarers distillery narwhal, kombucha jean shorts selvage meggings.</p>
<button class="button button--signup">Sign up</button>
</div>
<!-- Login prompt -->
<div class="info-box right">
<h2 class="heading">Have an account?</h2>
<p class="info-text">Ethical celiac hashtag taxidermy squid. Wayfarers distillery narwhal, kombucha jean shorts selvage meggings.</p>
<button class="button button--login">Login</button>
</div>
</div>
<!-- Sliding container -->
<div class="container container--sliding">
<!-- Login -->
<div class="slider-content login">
<h2 class="heading alt">Log In</h2>
<form id="login">
<input class="email" type="text" placeholder="Email">
<input class="password" type="password" placeholder="Password">
</form>
<button class="button button--login alt">Log In</button>
<p class="info-text alt">Forgot password?</p>
</div>
<!-- Signup -->
<div class="slider-content signup">
<h2 class="heading alt">Sign Up</h2>
<form id="signup">
<input class="name" type="text" placeholder="Full Name">
<input class="email" type="text" placeholder="Email">
<input class="password" type="password" placeholder="Password">
</form>
<button class="button button--signup alt">Sign Up</button>
</div>
</div>

First place your html, js, and css code in the same directory. If you are going to move the file from codepen to Notepad you will need to import jQuery, jQuery UI and load your javascript file last.
In your html file place these scripts after your last div:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="hey.js"></script>
</body>
</html>

Issues positioning a DIV in CSS

I am trying to move the "available-rooms-dialog" div to the right of the textarea and alright the words "Available Rooms at the top. I have tried making the textarea width smaller but it still will not place where I want it. Here is my code:
cshtml:
<h2>General Chat</h2>
<div id="wrapper">
<div id="upper-wrapper">
<div id="discussion-dialog">
<textarea rows="30" cols="50" id="discussion"></textarea>
</div>
<div id="available-rooms-dialog">
<h4>Available Rooms</h4>
<button type="button" id="createroom" value="Create Room"></button>
</div>
</div>
<div id="message-dialog">
<textarea rows="3" id="message">Type your message</textarea>
<br/>
<input type="button" id="sendmessage" value="Post" />
<input type="hidden" id="displayname" />
<input type="checkbox" id="enter-sends-message"/>
Enter sends message
</div>
</div>
here is my CSS:
div.container {
position: relative;
}
body {
padding-top: 50px;
padding-bottom: 20px;
}
#wrapper
{
position: relative;
}
#discussion
{
width: 75%;
overflow-y: scroll;
}
#message
{
border: 3px solid #cccccc;
width: 75%;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
/* styles for validation helpers */
.field-validation-error {
color: #b94a48;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #b94a48;
}
.validation-summary-valid {
display: none;
}
#upper-wrapper {
position: relative;
width: 100%;
}
#discussion-dialog
{
/*border: 3px solid #cccccc;*/
font-family: Tahoma, sans-serif;
position: relative;
top: 5px;
}
#available-rooms-dialog
{
position: relative;
right: 0px;
top: 0px;
}
#message-line {
position: relative;
}
#message-dialog
{
position: relative;
top: 10px;
font-family: Tahoma, sans-serif;
}
Here is what it currently looks like:

One option would be to move the available-rooms-dialog above the discussion-dialog in your HTML, and float it to the right. I.e.:
<div id="upper-wrapper">
<div id="available-rooms-dialog">
<h4>Available Rooms</h4>
<button type="button" id="createroom" value="Create Room"></button>
</div>
<div id="discussion-dialog">
<textarea rows="30" cols="50" id="discussion"></textarea>
</div>
</div>
#available-rooms-dialog
{
float: right;
}
Example: http://jsfiddle.net/VxU5Y/

#message-dialog {
float: left;
}
#upper-wrapper {
float: left;
}

You can set your HTML and CSS as given below to arrange your div as required....
HTML -
<h2>General Chat</h2>
<div id="wrapper">
<div id="upper-wrapper">
<div id="discussion-dialog">
<textarea rows="10" cols="50" id="discussion"></textarea>
</div>
<div id="available-rooms-dialog">
<h4>Available Rooms</h4>
<button type="button" id="createroom" value="Create Room"></button>
</div>
<div class="clear"></div>
</div>
<div id="message-dialog">
<textarea rows="3" id="message">Type your message</textarea>
<br/>
<input type="button" id="sendmessage" value="Post" />
<input type="hidden" id="displayname" />
<input type="checkbox" id="enter-sends-message" />Enter sends message</div>
</div>
CSS -
div.container {
position: relative;
}
body {
padding-top: 50px;
padding-bottom: 20px;
}
#wrapper {
position: relative;
}
#discussion {
width: 75%;
overflow-y: scroll;
}
#message {
border: 3px solid #cccccc;
width: 75%;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input, select,
/* styles for validation helpers */
.field-validation-error {
color: #b94a48;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #b94a48;
}
.validation-summary-valid {
display: none;
}
#upper-wrapper {
position: relative;
width: 100%;
float: left;
}
#discussion-dialog {
/*border: 3px solid #cccccc;*/
font-family: Tahoma, sans-serif;
position: relative;
float: left;
}
#available-rooms-dialog {
position: relative;
vertical-align: top;
float: left;
}
#message-line {
position: relative;
}
#message-dialog {
position: relative;
top: 10px;
font-family: Tahoma, sans-serif;
}
.clear {
clear: both;
}