I have a weird problem happening on my ejs pages. When I include header and footer partials on any page that loads with a route parameter, the page hangs. When I hit the stop button on the page load, the page loads fine. On pages that do not have a route parameter, I have no issues.
I get the following error in node (the page loads with a route parameter called eventid):
params for results to find by eventid: { eventid: 'app.css' }
SOMETHING WENT WRONG GETTING RESULT: { CastError: Cast to ObjectId
failed for value "app.css" at path "event_id" for model "results"
I added a comment below after posting this question. I figure I would add some information here to give more details. My app.css link in the header partial is the cause of my problems. When I comment it out it works fine. In node, I've used the following line to include files in my resources folder which is in the root of my app. This works fine except when i load it using the partials footer. app.use(express.static(path.join(__dirname, 'resources')))
Sample pages...
<% include ../partials/header %>
<h3>Sample page</h3>
<% include ../partials/footer %>
Header partial...
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
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>
<a class="navbar-brand" href="google.com"><i class="fa fa-futbol-o"></i> PESers Only</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log In</li>
<li>Log Out</li>
</ul>
</div>
</div>
</nav>
<!-- <div id="wrapper"> -->
<div class="container">
Footer Partial...
</div> <!-- close container -->
<!-- </div> close wrapper -->
</body>
<footer class="footer">
<div class="footer-content list-inline">
Footer text | Contact Us
</div>
</footer>
</html>
It turns out that the problem I was having was related to the referencing of external files (in this case my app.css file). I was referencing it in my ejs header partial using: <link rel="stylesheet" type="text/css" href="app.css"> however the error was fixed when I added a backslash to the href: <link rel="stylesheet" type="text/css" href="/app.css">.
Essentially, when referencing resources such as a css file that is in a folder that is declared in app.use (app.use(express.static(__dirname + "/resources"));) you need the backslash to reference the root of your application and then access the resource you plan to reference in the ejs views.
Related
Like in title.
I have layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://bootswatch.com/4/journal/bootstrap.min.css"
/>
<title>Node.js & Passport Login App</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Szukaj!</button>
</form>
<li class="nav-item active">
<a class="nav-link" href="/index">Strona Główna
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">O nas</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<%if (!isLoggedIn) { %>
<div> <a class="nav-link" href="/users/logout">Wyloguj</a></div>
<% } %>
<%if (isLoggedIn) { %>
<div> <a class="nav-link" href="/users/login">Zaloguj</a></div>
<% } %>
</li>
</ul>
</div>
</nav>
<div class="container"><%- body %></div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"
></script>
</body>
</html>
and some routes like e.g register view,where I check if user isLogged(no way to registration) etc.
router.get('/register', (req, res) =>
res.render('register',{isLoggedIn:isLoggedIn()}));
I have 2 problems:
1)<%if> in my layout doesn't work (i don't know why)
2)How to inject state of user (logged or not) to layout? I don't want to repeat all of the code from layout on my views.
I think you have swapped the login/logout elements. For !isLoggedIn should be Zaloguj, for isLoggedIn should be Wyloguj.
Generally, I attach to render some (not all, as it can contain pasword hashes) user data res.render(‘register’, { user }) You will need them either, you will want to display logged in user name or so.
Then:
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
If you have a part of ejs you want to have in other templates, just use includes:
<div id=“parent_div”>
<div id=“register_div”>
<% include('register.ejs') %>
</div>
<div id=“mainbody_div”>
<% include('body.ejs') %>
</div>
<div>
I solved my problem - thanks to #Fide for show me a way where is a bug!
router.get('/register',
function (req,res){
res.render('register', {user: req.User} )
});
I have to take User from req - simple but I spent a lot of time on it!
I am trying to create a responsive menu, I am not sure my navbar-nav function is working well or not,This is the first time creating,responsive menu.I created the class navbar-nav and uploaded to server and checked with tablet, mobiles, both giving same result,according to the device not changed.please visit the site. Waiting for answer, how to change the below code for responsive menu and proper guidance .
<div class="container">
<div class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="image/logo.png" alt="Lotus Groups"/>
Lotus Groups</a>
</div>
<ul class="nav navbar-nav" style="float:right">
<li>Lotus Construction</li>
<li>Lotus Interior</li>
<li>Lotus Digital</li>
<li>Lotus Property</li>
<li>Lotus Site</li>
</ul>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
JsFiddle
Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
It includes predefined classes for easy layout options, as well as
powerful
mixins for generating more semantic layouts.
Can you please post the css also, so that we can see what is in the class navbar-nav
Edit:
Try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
to the header and if that doesnt work,
Have a look at this tutorial
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
You can also try this :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true" style="">
<ul class="nav navbar-nav">
<li><img href="#"><img src="image/logo.png" alt="Lotus Groups"></li>
<li>Lotus Construction</li>
<li>Lotus Interior</li>
<li>Lotus Digital</li>
<li>Lotus Property</li>
<li>Lotus Site</li>
</ul>
</div>
</div></div>
</div>
</body>
I put your image in a li tag to include it in the navbar so on mobile the image won't go on your different menus.
The div tag with class="navbar-header" is here to dispplay a toggle button when screen is to small
EDIT:
I have added a line in your head tag, just add it please.
I've also deleted your first div class container.
It should now work !
below is a picture of an issue I'm having with the navbar collapse from bootstrap. I'm running express, node, and handlebars. This header is a partial. For some reason, it keeps expanding outside of its div and I cant figure out why.
navbar collapse overflow problem
Here are my two pages of code for the main page and the header partial. On home.hbs I'm using a CSS grid, not sure if that's causing it or not.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link rel="stylesheet" href="/components-font-awesome/css/fontawesome.min.css" />
<link rel='stylesheet' href="/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="contentContainer">
<div class="navMenu">
{{> header}}
</div>
<div class="sidebarLeft">
<!--Add sidebarLeft variable for navigation -->
</div>
<div class="content">
<div>
<p class="welcome"> Welcome to my portfolio page. </p>
<p class="clickBelow"> I've been learning Javascript, Python, and Spanish for 7 months
while living abroad in Mexico.</p>
<div class="buttonDiv">
<button class="enter" size="lg">Come take a look</button>
</div>
</div>
</div>
<div class="sidebarRight">
<!--Add sidebarRight variable for navigation -->
</div>
<div class="footer">
{{> footer}}
</div>
</div>
</div>
</body>
<script src="/bootstrap/dist/bootstrap.min.js"></script>
<script src="/popper.js/dist/popper.min.js"></script>
</html>
<head>
<link rel="stylesheet" href="/components-font-awesome/css/fontawesome.min.css" />
<link rel='stylesheet' href="/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/header.css" />
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/jquery/dist/jquery.min.js"></script>
</head>
<div class="container-fluid">
<nav class="navbar navbar-dark navbar-expand-md fixed-top container-flui">
<a class-"navbar-brand" href="/">Steven</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<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" href="/about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</nav>
Anyone know? I've tried adding container-fluid to multiple divs. It appears that jquery and bootstrap are working. I've installed these through bower.
I had an issue where my page content was being overlapped by the navbar, try removing the fixed-top property.
I have a ejs page using node where I want to update my variable. The problem is that it is a part of a multipage view.
I'm passing a user variable from the node server to the webpage.
Once on the page, I have a header. I show the name in the header, but in the body, I update the data.
<!DOCTYPE html>
<html ng-app="KBase" ng-init= "m_user=<%=JSON.stringify(user)%>">
<head>
<title>Index</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body ng-controller="accountController">
<header>
<% include header %>
</header>
<div class="container" ng-controller="accountController as up" ng-init="up.m_user = m_user">
I'm using angular to update the data. It is going to the server and updating. However, would rather not update the entire page and I don't want to hae multiple headers. However, the multiple headers is the only way I can see fixing the issue.
My header.ejs
<% if (user){ %>
<ul class="nav navbar-nav navbar-right" >
<!--<li>Link</li> -->
<li class="dropdown">
<%=(user.displayName)%><span class="caret"></span>
<ul class="dropdown-menu">
<li>logout</li>
<li>account settings</li>
<!-- <li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li> --!>
</ul>
</li>
</ul>
Working with Material Design Lite, and the initial test is proving unreliable. I'm trying to reproduce the demo shown here: The first Layout Example.
It looks like this, a menu header with a hamburger icon: . However when I try to implement this in my project I get the header with the "Title" text, but no Hamburger Icon. What am I doing wrong?
Here is my code:
<head>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.cyan-light_blue.min.css">
</head>
<body>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link1</a>
<a class="mdl-navigation__link" href="">Link2</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
</body>
</html>
There's no explicit mention of the menu icon and I believe that is because the default is for it to appear although the documentation is unclear on this point.
Here's the code they list to use for this demo to work:
<style>
.demo-layout-transparent {
background: url('../assets/demos/transparent.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
color: white;
}
</style>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
<div class="mdl-layout__drawer-button"
role="button" aria-expanded="false">
<i class="material-icons">menu</i>
</div>
add this between these two divs mdl-layout__drawer, mdl-layout__content