I am trying to create a program that scrolls on div via data-id. I place my data-id on my menus and trying to scroll them on their respective id divs.
Here's my HTML look like:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="testimonials" href="#">Testimonials</a>
</li>
<li class="nav-item border-button">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<section id="big-hero">
<div class="container">
<div class="row ">
<div class="col-lg-5 pl-5">
<h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
<p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
</div>
<div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-4">
<h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
<p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br>
contact management for individuals, teams & small businesses.</p>
</div>
<div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
<div class="offset-lg-1 col-lg-5">
<p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy for you to:</p>
<div class="icon-box">
<i class="fa fa-users fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
</div>
<div class="icon-box">
<i class="fa fa-tasks fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
</div>
<div class="icon-box">
<i class="fa fa-book fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
<p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br>
I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br>
look on my contacts per category. Definitely recommended."</p>
<h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>
</div>
</div>
</section>
<footer>
<p class="text-center">© Copyright 2020. All Rights Reserved.</p>
</footer>
And here's how I selected data attribute so that they can scroll smoothly on each div:
<script>
$('html, body').animate({
scrollTop: $( '#' + data_id).offset().top
}, 'slow');
</script>
Somehow this did not work. I was wondering how can I fix this so that each data-id can scroll to each div?
data_id in your snippet is an undefined var, apart from that all looks good, and works as well.
function scrollToData(data_id){
$('html, body').animate({
scrollTop: $('#' + data_id).offset().top
}, 'slow');
}
scrollToData("about")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="testimonials" href="#">Testimonials</a>
</li>
<li class="nav-item border-button">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<section id="big-hero">
<div class="container">
<div class="row ">
<div class="col-lg-5 pl-5">
<h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
<p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
</div>
<div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-4">
<h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
<p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br> contact management for individuals, teams & small businesses.</p>
</div>
<div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
<div class="offset-lg-1 col-lg-5">
<p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy
for you to:</p>
<div class="icon-box">
<i class="fa fa-users fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
</div>
<div class="icon-box">
<i class="fa fa-tasks fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
</div>
<div class="icon-box">
<i class="fa fa-book fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
<p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br> I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br> look on my contacts per category. Definitely recommended."</p>
<h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>
</div>
</div>
</section>
<footer>
<p class="text-center">© Copyright 2020. All Rights Reserved.</p>
</footer>
You can use scroll-behavior: smooth; css property to achieve this.
html{
scroll-behavior: smooth;
}
You can set this behavior to any scrolling container. By default it is the root of the document that is <html>.
You need to use ids of the elements in the links such as href="#id"
html {scroll-behavior: smooth;}
div {
height: 500px;
border: solid 1px red;
margin: 20px;
}
<ul>
<li>go to last</li>
</ul>
<section>
<div id="first">first</div>
<div id="second">second</div>
<div id="last">last</div>
</section>
But if you want things to work on click then you have to bind event to the relative element.
function goToElement(data_id){
$('html, body').animate({
scrollTop: $( '#' + data_id).offset().top
}, 'slow');
}
Then you have to bind an event to the nav-link element.
$('.nav-link').on('click', function(){
goToElement($(this).data('id'));
});
Try below code
$(".nav-link").click(function(){
var topData= $( '#' + $(this).attr("data-id")).offset();
$('html, body').animate({
scrollTop: topData.top
}, 'slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="testimonials" href="#">Testimonials</a>
</li>
<li class="nav-item border-button">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<section id="big-hero">
<div class="container">
<div class="row ">
<div class="col-lg-5 pl-5">
<h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
<p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
</div>
<div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-4">
<h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
<p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br>
contact management for individuals, teams & small businesses.</p>
</div>
<div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
<div class="offset-lg-1 col-lg-5">
<p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy for you to:</p>
<div class="icon-box">
<i class="fa fa-users fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
</div>
<div class="icon-box">
<i class="fa fa-tasks fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
</div>
<div class="icon-box">
<i class="fa fa-book fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
<p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br>
I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br>
look on my contacts per category. Definitely recommended."</p>
<h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>
</div>
</div>
</section>
<footer>
<p class="text-center">© Copyright 2020. All Rights Reserved.</p>
</footer>
Related
I have an HTML page designed in Bootstrap 5 which has a simple form with a single text input field. When I test the page in my desktop or laptop, I am able to copy any text or web link and paste it into the form's text input field. If the test the same page from my live website and test it in my mobile phone's browser, the paste operation sometimes works and sometimes does not.
On older Android phones, if I copy some text and then try to paste it into my form, it works. But, if I use a relatively new Android phone, I am unable to paste the copied text. It appears as if the text was not copied properly, i.e. the clipboard is empty.
Is this an issue with my code or JavaScript loaded in my html or is this an issue with my mobile device?
Please advise.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<div class="container-fluid">
<!-- Navbar Brand -->
<a class="navbar-brand" href="index.html">
<img class="img-fluid ps-5 pt-2" src="https://via.placeholder.com/150" alt="Example Logo" width="150" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.html">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Headline -->
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<h3>Example Website</h3>
<p>Demonstrate HTML5 Forms</p>
</div>
<!-- Form Input Area -->
<div class="container rounded mt-3 pt-3 pb-1 bg-dark text-white" style="width: 70%;">
<form method="post" class="needs-validation" novalidate>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-addon"><img src="https://via.placeholder.com/35" width="35" height="35"></span>
</div>
<input type="text" class="form-control" placeholder="Enter your name" name="fullname" required>
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<div class="invalid-feedback">Compulsory field</div>
</div>
<div class="form-check ms-2">
<input class="form-check-input" type="checkbox" id="check1" name="checkrules" value="accept" required>
<label class="form-check-label">I accept the rules policy.</label>
</div>
</form>
</div>
<br>
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<div class="row">
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test1">
<p class="text-center mt-2">Test 1</p>
</div>
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test2">
<p class="text-center mt-2">Test 2</p>
</div>
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test3">
<p class="text-center mt-2">Test 3</p>
</div>
</div>
</div>
<!-- Description -->
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<h5>Welcome to Example.com</h5>
<ul>
<li>Sentence 1</li>
<li>Sentence 2</li>
<li>Sentence 3</li>
<li>Sentence 4</li>
<li>Sentence 5</li>
</ul>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<br>
<p class="text-muted text-center">Copyright ©
<script>
document.write(new Date().getFullYear())
</script> Example</p>
<p class="text-muted text-center">Rules</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
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 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>
this is how it looks:
I want it to get it top next to the first card.
<!-- top nav-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:white">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="products.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="inspiration.html">Inspiration</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
</div>
</nav>
<!--Section heading-->
<center>
<h1 class="section-heading h1 pt-4">Vedení / zaměstnanci</h1>
</center>
<!--Section description-->
<div style="padding-left:30%;padding-top:3%">
<!--Card-->
<div class="card testimonial-card back" style="width:25%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<center>
<p>Tester, web designer, programmer and a game developer</p>
</center>
</div>
</div>
<!--Card-->
</div>
<div style="padding-left:50%">
<!--Card-->
<div class="card testimonial-card back" style="width:35%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px;border-radius: 60px 60px 10px 10px;">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<p>Tester, web designer, programmer and a game developer</p>
</div>
</div>
<!--Card-->
</div>
<!-- footer-->
<div style="padding-top:17.6%">
<footer class="page-footer fixed-bottom font-small white pt-4">
<div class="container">
<div class="row">
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">contact</h5>
<p>filip.dvorak13#gmail.com</p>
</div>
<div class="col"><img src="https://cdn.glitch.com/b511ed4c-fabf-49df-b72a-741fff06f5ca%2Ffghfghf.jpg?1538487766651" class="img" alt="" style="width:400px;height:125px"></div>
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">sponsor</h5>
<p>Construsoft s.r.o.</p>
</div>
</div>
</div>
</footer>
</div>
This might be a possible solution. Using flexbox for the introduced <section> element and also for the immediate children.
section {
display: flex;
}
section>div {
flex-grow: 1;
display: flex;
justify-content: center;
}
<!-- top nav-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:white">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="products.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="inspiration.html">Inspiration</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
</div>
</nav>
<!--Section heading-->
<center>
<h1 class="section-heading h1 pt-4">Vedení / zaměstnanci</h1>
</center>
<!--Section description-->
<section>
<div>
<!--Card-->
<div class="card testimonial-card back" style="width:25%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<center>
<p>Tester, web designer, programmer and a game developer</p>
</center>
</div>
</div>
<!--Card-->
</div>
<div>
<!--Card-->
<div class="card testimonial-card back" style="width:35%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px;border-radius: 60px 60px 10px 10px;">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<p>Tester, web designer, programmer and a game developer</p>
</div>
</div>
<!--Card-->
</div>
</section>
<!-- footer-->
<div>
<footer class="page-footer fixed-bottom font-small white pt-4">
<div class="container">
<div class="row">
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">contact</h5>
<p>filip.dvorak13#gmail.com</p>
</div>
<div class="col"><img src="https://cdn.glitch.com/b511ed4c-fabf-49df-b72a-741fff06f5ca%2Ffghfghf.jpg?1538487766651" class="img" alt="" style="width:400px;height:125px"></div>
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">sponsor</h5>
<p>Construsoft s.r.o.</p>
</div>
</div>
</div>
</footer>
</div>
I am preety new to twitter-bootstrap, my website working fine on big screens like desktop but when I resize the browser to get an affect of mobile screen it does not show me that icon (dropdown one) which allows us to select navbar.
HTML
<div class="row nav-menu">
<a href="/">
<div class="col-md-2 col-sm-3 columns">
<img class="logo logo-light logo-wide" alt="Logo" src="img/logo_t.png">
<img class="logo logo-dark logo-wide" alt="Logo" src="img/logo_t.png">
</div>
</a>
<div class="nav-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="icon-bar">About</span>
<span class="icon-bar">Technology</span>
<span class="icon-bar has-dropdown">API</span>
<span class="icon-bar">News</span>
<span class="icon-bar">Jobs</span>
<span class="icon-bar">Contacts</span>
</button>
</div>
<div class="col-md-10 col-sm-9 columns ">
<ul class="menu navigationbar">
<li>About</li>
<li>Technology</li>
<li class="has-dropdown">
API <span class="glyphicon glyphicon-chevron-down"></span>
<ul class="subnav">
<li>Plans</li>
<li>Documentation</li>
<li>Login</li>
</ul>
</li>
<li>News</li>
<li>Jobs</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="mobile-toggle">
</div>
</div>
</nav>
</div> <!-- navbar end -->
Please help, thanks.