How to make form display marquee after submitting?

Question

I'm trying to create a section in which the information submitted by user thru a form is displayed as a marquee!

I don't know what exactly should I use to make that happen?

Here are the code for the form:

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: grey; 
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.marquee-section {
  max-width:100%;
  max-height: 100%;
  height: 300px;
  position:relative;
  background-color: #ef6;
  padding: 10px 20px;
}

.marquee-heading {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.marquee-info {
  max-width:600px;
  width:100%;
  margin:0 auto;
  padding: 0 10px;
  float: left;
  position: relative;
}


.contact-section {
  max-width:100%;
  max-height: 100%;
  height: 580px;
  position:relative;
  background-color: #fff;
  padding: 10px 20px;
}

.contact-heading {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.contactForm {
  max-width:600px;
  width:100%;
  margin:0 auto;
  padding: 0 10px;
  float: left;
  position: relative;
}



#contact input[type="text"], #contact input[type="email"], #contact textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }

#contact {
  padding:10px;
  margin:5px 0;
}

#contact h3 {
  color: #F96;
  display: block;
  font-size: 50px;
  font-weight: 400;
}

#contact h4 {
  margin:5px 0 15px;
  display:block;
  font-size:13px;
}

fieldset label {
  font-size: 16px;
  font-weight: 500;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px !important;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact textarea {
  width:100%;
  max-width:700px;
  border-style: solid;
  border-color: #afafaf;
  border-width: 1px;
  border-radius: 5px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  
  padding: 10px;
  height: 45px;
  font-size: 0.8em;
  line-height: 1.2em;
  color: #111;
  position: relative;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact textarea:hover {
 -webkit-transition:border-color 0.3s ease-in-out;
 -moz-transition:border-color 0.3s ease-in-out;
 transition:border-color 0.3s ease-in-out;
 border:1px solid #4872bc;
}

#contact textarea {
  height:180px;
  max-width:100%;
  resize:none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

#contact button[type="submit"] {
  cursor:pointer;
  margin:0 0 5px;
  padding: 10px;
  height: 45px;
  width: 100%;
  max-width: 150px;
  color: #282626;
  font-size: 16px;
  font-weight: 600;
  border-style: solid;
  border-color: #878787;
  border-width: 1px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0);
}

#contact button[type="submit"]:hover {
  background-color: rgba(255, 255, 255, 0.3);
 -webkit-transition:background 0.3s ease-in-out;
 -moz-transition:background 0.3s ease-in-out;
 transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
  outline:0;
  border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#878787;
}
:-moz-placeholder {
 color:#878787;
}
::-moz-placeholder {
 color:#878787;
}
:-ms-input-placeholder {
 color:#878787;
}

<div class="marquee-section">
  <h1 class="marquee-heading">Opinions:</h1>
  <div class="marquee-info">
    <marquee><span>Climate chnage is real by <a href="#">Wallace C.</a></span></marquee>
  </div>
</div>

<div class="contact-section">
  <h1 class="contact-heading">Type the info here!</h1>
  <div class="contactForm">
    <form id="contact">
      <fieldset>
        <label for="name">Name</label>
        <input name="name" type="text">
      </fieldset>
      <fieldset>
        <label for="name">Email</label>
        <input name="email" type="text">
      </fieldset>
      <fieldset>
        <label for="name">Opinion</label>
        <textarea name="message" rows="4" cols="50"></textarea>
      </fieldset>
      <fieldset>
        <center><button name="submit" type="submit">Submit</button></center>
      </fieldset>
    </form>
  </div>

</div>

