I am using mvc-5 and using bootstrap and all my links are in _Layout.cshtml now i have a drop down tabs like this http://prntscr.com/75qqpp (using bootstrap) now in my
_Layout.cshtml i have renderbody() which renders all my UI .
What i want to ?
On clicking the tab "Real Time" i get a dropdown list which on futher click to "Tabular" must open replace the current view just below the tabs to a new view .
How i try to do this ?
(1) In home controller i do this :
public ActionResult tabular()
{
return View();
}
(2) Then i create view and in that view i add Layout path like this :
#{
ViewBag.Title = "tabular";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>tabular</h2>
As a result i have all the tabs but they are not alligned properly it now shows the view like this: http://prntscr.com/75qxaz
I feel like i dont have access to bootstrap here or i am doing anything wrong ?
Could some one please give guidance such that i can have tabular.cshtml view just below the tab in the first link (this tab will be common to all the views obtained)
My full code is:
_Layout.cshtml
<!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>
<!--starts here-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="bootstrap/js/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> <!--click on main tab disappers-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="bootstrap/css/jquery.easy-pie-chart.css" rel="stylesheet" media="screen" />
<link href="bootstrap/css/styles.css" rel="stylesheet" />
<link href="/bootstrap/css/DT_bootstrap.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/jquery.jgrowl.css" rel="stylesheet" />
<link href="bootstrap/css/cssFiles.css" rel="stylesheet" />
<!-- Bootstrap -->
<link href="bootstrap/css/chosen.min.css" rel="stylesheet" />
<link href="bootstrap/css/DT_bootstrap.css" rel="stylesheet" />
<link href="/static/vendors/jGrowl/jquery.jgrowl.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/styles.css" rel="stylesheet" />
<link href="bootstrap/css/datepicker.css" rel="stylesheet" />
<link href="bootstrap/css/uniform.default.css" rel="stylesheet" />
<link href="bootstrap/css/dataTables.tableTools.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-wysihtml5.css" rel="stylesheet" />
<link href="bootstrap/css/datepicker.css" rel="stylesheet" />
<link href="bootstrap/css/uniform.default.css" rel="stylesheet" />
<link href="bootstrap/css/chosen.min.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-wysihtml5.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/dataTables.tableTools.css" />
<!-- <script src="bootstrap/js/bootstrap.min.js"></script> <!--click on main tab disappers-->
<!-- <script src="bootstrap/js/common.js"></script> hover disappears-->
<script src="bootstrap/js/jquery.dataTables.min.js"></script>
<script src="bootstrap/js/jquery.easy-pie-chart.js"></script>
<script src="bootstrap/js/jquery.jgrowl.js"></script>
<script src="bootstrap/js/scripts.js"></script>
<script src="bootstrap/js/DT_bootstrap.js"></script>
<script src="bootstrap/js/jquery-DT-pagination.js"></script>
<script type="text/javascript" src="bootstrap/js/icon-selector.js"></script>
<script src="bootstrap/js/dashboard.js"></script>
<script type="text/javascript" src="bootstrap/js/moment.min.js"></script>
<script type="text/javascript" src="bootstrap/js/moment-timezone-with-data-2010-2020.min.js"></script>
<script src="bootstrap/js/jquery.bootstrap.wizard.min.js"></script>
<script src="bootstrap/js/raphael-min.js"></script>
<script src="bootstrap/js/morris.min.js"></script>
<!--ends here-->
</head>
<body>
<div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar navbar-custom navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="/dashboard/">Vision Vertex</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Real Time
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="~/Views/Shared/_Layout/">Dashboard</a>
</li>
<li>
<!--onclick="tabularFunction()" -->
#*<a tabindex="-1" href="~/Views/Home/BackgroundViews/tabular.cshtml">Tabular</a>*#
#Html.ActionLink("Tabular", "tabular", "Home")
</li>
<li>
<a tabindex="-1" href="/dashboard/map/">Live Map</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Utilites<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="/dashboard/contact-list/">List Contacts</a>
</li>
<li>
<a tabindex="-1" href="/dashboard/contact-registration/">Add Contact</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" href="/dashboard/notification-list/">List Notification</a>
</li>
<li>
<a tabindex="-1" href="/dashboard/notification-registration/">Add Notification</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" href="/dashboard/report-list/">List Periodic Report</a>
</li>
<li>
<a tabindex="-1" href="/dashboard/report-registration/">Add Periodic Report</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" href="/dashboard/list-period-alert/">List Periodic Alert</a>
</li>
<li>
<a tabindex="-1" href="/dashboard/add-period-alert/">Add Periodic Alert</a>
</li>
<!--li class="divider"></li>
<li>
<a tabindex="-1" href="#">FAQ</a>
</li-->
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr/>
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
HomeController :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace testLayt.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult tabular()
{
return View();
}
}
}
tabular.cshtml :
#{
ViewBag.Title = "tabular";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>tabular</h2>
Related
I'm a first-time coder and know next to nothing. I'm trying to learn html, css, and js online. I'm trying to create a a responsive site where the navbar menu collapses on smaller resolutions. As of now the menu icon gets highlighted in white when I click on it but doesn't expand to show the items.
I'm using bootstrap 3.3.6 and jquery 2.1.4 (I know it's old but the course I'm learning from is using these)
Thanks in advance!!
(PS: Ignore the content, names etc, I'm just trying to keep it interesting for myself)
<!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>Gorilla Sports</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style_ch.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght#0,500;1,500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg" >
<div id="logo-img" ></div>
</a>
<div class="navbar-brand">
<h1>Gorilla Sports</h1>
<p>
<img src="Images/gorilla_small.jpg" alt="Gorilla">
<span>Gorilla</span>
</p>
</div>
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#collapsable-nav"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs"> About</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span><br class="hidden-xs"> Awards</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:+91-9910673649">
<span>+91-9910673649</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
https://jsfiddle.net/fjg1c5bk/ your collepse menu is working. Maybe your bootsrap libraries is not correct. Can u change them with belows and try again
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
I used the document from jstree page.I want to use it in my laravel project so when i click on a root node it will show the child of that node but when i insert this here i dont know why the button doesnt work.It works if i do it just the html form but not when i use extends (layouts.master).It shows the child node and the root node but not with their styles and the button doesnt work.Thanks in advance
masters.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
#yield('title')
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/now-ui-dashboard.css?v=1.5.0" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('assets/css/dataTables.min.css') }}">
<!--jstree-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body class="">
<div class="wrapper ">
<div class="sidebar" data-color="orange">
<div class="logo">
<a href="#" class="simple-text logo-normal">
Company
</a>
</div>
<div class="sidebar-wrapper" id="sidebar-wrapper">
<ul class="nav">
<li class=" {{ 'dashboard' == request()->path() ? 'active' : '' }} ">
<a href="/dashboard">
<i class="now-ui-icons design_app"></i>
<p>Dashboard</p>
</a>
</li>
<li class=" {{ 'role-register' == request()->path() ? 'active' : '' }} ">
<a href="/role-register">
<i class="now-ui-icons users_single-02"></i>
<p>Employee Profile</p>
</a>
</li>
<li class=" {{ 'department' == request()->path() ? 'active' : '' }} ">
<a href="/department">
<i class="now-ui-icons design_bullet-list-67"></i>
<p>Department</p>
</a>
</li>
<li>
<a href="/home">
<i class="now-ui-icons text_caps-small"></i>
<p>Your Profile</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel" id="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent bg-primary navbar-absolute">
<div class="container-fluid">
<div class="navbar-wrapper">
<div class="navbar-toggle">
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<a class="navbar-brand" href="#">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<form>
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<div class="input-group-append">
<div class="input-group-text">
<i class="now-ui-icons ui-1_zoom-bold"></i>
</div>
</div>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/home">
<i class="now-ui-icons users_single-02"></i>
<p>
<span class="d-lg-none d-md-block">Account</span>
</p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="panel-header panel-header-sm">
</div>
<div class="content">
#yield('content')
</div>
<footer class="footer">
</footer>
</div>
</div>
<!--jstree-->
<!-- 4 include the jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- 5 include the minified jstree source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
<!--jstree-->
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap.min.js"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<script src="{{ asset('assets/js/dataTables.min.js') }}"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chart JS -->
<script src="../assets/js/plugins/chartjs.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/now-ui-dashboard.min.js?v=1.5.0" type="text/javascript"></script><!-- Now Ui Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/demo.js"></script>
#yield('scripts')
</body>
</html>
page.blade.php
#extends ('layouts.master')
#section('title')
Employee Management | Admin
#endsection
#section('content')
<!-- 3 setup a container element -->
<div id="jstree">
<!-- in this example the tree is populated from inline HTML -->
<ul>
<li>Root node 1
<ul>
<li id="child_node_1">Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Root node 2</li>
</ul>
</div>
<button>demo button</button>
<!-- 4 include the jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- 5 include the minified jstree source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
</script>
#endsection
#section('scripts')
$(document).ready( function () {
$('#dataTable').DataTable();
} );
#endsection
I would like to built a basic website.
Βelow I have the nav.html document where I have designed a basic dropdown menu. When I open the nav.html with the browser the toggle button works fine, when I click on it,dropdown menu collapses and
when I click on it again drop-down disappears.
The problem appears when I include nav.html in a home.php file.
When I click on the toggle button, dropdown-menu collapses, but when I click on it again dropdown-menu remains open and doesn't disappear.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
</style>
</head>
<body>
<nav class="navbar navbar-light bg-lignt">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
home.php
<html>
<title>Home</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<?php include('./nav.html'); ?>
</body>
</html>
You are including HTML in HTML and this is not supported. As you are including nav.html into home.php, you want to remove tags body, html and completly head.
<nav class="navbar navbar-light bg-lignt">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
PHP and HTML are completly different languages. With PHP you are generating HTML content. You are not including "the result" of nav.html, but the code.
My sideNav is not working on a page using materializeCSS
here is my html:
```html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<meta charset="UTF-8">
<title>Dutch Fork Running | Contact</title>
<!-- CSS -->
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../includes/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../includes/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../includes/css/fullcalendar.css" rel="stylesheet" />
<link href="../includes/css/fullcalendar.print.css" rel="stylesheet" media="print" />
<link href="../includes/css/font-awesome.css" rel="stylesheet" />
<!-- Scripts -->
<script src="../includes/js/jquery.min.js"></script>
<script src="../includes/js/materialize.js" async defer></script>
<script src="../includes/js/moment.min.js"></script>
<script src="../includes/js/jquery.min.js"></script>
<script src="../includes/js/fullcalendar.js"></script>
<script src="../includes/js/ical.js"></script>
<script src="../includes/js/ical_events.js"></script>
<script src="../includes/js/ical_fullcalendar.js"></script>
<script src="../includes/js/gcal.js"></script>
<script src="../includes/js/init.js"></script>
<script type="text/javascript">var rootdir = "../";</script>
</head>
<body>
<!-- <div class="navbar-fixed"> -->
<header>
<nav class="green">
<div class="nav-wrapper">
<a href="../#" class="center brand-logo">
<img height="54px" src="../images/cc-arrow-green.png" alt="logo">
</a>
<i class="material-icons">menu</i>
<ul class="side-nav" id="mobile-menu">
<li class="">
<a href="../">
Home
</a>
</li>
<li class="">
<a href="../Calendar">
Calendar
</a>
</li>
<li class="">
<a href="../Records">
Records
</a>
</li>
<li class="">
<a href="../Archives">
Archives
</a>
</li>
<li class="">
<a href="../Handbook">
Handbook
</a>
</li>
<li class="">
<a href="../Join">
Join
</a>
</li>
<li class="">
<a href="../Misc">
Misc Info
</a>
</li>
<li class="">
<a href="../Contact">
Contact
</a>
</li>
<li class="">
<a href="../BoosterClub">
Booster Club
</a>
</li>
<li class="">
<a href="../SFTR">
Silver Fox Trail Run
</a>
</li>
</ul>
</div>
</nav>
</header>
```
It says sideNav function not defined on that page. Works on others, no difference in pasted part between pages.
Here is the traceback:
jQuery.Deferred exception: undefined is not a function (evaluating '$('.button-collapse').sideNav()') (2)
(anonymous function) — init.js:3
j — jquery.min.js:2:58607
(anonymous function) — jquery.min.js:2:88441
undefined
I call it using $('.button-collapse').sideNav();
Resolved: Called at end of materialize javascript file
I resolved this issue by adding $('.button-collapse').sideNav(); to the bottom of the materialize.js file.
I have a site and i am working in php html css javascript/jquery
i am using bootstrap theme for the first time. Its so good using bootstrap but i have a problem in menu bar navigation active link
even if i add a jquery changing a active class it doesnot work .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Real Estate</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/style.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/script.js"></script>
<!-- Owl stylesheet -->
<link rel="stylesheet" href="assets/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl.theme.css">
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!-- Owl stylesheet -->
<!-- slitslider -->
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/style.css" />
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/custom.css" />
<script type="text/javascript" src="assets/slitslider/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.slitslider.js"></script>
<!-- slitslider -->
<script>
$(document).ready(function(e) {
$('#username').hover(
function (){
$('#submenu').css("display", "block");
/*$('#submenu').css("background-color", "#999");
$('#submenu').css("color", "#000");*/
$('#submenu').css("z-index", "1");
},
function () {
$('#submenu').css("display", "none");
}
);
});
</script>
</head>
<body>
<!-- Header Starts -->
<div class="navbar-wrapper">
<div class="navbar-inverse" role="navigation">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agents</li>
<li>Contact Us</li>
<li>About Us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Your Name<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Edit Profile</li>
<li>Log Out</li>
</ul>
</li>
<li>Log in</li>
<li>Register</li>
</div>
</nav>
</div>
</div>
</div>
<!-- #Header Starts -->
<div class="container">
<!-- Header Starts -->
<div class="header">
<img src="images/logo.png" alt="Realestate">
<ul class="pull-right" style="margin-top:10px;">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?> </li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Land
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?></li>
</ul>
<!-- <div id ="salesBranch" style="display:none">
<div> Add Property </div> <div> Edit Property </div> -->
</div>
</div>
<!-- #Header Starts -->
</div>
i added following jquery to change the active class but also its not working properly
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
I think it might be because your menu loads different pages than the one you are on. You need to set the active class on the appropriate nav link on page load. For example you could test if the href of the link is the same as the current page name and add class "active" if it is.