This is a MVC 3 Razor View Engine Project... I have a notifications window that automatically scrolls to the bottom on page load.. This is shown on the screen as a partial view.. The problem is that when this happens the ENTIRE screen scrolls to the bottom not just the partial screen... I have been in circles with this and can not get just the partial view to scroll to the bottom...
I am using this javascript on the bottom of the parent page in an attempt to force it to scroll to the top but to no avail... <script language="javascript" type="text/javascript">
document.body.scrollTop = document.documentElement.scrollTop = 0;
</script>
This is a sample of the Parent View:
#Code
ViewData("Title") = "Testing Area"
End Code
<link rel="Stylesheet" type="text/css" href="#Url.Content("~/Content/pro_drop/pro_drop_1.css")" />
<script src="#Url.Content("~/Content/pro_drop/stuHover.js")" type="text/javascript"> </script>
<script type="text/javascript">
<script language="javascript" type="text/javascript">
var int = self.setInterval(function () { clock() }, 1000);
function clock() {
$.ajax({
url: '#Url.Action("currentUsers", "Admin")',
type: "GET",
success: function (result) {
$("#CurrUsers").html(result);
}
});
}
</script>
<fieldset>
<table style="border-style: hidden; vertical-align: top">
<tr>
<td>
<table style="border-style: hidden; vertical-align: top">
<tr>
<td>
<div id="CurrUsers" style="font-size: x-small">
#Html.Partial("_CurrentUsers", ViewBag.UserListOnline)
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-style: hidden; vertical-align: top">
<table style="border-style: hidden;">
<tr>
<td>
<div id="chatter">
#Html.Partial("ChatScreen", ViewBag.ClientName)
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
document.body.scrollTop = document.documentElement.scrollTop = 0;
</script>
</fieldset>
And then the #Html.Partial("ChatScreen", ViewBag.ClientName) looks like this:
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.signalR-0.5.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/signalR/hubs")" type="text/javascript"></script>
<style>
div.rectangular-area
{
border: 1px solid #999;
margin-top: 5px;
margin-bottom: 5px;
padding: 10px;
background-color: #EEE;
max-height: 240px;
width: 500px;
overflow : scroll;
}
</style>
#code
Dim xList As List(Of String) = ViewBag.msgHist
End Code
<div style="width:auto;height:400px">
<script type="text/javascript">
$(function () {
var chat = $.connection.chat;
var myClientName = '#ViewBag.ClientName';
var autoScroll = true;
if (autoScroll) {
$('#messages').animate({ scrollTop: $('#messages').prop('scrollHeight') })
};
chat.GetMessage = function (myClientName, message) {
$('#CheckinEvents').append('<br>' + myClientName + ' : ' + message);
if (autoScroll) {
$('#CheckinEvents').animate({ scrollTop: $('#CheckinEvents').prop('scrollHeight') })
}
};
$('#msg').keydown(function (e) {
if (e.which == 13) { //Enter
e.preventDefault();
chat.send(myClientName, $('#msg').val());
$('#msg').val('');
}
});
chat.addMessage = function (myClientName, message) {
if (myClientName.indexOf("System") != -1) {
$('#messages').append('<br><b style="color:red">'+ myClientName + message + '</b>');
}
else
{
$('#messages').append('<br>' + myClientName + ' : '+ '<b style="color:#000000">' + message);
}
if (autoScroll) {
$('#messages').animate({ scrollTop: $('#messages').prop('scrollHeight') })
}
};
$("#broadcast").click(function () {
// Call the chat method on the server
chat.send($('#msg').val());
});
// Start the connection
$.connection.hub.start();
});
</script>
<div id="MessagingDiv" class="rectangular-area" style="width:600px" >
Notify all Admin:
<input type="text" id="msg" style="width: 575px;" maxlength="128" />
</div>
<div id="messages" class="rectangular-area" style="text-align: left; width: 600px;">
<h3>
Latest received events:
</h3>
#For Each item In xList
If item.Contains("System Message") Then
#<br />#<b style="color: Red">#item.Split("-")(0) - <b style="color: Black">#item.Split("-")(1) : <b style="color: #8B6508">#item.Split("-")(3)</b></b> </b>
Else
#<br />#<b style="color:#00CDCD">#item.Split("-")(0) <b style="color: #FFA54F">(#item.Split("-")(1)) <b style="color:Black"> : #item.Split("-")(2)</b></b></b>
End If
Next
</div>
</div>
This was fixed by changing the line document.body.scrollTop = document.documentElement.scrollTop = 0; to
document.scrollTop = 0;
maybe this will help someone else who runs into the same issue...
Related
I have a view with a test link on the left side. Each time user clicks the test link, I am adding a tab button and tab content (straight up HTML5 and CSS). This is what it looks like:
Controller Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MDMS_Web.Controllers
{
public class MainViewController : Controller
{
//
// GET: /MainView/
public ActionResult MainView(string name)
{
ViewBag.Name = name;
return View();
}
//[ChildActionOnly]
//public PartialViewResult MainContentPartial()
//{
// return PartialView("~/Views/MainView/MainContentPartial.cshtml");
//}
public ActionResult GetView()
{
return PartialView("~/Views/MainView/MainContentPartial.cshtml");
}
}
}
Partial View
<div id="MainContentBox" style="margin: 0em 0em;">
<h2>Testing</h2>
</div>
Main View
#{
ViewBag.Title = "Main View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<main id="mainView">
<div class="row" style="min-width: 100%; ">
<div style="float: left; width: 20%; min-height: 870px; margin-top: 0.5em; margin-left: -1em; overflow: hidden; border-style: solid; border-width: thin; border-color: lightgray; ">
<div id="Test">
<div class="row" style="background-color: #c2cbfb; margin-left: 0; margin-right: 0; ">
<p id="menuTitle" style="width: 100%; text-align: center; margin: 5px 0 5px 0; ">Test</p>
</div>
<div class="row content-wrapper">
<span style="white-space: nowrap;">
<img class="icon" style="width: 30px; height: 30px; " src="Content/images/dashboard/CheckIcon.png" alt="Check icon" />
<a id="TestLink">Test Stuff</a>
</span>
</div>
</div>
</div>
<div style="float: left; width: 80%; min-height: 870px; margin-top: 0.5em; margin-left: 0em; overflow: hidden; ">
<div id="MainContentBox" style="margin: 0em 0em;">
<div id="tabs" class="tab">
</div>
<div id="content">
</div>
</div>
</div>
</div>
<div id="loading">
</div>
</main>
#section scripts{
#Scripts.Render("~/bundles/App/MainView")
<script type="text/javascript">
$(function () { MainView.initModule('#ViewBag.Name') });
</script>
}
JavaScript
function addTab(evt) {
stateMap.tabIndex += 1;
// add tab button
console.log(evt);
var tHtml = '<button id="tb' + stateMap.tabIndex + '" class="tablinks">' + "New Tab " + stateMap.tabIndex + '</button>';
$("#tabs").append(tHtml);
console.log("we have a new tab!");
// add tab content section
var node = document.createElement('div');
node.setAttribute('id', 't' + stateMap.tabIndex);
node.className = "tabContent";
// load partial page place holder
var contentPlaceHolder = document.createElement('div');
contentPlaceHolder.setAttribute('id', 'c' + stateMap.tabIndex);
node.appendChild(contentPlaceHolder);
document.getElementById("content").appendChild(node);
console.log("we have new content placeholder for partial view!");
// HERE IS WHERE MY PROBLEM BEGINS !!!!!!
// NOTHING I DO WILL LOAD MY PARTIAL PAGE !!!!
//#{ Html.RenderPartial("MainContentPartial"); }
//$("#c" + stateMap.tabIndex).load('#{ Html.RenderPartial("MainContentPartial"); }');
//$("#c" + stateMap.tabIndex).load("GetView");
$(function () {
$("#c" + stateMap.tabIndex).load(
'<%= Url.Action("GetView", "MainViewController") %>'
);
})
//url: 'MainViewController/GetView',
//$.ajax({
// url: 'GetView',
// dataType: 'html',
// success: function (data) {
// $("#c" + stateMap.tabIndex).html(data);
// }
//});
}
JavaScript initModule
var initModule = function (data) {
stateMap.currentSection = data;
//Bind events
$("#TestLink").on("click", function (event) {
addTab(event);
});
$(document).ready(function () {
$(".tab").on("click", "button", function (event) {
openTab(event);
});
});
};
return { initModule: initModule };
My issue is with the last part of the JavaScript and probably the Controller. Can someone please tell me the correct way to load the partial view into my dynamically created tab content using JQuery?
You can load Partial View dynamically using Jquery in following way
$(document).on("click", "#TestLink", function () {
var url = "/MainView/GetView";
$.get(url, function (data) {
$("#content").html(data);
});
});
Here URL is the URL of action which will return PartialView.
I want to shift the whole div to left on click of button but I want to fix the size now size changes on shift. I want to click on Sync button and it should move left.
I am using Jquery.
Following is the whole Code
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$('button').click(function () {
$('.error').stop().fadeIn(400).delay(3000).fadeOut(400); //fade out after 3 seconds
});
</script>
<script type="text/javascript">
window.onload=function(){
populatedropdown( "monthdropdown", "yeardropdown")
}
</script>
<script type="text/javascript">
var monthtext=['Month','01','02','03','04','05','06','07','08','09','10','11','12'];
var yeartext=['Year','2015','2014','2013','2012','2011','2010','2009','2008','2007','2006','2005','2004','2003','2002','2001','2000'];
function populatedropdown( monthfield, yearfield){
var today=new Date();
var monthfield=document.getElementById(monthfield);
var yearfield=document.getElementById(yearfield);
for (var m=0; m<=12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
// monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) ;//select today's month
var thisyear=today.getFullYear();
// yearfield.options[0]= Year;
for (var y=0; y<17; y++){
//yearfield.options[y]=new Option(thisyear, thisyear);
yearfield.options[y]=new Option(yeartext[y], yeartext[y]);
thisyear-=1;
}
// yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true); //select today's year
}
</script>
<script type="text/javascript">
$(function () {
$("#drop").change(function () {
selectedText = $(this).find("option:selected").text();
if(selectedText != "RBSK")
{
alert("Test available for RBSK only");
}
msg="";
});
});
$(function () {
$("#monthdropdown").change(function () {
selectedText_month="Month";
selectedText_month = $(this).find("option:selected").text();
if(selectedText_month == "Month")
{
alert("Please Choose Month");
}
console.log("month is--" + selectedText_month);
});
});
$(function () {
$("#yeardropdown").change(function () {
selectedText_year="Year";
selectedText_year = $(this).find("option:selected").text();
if(selectedText_year == "Year")
{
alert("Please Choose Valid Year");
}
console.log("year is--" + selectedText_year);
});
});
console.log("period: "+selectedText_year+selectedText_month);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#Submit').click(function () {
$('#content').animate({
'marginLeft': "-=600px" //moves left
});
});
$('#Submit').click(function () {
$('#myHeader').animate({
'marginTop': "-=250px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe').animate({
'marginTop': "-=450px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe2').animate({
'marginTop': "-=450px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe1').animate({
'marginTop': "-=950px" //moves left
});
});
$('#Submit').click(function () {
$('#qwe3').animate({
'marginTop': "-=970px" //moves left
});
});
// $('#Submit').click(function () {
// $('#img').show();
//
// $.ajax({
//
//
//
// success: function (result) {
// $('#img').hide();
// }
//
// });
// });
});
</script>
<style>
h2 {
text-align: center;
}
body {
background-color: lightblue;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<form id="From1" method="post">
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="js/xmlimg.png" style="width:180px; height:160px"; align="left">
<img src="js/loading.gif" id="img" style="display:none" align="center"/>
</div>
<div id="content"style="display: block">
<h2 >Welcome</h2>
<br>
<p style="font-size:150%;margin-left:39%" > Sources :
<select id="drop" name="drop">
<option value="0">Select Source</option>
<option value="1">RBSK</option>
<option value="2">MIDRS</option>
<option value="3">ATM </option>
<option value="4">RT </option>
</select>
<p style="font-size:150%;margin-left:40%"; >Period :
<form>
<form action="" name="someform">
<select id="monthdropdown"></select>
<select id="yeardropdown"></select>
<br> <br>
<button type="button" class="btn btn-primary btn-lg" style= " margin-left: 13% " id="Submit" name="Submit" onclick="prepareDataValueSet()">SYNC
</button>
</form>
</form>
</div>
<h4 id="myHeader" style="text-align:right; margin-top:10%; margin-right:20%; color: indianred"></h4>
<h4 id="qwe" style="text-align: right; margin-top:15%; margin-right:10%;color: dodgerblue"></h4>
<h4 id="qwe2" style="text-align: right; margin-top:20%; margin-right:10%;color: dodgerblue"></h4>
<h4 id="qwe1" style="text-align: right; margin-top:55%; margin-right:4%;color: darkgreen"></h4>
<h4 id="qwe3" style="text-align: right; margin-top:55%; margin-right:4%;color: darkgreen"></h4>
</div>
</form>
</body>
</html>
I wanted to have a feature wherein the user can just copy the contents of a particular by just clicking a single button and press CTRL+C.
The following works if I don't put style="display: none" to my divToCopy. However, when I place the style, CTRL+C will no longer work.
var Clipboard = function() {
var clipboard = {};
clipboard.cssStyle = "";
clipboard.cssClass = "";
clipboard.targetId = "";
clipboard.highlight = function(targetId) {
// backup the styling of the target div
clipboard.cssStyle = $("#" + targetId).attr('style');
clipboard.cssClass = $("#" + targetId).attr('class');
// create a ranged selection
window.getSelection().removeAllRanges();
if (window.getSelection) {
console.log("has selection");
var node = document.getElementById("divToCopy");
var range = document.createRange();
console.log(range);
range.selectNodeContents(node);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
// highlight
$("#" + targetId).css("background-color", "yellow");
};
clipboard.copyWithStyle = function(targetId) {
var toCopy = $('#' + targetId).html();
$('#divToCopy').html(toCopy);
clipboard.targetId = targetId;
clipboard.highlight(targetId);
};
clipboard.copyNoStyle = function(targetId) {
var toCopy = $('#' + targetId).html();
$('#divToCopy').html(toCopy);
$('#divToCopy *').removeAttr('style');
$('#divToCopy *').removeAttr('class');
clipboard.targetId = targetId;
clipboard.highlight(targetId);
};
$("#divToCopy").bind('copy', function() {
$("#" + clipboard.targetId).attr('style', clipboard.cssStyle);
$("#" + clipboard.targetId).attr('class', clipboard.cssClass);
});
return clipboard;
};
$(document).ready(function() {
var c = Clipboard();
$("#copy-with-style").click(function(event) {
c.copyWithStyle("content");
});
$("#copy-no-style").click(function(event) {
c.copyNoStyle("content");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-body" align="center">
<br/>
<div id="content" style="text-align:left; margin:0 auto; border: 1px solid black; width: 300px; padding: 5px;">
<div style="color:red">RED by Taylor Swift</div>
<ul>
<li>One</li>
<li style="font-weight:bold;">Two</li>
<li>3</li>
<li>Four</li>
<li>~!##$%^&*()______+{}[]:";'
<>?,./"</li>
</ul>
<table style="border:1px solid green;">
<tr>
<td colspan=2>Merged</td>
<td style="color:blue;">Blue</td>
</tr>
<tr>
<td>Red</td>
<td>Green</td>
<td>Violet</td>
</tr>
</table>
</div>
<br/>
<input type="button" value="Copy With Style" id="copy-with-style" />
<input type="button" value="Copy Without Style" id="copy-no-style" />
<div id="divToCopy" style="display: none" contenteditable="true"></div>
</div>
Instead of display:none; Use visibility:hidden This might work for you.
don't use:
display: none;
visibility: hidden;
use:
width: 1px;
height: 1px;
overflow: hidden;
i want to take input from user(number) and display image as many times as number.If user inputs 5 then the image should be displayed 5 times next to each other with corresponding number below the images-Below 1st image '1' 2nd Image '2'.Basically putting this table in loop.
<HTML>
<BODY>
<TABLE>
<TR>
<TD>
<IMG SRC="C:/Users/User/Desktop/RE/G.JPG">
</TD>
</TR>
<TR><TD ALIGN="CENTER">1</TD>
</TABLE>"
</BODY>
</HTML>
You can use jQuery for this task and write a function that generates HTML with a dynamic value:
Complete Solution
<HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function generateTable(number) {
return "<table><tr><td>" +
"<img src='C:/Users/User/Desktop/RE/G.JPG'></td></tr><tr><td align='center'>" +
number +
"</td></table>";
}
$(function(){
var userInput = 3;
for (var i = 0; i < userInput; i++) {
$('#dynamic').append(generateTable(i + 1));
}
});
</script>
</head>
<body>
<div id='dynamic'></div>
</body>
</html>
You can add an input and a button to trigger the function.
You could also check if the inserted value is actually a number or not.
$(document).on('click', '#add', function() {
var that = $(this);
var times = parseInt($('#times').val());
for (i=1;i<=times;i++) {
$('#table-wrp').append('<table class="table-times"><tbody><tr><td><img src="http://code52.org/aspnet-internationalization/icon.png" /></td></tr><tr><td>' + i + '</td></tr></tbody></table>');
}
});
$(document).on('input', '#times', function() {
var that = $(this);
var value = that.val();
if ((value != '' || value != false) && !isNaN(value)) {
$('#add').prop('disabled', false);
} else {
$('#add').prop('disabled', true);
}
});
#table-wrp {
height: 80px;
}
.table-times {
width: 100px;
height: 80px;
float: left;
border-collapse: collapse;
}
.table-times td {
border: 1px solid #d8d8d8;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="textbox" id="times" />
<button id="add" disabled>Add</button>
<div id="table-wrp"></div>
Or for a pure javascript version of Pugazh's answer
var tab = "<div></div>";
var num = prompt("Enter a number");
for(i = 0; i < num; i++){
document.getElementById('tab').innerHTML += "<div><div><img src='http://placehold.it/150x150'></div><div></div></div>";
}
img{
float: left;
box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
height: 100px;
width: 100px;
margin: 10px;
}
<div id="tab"></div>
This will work just as well, but doesn't require jQuery as well.
<HTML>
<BODY>
<div id="tbl"></div>
</BODY>
</HTML>
<script>
var num = prompt("Enter a number");
var div=document.getElementById("tbl");
var l1='',l2="";
for(i=0;i<num;i++)
{
l1 += '<td><img src="C:/Users/User/Desktop/RE/G.JPG"></td>';
l2 += '<td>'+i+'</td>';
}
div.innerHTML = "<table><tr>"+l1+"</tr><tr>" + l2 + "</tr></table>";
</script>
Try this
$(function() {
var tab = "<div></div>";
var num = prompt("Enter a number");
for (i = 0; i < num; i++) {
$("#tab").append("<div class='left'><div><img src='http://placehold.it/150x150'></div><div>" + (i + 1) + "</div></div>");
}
});
div.left {
display: inline-block;
margin-right: 5px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="tab">
</div>
</body>
</html>
Whenever I click prepend, after all elements are prepended, the view of the chat area switches to the top of the chat area or the last prepended element. This is different from append, whereby after all elements are appended, the view of the chat area does not switch to the end of the chat area or last appended element but still stays at its previous position.
How do I make the prepend function act in the same way as append in the sense that the view of the chat area does not change similar to FB's load previous message function?
Here is a sample code that illustrates what I mean.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.chatbox{
border:1px solid #2a6496;
height: 600px;
margin-top:50px;
}
.chatbox div{
height: 100%;
}
.rightP{
border-left: 1px solid #2a6496;
}
.rightP .contents{
border-bottom: 1px solid #2a6496;
height: 70%;
}
.rightP .send{
padding : 5% 5% 5% 5%;
height: 30%;
}
#response{
height: 200px;
overflow-y: scroll;
overflow-wrap: break-word;
}
</style>
<script>
function appendMessage()
{
var data = 'hello';
var message = document.createElement('p');
message.innerHTML = data;
console.log(message.innerHTML);
$('#response').append(message);
$('#response').append($('.load'));
}
function prependMessage()
{
for(var $i = 0;$i<10;$i++)
{
var data = 'hello'+$i;
var message = document.createElement('p');
message.innerHTML = data;
console.log(message.innerHTML);
$('#response').prepend(message);
$('#response').prepend($('.load2'));
}
}
</script>
<body>
<div class="container">
<div class="chatbox">
<div class="col-sm-8 rightP">
<div class="row contents">
<div class="row msg">
<div id="response" class="msg form-group">
<a onclick="return appendMessage()" class="load btn btn-default">Append</a>
<a onclick="return prependMessage()" class="load2 btn btn-default">Prepend</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In HTML there should be return in your onlick:
<a onclick="return loadMessage();" class="load btn btn-default">Load More Msg</a>
In JS you need to add return false to your function loadMessage.
var loadMessage = function(){
var firstMessage = $messagesWrapper.find('> p:nth-child(2)');
$.ajax({
....
if(messages.length<10){
$('.load').hide();//hide the load button if remaining messages to load is <10
}
success: function(messages){
$.each(messages, function() {
prependMessage(this);
});
},
....
});
return false;
};
Try this:
<div id="response" class="msg form-group">
<a onclick="loadMessage(); return false;" class="load btn btn-default">Load More Msg</a>
</div>
If this doesn't work, try another way:
var loadMessage = function(){
e.preventDefault(); // preventing any scroll action
var firstMessage = $messagesWrapper.find('> p:nth-child(2)');
(...)
And
var prependMessage = function(data){
e.preventDefault(); // preventing any scroll action
var message = document.createElement('p');
(...)
If this doesn't work please provide the whole code so we can reproduce.