Issues positioning a DIV in CSS - javascript

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

Related

How come the button doesnt work when clicked?

So I am trying to build this website but the button when pressed does not pop up the screen that will ask to fill with name and phone number and was wondering why this is not working. I am a complete noob when it comes to HTML and CSS, still learning most of the ways and needed help any advice and corrections will be greatly appreicated. Also, I am using JSFiddle I do not know if that makes a difference. Thank you in advance.
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* Full-width input fields */
input[type=text], input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: clear;
color: black;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 25px;
}
button:hover {
opacity: 0.8;
background-color: red;
}
/* this is for the box on the top of page */
.boxbar_top{
height:20%;
width: 100%;
position: static; /*assign on top when stroll */
right:0;
overflow:hidden;
background-color: red;
}
/*accessing the button layout */
.boxbar_top a {
float: left;
text-align: left;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* bottom layout of screen */
.boxbar_bttom{
height: 20%;
width: 100%;
position: static; /* assign on top when stroll */
right: 0;
overflow: hidden;
background-color: red;
}
/*accessing the bottom layput */
.box_bar_bttom a{
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* tabs layout */
.tabs{
background-color: inherit;
float: center;
border: 15px solid red;
padding: 14px 16px;
font-size: 17px;
border-radius: 25px;
padding: 20px;
width:200px;
height: 100%;
}
/*style of the tabs inside */
.tabs-button{
margin: 0;
position: absolute;
color: black;
padding: 22px 16px;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
cursor: pointer;
font-size: 20px;
}
.box{
margin: auto;
width: 60%;
padding: 10px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
/*show the text when hover through tab */
.hiddenText{
display: none;
}
.hoverDiv:hover + .hiddenText{
display: block;
color: green;
font-size: 22px;
font-weight: bold;
}
/* cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* the center of first-last-#...etc */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
padding-top: 60px;
}
/*model layput when clicked */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid red;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/*hover on layout */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
<!-- this is the layout of the first page for crete a cake -->
<!-- this is the problem of aligning the iteams on the right spots -->
<!-- problem the buttons are not shown -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="order cake">
<title>Create Cake</title>
</head>
<body>
<div class="boxbar_top">
<a class="active"> </a>
<form>
<select name="dropdown">
<option value="ENGLISH"></option>
<option value="SPANISH"></option>
</select>
</form>
<p class="boxbar_top; align: right;">
<h2 style="color: white; align-items: right;">
Order your cake online
</h2>
</p>
</div>
<div class="box">
<div class="tabs">
<!-- when clicked pop asked for user name and number -->
<div class="imgcontainer">
<span onclick="document.getElementById('info').style.display='none'" class="close" title="Close Modal"> </span>
<button onclick ="container"> ADD ORDER </button>
</div>
<div class="modal">
<div class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<!-- this is the area pops out when the user hits add order -->
<div class="container">
<!-- enter the first name -->
<label for="fname"><b>First Name</b></label>
<input type="text" id="fname" name="fname" placeholder="First Name" required>
<!-- enter the last name -->
<label for="lname"><b>Last Name</b></label>
<input type="text" id="lname" name="lname" placeholder="Last Name" required>
<!-- phone number -->
<label for="phone"><b>Phone Number</b></label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" placeholder="Phone Number" required>
<!-- submit number -->
<button type="submit" value="Submit">Submit</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('info').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
</div>
<div style="tabs-button">
<button onclick="document.getElementById('info').style.display='block'"> CHECK ORDER </button>
</div>
<div style="tabs-button">
<button onclick=" ">DELETE ORDER </button>
</div>
</div>
</div>
<div class="boxbar_top">
<a class="active"> </a>
</div>
</body>
</html>
you have not assigned id to your modal, but have done getElementById('id01')
<div class="modal" id="id01">
and your btn triggering modal should be sthng like this:
<button type="button" id="btn">Add order</button>
and your js:
var btn = document.getElementById("btn");
var modal = document.getElementById("id01");
btn.onclick = function() {
modal.style.display = "block";
}

Why is my hide() and show() not working even without error in JQuery? [duplicate]

This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 1 year ago.
I have a function that will show the other content and hide the recent content. But when I am clicking the submit input it's not working. I tried to use anchor tag and button tag and it has the same output.
html:
$(function(){
$('.btn .button').on('click', function(){
$('.container').show()
$('.container-two').hide()
})
})
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue" class="button">
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
I tried to use addClass() and removeClass(), also css() but nothing happens. I also find an answer but nothing like my problem.
First of all, change the first submit type input to a button.
Instead of <input type="submit" name="submit" value="Continue" class="button">
Should be <button class="button" type="button">Continue</button>
This will prevent the form submission, and add the missing "button" class to the button.
Then modify the jquery code like this:
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide()
$('.container-two').show()
})
})
My answer was based on the assumption that you want to show the second container after pressing the first "continue" button.
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide();
$('.container-two').show();
});
});
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information 1</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<button class="button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information 2</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I copied and pasted the code to codepen and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the hide() and show() with each other.
prevent the default submit event and add hide() and show() on correct divs
$(function(){
$('.btn .button').on('click', function(e){
e.preventDefault();
$('.container').hide()
$('.container-two').show()
})
})

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>

