I'm currently making a quick throw together website with e.js & Express.
However, upon learning to use tags I'm having some issues with using an if-else statement within e.js tags.
I'm my if statement works just fine, however when I add an else statement is when problems arise.
(Just FYI this code takes place within a partial)
Full file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="images/CaffLogWhite.png">
</head>
<header>
<nav>
<div class="nav-wrapper">
<a href="/">
<img class="nav-logo" src="images/CaffLogBlack.png" alt="CaffeinatedLogo" style="width:95px;height:95px;">
<t style="font-size: 36px">
<b>Caffeinated</b>
</t>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Terms of Service</li>
<li>FAQ</li>
<% if (user) { %>
<a href="/auth">
<button class="btn">
<span>Login with Discord</span>
</button>
</a>
<% } %>
<% else { %>
<% } %>
</ul>
</div>
<hr>
</nav>
</header>
<style>
nav t {
float: left;
position: relative;
color: #323232;
font-family: 'Quicksand', sans-serif;
margin-top: 20px;
font-family: 'Oleo Script Swash Caps', cursive;
}
nav {
position: fixed;
width: 100%;
text-decoration: none;
display: inline-block;
font-size: 28px;
}
nav ul {
display: table;
margin: 0 auto;
width: 60%;
text-decoration: none;
list-style-type: none;
color: #323232;
overflow: auto;
height: 20px;
}
nav ul li a {
text-decoration: none;
font-family: 'Quicksand', sans-serif;
}
.nav-logo {
float: left;
}
nav ul li {
color: #323232;
display: inline-block;
margin-right: 40px;
margin-top: 28px;
list-style-type: none;
font-size: 24px;
}
nav ul button {
display: inline-block;
float: right;
background: #7289DA;
color: white;
text-decoration: none;
list-style-type: none;
font-family: 'Quicksand', sans-serif;
font-size: 18px;
width:103px;
height:57px;
border-radius: 8px;
margin-right: -142px;
}
nav ul button:hover {
background: #3857c7;
}
</style>
</html>
The full error I get is the following:
E:\dev\CaffeinatedWebsite\views\profile.ejs:10 8| </title> 9| <link rel='stylesheet' href='/stylesheets/style.css' /> >> 10| <%- include('./partials/header.ejs', { user } ) %> 11| </head> 12| 13| <div class="welcome-message-caff"> Unexpected token 'else' in E:\dev\CaffeinatedWebsite\views\partials\header.ejs while compiling ejs If the above error is not helpful, you may want to try EJS-Lint: https://github.com/RyanZim/EJS-Lint Or, if you meant to create an async function, pass async: true as an option.
If anybody could provide me any clarity on how to fix this issue, that would be great!
Thanks in advance.
This should work for you. The ending "if" bracket and the "else" statement should be on the same line.
<div class="nav-wrapper">
<a href="/">
<img class="nav-logo" src="images/CaffLogBlack.png" alt="CaffeinatedLogo" style="width:95px;height:95px;">
<t style="font-size: 36px">
<b>Caffeinated</b>
</t>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Terms of Service</li>
<li>FAQ</li>
<% if (user) { %>
<a href="/auth">
<button class="btn">
<span>Login with Discord</span>
</button>
</a>
<% }else{ %>
<% } %>
</ul>
</div>
Related
I need some help, I'm currently trying to make a portfolio using HTML following a tutorial I'm watching.
I used undraw to add an image but unfortunately, the image is stuck to the right:
I want to put the image underneath my icons but not sure on how to do to this. Any advice on how to get the SVG image in the centre underneath my icons?
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
*{
color:black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,span{
color:black;
text-align: center;
line-height: 1.25;
}
h1{
font-size: 36px;
}
p{
line-height: 1.5;
font-size: 16px;
}
li{
list-style-type: none;
}
.flex{
display: flex; /* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1{
flex: 1; /* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row{
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink{
color: #FF69B4 ;
}
nav{
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list{
display: flex;
}
.nav__link--anchor{
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary{
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover{
background-color: #FF69B4;
}
.personal_logo{
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me{
min-height: 100vh; /* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info{
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column; /* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask{
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0,0,0,1);
margin-bottom: 20px;
}
.about-me__picture{
width: 100%;
transform: scale(1,1.1);
padding-top: 7px;
}
.about-me__info--para{
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title{
margin-bottom: 15px;
}
.about-me__link{
font-size: 20px;
color:#FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container{
flex: 1;
display: flex;
align-items: center;
}
<!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.0">
<title>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black"
>Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class=
"nav__link--anchor
nav__link--anchor-primary"
>Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row"> <!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me!">
</figure> <!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe š </span> </h1>
<h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that Iām interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links"></div>
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
<figure class="about-me__img--container">
<img src="./Assests/undraw_proud_coder_re_exuy.svg" alt="">
</figure>
</div>
</section>
</body>
</html>
Just need a little to fix the mark up. And to put the image in its own div, below the flex stuff.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
* {
color: black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
span {
color: black;
text-align: center;
line-height: 1.25;
}
h1 {
font-size: 36px;
}
p {
line-height: 1.5;
font-size: 16px;
}
li {
list-style-type: none;
}
.flex {
display: flex;
/* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1 {
flex: 1;
/* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink {
color: #FF69B4;
}
nav {
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list {
display: flex;
}
.nav__link--anchor {
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary {
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover {
background-color: #FF69B4;
}
.personal_logo {
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me {
min-height: 100vh;
/* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info {
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column;
/* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask {
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
.about-me__picture {
width: 100%;
transform: scale(1, 1.1);
padding-top: 7px;
}
.about-me__info--para {
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title {
margin-bottom: 15px;
}
.about-me__link {
font-size: 20px;
color: #FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
}
<!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.0">
<title>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class="nav__link--anchor
nav__link--anchor-primary">Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row">
<!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
</figure>
<!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe š </span> </h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
and designing projects on topics that Iām interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links">
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
</div>
</div>
<div>
<figure class="about-me__img--container" >
<img src="https://picsum.photos/200" alt="" style="margin: auto">
</figure>
</div>
</section>
</body>
</html>
Building my first website and cant open en close the menu using javascript ( first time javascript so be gentle ). This is my code in the following order. HTML/CSS/Java.I know that i have to point to id instead of class in CSS, i thought i did it right but can't get it working`.
So this is my HTML code i use visual studio code.
<!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.0">
<title>Project R-K</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" herf=#> R&K<span>Productions</span></a>
<img id="mobile-open" class="mobile-menu" src="images/icons8-menu.svg" alt="open navigation">
<nav>
<img id="mobile-close" class="mobile-menu-exit" src="images/icons8-delete.svg" alt="Close navigation">
<ul class="primary-nav">
<li class="current">Home</li>
<li> About us</li>
<li> Sign up</li>
</ul>
<ul class="secundary-nav">
<li> Buy R&K dollars</li>
<li class= "Make-account"> Make account</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Funny & making you money!</p>
<h1>A gamer website, by gamers for gamers</h1>
<div class="hero-cta">
Try for free
<a href="#" class="video-action">
<img src="images/icons8-binoculars.svg" alt="Watch a gamer">Watch a gamer
</a>
</div>
</section>
<img src="images/PSImage.jpg" class="hero-image" alt="Ps-image">
</div>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Awesome community</li>
<li>Maximale adrenaline</li>
<li>Easy to use</li>
<li>All possible games</li>
<img class="oldskool" src="images/Oldskool.jpg" alt="arcade">
</ul>
</div>
</section>
<section class="explanation-in-short">
<div class="container">
We are Richard and Kick and we are gamers since the early stages of our lifes and very dear friends so we have created something that has been missing in the gamer community.
This is a website where you can subscribe and make money playing your favorite game! Try it and find out just how awesome we are!
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="send message">
</form>
</div>
</div>
</section>
</div>
</section>
</div>
</script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;500&display=swap');
:root{
--primary-color: rgb(252, 8, 142);
}
body {
background: rgb(245, 243, 243);
margin: 0;
font-family: 'poppins';
}
.navbar {
background:rgb(245, 243, 243);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--primary-color);
font-size: 1.2em;
}
span {
color: black;
}
nav {
display: none;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu {
cursor: crosshair;
}
}
a {
color: rgb(83, 83, 83);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero {
text-align: center;
}
.left-col{
.subhead {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
}
h1 {
font-size: 2.5em;
line-height: 1.5em;
margin-top: .2em;
}
.primairy-action {
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
cursor: crosshair;
}
.video-action {
display: block;
margin-top: 1em;
img{
margin-right: .5em;
}
}
}
.hero-image{
width: 50%;
height: 50%;
margin-top: .5em;
margin-left: 7em;
}
.features-section {
background: rgb(83, 83, 83);
color: white;
}
.feature-list {
margin: 0;
padding-left: .1em;
display: grid;
li {
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before {
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../Images/icons8-checked.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.oldskool{
display: none;
}
.explanation-in-short{
background: var(--primary-color);
text-align: center;
color: white;
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border: 1px solid gray;
box-sizing: border-box;
}
.send-message-cta {
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 2em;
width: unset;
cursor: crosshair;
}
nav{
position: fixed;
z-index: 999;
width: 50%;
right: 0;
top: 0;
background:rgb(83, 83, 83) ;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li {
a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
color: var(--primary-color)
}
}
}
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: crosshair;
}
<script>
const mobileBtn = document.getElementById('mobile-open')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () =>
{nav.classList.add('mobile-open')
});
</script>
You can do it with CSS :focus-within pseudo class. If you want to do it with JS, first of all you should write the true semantic. In your markup, the menu which you want to open should be written equilavent as your button and you can set this menu's opacity to 0, visibility hidden and display none, then you have to listen for click events coming from your buttons, when the click event fires, you should determine which button was clicked then you can select the menu which you want to open, and make it visible. I still advise to use :focus-within.
I'm making a very basic page with header, small navigation with the last option as a drop-down menu, and a bootstrap carousel plug-in. Since I added the carousel the dropdown menu doesn't work.
I'm relatively new to coding and learning by making this page. The dropdown menu should come from the 'collections' link with 2 other options.
The code for the carousel was edited from w3school.com and I have tried changing the margins so it doesn't overlap with my drop-down but no luck. Wondering if there is a problem with the jquery links I am using or if I have missed something from the code? I've taken some bits out below so there's not too much sorting through things that I didn't think were relevant (.main, .active, .drop-down container etc) but if I need to re-include them on here please let me know.
Any help would be very much appreciated! Many thanks.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<style>
#header {
text-align: left;
color: #294ccf;
position: absolute;
width: 300px;
height: 100px;
padding-left: 20px;}
h1 {
color: #294ccf;
font-family: arial;
font-weight: bold;
position:fixed;
font-size: 18pt;
text-decoration: none;
text-align: left}
.sidenav {
height: 100%;
width: 200px;
position: fixed;
top: 0;
left: 0;
background-color: ;
overflow-x: hidden;
padding-top: 0px;
margin-top: 90px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
color: #294CCF;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 12pt;
text-align: left;
text-decoration: none;}
.sidenav a, .dropdown-btn {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 12pt;
color: #294CCF;
display: block;
border: none;
background: none;
width: 100%;
cursor: pointer;
outline: none;
position: relative;
font-style: normal;
font-weight: bold;
text-align: left;
line-height: normal;}
.fa-caret-down {
float: right;
padding-right: 8px;
color: #294CCF; }
.carousel {margin-left 100px;
margin-top:180px;}
.carousel-control.left, .carousel-control.right {
background-image: none}
</style>
<div id="header">
<h1>Robyn Smith<br>Jewellery + objects</h1>
</div>
<div class="sidenav">
Bio
Portfolio
<button class="dropdown-btn">Collections
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Sports Day
Putin
</div></div>
<div class="container">
<div id="myCarousel" class="carousel" >
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/sportsday1.jpg" alt="Badges" style="width:100%;">
</div>
<div class="item">
<img src="img/sportsday2.jpg" alt="Bag" style="width:100%;">
</div>
<div class="item">
<img src="img/sportsday3.jpg" alt="Neckpiece" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon" ></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon" ></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
//* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>
</body>
The script in your body has a comment which is opened incorrectly. Comments in javascript can be:
Single line: // This is a single line comment
Multi line: /* This is a multi line comment */
Your code has the following line which breaks the application:
//* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
The compiler now only recognises this as a single line comment because of the // at the start, thus the rest of the code won't work anymore. The compiler now tries to interpret the lines such as "dropdown content - ..." as javascript, which is isn't. Remove the first slash to make it a multi line comment and your code should be fixed!
Firstly let's correct your css code basic syntax errors:
Head: Href for bootstrap.min.css can't be put into 2 lines. It must be kept on one line.
Body: line-height: normal, "sans-serif";
.sidenav: background-color: ; empty
.sidenav a:hover...: empty rulesets
.carousel: margin-left: 100px;
Your javascript is not commented correctly. Either use
Single line comments // This is comments
Multi line /* This is a comment */
There were multiple minor bugs. Scripts order were wrong. Bootrstrap requires jQuery, so it has to be put before. You also added some spaces to the Bootstrap CSS link, which broke it. It was:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
Fixed to:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
The comment was meant for one line, so it threw an error as well.
It was:
//* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
Fixed to:
/* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
Also removed some CSS lines that were not finished, just to keep you noticed.
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<style>
#header {
text-align: left;
color: #294ccf;
position: absolute;
width: 300px;
height: 100px;
padding-left: 20px;
}
h1 {
color: #294ccf;
font-family: arial;
font-weight: bold;
position: fixed;
font-size: 18pt;
text-decoration: none;
text-align: left
}
.sidenav {
height: 100%;
width: 200px;
position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
padding-top: 0px;
margin-top: 90px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
color: #294CCF;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 12pt;
text-align: left;
text-decoration: none;
}
.sidenav a, .dropdown-btn {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 12pt;
color: #294CCF;
display: block;
border: none;
background: none;
width: 100%;
cursor: pointer;
outline: none;
position: relative;
font-style: normal;
font-weight: bold;
text-align: left;
line-height: normal;
}
.fa-caret-down {
float: right;
padding-right: 8px;
color: #294CCF;
}
.carousel {
margin-left: 100px;
margin-top: 180px;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
</style>
<div id="header">
<h1>Robyn Smith<br>Jewellery + objects</h1>
</div>
<div class="sidenav">
Bio
Portfolio
<button class="dropdown-btn">Collections
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Sports Day
Putin
</div>
</div>
<div class="container">
<div id="myCarousel" class="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/sportsday1.jpg" alt="Badges" style="width:100%;">
</div>
<div class="item">
<img src="img/sportsday2.jpg" alt="Bag" style="width:100%;">
</div>
<div class="item">
<img src="img/sportsday3.jpg" alt="Neckpiece" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function () {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>
</body>
I have a java script code for a top navigation bar. The code only works if I am at the root (home) of the website. For example if you click on the plus icon on the top right corner you are taken to another page and then the menu stops working. I am not good at JS right now and I cannot figure out why. I have guessed this could be due to the fact some of the elements are not loaded when the url is different, but I cannot fix it. I am going to post the CSS and html code to see where SCRIPTS are placed. One fact about the Script that is inside the body of the html file is that I cannot move it to outside body since the menu stops working again. I I think the cause is the same thing, but I cannot fix it.
Please give me an edited code since in another question people gave me ideas, while I tried all of them and none worked. This is just to make sure that any answer is a working answer and it is not just a hunch. Thanks!
Here is a link for the deployed website you can use for your trial and error:
http://ejeddi.pythonanywhere.com/
js:
var cbpHorizontalMenu =(function() {
var b = $("#cbp-hrmenu > ul > li"),
g = b.children("a"),
c = $("body"),
d = -1;
function f() {
g.on('click', a);
b.on('click', function(h) {
h.stopPropagation()
})
}
function a(j) {
if (d !== -1) {
b.eq(d).removeClass("cbp-hropen")
}
var i = $(j.currentTarget).parent("li"),
h = i.index();
if (d === h) {
i.removeClass("cbp-hropen");
d = -1
} else {
i.addClass("cbp-hropen");
$("cbp-hropen");
d = h;
c.off('click').on('click', e)
}
return false
}
function e(h) {
b.eq(d).removeClass("cbp-hropen");
d = -1
}
return {
init: f
}
})();
Base html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}BPM App{% endblock title %}
</title>
{% block stylesheets %}
<link type="text/javascript" href="{% static 'bpmapp/js/topnavbar.js' %}">
<link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/favicon.ico"/>
{% endblock %}
{% block javascript %}
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>
{% endblock javascript %}
{% block extra_head %}{% endblock %}
</head>
<body>
<header class="navbar topnavbar">
{% include 'bpmapp/_topnavbar.html' %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
<script type='text/javascript' src="static/bpmapp/js/cbpHorizontalMenu.min.js"></script>
</body>
</html>
topnavbar html
{% load static %}
{% load staticfiles %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'bpmapp/css/topnav-default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'bpmapp/css/topnav-component.css' %}">
<!-- used for icons in navbar -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="container">
<header class="clearfix">
<!--<span>Tagline</span>-->
<i class="fa fa-home fa-2x" id="icon-home"> </i>
<nav>
<i class="fa fa-plus fa-2x" id="icon-new-process" data-info="New Process"></i>
<!--
Previous Blueprint
back to the Codrops article
-->
</nav>
</header>
<div class="nav-main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
Products
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Downloads
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Education & Learning</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Holy Cannoli</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Applications
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
</ul>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai</li>
<li>Math Genius</li>
<li>Chemokid</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0</li>
<li>Moneymaker</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Projects
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet</li>
<li>Snoopydoo</li>
<li>Fallen Angel</li>
<li>Sui Maker</li>
<li>Wave Master</li>
<li>Golf Pro</li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li>Gadget Finder</li>
<li>Green Tree Express</li>
<li>Green Tree Pro</li>
<li>Holy Cannoli</li>
<li>Wobbler 3.0</li>
<li>Coolkid</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
topnavbar default CSS:
/* General Demo Style */
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
#font-face {
font-family: 'fontawesome';
src:url('../fonts/fontawesome.eot');
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
url('../fonts/fontawesome.woff') format('woff'),
url('../fonts/fontawesome.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body, html { font-size: 100%; padding: 0; margin: 0;}
/* Reset */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {
color: #f0f0f0;
text-decoration: none;
}
a:hover {
color: yellow;
transform: scale(1.2);
}
.container{
padding-top:0px;
}
.container > header {
width: 90%;
max-width: 70em;
margin: 0 auto; /* remove auto to push the h1 text to left*/
padding: 0 0.5em 0.5em 0.5em;
}
/* Brand Name Text */
.container > header h1 {
font-size: 1.5em;
line-height: 1.3;
margin: 0;
float: left;
font-weight: 400;
margin-top:0;
}
.container > header span {
display: block;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
padding: 0 0 0.1em 0.1em;
}
.container > header nav {
float: right;
text-align:bottom;
padding-top:0.1em;
}
/* next previous icons*/
/*
.container > header nav a {
display: block;
float: left;
position: relative;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
color: transparent;
margin: 0 0.5em;
border: 4px solid #47a3da;
text-indent: -8000px;
}
*/
/* after click next previous icons*/
.container > header nav a:after {
content: attr(data-info);
color: #47a3da;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
opacity: 0;
pointer-events: none;
}
.container > header nav a:hover:after {
opacity: 1;
}
/* hover next previous icons*/
/*
.container > header nav a:hover {
background: #47a3da;
}
*/
.icon-drop:before,
.icon-arrow-left:before {
font-family: 'fontawesome';
position: absolute;
top: 0;
width: 100%;
height: 100%;
speak: none;
font-style: normal;
font-weight: normal;
line-height: 2;
text-align: center;
color: #47a3da;
-webkit-font-smoothing: antialiased;
text-indent: 8000px;
padding-left: 8px;
}
.container > header nav a:hover:before {
color: #fff;
}
.icon-drop:before {
content: "\e000";
}
.icon-arrow-left:before {
content: "\f060";
}
.fa{
color:#999;
transition: all .2s ease-in-out;
}
.fa:hover{
color: #47a3da;
/*color:rgb(20,220,180); ----- green ----- */
transform: scale(1.2);
}
topnavbar component CSS:
/* menu separator */
.cbp-hrmenu {
width: 100%;
margin-top: 0em;
border-bottom: 4px solid #47a3da;
}
/* general ul (div of tabs) */
.cbp-hrmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* first level ul style (div of tabs)*/
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 90%;
max-width: 70em;
margin: 0 auto; /*remove auto to push tabs to left*/
padding: 0 1.875em;
}
/* tabs individually + the menu that drops*/
.cbp-hrmenu > ul > li {
display: inline-block;
}
/* link (text) of tabs */
.cbp-hrmenu > ul > li > a {
font-size:1.1em;
font-weight: 700;
padding: 0.1em 1em; /* height of tabs*/
color: #999;
display: inline-block;
border-radius:0.5em 0.5em 0em 0em;
transition: all .2s ease-in-out;
}
/* hover tabs' text */
.cbp-hrmenu > ul > li > a:hover {
/*color: #47a3da;
transition: color 0.2s linear;*/
color:#47a3da;
transform: scale(1.2);
}
/* links inside the drop down menu */
.cbp-hrmenu > ul > li.cbp-hropen > a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
color: white;
background: #47a3da;
}
/* sub-menu (the one that drops and contains options)*/
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
.cbp-hropen .cbp-hrsub {
display: block;
padding-bottom: 3em;
}
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 33%;
float: left;
padding: 0 2em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
content: " ";
display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after {
clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner > div a {
line-height: 2em;
transition: all .2s ease-in-out;
}
.cbp-hrmenu .cbp-hrsub-inner > div a:hover {
font-weight:bold;
color:yellow;
}
.cbp-hrsub h4 {
color: #afdefa;
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
}
/* Examples for media queries */
#media screen and (max-width: 52.75em) {
.cbp-hrmenu {
font-size: 80%;
}
}
#media screen and (max-width: 43em) {
.cbp-hrmenu {
font-size: 120%;
border: none;
}
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 100%;
padding: 0;
}
.cbp-hrmenu .cbp-hrsub-inner {
padding: 0 2em;
font-size: 75%;
}
.cbp-hrmenu > ul > li {
display: block;
border-bottom: 4px solid #47a3da;
}
.cbp-hrmenu > ul > li > a {
display: block;
padding: 1em 3em;
}
.cbp-hrmenu .cbp-hrsub {
position: relative;
}
.cbp-hrsub h4 {
padding-top: 0.6em;
}
}
#media screen and (max-width: 36em) {
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 100%;
float: none;
padding: 0 2em;
}
}
This is the main problem in your code that I can see:
you are using static files, so they are located in the url: http://yourdomain.com/static, but you are trying to load http://yourdomain.com/process_new/static/
you can fix it by 2 ways:
The first way is changing the src attribute in the script tag and adding a "/" at the beginning. It will get the js file from the root:
<script type='text/javascript' src="/static/bpmapp/js/cbpHorizontalMenu.min.js"></script>
Another way to fix it is using the Django static template tag. It will create the url of the static file for you:
<script type='text/javascript' src="{% static 'bpmapp/js/cbpHorizontalMenu.min.js' %}"></script>
Don't forget to add this tag at the beginning of the template file:
{% load staticfiles %}
So, I can run this on Firefox and it works just fine. But when running this on Chrome, I'm getting a loading icon which keeps just 'loading'.
Like this: http://prntscr.com/8erab4
On Firefox the result is just great, example: http://weveloped.com/app
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>HorizonApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="custom.css" />
</head>
<body>
<!--Welcoming Page-->
<div data-role="page" id="homepage">
<div data-role="header" class="header">
<i class="fa fa-bars left"></i>
<h1>Horizon GPD</h1>
<i class="fa fa-home right"></i>
</div>
<div data-role="main" class="ui-content">
<div data-role="panel" data-position="left" data-display="overlay" id="panel">
<div class="sideMenu">
<ul>
<li class="navTitle">Tijden</li>
<li>van 09:00 tot 11:00</li>
<li>van 11:30 tot 13:00</li>
<li>van 13:30 tot 15:00</li>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
CSS CODE:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
body {
font-family: 'Open Sans', sans serif;
}
/* Header */
.header {
height: 40px;
border: none;
}
.ui-page .ui-header {
background-color: #013378;
color: #FFF;
text-shadow: none;
}
.header a i {
font-size: 24px;
color: #FC7C00;
margin-top: 5px;
}
.header a i.left {
margin-left: 5px;
}
.header a i.right {
margin-right: 5px;
}
.header a:hover > i {
color: #FFF;
}
/* Side Menu */
.sideMenu, .sideMenu ul {
padding: 0; margin: 0;
text-shadow: none;
}
.sideMenu ul {
list-style-type: none;
position: relative;
}
.sideMenu ul li.navTitle {
height: 40px; line-height: 40px;
background-color: #FC7C00;
color: #FFF;
font-weight:700;
text-align: center;
}
.sideMenu ul li {
display: block;
}
.sideMenu ul li a {
height: 40px; line-height: 40px;
padding-left: 10px;
color: #222;
text-decoration: none;
display: block;
}
.sideMenu ul li a:hover {
color: #FFF;
background-color: rgba(1, 51, 120, 0.8);
}
.ui-panel-inner {
padding: 0; margin: 0;
}
Install WampServer on your computer, copy the folder of your project in c:\wamp\www\ , turn on the local server and run your jQuery Mobile page (localhost/folder-of-your-project/jquery-mobile-page).
You need a local server to run any jquery mobile page in Chrome
Regards