I am attempting to adjust the positioning of the scrollable list item depending on whether a message was sent by a user or another party. However, my current method is not yielding the desired results.
I have experimented with adding .css('position', 'right') and including position="right" when calling the div.
Here is an excerpt of my AJAX implementation:
success: function(data)
{
var messages = data['serverResponse'];
$.each( messages, function( name, value) {
if(value.user === "1")
{
$(".message").append("<div class='" + name + "'>" + value.name + "</div>").css(".sentMes");
$(".message").append("<div class='" + name + "'>" + value.message + "</div>");
$(".message").append("<div class='" + name + "'>" + value.date + "</div>");
} else
{
$(".message").append("<div class='" + name + "'>" + value.name + "</div>");
$(".message").append("<div class='" + name + "'>" + value.message + "</div>");
$(".message").append("<div class='" + name + "'>" + value.date + "</div>");
}
});
For the HTML part:
<title>AMessage</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="JavaScript/ThreadsandMessages.js"> </script>
<link rel="stylesheet" type="text/css" href="AMessage.css">
</head>
<body>
<header>header area</header>
<nav>
<ul role="list">
<li class="thread" role="listitem"></li>
</ul>
</nav>
<nav>
<ul role="list">
<li class="message" role="listitem"></li>
</ul>
</nav>
</body>
</html>