Javascript hide and show css

I have an HTML element with the class value of ".feedback-preview" I also have the CSS displaying it to none. I am trying to utilize Javascript to make the feature show. I am unsure what I am doing wrong code will be provided below.
Ideally what I am trying to replicate is there is a form and that the form should not show the preview or the submit button until information is inputted within the form. It is for a web development class I am taking. Thanks in advance I will display all of the code I am using.
document.querySelector(".feedback-from").textContent = "Faduma Egal";
document.querySelector(".feedback-content").textContent = "Do you allow pets?";
// Create Variables
var fromValue = document.querySelector(".feedback-from");
var feedbackValue = document.querySelector(".feedback-content");
var nameField = document.querySelector("#nameinput");
var feedbackField = document.querySelector("#other-info");
var form = document.querySelector(".contact-form");
var feedbackPreview = document.querySelector(".feedback-preview");
var submitButton = document.querySelector(".submitbutton");
//add text to preview section
function completePreview() {
fromValue.textContent = nameField.value;
feedbackValue.textContent = feedbackField.value;
feedbackPreview.className = "feedback-preview show";
if (form.checkValidity() === true) {
submitButton.className = "submitbutton show";
}
}
completePreview();
// create event listeners for changes to form
form.addEventListener("change", completePreview, false);
/* CSS */
/* fieldset styles */
fieldset {
margin-bottom: 0.8em;
}
legend {
font-size: 1.25em;
}
.reserveinfo {
position: relative;
}
.submitbutton {
display: none;
}
/* field styles */
input, textarea {
border: 1px solid #ccc;
padding: 0.2em;
font-size: 1em;
display: block;
}
.contactinfo input, .additionalinfo input {
width: 25em;
margin-bottom: 0.6em;
}
textarea {
width: 25em;
height: auto;
}
#submit {
border: none;
padding: 0.4em 0.6em;
margin: 0 auto;
background-color: #e3d5ba;
font-size: 1.25em;
border-radius: 10px;
}
/* label styles */
label {
margin: 0.8em 0;
font-size: 1em;
line-height: 1.6em;
font-weight: bold;
}
/* feedback preview section */
.feedback-preview {
max-width: 400px;
padding: 10px;
margin: 0 auto;
border: 2px solid black;
font-size: 1.3em;
background-color: white;
display: none;
}
.show {
display: block;
}
.feedback-preview p {
margin-bottom: 0.3em;
}
.table-row {
display: table-row;
}
.table-row div:first-child {
font-weight: bold;
}
.table-cell {
padding: 0 0.2em;
display: table-cell;
}
.feedback-content {
padding: 0.4em 0.2em 0;
}
/* footer section */
footer {
max-width: 800px;
margin: 0 auto;
padding: 0.6em 0;
background-color: #34180f;
color: ivory;
text-align: center;
}
/* print styles */
#media print {
body, h1, article, footer {
color: rgb(0,0,0);
background: rgb(255,255,255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
#page {
margin: 0.75in;
}
<!-- HTML -->
<fieldset class="submitbutton">
<input type="submit" id="submit" value="Submit">
</fieldset>
</form>
<div class="feedback-preview">
<div class="table-row">
<div class="table-cell">
<p>To: </p>
</div>
<div class="table-cell">
<p>Phillip Blaine, Lakeland Reeds</p>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<p>From:</p>
</div>
<div class="table-cell">
<p class="feedback-from"></p>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<p>Subject:</p>
</div>
<div class="table-cell">
<p>Feedback/question</p>
</div>
</div>
<p class="feedback-content"></p>
</div>
</article>
<footer>
<p>45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</footer>
<script src="script.js"></script>
</body>
</html>

jQuery toggle animation not playing smooth?

Here is the JSFiddle
Look at the animation, the gray background div expands and collapses with jerk (without animation).
Can anyone help me out.
HTML:
<div class="referrals-data">
<div class="data-contner">
<div class="table-elmnt">
<div class="referral-band row-elmnt">
<div class="clearfix cell-elmnt">
<div class="referral-id have-referrals">
<span class="referral-pic"></span>
<span class="referral-name">Click me</span>
</div>
</div>
<div class="cell-elmnt">
$2000
</div>
<div class="cell-elmnt">
$50
</div>
</div> <!--referral-band-->
<div class="my-referral">
<div class="referrals-data sub-referral">
<div class="table-elmnt">
<div class="referral-band row-elmnt">
<div class="clearfix cell-elmnt">
<div class="referral-id">
<span class="referral-pic"></span>
<span class="referral-name">User</span>
</div>
</div>
<div class="cell-elmnt">
$2000
</div>
<div class="cell-elmnt">
$50
</div>
</div> <!--referral-band-->
</div> <!--table-elmnt-->
</div>
</div> <!--my-referral-->
</div> <!--table-elmnt-->
jQuery
$('.my-referral').hide();
$('.have-referrals').click(function () {
if($(this).parent().parent().parent().parent().children('.my-referral').css('display') == 'none'){
$(this).addClass('show');
}else{
$(this).removeClass('show');
};
$(this).parent().parent().parent().children('.my-referral').slideToggle();
});
CSS
.table-elmnt { display: table; width: 100%; }
.row-elmnt { display: table-row; width: 100%; padding: ; }
.cell-elmnt { display: table-cell; width: 15%; vertical-align: top; padding: 7px 10px; }
.cell-elmnt:first-child { width: 70%; }
.referrals-data { margin-bottom: 7px; }
.data-contner { background: #d4d4d4; }
.my-referral { padding-left: 25px; }
.sub-referral { margin-bottom: 0; border-bottom: none; }
.referral-id { float: left; padding-left: 20px; }
.referral-pic { padding: 2px; border-radius: 100px; background: #ffffff; width: 25px; height: 25px; display: inline-block; overflow: hidden; vertical-align: middle; text-align: center; }
.referral-name { display: inline-block; vertical-align: middle; margin-left: 7px; }
.have-referrals { cursor: pointer; }
Use "Speed" parameter with slideToggle() as :
$(this).parent().parent().parent().children('.my-referral').slideToggle("slow");
It would appear as if displaying the divs as table rows and cells is at the heart of the issue. If you remove those properties and instead display as an inline-block it works perfectly:
http://jsfiddle.net/V5zL8/3/
.table-elmnt {
width: 100%;
}
.row-elmnt {
width: 100%;
}
.cell-elmnt {
width: 15%;
vertical-align: top;
padding: 12px 0;
display: inline-block;
}
.cell-elmnt:first-child {
width: 68%;
padding: 7px 0;
}

Categories