Element that follows user input

Question

I've created an element(image div) called 'bunny', an input form and a fieldset. I also have a localhost web server which runs my websocket server for my chat. I'm trying to implement a function where for every message(which are spans) sent, the bunny element is placed beside each message.

The problems I've encountered doing this are:

Since the messages are span, the bunny element duplicates itself and is appended to each span instead of just the end of the message.
The bunny element doesn't sit exactly beside the message, it is usually below the span on a new line, I've tried appendTo and InsertAfter in JS

HTML:

<div id="bunny">
</div>

<input id="message" type="text" />
<button type="button" id="movebunny">Bunny</button>

<fieldset id="showMsg" >
<!--messages are shown here-->
</fieldset>

JAVASCRIPT

var messages;
var form;
var inputBox;

function log_msg(msg) {
  messages.appendChild(document.createElement("span")).innerHTML = msg;
} 

function doInit() {
  inputBox = document.getElementById("message");
  messages = document.getElementById("messages");
  form = document.getElementById("message-form");
  var s;
  ...

//there's a bit more to the js code but they're all just to connect to server//

Would greatly appreciate any suggestions to getting element at the end of each message sent on click of a button, thanks!

got a picture of what you mean? Because the textual description is not quite clear enough — Mike 'Pomax' Kamermans
Yeh sure, have a look at these two: prntscr.com/4mgmv0 & prntscr.com/4mgngc — user3649195
Can you show the produced HTML after displaying some messages? And CSS? — Oriol

Mike 'Pomax' Kamermans Mike 'Pomax' Kamermans · Accepted Answer · 2014-09-13T17:39:22

You really kind of need to show more code, too, or create a jsfiddle but without additional context: just use a different skeleton (note that fieldset is not being truthful about what's in it. A field set is for form fields. You're using it to wrap inert messages):

<div class="messages">
  <div class="message">
    <div class="from sender">bob</div>
    <div class="body">blahblahblah</div<
  </div>
  <div class="message">
    <div class="from listener">carol</div>
    <div class="body">blahblahblah</div<
  </div>
  ...
</div>

and every time you get a new message, you appendChild it to the .messages div, and then move (not copy) the bunny element into the last message. You get something like

<div class="messages">
  ...
  <div class="message">
    <div class="from">carol</div>
    <div class="body">blahblahblah</div<
    <div class="bunny">^_^</div>
  </div>
</div>

Then you use CSS to make sure the bunny's in the right place.

div.messages { position: relative; }
.from.listener { float: left; position: relative; }
.from.sender { float: right; position: relative; }
.bunny { width: ...; height: ...; background: url('bunny.png'); }
.from.listener .bunny { position: absolute; left: 0}
.from.sender .bunny { position: absolute; right: 0}
.hidden { display: none!important; }

With your bunny element all the way at the top, before there are any messages:

<div class="hidden bunny">^_^</div>

And you just move the bunny down by using

var bunny = document.querySelector(".bunny");

all the way at the start so you have a persistent reference, and then every time you build a new message

var newmsg = ....;
bunny.classList.remove("hidden");
newmsg.appendChild(bunny);
messages.appendChild(newmsg);

done, appendChild moves elements across the page (because DOM elements can't exist in two places at once, so an appendChild of an on-page element simply moves it to its new position).

Element that follows user input

1 Answers