<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead class="row col-md-3">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row col-md-3">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
I have this table, when i'm using the bootstrap grid system with ng-repeat the results are very strange..
I've tried to play with the grid system but it dosent seem that it helps..
You do not need to add the row col-md-3 classes to the table-body or the row class to the tr elements. Also if you are repeating the items your ng-repeat needs to be on the tr element, if it is on the tbody element you are going to have multiple unnecessary tbody elements.
Please see working example
If you just want a simple table:
<div ng-controller="TestController as vm">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items">
<td>{{$index}}</td>
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
JS:
var myApp = angular.module('myApp',[])
.controller('TestController', ['$scope', function($scope) {
var self = this;
self.items = ['one', 'two', 'three', 'four'];
}])
If you do not need the table element you can use the bootstrap row and col-* classes
<div class="row">
<div class="col-sm-6">
<h1>Key</h1>
</div>
<div class="col-sm-6">
<h1>Value</h1>
</div>
</div>
<div class="row" ng-repeat="item in vm.items">
<div class="col-sm-6">
{{$index}}
</div>
<div class="col-sm-6">
{{item}}
</div>
</div>
Try remove the class="row .."
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
Remove the bootstrap classes row, col-md-6 in tbody ,use the below code..
for all medias, it will be resized
<div ng-controller="reportCtrl" class="table-responsive>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<div class="row col-md-3">
<thead class="row">
<tr>
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</div>
</table>
I have made few changes, like covered the entire table into 3 divisions and then
dividing them further into 6-6 for ths and tds. Just see if it works.
You may try this code
By removing the col-md-3
and style the table with width:auto
<div ng-controller="reportCtrl">
<table class="table table-hover" style="width:auto">
<thead class="row ">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
Related
I have a page where there is multiple cases and when i click on case it shows the detail against this case on same page.
I have attached the screen shot
as you can see two cases are showing 1) ublox and 2) test case when i click any of them you can see on top detail against this case is appeared.
But I do not want to display these detail on this page I wan to display these detail on separate page when i click any of these case. I am new to vuejs can anyone please help me on this?
Your help will be really appreciated.
My code of vue:
<template>
<div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="col-lg-6">
<div class="card">
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-hover">
<thead>
<tr>
<th>Case Name</th>
</tr>
</thead>
<tbody>
<tr v-for="kase in cases" :key="kase.id" v-on:click="clickList(kase)">
<td>{{kase.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Add New Case</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form class="form-horizontal" #submit.prevent="onSubmit" #keydown="form.errors.clear()">
<div class="card-body" style="height: 239px;">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
<span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-info" :disabled="form.errors.any()">Add Group</button>
</div>
<!-- /.card-footer -->
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
</template>
<script>
export default {
data() {
return {
cases: [],
lists: [],
form: new Form({
'name': ''
})
}
},
created() {
axios.get('/new-case')
.then(({data}) => this.cases = data);
},
methods: {
clickList (Kase) {
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
onSubmit(){
this.form
.post('/new-case')
.then(kase => this.cases.push(kase));
}
}
}
</script>
and my web.php
Route::get('/case-log/{id}', 'CaseLogController#index');
My Controller:
class CaseLogController extends Controller
{
public function index($id)
{
$case = kase::with('sockets')->find($id);
return $case->sockets;
}
}
your help will be appreciated.
Thanks in advance
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lists: [],
}
},
created() {
const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.id
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
}
</script>
This is updated:
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lists: [],
}
},
created() {
const id = this.$route.params.id
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
}
</script>
You will have to define your routes using Vue-router. The documentation shows you how to get started.
Then you need to extract the template of the details into a component, say DisplayDetailView.vue
So you will have:
DisplayDetailView.vue
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
.....
When you click on the detail, it will navigate you to the component where details are shown.
Clicking on Ublox for example, may have code attached to it as follows
ComponentWithCaseName.vue
<div class="col-lg-6">
<div class="card">
...
<tr v-for="kase in cases" :key="kase.id" v-on:click="handleCaseClick"> // add click handler
<td>{{kase.name}}</td>
</tr>
......
</div>
</div>
And you have a method in the component where the case name is clicked
methods: {
handleCaseClick() { // this pushes it to the component that has the display view details i.e DisplayDetailView.vue
this.$router.push(`/path-to-component-for-view-details/${uniqueIdentifierToFetchTheDetailsFromTheDatabase}')
}
}
In the DisplayDetailView.vue component, you have to grab the unique identifier from the url, using the created/mounted hook, (in this case, I use the created lifecycle hook, but mounted will also work) that you will use to make the database call that will populate the template.
DisplayDetailView.vue
export default {
data() {
return {
cases: [],
lists: [],
}
},
created() {
const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.uniqueIdentifierToFetchTheDetailsFromTheDatabase // whatever name you put in the route `e.g if the route is `/path-to-component-for-view-details/:caseId`, you do this.$route.params.caseId
axios.get(`/case-log/${uniqueIdentifierToFetchTheDetailsFromTheDatabase}`).then(response => this.lists = response.data);
},
}
This is the general gist of things. You can figure the rest from here. This will provide you more details.
I have integrated Vuejs in my laravel project.
Currently My scenario is when i click on my case it navigates me to the detail page but on detail page it does not show me the values which i want to get from the database.
My Vue where I am clicking the case:
<div class="col-lg-6">
<div class="card">
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-hover">
<thead>
<tr>
<th>Case Name</th>
</tr>
</thead>
<tbody>
<tr v-for="kase in cases" :key="kase.id" v-on:click="handleCaseClick">
<td>{{kase.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
and my script:
methods: {
handleCaseClick() {
this.$router.push(`/case-log/id`)
},
}
My detail page Vue where it navigated me when i click on case:
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 900px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
My routes.js
{
path: '/case-log/:id',
component: require('./views/detail-page').default
},
My web.php
where I am getting the values from database
Route::get('/case-log/{id}', 'CaseLogController#index');
My Controller:
class CaseLogController extends Controller
{
public function index($id)
{
$case = kase::with('sockets')->find($id);
return $case->sockets;
}
}
I am unable to show values from database where I am doing wrong? I have also attached my screen shot of my output showing internal server error and also you can see the field but not fetching the values from db.
I really need your help here
thanks in advance.
local.ERROR: Trying to get property 'sockets' of non-object {"userId":1,"exception":"[object] (ErrorException(code: 0): Trying to get property 'sockets' of non-object at C:\\xampp\\htdocs\\admin-lte\\app\\Http\\Controllers\\CaseLogController.php:14)
[stacktrace]
My response:
Consuming api here
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 900px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
lists: [],
}
},
created() {
const id = this.$route.params.id;
axios.get(`/case-log/${id}`).then (response => this.lists = response.data)
},
}
</script>
I am new to Bootstrap and Html. I am currently trying to separate my Add Person button away from the panel body but I do not know how to achieve that. Below is the screenshot of my problem and my current codes:
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<div class="panel-heading">
Manage Person
</div>
</div>
</div>
<div class="btn-group pull-right">
<a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rachel</td>
<td>25</td>
<td>Female</td>
<td>175cm</td>
</tr>
<tr>
<td>Thomas</td>
<td>15</td>
<td>Male</td>
<td>165cm</td>
</tr>
<tr>
<td>Jared</td>
<td>40</td>
<td>Male</td>
<td>195cm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Use clearfix div as sugggested below. And add margin-top: 10px; on the panel-body
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="panel panel-primary">
<div class="panel-heading ">
<div class="panel-heading">
Manage Person
</div>
</div>
</div>
<div class="btn-group pull-right" style="float: right;">
<a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
<div class="clearfix"></div>
<div class="panel-body" style="margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rachel</td>
<td>25</td>
<td>Female</td>
<td>175cm</td>
</tr>
<tr>
<td>Thomas</td>
<td>15</td>
<td>Male</td>
<td>165cm</td>
</tr>
<tr>
<td>Jared</td>
<td>40</td>
<td>Male</td>
<td>195cm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="btn-group pull-right">
<a asp-action="Create" style="margin-bottom:5px" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
you can use margin-bottom.
This would be my way to fix this:
Give your button an id and add bottom margin within your css:
#yourButtonId{ margin-bottom: 10px; }
OR
Put your Button in a new bootstrap row: <div class="row"> ---Your button code--- </div>
My table header is looking like this:-
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading"> <h3 class="panel-title">Info</h3> </div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
</table>
</div>
</div>
I want to full hide this entire ID column with the id="hidethis".
What I tried :
<th id="hidethis" data-field="product_id" style="display:none;">ID</th>
this didn't do anything, I think that css cannot be used like that in a th.
$('hidethis').hide();
No impact with that jquery also.
$('td:nth-child(2),th:nth-child(2)').hide();
The closest success I had with this, but that only hidden my Image th, but all my buttons remained there.
I will also put a picture:
I want to full hide all of the marked with red.
I've tried to make my code as easy as possible and also included some comments.
I would consider using a class instead of an id though. :)
// Save index (position) of th
const cellIndex = $('#hidethis').index();
// Hide th first
$('#hidethis').hide();
// Iterate over each table row
$('#scale_missed_entries tbody tr').each(function () {
// Select the cell with same index (position) as the table header
const cell = $(this).children('td').get(cellIndex);
// Hide 'em
$(cell).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
Simply using CSS
[data-field="product_id"] {
display: none;
}
tr td:nth-of-type(1) {
display: none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
<tr>
<td>1
</td>
<td>10
</td>
<td>100
</td>
<td>1000
</td>
</tr>
</thead>
</table>
</div>
</div>
As i commented also apply a same class to th and there corresponding values <td> and hide them. it will work.
$('.hidethis').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">blahh</div></div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th class="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hidethis" data-field="product_id">112</td>
<td data-field="product_weight">51</td>
<td data-field="product_added_date">2017-10-11</td>
<td data-field="button">hi1</td>
</tr>
<tr>
<td class="hidethis" data-field="product_id">111</td>
<td data-field="product_weight">50</td>
<td data-field="product_added_date">2017-10-10</td>
<td data-field="button">hi</td>
</tr>
</tbody>
</table>
</div>
</div>
Note:- without jquery also you can now hide then through css:-
.hidethis{
display:none; // or visibility:hidden;
}
Add:
#hidethis { display: none; }
to your css:
#hidethis {
display: none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
</table>
</div>
</div>
Hope it helps.
Just use this
#scale_missed_entries th:nth-child(1) {
display: none;
}
edit based on the coment
To hide entire column use this--
#hidethis{
display:none;
}
#myTable th:nth-child(1) {
display: none;
}
#hidethis{
display:none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">blahh</div></div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
<tr>
<td id="hidethis">1
</td>
<td>10
</td>
<td>100
</td>
<td>1000
</td>
</tr>
</thead>
</table>
</div>
</div>
I have the following code jQuery
$(".col-md-12").hide();
$(".button-div").hide();
$(".featurette-divider").hide();
$(".footer").hide();
$(".first").fadeIn(1000);
$(".second").delay(900).fadeIn(1000);
$(".third").delay(1800).fadeIn(1000);
$(".fourth").delay(2700).fadeIn(1000);
$(".button-div").delay(3600).fadeIn(1000);
$(".featurette-divider").delay(4000).fadeIn(1000);
$(".footer").delay(5000).fadeIn(1000);
I want to make the page scroll by itself to the bottom as the elements appear on it.
EDIT 1
<div class="container">
<div class="col-md-12 first">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 second">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 third">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 fourth">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="centered button-div">
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-lg">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<hr class="featurette-divider">
<!-- FOOTER -->
<footer class="footer">
<p>© 2015 · About · Contact</p>
</footer>
</div>
My HTML layout (Bootrstrap based). I've pasted the wrapper where all the content goes (.container)
If you use JQuery's scrolltop function, you can scroll your page to a given height in pixels:
$(document).scrollTop(heightInPixels);
This would scroll your whole document to the end:
var documentHeight = $(document).height();
$(document).scrollTop(documentHeight);
If you want this to happen as each element appears, you will have to call this everytime after the effect, or put a callback when the effects are over:
function scrollDocument(){
var documentHeight = $(document).height();
$(document).scrollTop(documentHeight);
}
// Element "appearings"
$(".first").fadeIn(1000, scrollDocument );
....
$( ".footer" ).delay(5000).fadeIn(1000, scrollDocument );
I hope this helps. To help more, I should have more info about your layout...
EDIT
$(".col-md-12").hide();
$(".button-div").hide();
$(".featurette-divider").hide();
$(".footer").hide();
function scrollDocument(){
var contentHeight = $(document).height();
$(document).scrollTop(contentHeight);
}
// Element "appearings"
$(".first").fadeIn(1000, scrollDocument);
$(".second").delay(900).fadeIn(1000, scrollDocument);
$(".third").delay(1800).fadeIn(1000, scrollDocument);
$(".fourth").delay(2700).fadeIn(1000, scrollDocument);
$(".button-div").delay(3600).fadeIn(1000, scrollDocument);
$(".featurette-divider").delay(4000).fadeIn(1000, scrollDocument);
$(".footer").delay(5000).fadeIn(1000, scrollDocument);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-12 first">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description1</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 second">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 third">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 fourth">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="centered button-div">
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-lg">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<hr class="featurette-divider">
<!-- FOOTER -->
<footer class="footer">
<p>© 2015 · About · Contact</p>
</footer>
</div>
Just chage the $(document) selector by your $('div.container') on the code above and that should work.