Develop Reference

Html Table header won't appear on max width

I have a table using jquery datatable plugin and for some reason the header appears like this, if i click sort or some other action the header automatically resizes to max-width.
here is the code
<div class="card-body">
<div class="container-fluid">
<div id="content" class="d-none">
<div class="table-responsive">
<table id="tblParametros" class="table custom-table text-center">
<thead>
<tr>
<th>Id</th>
<th>Referência</th>
<th>UAP</th>
<th>Nº de Dias</th>
<th>Nº de Turnos</th>
<th>Nº de PAB(s)</th>
<th>Alcance de Abastecimento</th>
<th>Quantidade Mínima</th>
<th>Quantidade Máxima</th>
<th></th>
</tr>
</thead>
</table>
</div>
<!-- Modal structure -->
<div id="modal" class="iziModal custom-modal" data-iziModal-fullscreen="true" data-iziModal-title="Parâmetro" data-iziModal-subtitle="Edição de parâmetros" data-iziModal-icon="fas fa-edit">
<section>
<!-- Modal content from partial view -->
<div class="container-fluid p-5 iziModal-content">
<partial name="_EditPartial" for="Parametro" />
</div>
</section>
</div>
</div>
<div id="loading" class="text-center">
<img src="~/images/ajax/loader-ellipsis.svg" />
</div>
</div>
</div>
js
$(document).ajaxStart(function () {
$("#loading").show();
$("#content").addClass('d-none');
}).ajaxStop(function () {
$("#loading").hide();
$("#content").removeClass('d-none');
});
$(function () {
var table = $('#tblParametros').DataTable({
scrollY: "60vh",
ajax: {
url: '#Url.Action("List","Parametros")',
dataSrc: ""
},
columns: [
{ data: "id" },
{ data: "referencia" },
{ data: "uap" },
{ data: "numDias" },
{ data: "numTurnos" },
{ data: "numPAB" },
{ data: "alcanceAbastecimento" },
{ data: "qtdMin" },
{ data: "qtdMax" },
{
data: "id",
render: function (data, type, row) {
return '<button class="btn" onclick="EditParametro('+data+')" data-izimodal-open="#modal" data-izimodal-transitionin="fadeInDown">' +
'<i class="fas fa-edit"></i>' +
'</button>';
}
}
]
});
});
and some custom styles i apply
.custom-table {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width:100%;
}
.custom-table > thead {
background-color: #3e5977;
color: white;
}
.custom-table > tbody {
background-color: #97c7fb;
color: white;
font-weight: bold;
}
.custom-table > tbody > tr > td > button {
background-color: #3e5977;
border-color: #ddd;
}
.custom-table > tbody > tr > td > button:hover {
background-color: #7191b4;
border-color: #ddd;
}
.custom-table > tbody > tr > td > button > svg {
color: #fdba9f;
}
.custom-table > tbody > tr:nth-child(even) {
background-color: #43515f75;
}
.custom-table > tbody > tr:nth-child(odd) {
background-color: #2c3b4b8f;
}
I don't understand why does it do this, i thought it was 'cause of the class "table-responsive" but wasn't the guilty one

Vue.js application bug: paginating search results fails

