Node.js cannot access other pages in esj - node.js
I am new to nodeJS and I try to create some simple blogs using Nodejs,express and mongodb. I faces problem as when i try access other page in blog website it show error Cannot GET /index.ejs. Other pages also show the same thing.I try to fix it but I cant seem to find the solution. I tried change the code<a href="post.ejs"> to <%- include('views/post'); -%>but it become error to the whole website.
This is my code for index.ejs
<!DOCTYPE html>
<html lang="en">
<%- include('layouts/header'); %>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" id="index">Start Bootsrap
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
<%- include('layouts/navbar'); -%>
<!-- Page Header-->
<header class="masthead" style="background-image: url('assets/img/home-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Post preview-->
<div class="post-preview">
<a href="post.ejs">
<h2 class="post-title">Man must explore, and this is exploration at its greatest</h2>
<h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on September 24, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
**<h2 class="post-title">I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.</h2>**
<p class="post-meta">
Posted by
Start Bootstrap
on September 18, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.ejs">
<h2 class="post-title">Science has not yet mastered prophecy</h2>
<h3 class="post-subtitle">We predict too much for the next year and yet far too little for the next ten.</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on August 24, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.ejs">
<h2 class="post-title">Failure is not an option</h2>
<h3 class="post-subtitle">Many say exploration is part of our destiny, but it’s actually our duty to future generations.</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on July 8, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Pager-->
<div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
</div>
</div>
</div>
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your Website 2022</div>
</div>
</div>
</div>
<%- include('layouts/footer'); -%>
<%- include('layouts/scripts'); -%>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
I also already set the index.js according ejs.
const express=require('express')
const path=require('path')
const app=new express()
const ejs=require('ejs')
app.set('view engine','ejs')
app.use(express.static('public'))
app.listen(4000,()=>{
console.log('App listening on port 4000')
})
app.get('/',(req,res)=>{
res.render('index.ejs')
})
app.get('./about',(req,res)=>{
//res.sendFile(path.resolve(__dirname,'pages/about.ejs')
res.render('about')
})
app.get('./contact',(req,res)=>{
// res.sendFile(path.resolve(__dirname,'pages/contact.ejs'))
res.render('contact')
})
app.get('./post',(req,res)=>{
//res.sendFile(path.resolve(__dirname,'pages/post.ejs'))
res.render('post')
})
const mongoose=require('mongoose');
mongoose.connect('mongodb://localhost/my_database',{useNewUrlParser:true})
This is other pages for post.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.ejs">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
<!-- Page Header-->
<header class="masthead" style="background-image: url('assets/img/post-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="post-heading">
<h1>Man must explore, and this is exploration at its greatest</h1>
<h2 class="subheading">Problems look mighty small from 150 miles up</h2>
<span class="meta">
Posted by
Start Bootstrap
on August 24, 2022
</span>
</div>
</div>
</div>
</div>
</header>
<!-- Post Content-->
<article class="mb-4">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.</p>
<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>
<h2 class="section-heading">The Final Frontier</h2>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<blockquote class="blockquote">The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.</blockquote>
<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>
<h2 class="section-heading">Reaching for the Stars</h2>
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.</p>
<img class="img-fluid" src="assets/img/post-sample-image.jpg" alt="..." />
<span class="caption text-muted">To go places and do things that have never been done before – that’s what living is all about.</span>
<p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before.</p>
<p>As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore, and this is exploration at its greatest.</p>
<p>
Placeholder text by
Space Ipsum
· Images by
NASA on The Commons
</p>
</div>
</div>
</div>
</article>
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your Website 2022</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
This my package.json
{
"name": "blog",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"ejs": "^3.1.8",
"express": "^4.18.2",
"mongoose": "^6.6.5"
},
"devDependencies": {
"nodemon": "^2.0.20"
}
}
I have tested your codes, after using the correct syntax for routes, all should be working fine.
// the route './about' is incorrect, please change the rest.
app.get('/about',(req,res)=>{
res.render('about')
});
And also check all the href. It should link to route or url.
<a href="/about">
Related
Node.js/ejs not functioning
I am new to Node.js. I try to learn Node.js and make a simple blog based on the Node.js that I learn. I face a problem in my coding as my node.js syntax is not functioning. I have a coding error in index.ejs, and I can't seem to connect to MongoDB until I fix it. I tried to find a solution to this problem, but I can't seem to fix it. Here is my code in index.ejs. A little help would be appreciated. Thank you.
<!DOCTYPE html>
<html lang="en">
<%- include('layouts/header'); -%>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<%include('layouts/navbar'); ->
<!-- Page Header-->
<header class="masthead" style="background-image: url('assets/img/home-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Man must explore, and this is exploration at its greatest</h2>
<h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on September 24, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<h2 class="post-title">I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.</h2>
<p class="post-meta">
Posted by
Start Bootstrap
on September 18, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Science has not yet mastered prophecy</h2>
<h3 class="post-subtitle">We predict too much for the next year and yet far too little for the next ten.</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on August 24, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Failure is not an option</h2>
<h3 class="post-subtitle">Many say exploration is part of our destiny, but it’s actually our duty to future generations.</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on July 8, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Pager-->
<div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
</div>
</div>
</div>
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your Website 2022</div>
</div>
</div>
</div>
<%- include('layouts/footer'): -%>
<%- include('layouts/scripts'); -%>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
enter image description here
How to get a specific div's inline style using cheerio?
I'm trying to get a div's inline styling (background image) using cheerio on node.js.
<div class="">
<div class="news-card z-depth-1" itemscope itemtype="http://schema.org/NewsArticle">
<span content="" itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage"
itemid="https://example.com/en/news/nag-ashwin-seeks-mahindras-help-to-build-futuristic-vehicles-for-film-mahindra-replies-1646392977128"></span>
<span itemtype="https://schema.org/Person" itemscope="itemscope" itemprop="author">
<span itemprop="name" content="Daisy Mowke"></span>
</span>
<span itemprop="description"
content="Nag Ashwin seeks Mahindra's help to build futuristic vehicles for film, Mahindra replies"></span>
<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url"
content="https://static.example.com/example/images/v1/variants/jpg/m/2022/03_mar/4_fri/img_1646391607355_815.jpg?">
</meta>
<meta itemprop="width" content="864">
</meta>
<meta itemprop="height" content="483">
</meta>
</span>
<span itemtype="https://schema.org/Organization" itemscope="itemscope" itemprop="publisher">
<span itemprop="url" content="https://example.com/"></span>
<span itemprop="name" content="example"></span>
<span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<span itemprop="url"
content="https://assets.example.com/example/images/v1/variants/jpg/m/2018/11_nov/21_wed/img_1542823931298_497.jpg"></span>
<meta itemprop="width" content="400">
</meta>
<meta itemprop="height" content="60">
</meta>
</span>
</span>
<div class="news-card-image"
style="background-image: url('https://static.example.com/example/images/v1/variants/jpg/m/2022/03_mar/4_fri/img_1646391607355_815.jpg?')">
</div>
<div class="news-card-title news-right-box">
<a class="clickable"
onclick="track_GA_Mixpanel({'hitType': 'event', 'category': 'TitleOfNews', 'action': 'clicked', 'label': 'Nag%20Ashwin%20seeks%20Mahindra's%20help%20to%20build%20futuristic%20vehicles%20for%20film%2C%20Mahindra%20replies)' });"
style="color:#44444d!important"
href="/en/news/nag-ashwin-seeks-mahindras-help-to-build-futuristic-vehicles-for-film-mahindra-replies-1646392977128">
<span itemprop="headline">Nag Ashwin seeks Mahindra's help to build futuristic vehicles
for film, Mahindra replies</span>
</a>
<div class="news-card-author-time news-card-author-time-in-title">
<a
href="/prev/en/news/nag-ashwin-seeks-mahindras-help-to-build-futuristic-vehicles-for-film-mahindra-replies-1646392977128"><span
class="short">short</span></a> by <span class="author">Daisy Mowke</span> /
<span class="time" itemprop="datePublished" content="2022-03-04T11:22:57.000Z">04:52
pm</span> on <span clas="date">04 Mar 2022,Friday</span>
</div>
</div>
<div class="news-card-content news-right-box">
<div itemprop="articleBody">Director Nag Ashwin, who's shooting 'Project K' starring
Prabhas, Amitabh Bachchan and Deepika Padukone, sought Anand Mahindra's support in
building futuristic vehicles for the movie. "How could we refuse an opportunity to help
you envision the future of mobility?" Mahindra responded. "Chief of Global Product
Development #Velu_Mahindra will...happily throw his weight behind you," he added.</div>
<div class="news-card-author-time news-card-author-time-in-content">
<a
href="/prev/en/news/nag-ashwin-seeks-mahindras-help-to-build-futuristic-vehicles-for-film-mahindra-replies-1646392977128"><span
class="short">short</span></a> by <span class="author">Daisy Mowke</span> /
<span class="time" itemprop="dateModified" content="2022-03-04T11:22:57.000Z">04:52
pm</span> on <span class="date">04 Mar</span>
</div>
</div>
<div class="news-card-footer news-right-box">
<div class="read-more">read more at <a class="source"
onclick="track_GA_Mixpanel({'hitType': 'event', 'category': 'ReadMore', 'action': 'clicked', 'label': 'Hindustan%20Times' });"
target="_blank"
href="https://www.hindustantimes.com/entertainment/telugu-cinema/nag-ashwin-asks-anand-mahindra-s-support-to-build-futuristic-vehicles-for-his-prabhasstarrer-101646389522586-amp.html?utm_campaign=fullarticle&utm_medium=referral&utm_source=example ">Hindustan
Times</a></div>
</div>
</div>
In this example, the div with class: "news-card-image" contains one inline style, which I want. if i can get this whole div as a string then also fine, I will manipulate the string and extract the url of backgroun image.
That would be:
$('.news-card-image').attr('style')
To get the url:
$('.news-card-image').attr('style').match(/'(.*)'/)[1]
search icon not properly appending with search form on small screens in Bootstrap 4
I have used dropdown for search form like when the search icon is clicked the search form appears. It works and is positioned as expected but when the breakpoint reaches the small screen size, the search form doesn't get properly append with the search icon. You can observe that by running the code and viewing on small screen.
html,body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #f0f0f0;
width: 100%;
}
#NavigationSection .bg-light{
background: white !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100" rel="stylesheet" >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="styles/stle.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<!-- Navigation -->
<section id="NavigationSection">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
LOGO
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navNavbar"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">Home</li>
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="search" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding-bottom: 0px;padding-top: 3px;"><i class="fas fa-search fa-2x"></i></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="search" style="min-width:17rem;padding: 0.5rem;float:left">
<form class="form-inline my-lg-0" method="get" action="results.php">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search" name="user_query" required>
<div class="input-group-append"><button class="btn btn-outline-success my-2 my-sm-0" type="submit" value="Search" name="search"><i class="fas fa-search" aria-hidden="true"></i>
</button></div>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
</nav>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
In the following line, <button class="btn btn-outline-success my-2 my-sm-0" type="submit" value="Search" name="search"> Remove my-2, see below (which is responsible for margins in the y axis). <button class="btn btn-outline-success my-sm-0" type="submit" value="Search" name="search"> I am sure this will do the trick. I hope this helps. Thanks.
Bootstrap4 Navbar collapse overflows. Express/Node partial
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.
Not able to access tomcat URL, where as curl of http:hostip:port is resulting in output
I have installed tomcat-8.5.23 in Linux and it is running fine. I have tried running the curl command as below, and it is resulting in the output. Where as i am trying to access the url(http://hostIp:8181/) from internet explorer resulting in timeout error. $curl http://hostIp:8080/ output: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Apache Tomcat/8.5.23</title> <link href="favicon.ico" rel="icon" type="image/x-icon" /> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="tomcat.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="navigation" class="curved container"> <span id="nav-home">Home</span> <span id="nav-hosts">Documentation</span> <span id="nav-config">Configuration</span> <span id="nav-examples">Examples</span> <span id="nav-wiki">Wiki</span> <span id="nav-lists">Mailing Lists</span> <span id="nav-help">Find Help</span> <br class="separator" /> </div> <div id="asf-box"> <h1>Apache Tomcat/8.5.23</h1> </div> <div id="upper" class="curved container"> <div id="congrats" class="curved container"> <h2>If you're seeing this, you've successfully installed Tomcat. Congratulations!</h2> </div> <div id="notice"> <img src="tomcat.png" alt="[tomcat logo]" /> <div id="tasks"> <h3>Recommended Reading:</h3> <h4>Security Considerations HOW-TO</h4> <h4>Manager Application HOW-TO</h4> <h4>Clustering/Session Replication HOW-TO</h4> </div> </div> <div id="actions"> <div class="button"> <a class="container shadow" href="/manager/status"><span>Server Status</span></a> </div> <div class="button"> <a class="container shadow" href="/manager/html"><span>Manager App</span></a> </div> <div class="button"> <a class="container shadow" href="/host-manager/html"><span>Host Manager</span></a> </div> </div> <!-- <br class="separator" /> --> <br class="separator" /> </div> <div id="middle" class="curved container"> <h3>Developer Quick Start</h3> <div class="col25"> <div class="container"> <p>Tomcat Setup</p> <p>First Web Application</p> </div> </div> <div class="col25"> <div class="container"> <p>Realms & AAA</p> <p>JDBC DataSources</p> </div> </div> <div class="col25"> <div class="container"> <p>Examples</p> </div> </div> <div class="col25"> <div class="container"> <p>Servlet Specifications</p> <p>Tomcat Versions</p> </div> </div> <br class="separator" /> </div> <div id="lower"> <div id="low-manage" class=""> <div class="curved container"> <h3>Managing Tomcat</h3> <p>For security, access to the manager webapp is restricted. Users are defined in:</p> <pre>$CATALINA_HOME/conf/tomcat-users.xml</pre> <p>In Tomcat 8.5 access to the manager application is split between different users. Read more...</p> <br /> <h4>Release Notes</h4> <h4>Changelog</h4> <h4>Migration Guide</h4> <h4>Security Notices</h4> </div> </div> <div id="low-docs" class=""> <div class="curved container"> <h3>Documentation</h3> <h4>Tomcat 8.5 Documentation</h4> <h4>Tomcat 8.5 Configuration</h4> <h4>Tomcat Wiki</h4> <p>Find additional important configuration information in:</p> <pre>$CATALINA_HOME/RUNNING.txt</pre> <p>Developers may be interested in:</p> <ul> <li>Tomcat 8.5 Bug Database</li> <li>Tomcat 8.5 JavaDocs</li> <li>Tomcat 8.5 SVN Repository</li> </ul> </div> </div> <div id="low-help" class=""> <div class="curved container"> <h3>Getting Help</h3> <h4>FAQ and Mailing Lists</h4> <p>The following mailing lists are available:</p> <ul> <li id="list-announce"><strong>tomcat-announce<br /> Important announcements, releases, security vulnerability notifications. (Low volume).</strong> </li> <li>tomcat-users<br /> User support and discussion </li> <li>taglibs-user<br /> User support and discussion for Apache Taglibs </li> <li>tomcat-dev<br /> Development mailing list, including commit messages </li> </ul> </div> </div> <br class="separator" /> </div> <div id="footer" class="curved container"> <div class="col20"> <div class="container"> <h4>Other Downloads</h4> <ul> <li>Tomcat Connectors</li> <li>Tomcat Native</li> <li>Taglibs</li> <li>Deployer</li> </ul> </div> </div> <div class="col20"> <div class="container"> <h4>Other Documentation</h4> <ul> <li>Tomcat Connectors</li> <li>mod_jk Documentation</li> <li>Tomcat Native</li> <li>Deployer</li> </ul> </div> </div> <div class="col20"> <div class="container"> <h4>Get Involved</h4> <ul> <li>Overview</li> <li>SVN Repositories</li> <li>Mailing Lists</li> <li>Wiki</li> </ul> </div> </div> <div class="col20"> <div class="container"> <h4>Miscellaneous</h4> <ul> <li>Contact</li> <li>Legal</li> <li>Sponsorship</li> <li>Thanks</li> </ul> </div> </div> <div class="col20"> <div class="container"> <h4>Apache Software Foundation</h4> <ul> <li>Who We Are</li> <li>Heritage</li> <li>Apache Home</li> <li>Resources</li> </ul> </div> </div> <br class="separator" /> </div> <p class="copyright">Copyright ©1999-2017 Apache Software Foundation. All Rights Reserved</p> </div> </body> </html> Below is the error message i am getting in accessing the url from the internet explorer. This site can’t be reached <hostip> took too long to respond. Search Google for <hostip> 8181 ERR_CONNECTION_TIMED_OUT`enter code here` Could you please help me what went wrong here? Thanks in advance. Regards, Balakrishna K