I am new in vue js. I have tried to run ExampleComponent.vue and it run ok in my admin panel showing its content. Now I want to import routes from external file (new_route_list.js) and load it via AdminMaster.vue router-view. But now the problem is that in admin panel it not working with . Nothing shown when I hit in 'project-name/home'. But It should load AdminHome.vue content.
Also, npm run watch & browser's vue js console showing no error.
Please help me to figure out where is the problem.
In app.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import {v_routes} from './new_route_list.js';
Vue.component('admin-main', require('./components/admin/AdminMaster.vue'));
const router = new VueRouter({
v_routes,
mode:'history'
})
const app = new Vue({
el: '#app',
router
});
AdminHome.vue
<template>
<div>
<!-- Main content -->
<section class="content">
<div class="card">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>
</div>
</div>
<div class="card-body">
Start creating your amazing application .....!
</div>
<div class="card-footer">
Footer
</div>
<!-- /.card-footer-->
</div>
</section>
<!-- /.content -->
</div>
AdminMaster.vue
<template>
<div id="adminmain">
<router-view></router-view>
</div>
new_route_list.js
import AdminHome from './components/admin/AdminHome.vue'
export const v_routes = [
{
path:'/home',
component: AdminHome
}
]
In admin_master.blade.php I have added:
<div class="wrapper" id="app">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ asset('assets/admin/default/admin.png')}}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ asset('assets/admin/default/admin.png')}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ asset('assets/admin/default/admin.png')}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
See All Messages
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<div class="dropdown-divider"></div>
See All Notifications
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="../../index3.html" class="brand-link">
<img src="{{ asset('assets/admin/default/AdminLTELogo.png')}}"
alt="AdminLTE Logo"
class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">Admin Panel</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{{ asset('assets/admin/default/admin.png')}}" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
{{Auth::user()->name}}
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
</li>
<li class="nav-item">
<a href="../widgets.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Posts
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout Options
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="../layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
<li class="nav-item">
<a href="../layout/collapsed-sidebar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Collapsed Sidebar</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>Admin Home Page</h1>
</div>
<div class="col-sm-6">
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<admin-main></admin-main>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
The reason why it wasn't working is because of the way the const was named in the new_route_list.js file. You have to name it routes since it is short for
new VueRouter({
routes: [
///routes here
],
mode:'history'
});
This is shown in this example here:
https://router.vuejs.org/guide/#javascript
Another thing I noticed was the AdminMaster.vue file. It feels redundant, so I would recommend removing it and just do this in your admin_master.blade.php:
<!-- Main content -->
<router-view></router-view>
<!-- /.content -->
Edit: Your files will need to be updated for this change
Here is app.js:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import { routes } from './new_route_list.js'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode:'history'
});
const app = new Vue({
router
}).$mount("#app");
I updated the new Vue() with .$mount() and removed el:'#app' per the the example shown in the link above.
Here is the update to new_route_list.js:
import adminHome from './AdminHome.vue';
export const routes = [
{
path:'/',
component: adminHome
}
]
Update AdminHome.vue too. You need to wrap the template in the closing </template> tag and then you need to have script tags that export the component like shown below:
<template>
<div>
<!-- Main content -->
<section class="content">
<div class="card">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>
</div>
</div>
<div class="card-body">
Start creating your amazing application .....!
</div>
<div class="card-footer">
Footer
</div>
<!-- /.card-footer-->
</div>
</section>
<!-- /.content -->
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Related
I'm using jQuery Isotope for my pagination functionality. Does anyone know if this sort of thing is built into jquery-isotope? I read the documentation but couldn't find anything.
I got the pages working with no issues, but currently, the next and prev are not functioning as intended and are showing all 6 divs.
I'm currently trying to make the prev and next buttons work in the sense that they will flow to the appropriate (opposite) page when clicked, and works dynamically. I have attempted to achieve this functionality in jQuery under // attempt at making prev and next buttons work. jQuery is not my most robust language so I'd prefer a pure JS solution if possible, but I am open to anything.
/**
* selector helper function
*/
const select = (el, all = false) => {
el = el.trim()
if (all) {
return [...document.querySelectorAll(el)]
} else {
return document.querySelector(el)
}
}
/**
* onscroll event listener
*/
const onscroll = (el, listener) => {
el.addEventListener('scroll', listener)
}
// get to top after new page click
let pageTop = select('.page-top')
if (pageTop) {
const togglePagetop = () => {
if (window.scrollY > 100) {
pageTop.classList.add('active')
} else {
pageTop.classList.remove('active')
}
}
window.addEventListener('load', togglePagetop)
onscroll(document, togglePagetop)
}
/**
* Team Isotope and filter
*/
let teamIsotope = document.querySelector('.team-isotope');
if (teamIsotope) {
let teamFilter = teamIsotope.getAttribute('data-team-filter') ? teamIsotope.getAttribute('data-team-filter') : '*';
let teamLayout = teamIsotope.getAttribute('data-team-layout') ? teamIsotope.getAttribute('data-team-layout') : 'masonry';
let teamSort = teamIsotope.getAttribute('data-team-sort') ? teamIsotope.getAttribute('data-team-sort') : 'original-order';
window.addEventListener('load', () => {
let teamIsotope = new Isotope(document.querySelector('.team-container'), {
itemSelector: '.team-member',
layoutMode: teamLayout,
filter: teamFilter,
sortBy: teamSort
});
let menuFilters = document.querySelectorAll('.team-isotope .team-filters li');
menuFilters.forEach(function(el) {
el.addEventListener('click', function() {
document.querySelector('.team-isotope .team-filters .filter-active').classList.remove('filter-active');
this.classList.add('filter-active');
teamIsotope.arrange({
filter: this.getAttribute('data-filter')
});
if (typeof aos_init === 'function') {
aos_init();
}
}, false);
});
});
}
// attempt at making prev and next buttons work
var page = 0;
var $items = $(".team-container > .team-member");
var $grid = $(".team-container");
function filtre() {
var ell = [];
for (i = page * 3; i < (page + 1) * 3; i++) {
ell.push($items[i]);
}
$grid.isotope({
filter: ell
})
return ell;
}
$("#next").on("click", function() {
if (page < 3) {
page += 1;
filtre();
}
})
$("#prev").on("click", function() {
if (page > 0) {
page -= 1;
filtre();
}
})
.pagination-a .pagination .page-item.filter-active .page-link {
background-color: #72bf43;
}
.team-isotope {
display: flex;
flex-direction: column-reverse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<div class="container">
<div class="team-isotope" data-team-filter=".filter-first" data-team-layout="masonry" data-team-sort="original-order">
<nav class="pagination-a">
<ul class="pagination justify-content-end team-filters">
<li class="page-item prev" id="prev">
<a class="page-link" href="#" tabindex="-1">
<span class="bi bi-chevron-left"></span>
</a>
</li>
<li data-filter=".filter-first" class="page-item filter-active">
<a class="page-link page-top" href="#">1</a>
</li>
<li data-filter=".filter-second" class="page-item">
<a class="page-link page-top" href="#">2</a>
</li>
<li class="page-item next" id="next">
<a class="page-link" href="#">
<span class="bi bi-chevron-right"></span>
</a>
</li>
</ul>
</nav>
<div class="row team-container">
<div class="col-lg-4 col-md-6 col-sm-12 team-member filter-first">
<div class="card-box-d">
<div class="card-img-d">
<img src="https://dummyimage.com/200/000/fff" alt="" class="img-d img-fluid">
</div>
<div class="card-overlay card-overlay-hover">
<div class="card-header-d">
<div class="card-title-d align-self-center">
<h3 class="title-d my-2 m-0">
<a href="" class="link-two">foo fooman
<i class="bi bi-link-45deg"></i>
</a>
</h3>
</div>
</div>
<div class="card-body-d">
<p class="content-d color-text-a">
This company was founded and constructed by foo fooman.
</p>
<div class="info-agents color-a mt-3">
<p>
<strong class="color-b">Role: </strong> Principal
</p>
<p>
<strong class="color-b">Phone: </strong> +54 356 945-2334
</p>
<p>
<strong class="color-b">Email: </strong> agents#example.com
</p>
</div>
</div>
<div class="card-footer-d">
<div class="socials-footer d-flex justify-content-center">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-instagram" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-linkedin" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="team/nick-lind.html" class="color-text-a">
<i class="bi bi-link-45deg"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 team-member filter-first">
<div class="card-box-d">
<div class="card-img-d">
<img src="https://dummyimage.com/200/000/fff" alt="" class="img-d img-fluid">
</div>
<div class="card-overlay card-overlay-hover">
<div class="card-header-d">
<div class="card-title-d align-self-center">
<h3 class="title-d">
<a href="maintenance-mode.html" class="link-two">foo fooman
<i class="bi bi-link-45deg"></i>
</a>
</h3>
</div>
</div>
<div class="card-body-d">
<p class="content-d color-text-a">
foo fooman is a Project Manager
</p>
<div class="info-agents color-a">
<p>
<strong class="color-b">Role: </strong> Project Manager
</p>
<p>
<strong class="color-b">Phone: </strong> +54 356 945-2334
</p>
<p>
<strong class="color-b">Email: </strong> foo#foofooman.com
</p>
</div>
</div>
<div class="card-footer-d">
<div class="socials-footer d-flex justify-content-center">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-instagram" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 team-member filter-first">
<div class="card-box-d">
<div class="card-img-d">
<img src="https://dummyimage.com/200/000/fff" alt="" class="img-d img-fluid">
</div>
<div class="card-overlay card-overlay-hover">
<div class="card-header-d">
<div class="card-title-d align-self-center">
<h3 class="title-d">
<a href="maintenance-mode.html" class="link-two">foo fooman
<i class="bi bi-link-45deg"></i>
</a>
</h3>
</div>
</div>
<div class="card-body-d">
<p class="content-d color-text-a">
foo is a Project Manager for
</p>
<div class="info-agents color-a">
<p>
<strong class="color-b">Role: </strong> Project Manager
</p>
<p>
<strong class="color-b">Phone: </strong> +54 356 945-2334
</p>
<p>
<strong class="color-b">Email: </strong> foo#foofooman.com
</p>
</div>
</div>
<div class="card-footer-d">
<div class="socials-footer d-flex justify-content-center">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-instagram" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 team-member filter-second">
<div class="card-box-d">
<div class="card-img-d">
<img src="https://dummyimage.com/200/e1e1e1/000000" alt="" class="img-d img-fluid">
</div>
<div class="card-overlay card-overlay-hover">
<div class="card-header-d">
<div class="card-title-d align-self-center">
<h3 class="title-d my-2 m-0">
<a href="" class="link-two">foo fooman
<i class="bi bi-link-45deg"></i>
</a>
</h3>
</div>
</div>
<div class="card-body-d">
<p class="content-d color-text-a">
This company was founded and constructed by foo fooman.
</p>
<div class="info-agents color-a mt-3">
<p>
<strong class="color-b">Role: </strong> Principal
</p>
<p>
<strong class="color-b">Phone: </strong> +54 356 945-2334
</p>
<p>
<strong class="color-b">Email: </strong> agents#example.com
</p>
</div>
</div>
<div class="card-footer-d">
<div class="socials-footer d-flex justify-content-center">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-instagram" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-linkedin" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="team/nick-lind.html" class="color-text-a">
<i class="bi bi-link-45deg"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 team-member filter-second">
<div class="card-box-d">
<div class="card-img-d">
<img src="https://dummyimage.com/200/e1e1e1/000000" alt="" class="img-d img-fluid">
</div>
<div class="card-overlay card-overlay-hover">
<div class="card-header-d">
<div class="card-title-d align-self-center">
<h3 class="title-d">
<a href="maintenance-mode.html" class="link-two">foo fooman
<i class="bi bi-link-45deg"></i>
</a>
</h3>
</div>
</div>
<div class="card-body-d">
<p class="content-d color-text-a">
foo fooman is a Project Manager
</p>
<div class="info-agents color-a">
<p>
<strong class="color-b">Role: </strong> Project Manager
</p>
<p>
<strong class="color-b">Phone: </strong> +54 356 945-2334
</p>
<p>
<strong class="color-b">Email: </strong> foo#foofooman.com
</p>
</div>
</div>
<div class="card-footer-d">
<div class="socials-footer d-flex justify-content-center">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-instagram" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 team-member filter-second">
<div class="card-box-d">
<div class="card-img-d">
<img src="https://dummyimage.com/200/e1e1e1/000000" alt="" class="img-d img-fluid">
</div>
<div class="card-overlay card-overlay-hover">
<div class="card-header-d">
<div class="card-title-d align-self-center">
<h3 class="title-d">
<a href="maintenance-mode.html" class="link-two">foo fooman
<i class="bi bi-link-45deg"></i>
</a>
</h3>
</div>
</div>
<div class="card-body-d">
<p class="content-d color-text-a">
foo is a Project Manager for
</p>
<div class="info-agents color-a">
<p>
<strong class="color-b">Role: </strong> Project Manager
</p>
<p>
<strong class="color-b">Phone: </strong> +54 356 945-2334
</p>
<p>
<strong class="color-b">Email: </strong> foo#foofooman.com
</p>
</div>
</div>
<div class="card-footer-d">
<div class="socials-footer d-flex justify-content-center">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-instagram" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="color-text-a">
<i class="bi bi-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js" integrity="sha512-E/yP5UiPXb6VelX+dFLuUD+1IZw/Kz7tMncFTYbtoNSCdRZPFoGN3jZ2p27VUxHEkhbPiLuZhZpVEXxk9wAHCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Note: I'd like to have prev disabled when the page loads, and enabled after next is clicked. & vice versa.
I have a very basic MVC 5 Application which I am attempting to add AdminLTE to. I downloaded the AdminLTE Nuget package and added the code from the startup.html page to my MVC application's _Layout.cshtml page. I updated all the CSS and JS links to point to the right directory for my application.
Here is the code in the _Layout.cshtml file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<!-- Theme style -->
<link href="~/admin-lte/css/AdminLTE.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/admin-lte/css/skins/skin-blue.css" rel="stylesheet" />
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
#if (Request.IsAuthenticated)
{
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
See All Messages
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
See All Notifications
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
Alexander Pierce
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Starter Pages
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Active Page</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Inactive Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Simple Link
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Starter Page</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Starter Page</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div><!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2019 AdminLTE.io.</strong> All rights reserved.
</footer>
</div>
}
<div class="container body-content">
#RenderBody()
</div>
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
Here is what the Home page currently looks like. It seems like not all the JS and/or CSS is being loaded but I have no idea what is missing as the Chrome console is not showing any errors. What am I missing here?
I write this code:
$('.toggler').click(function() {
$(this).parent().nextAll('ul').toggleClass('closed');
if ($(this).parent().next('ul') != true) {
$(this).prev().removeClass('ion-ios-plus-outline');
$(this).prev().addClass('ion-ios-minus-outline');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<!-- First level -->
<li class="branch">
<!-- btn -->
<div class="d-flex justfiy-content-between">
<i class="ion-ios-plus-outline ml-2"></i>
<span class="toggler ml-3">لول اول</span>
<span class="btns d-flex">
<a class="bg-danger" href="">
<i class="ion-trash-b"></i>
</a>
<a class="bg-info mr-2" href="">
<i class="ion-edit"></i>
</a>
</span>
</div>
<!-- Second level -->
<ul class="closed">
<li class="branch">
<!-- btn -->
<div class="d-flex justfiy-content-between">
<i class="ion-ios-plus-outline ml-2"></i>
<span class="toggler ml-3">لول دوم</span>
<span class="btns d-flex">
<a class="bg-danger" href="">
<i class="ion-trash-b"></i>
</a>
<a class="bg-info mr-2" href="">
<i class="ion-edit"></i>
</a>
</span>
</div>
</li>
</ul>
</li>
<!-- First level -->
<li class="branch">
<!-- btn -->
<div class="d-flex justfiy-content-between">
<i class="ion-ios-plus-outline ml-2"></i>
<span class="toggler ml-3">لول اول</span>
<span class="btns d-flex">
<a class="bg-danger" href="">
<i class="ion-trash-b"></i>
</a>
<a class="bg-info mr-2" href="">
<i class="ion-edit"></i>
</a>
</span>
</div>
</li>
</ul>
I have a condition in this click function, it works nice. but it just works when I click on that button, but I want this condition to work outside this click function!
I am using AJAX and HTML to pull a name from a POST request, and then returning the data to fill a div with the response.
The data returns, but for some reason it breaks the div and adds a New Line to the equation, making the page look unprofessional.
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function getSummary(id)
{
$.ajax({
type: "POST",
url: 'http://localhost/notyouraveragebear',
data: "username="+id,
success: function(data) {
document.getElementById("personname").innerText=data;
}
});
}
getSummary(1234);
</script>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>ArchServers Control Panel</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">ArchServers Control Panel</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<i class="fa fa-envelope"></i> <b class="caret"></b>
<ul class="dropdown-menu message-dropdown">
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-preview">
<a href="#">
<div class="media">
<span class="pull-left">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</span>
<div class="media-body">
<h5 class="media-heading"><strong>John Smith</strong>
</h5>
<p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
</div>
</a>
</li>
<li class="message-footer">
Read All New Messages
</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-bell"></i> <b class="caret"></b>
<ul class="dropdown-menu alert-dropdown">
<li>
Alert Name <span class="label label-default">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-primary">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-success">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-info">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-warning">Alert Badge</span>
</li>
<li>
Alert Name <span class="label label-danger">Alert Badge</span>
</li>
<li class="divider"></li>
<li>
View All
</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-user"></i> <div id = "personname"><p></p></div> <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<i class="fa fa-fw fa-user"></i> Profile
</li>
<li>
<i class="fa fa-fw fa-envelope"></i> Inbox
</li>
<li>
<i class="fa fa-fw fa-gear"></i> Settings
</li>
<li class="divider"></li>
<li>
<i class="fa fa-fw fa-power-off"></i> Log Out
</li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active">
<i class="fa fa-fw fa-dashboard"></i> Dashboard
</li>
<li>
<i class="fa fa-fw fa-bar-chart-o"></i> Charts
</li>
<li>
<i class="fa fa-fw fa-table"></i> Tables
</li>
<li>
<i class="fa fa-fw fa-edit"></i> Forms
</li>
<li>
<i class="fa fa-fw fa-desktop"></i> Bootstrap Elements
</li>
<li>
<i class="fa fa-fw fa-wrench"></i> Bootstrap Grid
</li>
<li>
<i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i>
<ul id="demo" class="collapse">
<li>
Dropdown Item
</li>
<li>
Dropdown Item
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-file"></i> Blank Page
</li>
<li>
<i class="fa fa-fw fa-dashboard"></i> RTL Dashboard
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Dashboard <small>Statistics Overview</small>
</h1>
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-dashboard"></i> Dashboard
</li>
</ol>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="fa fa-info-circle"></i> <strong>Like SB Admin?</strong> Try out SB Admin 2 for additional features!
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-comments fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">26</div>
<div>New Comments!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">12</div>
<div>New Tasks!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-shopping-cart fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">124</div>
<div>New Orders!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-support fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">13</div>
<div>Support Tickets!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i> Area Chart</h3>
</div>
<div class="panel-body">
<div id="morris-area-chart"></div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-long-arrow-right fa-fw"></i> Donut Chart</h3>
</div>
<div class="panel-body">
<div id="morris-donut-chart"></div>
<div class="text-right">
View Details <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-clock-o fa-fw"></i> Tasks Panel</h3>
</div>
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item">
<span class="badge">just now</span>
<i class="fa fa-fw fa-calendar"></i> Calendar updated
</a>
<a href="#" class="list-group-item">
<span class="badge">4 minutes ago</span>
<i class="fa fa-fw fa-comment"></i> Commented on a post
</a>
<a href="#" class="list-group-item">
<span class="badge">23 minutes ago</span>
<i class="fa fa-fw fa-truck"></i> Order 392 shipped
</a>
<a href="#" class="list-group-item">
<span class="badge">46 minutes ago</span>
<i class="fa fa-fw fa-money"></i> Invoice 653 has been paid
</a>
<a href="#" class="list-group-item">
<span class="badge">1 hour ago</span>
<i class="fa fa-fw fa-user"></i> A new user has been added
</a>
<a href="#" class="list-group-item">
<span class="badge">2 hours ago</span>
<i class="fa fa-fw fa-check"></i> Completed task: "pick up dry cleaning"
</a>
<a href="#" class="list-group-item">
<span class="badge">yesterday</span>
<i class="fa fa-fw fa-globe"></i> Saved the world
</a>
<a href="#" class="list-group-item">
<span class="badge">two days ago</span>
<i class="fa fa-fw fa-check"></i> Completed task: "fix error on sales page"
</a>
</div>
<div class="text-right">
View All Activity <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-money fa-fw"></i> Transactions Panel</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Order #</th>
<th>Order Date</th>
<th>Order Time</th>
<th>Amount (USD)</th>
</tr>
</thead>
<tbody>
<tr>
<td>3326</td>
<td>10/21/2013</td>
<td>3:29 PM</td>
<td>$321.33</td>
</tr>
<tr>
<td>3325</td>
<td>10/21/2013</td>
<td>3:20 PM</td>
<td>$234.34</td>
</tr>
<tr>
<td>3324</td>
<td>10/21/2013</td>
<td>3:03 PM</td>
<td>$724.17</td>
</tr>
<tr>
<td>3323</td>
<td>10/21/2013</td>
<td>3:00 PM</td>
<td>$23.71</td>
</tr>
<tr>
<td>3322</td>
<td>10/21/2013</td>
<td>2:49 PM</td>
<td>$8345.23</td>
</tr>
<tr>
<td>3321</td>
<td>10/21/2013</td>
<td>2:23 PM</td>
<td>$245.12</td>
</tr>
<tr>
<td>3320</td>
<td>10/21/2013</td>
<td>2:15 PM</td>
<td>$5663.54</td>
</tr>
<tr>
<td>3319</td>
<td>10/21/2013</td>
<td>2:13 PM</td>
<td>$943.45</td>
</tr>
</tbody>
</table>
</div>
<div class="text-right">
View All Transactions <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="js/plugins/morris/raphael.min.js"></script>
<script src="js/plugins/morris/morris.min.js"></script>
<script src="js/plugins/morris/morris-data.js"></script>
</body>
</html>
When i remove the div id personname, and insert just text there, such as my name Christopher, the content on the page appears correctly, without new lines.
As soon as I request the data and its returned and changed with the .textContent, the page adds line breaks and the page looks silly.
Any advice on this?
Here is the page with the replaced content.
http://imgur.com/a/29zAk
Here is the page with static content.
http://imgur.com/jPFLmJA
here is my server.js
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use('/client', express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.listen(80, function () {
console.log('HTTPD Server Started');
});
app.post('/notyouraveragebear', function (req, res) {
res.send('Christopher');
console.log(req.body);
});
Thanks.
I am trying to make my menu bar sticky but for some reason it doesn't do anything.
As explained on Semantic-UI documentation:
Sticky content attaches itself to the viewport when it is passed
However my navbar does not stick to the top once it is passed.
Any one know why this is?
Markup:
<div id="example1">
<div class="ui sticky">
<div style="clear:both" class="ui teal menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="info icon"></i> About
</a>
<a class="item">
<i class="book icon"></i> Read
</a>
<a class="item">
<i class="edit icon"></i> Write
</a>
<div class="ui right menu">
<a class="item" id="logIn">
<i class="user icon"></i> Log In
</a>
<a class="item" href="signup">
<i class="signup icon"></i> Sign Up
</a>
</div>
</div>
</div>
</div>
JavaScript:
$(document).ready(function(){
$('.ui.sticky')
.sticky({
context: '#example1'
});
})
EDIT
Here is a link to the site.
Are you sure you're checking it correctly?
Here's a codepen with your code and it works fine to me:
http://codepen.io/anon/pen/jEYXGG
This is what I used:
<div id="example1">
<div class="ui sticky">
<div style="clear:both" class="ui teal menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="info icon"></i> About
</a>
<a class="item">
<i class="book icon"></i> Read
</a>
<a class="item">
<i class="edit icon"></i> Write
</a>
<div class="ui right menu">
<a class="item" id="logIn">
<i class="user icon"></i> Log In
</a>
<a class="item" href="signup">
<i class="signup icon"></i> Sign Up
</a>
</div>
</div>
... Added some content here ...
</div>