I want the form information after submission to be displayed in the "marquee-info" of the "marquee-section"

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee — Daniel A. White, Apr 23 '19 at 19:11
Possible duplicate of [Very Simple, Very Smooth, JavaScript Marquee](https://stackoverflow.com/questions/10547797/very-simple-very-smooth-javascript-marquee) — imvain2, Apr 23 '19 at 19:12
***Obsolete***: This feature is obsolete. Although it may still work in some browsers, its use is discouraged since **it could be removed at any time**. Try to avoid using it. — Danny Fardy Jhonston Bermúdez, Apr 23 '19 at 19:15
Not only is `marquee` deprecated, `center` is as well. Additionally, many of the vendor prefixes you are using in your CSS are not necessary (as much of your CSS in general is). In short, you've found some code from 2002 that shouldn't be used in 2019. — Scott Marcus, Apr 23 '19 at 19:18
@ScottMarcus Thank you pointing that out! But my question is how can I display the form values entered by user in the marquee-section div? — whitefire, Apr 24 '19 at 07:38
@imvain2 It's not a duplicate. I don't want to show just marquee, I want then form values display as marquee. — whitefire, Apr 24 '19 at 07:39

score 0 · Answer 1 · answered Apr 24 '19 at 11:03

You need a fresh approach. <marquee> and <center> are deprecated, you shouldn't even be using a form since you aren't submitting data anywhere and you've got tons and tons of unnecessary CSS. You are also not using the label element correctly - - the for attribute value must match the id of the element that the label is "for", not the name attribute value.

You just need a textbox and a regular button with a click event handler. Then, you'll use JavaScript to modify the left CSS property on a timer. See comments inline:

// Get references to all the DOM elements you'll work with
let output = document.querySelector(".output");
let email = document.getElementById("email");
let message = document.getElementById("message");

let timer = null; // Will reference timer

// Set up button click event handler
document.querySelector("button").addEventListener("click", move);

function move(){

  clearTimeout(timer); // Prevent multiple timers
  
  // Get current left position of output
  let currentLeft = parseInt(getComputedStyle(output).left, 10);
  
  // If output is off the screen, move it to the right.
  // If not, move it 3px to the left
  let outputWidth = parseInt(getComputedStyle(output).width, 10);
  if(currentLeft < (0 - outputWidth)){
    currentLeft = window.innerWidth;
  } else {
    currentLeft -= 3;
  }
  
  // Update and Move the output
  output.textContent = message.value;
  output.style.left = currentLeft + "px";
  
  // Create a timer to recursively call this function
  timer = setTimeout(move, 25);

}

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*, *:after, *:before {
  box-sizing: border-box;
}

.marquee-section {
  max-width:100%;
  max-height: 100%;
  height: 300px;
  background-color: #ef6;
  padding: 10px 20px;
}

.marquee-heading {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.marquee-info {
  width:100%;
  max-width:600px;
  margin:0 auto;
  padding: 0 10px;
}

.output { position:absolute; }

.contact-section {
  max-width:100%;
  max-height: 100%;
  height: 580px;
  padding: 10px 20px;   
}

.contact-heading {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.contactForm {
  max-width:600px;
  width:100%;
  padding:10px;
  margin:5px 0;
}

.contactForm input[type="text"], #contact input[type="email"], .contactForm textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }

label {
  font-size: 16px;
  font-weight: 500;
}

.contactForm input, .contactForm input[type="email"], .contactForm textarea {
  width:100%;
  max-width:700px;
  border-style: solid;
  border-color: #afafaf;
  border-width: 1px;
  border-radius: 5px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  height: 45px;
  font-size: 0.8em;
  line-height: 1.2em;
  color: #111;
}

.contactForm input:hover, #contact input[type="email"]:hover, .contactForm textarea:hover {
 transition:border-color 0.3s ease-in-out;
 border:1px solid #4872bc;
}

.contactForm textarea {
  height:180px;
  max-width:100%;
  resize:none;
  width: 100%;
}

.contactForm button {
  cursor:pointer;
  margin:0 0 5px;
  padding: 10px;
  height: 45px;
  width: 100%;
  max-width: 150px;
  color: #282626;
  font-size: 16px;
  font-weight: 600;
  border-width: 1px solid #878787;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0);
}

.contactForm button:hover {
  background-color: rgba(255, 255, 255, 0.3);
 transition:background-color 0.3s ease-in-out;
}

.contactForm button:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

.contactForm input:focus, .contactForm textarea:focus {
  outline:0;
  border:1px solid #999;
}
::-webkit-input-placeholder { color:#878787; }
:-moz-placeholder { color:#878787; }
::-moz-placeholder { color:#878787; }
:-ms-input-placeholder { color:#878787; }

<div class="marquee-section">
  <h1 class="marquee-heading">Opinions:</h1>
  <div class="marquee-info">
    <span class="output">Climate change is real by <a href="#">Wallace C.</a></span>
  </div>
</div>

<div class="contact-section">
  <h1 class="contact-heading">Type the info here!</h1>
  <div class="contactForm">
      <div class="row">
        <label for="name">Name</label>
        <input id="userName">
      </div>
      <div class="row">
        <label for="email">Email</label>
        <input id="email" type="email">
      </div>
      <div class="row">
        <label for="message">Opinion</label>
        <textarea id="message"></textarea>
      </div>
      <div class="row">
        <button type="button">Submit</button>
      </div>
   </div>

</div>

How to make form display marquee after submitting?

1 Answers1