I am working on a small application that displays a "users" JSON in an HTML5 table. I use Bootstrap 3, Axios and Vue.js 2 for this purpose.
The items displayed are paginated. Here is the code for all that:
var app = new Vue({
el: '#app',
data: {
users: [],
loading: true,
errored: false,
url: "https://randomuser.me/api/?&results=100&inc=name,location,email,cell,picture",
page: 1,
perPage: 10,
pages: [],
},
methods: {
getUsers() {
axios
.get(this.url)
.then(response => {
this.users = response.data.results
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
},
setPages() {
var numberOfPages = Math.ceil(this.users.length / this.perPage);
for (var index = 1; index <= numberOfPages; index++) {
this.pages.push(index);
}
},
paginate(users) {
var page = this.page;
var perPage = this.perPage;
var from = (page * perPage) - perPage;
var to = (page * perPage);
return users.slice(from, to);
}
},
created() {
this.getUsers();
},
watch: {
users() {
this.setPages();
}
},
computed: {
displayedUsers() {
return this.paginate(this.users);
}
},
filters: {
lowercase(value) {
return value.toLowerCase();
},
capitalize(value) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});
.table-container {
margin: 10px;
}
.table-container .panel-heading {
font-weight: bold;
}
.table-container .panel-body {
padding: 0;
}
.table-container table {
margin-bottom: 0;
border: none;
}
.table-container table tr:last-child td {
border-bottom: none;
}
.table-container table tr th {
font-weight: bold;
}
.table-container table tr th:first-child,
.table-container table tr td:first-child {
border-left: none;
}
.table-container table tr th:last-child,
.table-container table tr td:last-child {
border-right: none;
}
.table-container table tr td {
padding: 2px 8px !important;
vertical-align: middle;
}
.table-container table tr td .picture {
padding-right: 10px;
}
.table-container table tr td img {
max-height: 30px;
width: auto;
border: 1px solid #c7c7c7;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app" class="container">
<div class="panel panel-default table-container">
<div class="panel-heading">Users</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="dataTable">
<thead>
<tr>
<th class="text-right">#</th>
<th>Name</th>
<th>Email</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in displayedUsers">
<td class="text-right">{{perPage * (page - 1) + index + 1}}</td>
<td>
<span class="picture">
<img :src="user.picture.thumbnail" :alt="user.name.first + ' ' + user.name.last" class="img-circle">
</span>
<span>{{user.name.first | capitalize}} {{user.name.last | capitalize}}</span>
</td>
<td><a :href="'mailto:' + user.email | lowercase">{{user.email | lowercase}}</a></td>
<td>{{user.location.city | capitalize}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav class="text-center" aria-label="Page navigation">
<ul class="pagination pagination-sm">
<li>
<a href="#" #click="page = 1" aria-label="First">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#" v-if="page != 1" #click="page--" aria-label="Previous">
<span aria-hidden="true">‹</span>
</a>
</li>
<li v-for="pageNumber in pages.slice(page-1, page+4)" :class="{'active': page === pageNumber}">{{pageNumber}}</li>
<li>
<a href="#" #click="page++" v-if="page < pages.length" aria-label="Next">
<span aria-hidden="true">›</span>
</a>
</li>
<li>
<a href="#" #click="page = pages.length" aria-label="Last">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/axios#0.18.0/dist/axios.min.js"></script>
I have ran into a problem after adding a search/filter functionality to he application. I have added this to the template/view:
<div class="panel-heading clearfix">
<h2 class="pull-left">Users</h2>
<div class="searchbox">
<input type="text" v-model="search" class="form-control" placeholder="Search...">
</div>
</div>
and replaced <tr v-for="(user, index) in displayedUsers"> with <tr v-for="(user, index) in searchResults">.
Then, to computed section of the script the script, I added:
searchResults() {
return this.users.filter((user) => {
return user.name.first.match(this.search);
});
}
The search (through names) works, but neither the entire JSON, nor the search results are paginated.
I have failed to make them work together. The broken application can be seen HERE.
What is missing?

In order to make the pagination work together with the filtering you need to combine the pagination logic with your searchResults in displayedUsers
displayedUsers() {
return this.paginate(this.searchResults);
},
Then you will need to use displayedUsers everywhere where you are interested the combined result, so in your template:
<tr v-for="(user, index) in displayedUsers">
There is one more thing to fix in your code: the number of pages currently always uses the original user count, which has to be updated to use the "current" user count:
setPages(users) {
this.pages.length = 0; //we need to clear the previously set pages
var numberOfPages = Math.ceil(users.length / this.perPage);
for (var index = 1; index <= numberOfPages; index++) {
this.pages.push(index);
}
},
And update the pages whenever the dispayedUsers are changed:
watch: {
displayedUsers() {
this.setPages(this.searchResults);
}
},
If you also want to reset the page when on search you just need to set the page in searchResults
searchResults() {
this.page = 1;
return this.users.filter((user) => {
return user.name.first.match(this.search);
});
}
Working JSFiddle.

Why is the jQuery hover method not working in this case?

I am trying to get a button in the bootstrap popover to change class when I hover over it using jQuery but for some reason, it is not working. I have looked everywhere and I am using the same method as everybody else for hover events in jQuery but, for some reason, it is just not working.
I am trying to change the classes from btn btn-default to btn btn-success on hover. I realize that this could be achieved using CSS(the color change) but this is supposed to work and it is not working and I wanna know why and resolve it.
I am using : Bootstrap 3.3.6, jQuery
The Entire HTML file :
<!DOCTYPE html>
<html>
<head>
<title>Easy ToDo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.2/bootstrap-native.min.js"></script> -->
<script>
function checkTaskStatus(checkbox) {
var tasktext = document.getElementById('tasktext');
var taskrow = document.getElementById('taskrow');
if (checkbox.checked){
taskrow.className = "active";
tasktext.className = "text-muted";
tasktext.style.textDecoration = "line-through";
}
else {
document.getElementById("taskrow").className = "warning";
document.getElementById('tasktext').className = "text-success";
tasktext.style.textDecoration = "none";
}
}
function changeBtn(button) {
var temp = button.className;
if(temp === "btn btn-primary") {
button.className = "btn btn-danger";
button.innerText = "Close";
}
else {
button.className = "btn btn-primary";
button.innerText = "Add New Task";
}
}
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
html: true,
title: 'New Task',
trigger: 'click',
content: function () {
return $('.popoverContent').html();
},
placement: 'right'
});
});
</script>
<script>
$(document).ready(function () {
$("#btntask").hover(function () {
$(this).removeClass('btn btn-default');
$(this).addClass('btn btn-success');
}, function () {
$(this).removeClass('btn btn-success');
$(this).addClass('btn btn-default');
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1 style="border: 2px solid rebeccapurple; margin-top: 0; background-color: rebeccapurple; color: white; padding-left: 0.6em; padding-bottom: 0.1em; margin-bottom: 1.5em;">An Easy To - Do Web App!</h1>
<button type="button" class="btn btn-primary" style="margin-bottom: 15px; margin-left: 10px;" data-toggle="popover" onclick="changeBtn(this)">Add New Task</button>
<div class="popoverContent hide">
<label for="newTask">Task:</label>
<textarea rows="3" name="newTask" class="form-control input-lg" placeholder="Task HTML"></textarea>
<button class="btn btn-default" type="submit" style="margin-top: 10px;" id="btntask">Done</button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th style="width: auto"> </th>
<th style="width: auto">#</th>
<th style="width: auto">Date</th>
<th style="width: auto">Task</th>
<th style="width: auto">Notes</th>
</tr>
</thead>
<tbody>
<tr class="warning" id="taskrow">
<td><div class="checkbox"><label><input type="checkbox" onclick="checkTaskStatus(this)"></label></div></td>
<td scope="row" style="font-weight: bold;">1</td>
<td><p style="font-style: italic; font-weight: bold;">7th May, 2016</p></td>
<td class="text-success" id="tasktext" style="text-decoration: none;"><h5 id="task-heading" style="margin-top: 0; text-decoration: underline; font-weight: bold;">Tesla Share Purchase Reasearch:</h5>
<ul>
<li>Find out how an Australian citizen can purchase shares in an American company (e.g. Tesla) which is not listed on the ASX (Australian Stock Exchange)</li>
<li>Prepare a brief list of the steps, costs and general time frame for an Australian to get set up to purchase share in American companies</li>
<li>Please also state the current stock price of Apple, Google (potentially Alphabet as they are the parent??), Facebook, Twitter and Tesla</li>
<li>Bullet points are fine</li>
<li>Please include any relevant links</li>
<li>Spend no longer than 1.5 – 2 hours on this</li>
</ul>
</td>
<td><div class="form-group">
<textarea class="form-control input-md" rows="4" placeholder="Notes"></textarea>
<button class="btn btn-default btn-block" type="submit" style="margin-top: 10px;">Save</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Note that, I am fairly new to jQuery and JS so if there is any inaccuracies on my part, please point them out.

The issue is when you are trying to add the hover state on the popover , the popover element is not yet available. The element is only added when you click. Hence, the function in $(document).ready() actually adds no hover state.
Instead use jQuery .on

If your hover has not much work to do, you can opt for css hover
#element:hover
{
/*Add your css after hover here*/
}

As pointed out by #Sukhmeet Singh the popover did not appear until on click and not on document.ready.
So I tweaked my script from :
$(document).ready(function () {
$("#btntask").hover(function () {
$(this).removeClass('btn btn-default');
$(this).addClass('btn btn-success');
}, function () {
$(this).removeClass('btn btn-success');
$(this).addClass('btn btn-default');
});
});
To :
$(document).ready(function () {
$('[data-toggle="popover"]').on('click', function () {
$("#btntask").hover(function () {
$(this).removeClass('btn btn-default');
$(this).addClass('btn btn-success');
}, function () {
$(this).removeClass('btn btn-success');
$(this).addClass('btn btn-default');
});
});
});
And it worked. The popover is non-existent in document.ready but appears there when I click on the button with the property [data-toggle="popover"] and thus, when I target the button I want to highlight then, it does it.

How to pass div id, class as parameters to a function called by an anchor tag onclick?

I am trying to pass table id, div id and nested class names into a generic function that's used across the programme code.
The tricky part is, this function calls another function which is wrapped within an anchor tag's onclick event. Before adding the two additional parameters, the function removeItem worked and now no longer fires. These two parameters are required in order to make the function reusable.
The jsfiddle of the expected programme.
Both ids (the parameters) are passed as strings quoted,
var tableid = "'#tble1200'"
var otherid = "'div.class1 .total'"
function AddProduct(elment, event, tableid, otherid)
{
//do something
//the hyperlink is remove
remove: '<a href="#" class="remove"
onclick="removeProduct(this, event,tableid,otherid)">X</a>'
}
function removeProduct(element, event, tblid, othid)
{
//do something
$(tblid).datagrid('loadData', data);
$(othid).html('Total: $'+subTotal);
}
I am trying out the code from this post's jsfiddle here. : The original code.
function addProduct(name,price){
function add(){
for(var i=0; i<data.total; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.total += 1;
data.rows.push({
name:name,
quantity:1,
price:price,
remove: 'X'
});
}
add();
totalCost += price;
$('#cartcontent').datagrid('loadData', data);
$('div.cart .total').html('Total: $'+totalCost);
}

For multiple carts to work independently you have to store cart data in and array with index. And pass the index to addProduct and removeProduct functions. And for cart content use class instead of id
Updated code is as below:
HTML
<!doctype html>
<html>
<head>
<title>Multiple Carts</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body style="margin:0;padding:0;height:100%;background:#fafafa;">
<ul class="products">
<li>
<a href="#" class="item">
<img src="images/shirt1.gif"/>
<div>
<p>Balloon</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt2.gif"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt3.gif"/>
<div>
<p>Elephant</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt4.gif"/>
<div>
<p>Stamps</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt5.gif"/>
<div>
<p>Monogram</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt6.gif"/>
<div>
<p>Rolling</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>
<div class="cart">
<h1>Shopping Cart 1</h1>
<div style="background:#fff">
<table class="cartcontent" fitColumns="true" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
<th field="remove" width=60 align="right">Remove</th>
</tr>
</thead>
</table>
</div>
<p class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>
<div class="cart">
<h1>Shopping Cart 2</h1>
<div style="background:#fff">
<table class="cartcontent" fitColumns="true" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
<th field="remove" width=60 align="right">Remove</th>
</tr>
</thead>
</table>
</div>
<p class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>
</body>
</html>
CSS
.products{
list-style:none;
margin-right:300px;
padding:0px;
height:100%;
}
.products li{
display:inline;
float:left;
margin:10px;
}
.item{
display:block;
text-decoration:none;
}
.item img{
border:1px solid #333;
}
.item p{
margin:0;
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
.cart{
position:fixed;
top: 0;
right:0;
width:300px;
height:50%;
background:#ccc;
padding:0px 10px;
}
.cart:nth-child(odd){
top:50% !important;
}
h1{
text-align:center;
color:#555;
}
h2{
position:absolute;
font-size:16px;
left:10px;
bottom:20px;
color:#555;
}
.total{
margin:0;
text-align:right;
padding-right:20px;
}
JS
var data = [];
$(function () {
$('.cartcontent').datagrid({
singleSelect: true
});
$('.item').draggable({
revert: true,
proxy: 'clone',
onStartDrag: function () {
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index', 10);
},
onStopDrag: function () {
$(this).draggable('options').cursor = 'move';
}
});
$('.cart').droppable({
onDragEnter: function (e, source) {
$(source).draggable('options').cursor = 'auto';
},
onDragLeave: function (e, source) {
$(source).draggable('options').cursor = 'not-allowed';
},
onDrop: function (e, source) {
var $source = $(source);
var name = $source.find('p:eq(0)').text();
var price = $source.find('p:eq(1)').text();
addProduct($('.cart').index($(e.currentTarget)), name, parseFloat(price.split('$')[1]));
}
});
});
function loadData(cartIndex, event) {
var $cart = $('.cart:eq(' + cartIndex + ')');
$cart.find('.cartcontent').datagrid('loadData', data[cartIndex]);
$cart.find('.total').text('Total: $' + data[cartIndex].total);
}
function addProduct(cartIndex, name, price) {
function add() {
if (!data[cartIndex]) {
data[cartIndex] = {
length: 0,
total: 0,
rows: []
};
}
for (var i=0; i < data[cartIndex].length; i++) {
var row = data[cartIndex].rows[i];
if (row.name === name) {
row.quantity += 1;
return;
}
}
data[cartIndex].length++;
data[cartIndex].rows.push({
name: name,
quantity: 1,
price: price,
remove: 'X'
});
}
add();
data[cartIndex].total += price;
loadData(cartIndex);
}
function removeProduct(cartIndex, el) {
var tr = $(el).closest('tr');
var name = tr.find('td[field=name]').text();
var price = tr.find('td[field=price]').text();
var quantity = tr.find('td[field=quantity]').text();
for(var i = 0; i < data[cartIndex].length; i++){
var row = data[cartIndex].rows[i];
if (row.name == name) {
data[cartIndex].rows.splice(i, 1);
data[cartIndex].length--;
break;
}
}
data[cartIndex].total -= price * quantity;
loadData(cartIndex);
}
JS Fiddle

functoin AddProduct(elment, event, tableid, otherid)
functoin is spelled incorrectly, it should be function.

Here is a solution that will work:
remove: 'X'
// later
$("#item-" + unique_nr).click(function (event) {
removeProduct(this, event, table_id, cart_id);
});
Using the id you can fetch the item later and bind a scope listener.
See: http://jsfiddle.net/Vwu37/135/
Right now I'm passing table_id and cart_id, you could consider passing the actual table and cart, ie. $("#cartcontent") and $(".cart")
Keep in mind that ".cart" is not unique, so if you want to have two lists you will need to make it unique.

Javascript not scrolling entire screen to top

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...