I'm learning bootstrap + asp.net mvc by making portfolio website.
It is based on bootstrap example.
On this example we see one page website. When we click e.g. "about" the site is using javascript and scrolling to about section. I understand that.
but... i want to try this 1 page website, spread on many Controllers (and views), use layout page with RenderBody() in it and keep the same funcionality like before(scrolling).
e.g my views:
About/Index
Portfolio/Index
Contact/Index
and layoutPage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/font-awesome.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"/>
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!-- NAVI -->
<div id="Navigation" class="navbar navbar-default navbar-fixed-top navbar-mm">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="sr-only">Toggle navi</span> Menu<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Welcome to Site.com</a>
</div>
<div class="collapse navbar-collapse navbar-select">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Portfolio
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<li class="page-scroll">
Blog
</li>
</ul>
</div>
</div>
</div>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="~/Img/lawl.png" alt="">
<div class="intro-text">
<span class="name">mySite.com</span>
<hr/>
<span class="skills">Developer</span>
</div>
</div>
</div>
</div>
</header>
<div class="container">
#RenderBody()
</div>
<footer class="footer text-center">
<div class="footer-upp">
<div class="container">
<div class="row">
<div class="footer-col col-lg-4 col-md-4 col-sm-4">
<h3>CONTACT</h3>
tel: 000-000-000 <br />
email: example#gmail.com <br />
City
</div>
<div class="footer-col col-lg-8 col-md-8 col-sm-8">
<h3>MEET ME</h3>
<ul class="list-inline">
<li>
<i class="fa fa-fw fa-facebook"></i>
</li>
<li>
<i class="fa fa-fw fa-linkedin"></i>
</li>
<li>
<i class="fa fa-fw fa-github"></i>
</li>
<li>
<i class="fa fa-fw fa-envelope"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-down">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Copyright ©</p>
</div>
</div>
</div>
</div>
</footer>
<script src="~/Scripts/Site.js"></script>
There is anyway to make this?
Related
I am learning MySQL and for this I am creating a simple inventory system.
I've created a side menu that also has a top navigation bar, from a simple template created with just html, bootstrap.
From this menu, we will have access to all the content of the application: Users, Products, Categories, etc...
I want this side menu to be displayed in all views or pages that are added to the application in the future, that is, all views must have this side menu (Sidebar) and the navigation bar (NavBar)
Each view is created independently, for now the application only has 3 views: home, login and 404
The teacher has created a system to call the different views from the index.php, since the application will have a login as follows:
<?php require "./inc/sesionStart.php" ?>
<!DOCTYPE html>
<html lang="es">
<head>
<?php include "./inc/headsidebar.php" ?>
<title>Administrador de inventario</title>
</head>
<body>
<?php
if (!isset($_GET['vista']) || $_GET['vista'] == "") {
$_GET['vista'] = "login";
}
if (is_file("./vistas/" . $_GET['vista'] . ".php") && $_GET['vista'] != "login" && $_GET['vista'] != "404") {
include "./inc/sidebar.php";
include "./vistas/" . $_GET['vista'] . ".php";
} else {
if ($_GET['vista'] == "login") {
include "./vistas/login.php";
} else {
include "./vistas/404.php";
}
}
?>
</body>
</html>
The Login and 404 Views work perfectly, since these pages should not have the side menu (Sidebar) and the Navigation Bar (NavBar)
The problem arises when I have added a new View (HOME), this view needs to have the Side Menu and the Navigation Bar.
However, when I add the URL to the browser: http://localhost:8888/index.php?vista=home , it shows what you see in the screenshot below, the interface created for the HOME View, it shows after of the Sidebar view, that is, we must scroll to be able to see the content of HOME.
Actually, HOME and all views (except Login and 404) must have the SIDEBAR and the NAVBAR
And this is what is displayed when I want to enter HOME:
How can I correct this?
What do I have to do so that all the views that I create in the future have a Side Menu and a Navigation Bar?
I am really following the course and trying to learn with the structure system that the tutorial shows, I do not have the knowledge to make my corrections.
This is the file system I have in the project:
I show the file with which the Side Menu and the NavBar are created and the HOME view file with its corresponding css.
If you don't understand the code, I've created a repository on GitHub to record the changes I make to the project:
https://github.com/dianacuentagithub/inventario
I don't want to continue with the tutorial until I get this corrected, I hope to find an idea or advice to learn how to avoid this.
I hope to see explained well what I need for the application, it is difficult to use the translator
Thank you
sidebar.php
<head>
<?php include "./inc/headsidebar.php" ?>
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<img src="./img/gato-2.png" class="rounded-circle" alt="logo">
<h3 class="tituloPanel"> Panel Administrador </h3>
<strong>PA</strong>
</div>
<ul class="list-unstyled components">
<li class="usuarioColor active ">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="sidebaruser dropdown-toggle">
<i class="fas fa-user"></i>
Usuarios
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Nuevo
</li>
<li>
Lista
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="categoriasColor">
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Categorias
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Nuevo
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="productosColor">
<a href="#pageProductos" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-cubes"></i>
Productos
</a>
<ul class="collapse list-unstyled" id="pageProductos">
Nuevo
Lista
Por Categoria
Buscar
</ul>
</li>
</nav>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-justify"></i>
<span></span>
</button>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<button type="button" class="btn btn-outline-success">Mi Cuenta</button>
<button type="button" class="btn btn-outline-danger">Salir</button>
</ul>
</div>
</div>
</nav>
</div>
</div>
<?php include "inc/script.php"; ?>
</body>
</html>
home.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/homeStyle.css">
<title>home</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="jimena">
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" id="texto">
<h1 class="text-center hi">Hello...
<link rel="stylesheet" href="./css/homeStyle.css">
</h1>
<div class="div-center underline">
</div>
<p class="text-center intro"> This is the view of HOME</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
headsidebar.php
<title>Menu Lateral</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="./css/sidebarStyle.css">
<link rel="stylesheet" href="./css/styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
script.php
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
<script src="./js/ajax.js"></script>
I have searched the internet for examples similar to what I need for my project and studied their code, but my limited experience in the php language prevents me from correcting it by myself, so I have come to this place in search of advice
Your sidebar.php is defining the <body> tag which is conflicting with the <body> tag in home.php
Remove the <head> and <body> tags from sidebar.php
Once you do that your layout should work correctly.
Heres how youre files should look:
home.php
<link rel="stylesheet" href="./css/homeStyle.css">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 h-100" id="jimena">
<div class="row h-100">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 h-100" id="texto">
<h1 class="text-center hi">Hello...
<link rel="stylesheet" href="./css/homeStyle.css">
</h1>
<div class="div-center underline">
</div>
<p class="text-center intro"> This is the view of HOME</p>
<!--<p class="text-center nombre"> Miguel Espeso </p>-->
</div>
</div>
</div>
</div>
</div>
sidebar.php
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<img src="./img/gato-2.png" class="rounded-circle" alt="logo">
<h3 class="tituloPanel"> Panel Administrador </h3>
<strong>PA</strong>
</div>
<ul class="list-unstyled components">
<li class="usuarioColor active ">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="sidebaruser dropdown-toggle">
<i class="fas fa-user"></i>
Usuarios
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Nuevo
</li>
<li>
Lista
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="categoriasColor">
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Categorias
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Nuevo
</li>
<li>
Lista
</li>
<li>
Buscar
</li>
</ul>
</li>
<li class="productosColor">
<a href="#pageProductos" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-cubes"></i>
Productos
</a>
<ul class="collapse list-unstyled" id="pageProductos">
Nuevo
Lista
Por Categoria
Buscar
</ul>
</li>
<!-- <li>
<a href="#">
<i class="fas fa-briefcase"></i>
Detalles
</a>
</li>
<li class="alertasColor">
<a href="#">
<i class="fas fa-image"></i>
Alertas
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paper-plane"></i>
Contacto
</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
Muestra
</li>
<li>
Muestras
</li>
</ul> -->
</nav>
<!-- Nav Bar -->
<?php include "inc/script.php"; ?>
index.php
<?php require "./inc/sesionStart.php" ?>
<!DOCTYPE html>
<html lang="es">
<head>
<?php include "./inc/headsidebar.php" ?>
<title>Administrador de inventario</title>
</head>
<body>
<?php
if (!isset($_GET['vista']) || $_GET['vista'] == "") {
$_GET['vista'] = "login";
}
if (is_file("./vistas/" . $_GET['vista'] . ".php") && $_GET['vista'] != "login" && $_GET['vista'] != "404") {
#include "./inc/navbar.php";
?>
<div class="row h-100" style="margin:0 !important">
<div class="col-auto h-100" style="padding: 0px !important; margin: 0px !important;">
<?php include "./inc/sidebar.php";?>
</div>
<div class="col h-100" style="padding: 0px !important; margin: 0px !important;">
<?php include "./vistas/" . $_GET['vista'] . ".php";?>
</div>
</div>
<?php
#include "./inc/script.php";
} else {
if ($_GET['vista'] == "login") {
include "./vistas/login.php";
} else {
include "./vistas/404.php";
}
}
?>
</body>
</html>
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 have a click event that goes to a Bootstrap Nav Tab. When I click the button it goes to the tab page but is halfway down. I'm trying to have it when a user clicks on the button they start at the top of the page rather than halfway through it. I have tried a couple things but I can't seem to get it to work. Any help would be appreciated!
$('#gotonew').click(function(){
$('a[href="#whatsNew"]').click();
console.log($('a[href="#whatsNew"]').text() + ' click triggered');
});
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body id="learn">
<!-- Nav Bar -->
<nav class="navbar navbar-nav fixed-top fixed-top-1 navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse1 navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
<!-- container -->
</nav>
<!--First set of Nav Tabs-->
<nav class="navbar navbar-expand bg-inverse navbar-inverse fixed-top fixed-top-2">
<div class="container-fluid">
<div class="navbar-collapse collapse justify-content-left" id="navbar2">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active2" href="#overview" role="tab" data-toggle="tab">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gettingStarted" role="tab" data-toggle="tab">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#whatsNew" role="tab" data-toggle="tab">What's New</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Tab panes -->
<section id="subNavPanes">
<div class="tab-content">
<div role="tabpanel" class="tab-pane show fade active" id="overview">
<header>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="jumbotron">
<div class="row">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<!---Button I want to Link to What's New Tab-->
<p class="text-center"><button id="gotonew" class="btn btn-primary">See all the new features</button></p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>footer</p>
</footer>
<!--The Nav Tab Page I'm trying to link to from the Overview Tab-->
<div role="tabpanel" class="tab-pane fade in" id="whatsNew">
<header>
<div class="container">
<div class="jumbotron">
<div class="row">
</div>
</div>
</div>
</header>
<section id="section6" class="d-none d-md-block">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center bhoechie-tab-container">
<div class="row">
<div class="col-md-3 bhoechie-tab-menu">
<div class="list-group .d-sm-block">
<a href="#stepOne" class="list-group-item active text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepTwo" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepThree" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepFour" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepFive" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepSix" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
</div>
</div>
<div class="col-md-9 bhoechie-tab text-center">
<!-- flight section -->
<div id="stepOne" class="bhoechie-tab-content active">
<img class="img-fluid " src="" alt="picture">
<div class="tab-text">
<h3>...</h3>
<p>...</p>
</div>
</div>
<!-- train section -->
<div id="stepTwo" class="bhoechie-tab-content">
<img class="img-fluid" src="" alt="figure10">
<div class="tab-text">
<h3>...</h3>
<p>....</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<p>footer...</p>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
</body>
</html>
I figured out a solution.
`$('#gotonew').click(function(){
$('a[href="#whatsNew"]').click();
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
console.log($('a[href="#whatsNew"]').text() + ' click triggered');
});`
I have a few drop down menus on my pages navbar using bootstrap elements along with my customized javascript. I have made it conditional to only run if the screen width size is greater than 480 (the xs size for bootstrap). Problem is that the script runs when the screen width is at 480, below 480, and of course 480. IN other words my conditional statement surrounding the script running the dropdown on hover script is being ignored by the browser for some reason. MY GOAL is to make it so the hover effect only takes place as long as the navbar is not collapsed.
Javascript
if ( $(window).width() > 480) {
$('ul.nav li.dropdown').hover(function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Made with Love and Sarcasm</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--Custom theme-->
<link href="css/styles.css" rel="stylesheet">
<link href="css/theme.min.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<script src="https://use.typekit.net/mxj2kia.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="index.html" class="navbar-brand title">
<h1 class="sr-only">Made With Love and Sarcasm</h1>
<img src="img/ggc_logo_larger.png" alt="logo" class="pushup img-responsive img-rounded"></a> </div>
<div id="navbar" class="navbar-collapse collapse">
<form class="form-inline inline" action="">
<!--Make sure to program a search feature here-->
<div class="input-group navbar-btn">
<input type="text" class="form-control" placeholder="Search For" aria-describedby="Placeholder">
<span class="input-group-btn">
<button type="submit" class="btn btn-default" id="search-button"> <span class="glyphicon glyphicon-search"></span> </button>
</span> </div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="title dropdown">Admire<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li><span class="glyphicon glyphicon-scissors"> Outfits</span></li>
<li><span class="glyphicon glyphicon-cutlery"> Foods</span></li>
<li><span class="glyphicon glyphicon-sunglasses"> Props</span></li>
<li><span class="glyphicon glyphicon-star"> Misc</span></li>
</ul>
</li>
<li class="title dropdown">Explore<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="title dropdown">Create<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
</div>
<!--/collapse-->
</div>
<!--/container-->
</div>
<!--/navbar-->
<div class="jumbotron placeholder">
<div class="container">
<h1>Place to Put Amazing Photos</h1>
</div>
<!--replace with image-->
</div>
<div class="container">
<div class="row visible-lg visible-md visible-sm">
<div class="col-md-3 visible-md visible-lg"> Incredible Outfits </div>
<div class="col-md-3 visible-md visible-lg"> Wonderful Cooking </div>
<div class="col-md-3 visible-md visible-lg"> Outstanding Props </div>
<div class="col-md-3 visible-md visible-lg"> Amazing Creations </div>
<div class="col-sm-3 visible-sm"> Incredible Outfits </div>
<div class="col-sm-3 visible-sm"> Wonderful Cooking </div>
<div class="col-sm-3 visible-sm"> Outstanding Props </div>
<div class="col-sm-3 visible-sm"> Amazing Creations </div>
</div>
<div class="row visible-xs">
<div class="col-xs-6"><span class="glyphicon glyphicon-scissors"> Outfits</span> </div>
<div class="col-xs-6"><span class="glyphicon glyphicon-cutlery"> Cooking</span> </div>
</div>
<br>
<div class="row visible-xs">
<div class="col-xs-6"><span class="glyphicon glyphicon-sunglasses"> Props</span> </div>
<div class="col-xs-6"><span class="glyphicon glyphicon-star"></span> Creations </div>
</div>
</div>
<div class="footer">
<div class="container">
<p>© 2017 Made With Love and Sarcasm</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/function.js" type="text/javascript"></script>
</body>
</html>
Customized CSS
#charset "utf-8";
/* CSS Document */
h1, h2, h3, h4, h5, h6, h7 {
font-family: vatican;
}
.title {
font-family: vatican;
}
.pushup {
margin-top: -8px;
}
.placeholder {
height: 500px;
}
div.jumbontron h1 {
color: black;
}
.inline {
display: inline-block;
}
I was using the wrong size. The size should be 767.
I'm trying to get the collapse button on a navbar to work but i can't seem to. I've checked that the data target is pointing to .navbar-collapse and as far as I can tell my css and javascript are all there. Can't work out what I'm doing wrong.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javasript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javasript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title></title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="assets/images/title.png" class="img-responsive" /></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-header">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="assets/images/hero-banner.jpg" class="img-responsive" />
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="assets/images/mountains-small.jpg" class="img-responsive" />
<p id="hometext">text goes here</p>
</div>
</div>
</div>
<div class="container">
<div class="container" id="footer">
<div class="row">
<div class="col-xs-12">
<p class="footerheading">Contact Us</p>
<p class="copyright">© 2014 company</p>
</div>
</div>
</div>
</div>
</div>
</body>