I am new to node js and EJS template in it.I have a navbar in my navbar.ejs file with a drop-down toggle button in it.My problem is that the button does not work when clicked.Is this due to the EJS template or my code has gone wrong somewhere.Will script tag work inside ejs template file? Please help me out.
Assume that I have done the routing correctly and included all the files in the app.ejs file.
Thanks in advance :)
navbar.ejs
<nav class="navbar navbar-default navbar-static-top" style="width:100%;overflow:hidden;height:30px;background-color:#595959;font-size:17px;font-family:'Segoe UI',Arial,sans-serif">
<div class="container-fluid">
<ul class="nav navbar-nav" style="margin-left:-20px">
<li class="dropdown">
<button type="" class="dropbtn" onclick="myfunction()" >ALL <i class="fa fa-caret-down"></i> </button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</nav>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myfunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
</script>
style.css
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: #595959;
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
nav.navbar li.dropdown:hover div.dropdown-content {
display: block;
}
try with importing following before </body> tag
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
The navigation links are not working because currently their hrefs are dead links. Each links needs to have its href equal to the route it points to in the .js file. For example, in a normal situation, the home route always links to the '/' path, so if this is supposed to link to the home route, Link 1, then it becomes Link 1(or Home route) as I think it should. The same would apply for other routes. If link 2 was to link to a certain about route, then it should be Link 2( or about). I hope that makes sense.
Related
I have extracted following code from an already developed script. I need to change this text according to clicked item.
As an example if someone clicked Home button I need to change this div to some other text like you have clicked "Home" likewise. Simply I need the navigation in same page to different text portions.
This is providing what I need exactly without one function. I could see that following text portion is static for every time.
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
I hope this could be done using jQuery/JavaScript.
Thanks in advance!!
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Bring
Deliver
Package
Express
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
// This is classes that you need to add for it to work
<p class="paragraph">Hover over the "about", "services" or
"partners" link to see the sub navigation menu.</p>
<a class="home" href="#home">Home</a>
// And this is your javascript code
const home= document.querySelector('.home')
const paragraph=document.querySelector('.paragraph')
home.onclick=function(){
paragraph.innerHTML="You are now in a home page"
}
// Hope it helps!
I am trying to highlight the "current page" in my navigation menu (with drop-down menus).
The code below did the job when I had simple navigation links (built using the "< a >" HTML tag). I am now upgrading my navigation bar to hold drop-down menus (using "< button >" HTML tags).
I believe I need to take a similar approach and assign an active class to the "current" page but I can't work out how to loop through "< button >" objects in the same way I did for "< a >" objects
How can I dynamically highlight the current page in my navigation bar when using buttons ("< button >") in my navigation bar?
I found a related article on W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_active_element2 but it doesn't work for my use-case as I'm navigating between different URLs.
A simplified version of my code looks like this:
<div class="navigation">
Home
Page A
<div class="dropdown">
<button class="dropbtn" onclick="location.href='page_b.html'" type="button"> Page B</button>
<div class="dropdown-content">
Food
Exercise
Drinks
</div>
</div>
Page C
Page D
</div>
<!-- Highlight current page (works for <a> but not <button>)-->
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active');
$(this).parents('li').addClass('active');
}
});
});
</script>
Associated CSS:
...
.active {
background-color: blue;
}
...
.dropdown:not(.dropdown-content) {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
padding: 14px 16px;
margin: 0;
}
...
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #ffffff;
background-color: #000000;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content{
display: block;
z-index: 1;
}
You would need to add the class active to each page so the when the user is on the home page. your code would be like this.
<a class='active' href="index.html">Home</a>
For page A
<a class='active' href="page_a.html">Page A</a>
I have a dropdown menu, one of the options executes Ajax to show data in another Div.
I want to hide the dropdown menu (close it) when this option is clicked.
<div class="dropdown">
<a href="#" class="btn btn-floating" data-toggle="dropdown">
<i class="ti-more-alt"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" >
View Folder Details
Share Folder via Email
Rename Folder
Delete Folder
</div>
</div>
I have tried the below which I found online, but it doesn't seem to close the menu:
// hide the menu when an example is clicked
$(".dropdown-item").on("click", function(){
$(".dropdown-menu").hide();
});
$( document ).ready(function() {
debugger;
var ele=$(".dropdown-content");
$(".dropdown-content a").click(function(){
if(this.innerText=="Link 2"){
$(".dropdown-content").hide();
$(".dropbtn").hide();
}
});
});
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You hide a dropdown menu like this and if you want to show simply add show functionality.
Try this toggle method should work
<a href="#" onclick="handleClick()" class="btn btn-floating" data-toggle="dropdown">
how/hide menu
</a>
function handleClick(){
$(".dropdown-menu").toggle();
}
refer to this link for running example:
https://playcode.io/647558/
Just remove class 'show' from dropdown:
// hide the menu when an example is clicked
$(".dropdown-item").on("click", function(el){
$(el.target).parents(".dropdown").removeClass("show");
});
I have been struggling for the last several days with Modals for a project at work. The trigger is a link (with a glyphicon to let the user know it's a table) and I am trying to use data toggle on the link to open a modal containing a table. I can't figure out why it's not working.
The Trigger:
<a data-toggle="modal" href="#tableA">
<span id="tableA_icon" class="glyph-wrap">
<span class="glyphicon glyphicon-th-list"></span>
</span>Table A
</a>
The Modal:
<div class="modal fade" id="tableA" tabindex="-1" role="dialog" link:aria-labelledby="tableA" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Table A</h3>
</div>
<div class="modal-body">
Table code goes here (the table does display properly when using another method)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Print</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
(Yes, my supervisor wants the modal to be printable (which I know will be another long pain in the neck), but right now I'm just focused on trying to get the darned Modal to open. I think I'm missing CSS on the footer buttons but that shouldn't be preventing the modal from opening, right?)
The CSS:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #333;
margin: auto;
padding: 0;
border: 1px solid #EEE;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
/*Modal Header*/
.modal-header {
padding: 2px 16px;
background-color: #EEE;
color: white;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Modal Body */
.Modal-body {padding: 2px 16px;}
/* Modal Footer */
.Modal-footer {
padding: 2px 16px;
background-color: #EEE;
color: white;
}
/*The Footer Print Button*/
.print-btn{
color: #aaa;
/*float: right;*/
display: inline-block;
font-size: 28px;
font-weight: bold;
}
.print-btn:hover,
.print-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* The Footer Close Button */
.close-btn {
color: #aaa;
/*float: right;*/
display: inline;
font-size: 28px;
font-weight: bold;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
What am I doing wrong?
Use this for a tag and include all css in header and js in footer It works..!
Your mistake seems to be that you're not including Bootstrap in your code. When you do include it, it appears to work fine:
https://jsfiddle.net/9ugo7cvw/1/
To include it, as per the Bootstrap docs add this to your HTML:
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I think the mistake you're making is assuming that data-toggle as an attribute actually has a function. This is not the case as data-toggle, as far as I'm aware, is not part of HTML5 and is something that is added by Bootstrap. Without Bootstrap installed, data-toggle="modal" is simply a key-value pair where data-toggle is the key and modal is the value.
In case you're not too familiar with JSFiddle, Bootstrap and its dependencies are imported in the Resources tab on the left side of the page.
Without viewing your JS code there's not really much for me to go off of. But if you just want your modal to display, you should give your span an id attribute or something to identify it. I moved your text "Table A" inside of the span tag instead of outside of it and gave it an id attribute. Then I added JavaScript to open the modal upon clicking the text. This is just one way to get your modal only to display.
JSfiddle: https://jsfiddle.net/5gx62bjw/2/
Another way is that you need to included the correct script tags in order for your modal to function correctly:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
https://jsfiddle.net/5gx62bjw/3/
Hopefully this helps you get on the right track
I want to switch from section 1 to section 2 of the page, when using the mouse to hover the buttons in the navigation bar without clicking them.
How should I do so?
and here is the code in below:
CSS:
.container {
overflow: hidden;
background-color: #FFFFFF;
font-family: Arial;
top:0;
left:0;padding: 5px;
}
.container a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.pull-right {
float: right;
}
#topNav {
margin-bottom:0;box-shadow: none;background:none;
}
body {
position: relative;
}
#section1 {padding-top:120px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:120px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:120px;height:500px;color: #000000; background-color: #FFD2E9;}
#section4 {padding-top:120px;height:500px;color: #fff; background-color: #00bcd4;}
HTML:
<div class="navbar navbar-inverse navbar-static-top" id="topNav">
<div class="container">
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
Toehold Switch
Interlab
Charaterization
Program
</ul>
</div>
You cannot do it with CSS alone. You are suppose to use scripts. Take a look on the [fiddler][1] for your reference.
[1]: https://jsfiddle.net/rajsnd08/c9xonwdL/1/
Hope it helps.
you can use jQuery
FIRST: define an id for the 'navbar item' which you want to hover.
for example add id: "item1" for the "Toehold switch" element in your navbar:
Toehold Switch
SECOND: append the jQuery library to your project:
one way, is to add its link to the html header :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
THIRD: add this javascript script code to your html:
<script>
$("#item1").hover(function () {
var hash = $("#item1").attr("href");
var scroll = $(hash.toString()).offset().top;
event.preventDefault();
$('body,html').animate(
{scrollTop: (scroll)},
1000,
function () {
window.location.hash = hash;
}
);
});
</script>
TIP 1: by using the script, if you hover the "toehold" link on the navbar, it will scroll to the section which you were linked to (i.e. 'section 1')
TIP 2: you can also change the speed of scrolling in the animate() function in the script tag: just change '1000' to whatever you want. (that is 1000 ms i.e. 1 second)!