<!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">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/full-slider.css" rel="stylesheet">
<link href="css/welcome.css" rel="stylesheet">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>VMS</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Visitor Mangement System</a>
</div>
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="{{URL::to('logout')}}">
<span style="color:white"></span>
<span class="glyphicon glyphicon-log-in"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Register</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Visitor<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register and Check In</li>
<li>Booked Check In</li>
<li>Check In</li>
<li>Check Out</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Employee<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Check In</li>
<li>Check Out</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Administrator<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Check In</li>
<li>Check Out</li>
</ul>
</li>
</ul>
</ul>
#endif
</div>
</nav>
<header id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('images/img1.jpg');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('images/img2.jpg');"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 3000 //changes the speed
})
</script>
</body>
i have a navigation bar and below goes a carousel.There is a dropdown in the navigation bar buttons.But the drop down in navbar is behind the carousel image.I want the dropdown over the carousel.Any Help is most welcome.
try,
.dropdown-menu{
z-index: 123;
}
give z-index value higher than the carousel.
Set a z-index for the two elements
.navbar {
position: relative;
z-index: 100;
}
.carousel {
position: relative;
z-index: 50;
}
A higher z-index will rise above the other.
Related
I'm not able to hide the navbar after the link is clicked. I'm using bootstrap 3. I have added the script that should work. I'm not able to find the error. Can someone go through this code. Please
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide');
});
<script src="https://cdnjs.cloudflare.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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#"><img src="images/logo-inv.png" width="30" height="30" alt=""></a>
</li>
<li><a class="navbar-brand" href="#" onMouseOver="this.style.color='#fff'">पBrand</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a></li>
<li><span class="glyphicon glyphicon-pawn"></span> Awards</li>
<li><a href="#"><span class="glyphicon glyphicon-paste"></span>
Documents</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
According to docs you have to put collapse in class
.collapse hides content
.collapsing is applied during transitions
.collapse.in shows content
But this is not enough.
I'm not able to hide the navbar after the link is clicked.
Would you like to hide the whole navbar or the menu section which appears on small screen sizes?
If you want the first one you have to put classes in nav tag and use different query in jquery
Example
$(function() {
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide'); // hides menu on lower screens
//$(".navbar").collapse('hide'); // hides the whole navbar
});
})
html,
body {
height: 100%;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
<div class="container">
<nav class="collapse in navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#"><img src="images/logo-inv.png" width="30" height="30" alt=""></a>
</li>
<li><a class="navbar-brand" href="#" onMouseOver="this.style.color='#fff'">पBrand</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse in navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a></li>
<li><span class="glyphicon glyphicon-pawn"></span> Awards</li>
<li><a href="#"><span class="glyphicon glyphicon-paste"></span>
Documents</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
Did you try Something like this :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a>
</li>
<li class="nav-link" class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-pawn"></span> Awards</a>
</li>
</ul>
</div>
</nav>
<br>
</body>
</html>
Use this in js
$(function () {
$(".navbar-collapse ul li a").click(function() {
$(".navbar-collapse").collapse('hide');
});
$(".navbar-collapse ul li a").click(function (event) {
$(event.target).focus();
});
});
I have html code working with bootstrap 4. In my case when navbar toggle button clicked the navbar open and hidden automatically. How to manually open and hidden navbar when clicked? Thanks anyone.
<title>SuperEvent</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<img src="img/iklan.JPG" class="iklan float-right">
</div>
</div>
<div class="cleafix"></div>
<nav class="navbar navbar-expand-lg " id="nav" >
<a class="navbar-brand" href="#">Super Event</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-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</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
This can help:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<br>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</body>
</html>
For more details follow by link - https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
If you want to use Bootstrap 5, include just this in your HTML file:
<script src="js/bootstrap.js"></script>
Implementation example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark">
<div class="container-fluid">
<!--LOGO IMAGE-->
<a class="navbar-brand" href="#">
<img src="images/img_avatar1.png" alt="Avatar Logo" style="width:50px;" class=" rounded-pill">
</a>
<a class="navbar-brand" href="#"><span style="font-size: 30px;">Alex Luca</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-expanded="false" aria-controls="collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!--Using justify-content-end, you can align the links at the right-->
<div class="collapse navbar-collapse justify-content-end text-center" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown px-3">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-3">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
<!--For the dropdown menu and collapsed meniu-->
<script src="js/bootstrap.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I have some dropdowns that contain multiple elements that I would like to collapse if open when any other menu item is clicked. Here is what I have so far:
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Master CSS -->
<link rel="stylesheet" href="master.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
<ul class="list-unstyled nav components">
<li class="active"><i class="glyphicon glyphicon-home"></i>Home</li>
<li>
<i class="glyphicon glyphicon-briefcase"></i>About
<ul class="collapse list-unstyled" id="aboutSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-duplicate"></i>Pages
<ul class="collapse list-unstyled" id="pagesSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-link"></i> Portfolio</li>
<li><i class="glyphicon glyphicon-send"></i>Contact</li>
</ul>
</nav>
<!-- end sidebar -->
</body>
As you can see when you click on 'About' or 'Pages' their dropdown opens, however they do not close unless you click on the specific heading again. I would like any open dropdown to close, unless you click on the dropdowns heading, in which case all dropdowns will close and then the correct dropdown shall open.
Here you go with a solution
$('a').click(function(){
if(!$(this).next('ul').hasClass('in')) {
$('.collapse').each(function(){
$(this).removeClass('in');
});
}
});
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
<ul class="list-unstyled nav components">
<li class="active"><i class="glyphicon glyphicon-home"></i>Home</li>
<li>
<i class="glyphicon glyphicon-briefcase"></i>About
<ul class="collapse list-unstyled" id="aboutSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-duplicate"></i>Pages
<ul class="collapse list-unstyled" id="pagesSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-link"></i> Portfolio</li>
<li><i class="glyphicon glyphicon-send"></i>Contact</li>
</ul>
</nav>
Hope this will help you.
I am implementing Bootstrap navbar but it's not displaying fine and displaying an error on my console saying
I tried to change the orders of my script sin head section but didn't get rid of this problem.
Anyone help me in finding out my mistake?
Code
<head>
<meta charset="UTF-8">
<title></title>
<!-- Ajax Library 1.11.3 -->
<script src="assets/js/ajax_1.11.3.js"></script>
<!-- Tether for Bootstrap -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<!-- Including js file for Animations Effects-->
<script type="text/javascript" src="assets/js/jquery_2.1.3_animation.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui_1.11.3.js"></script>
<!--Including both these files from Html_respond master-->
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<!-- Including js file for Fonts-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- Including Files for Bootstrap Form Validations -->
<script src="assets/js/form_Validation.js"></script>
<script src="assets/js/formvalidation_bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button-collapse').sideNav();
}); // end of document ready
</script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<!--Collapse button-->
<i class="fa fa-bars white-text"></i>
<!--Content for large and medium screens-->
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#">Navbar</a>
<!--Links-->
<ul class="nav navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<!--Search form-->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!-- Content for mobile devices-->
<div class="navbar-mobile">
<ul class="side-nav" id="mobile-menu">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar-->
</body>
Double Navigation Menu Demo (SideNav slide-out button)
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
body {
background: url("http://mdbootstrap.com/images/regular/nature/img%20(23).jpg") no-repeat center center fixed;
background-size: cover;
}
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet">
<!-- SideNav slide-out button -->
<i class="material-icons">menu</i>
<!--/. SideNav slide-out button -->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script>
<!-- Material Design Bootstrap -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav admin-side-nav dark-side-nav">
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-money"></i> Sales</li>
<li><i class="fa fa-line-chart"></i> Conversion</li>
<li><i class="fa fa-users"></i> Website Traffic</li>
<li><i class="fa fa-search"></i> SEO</li>
<li><i class="fa fa-share-alt"></i> Social</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
<!--Navbar-->
<nav class="double-navbar navbar navbar-fixed-top unique-color z-depth-1" role="navigation">
<div class="container-fluid">
<div class="navbar-header pull-left">
<!-- SideNav slide-out button -->
<i class="fa fa-bars"></i>
<!--/. SideNav slide-out button -->
</div>
<!-- Navbar Icons -->
<ul class="list-inline pull-right text-center">
<li><i class="fa fa-question"></i><br><span>Help</span></li>
<li><i class="fa fa-cogs"></i><br><span>Settings</span></li>
<li><i class="fa fa-sign-out"></i><br><span>Logout</span></li>
</ul>
<!--/. Navbar Icons -->
</div>
</nav>
<!--/.Navbar-->
<div class="container">
<div class="space-50" style="height: 300px"></div>
<h1 class="white-text">Scorll Down</h1>
<div class="space-50" style="height: 900px"></div>
</div>
Toggle Navigation Demo.
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
body {
background: url("http://mdbootstrap.com/images/regular/nature/img%20(4).jpg") no-repeat center center fixed;
background-size: cover;
}
.top-nav-collapse {
background-color: #3F729B !important;
}
/* Small Devices, Tablets */
#media only screen and (max-width: 768px) {
.navbar {
background-color: #3F729B !important;
}
}
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet">
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script>
<!-- Material Design Bootstrap -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script>
<!--Navbar-->
<nav class="navbar primary-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand waves-effect waves-light" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
i am trying to use jquery to count the number of clicks made on a page and the time spent on the page and using sessions storage across pages. when the user clicks on a desired link it will then take them to a feedback page.
Here is the code that i have so far:
<!DOCTYPE html>
<html lang="en">
<!-- #BeginTemplate "Master.dwt" -->
<head>
<meta charset="utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Home</title>
<link href="css1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="BenchMarking.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-2.2.0.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
<script>
var pageLoadDate;
var benchTime;
var eventDate;
var eDiffpl;
$(document).ready(function() {
pageLoadDate= new Date();
$("*").click(function(e)
{
// Stop the function propagating up the DOM tree
e.stopPropagation();
// Get the interaction time
eventDate = new Date();
// <p data-islink="islink">dduiduihd</p>
// Check if this is the link we want
if ($(this).data() !== undefined)
{
// The right link has been clicked
benchTime = benchmarkDate();
eDiffpl = eventDate.getTime() - pageLoadDate.getTime() - benchTime;
sessionStorage.myTester = Number(sessionStorage.myTester) + eDiffpl;
// Then move to next page of experiment
window.location.url = "feedback_page.html";
}
else
{
// An incorrect part of the page has been clicked
sessionStorage.errorCount = Number(sessionStorage.errorCount)++;
console.log(sessionStorage.errorCount);
}
});
});
</script>
-->
<!-- #EndEditable -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="Footer.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<img src="William hill logo.jpg" alt="Vegas" width="100" height="47">
<!-- Example responsive navigation menu -->
<a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a><span onclick="displayBar()">Sports</span></a></li>
<li><span onclick="displayBar()">Games / Macau</span></li>
<li><span onclick="displayBar()">Scratchcards</span></li>
<li><span onclick="displayBar()">Vegas</span></li>
<li><span onclick="displayBar()">Virtual</span></li>
<li><span onclick="displayBar()">Financials</span></li>
<li><span onclick="displayBar()">Login</span></li>
</ul>
</div>
</nav>
<nav id="fixed-nav-bar2">
<div id="menu0" class="menu1">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Ball Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Football</li>
<li>Basketball</li>
<li>Golf</li>
<li>Handball</li>
<li>Rubgy League</li>
<li>Rugby Union</li>
<li>Tennis</li>
<li>Cricket</li>
<li>Snooker</li>
<li>Pool</li>
<li>Volly Ball</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">International Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>American Football</li>
<li>Baseball</li>
<li>Basket Ball</li>
<li>GAA Football</li>
<li>GAA Hurling</li>
<li>Australian Rules</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Racing<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Formula 1</li>
<li>Formula 2</li>
<li>Formula E</li>
<li>Moterbikes</li>
<li>cycling</li>
<li>Horse Racing</li>
<li>Greyhound Racing</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Racket Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Tennis</li>
<li>Squash</li>
<li>Badmington</li>
<li>RacketBall</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vitual Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>E-Sports</li>
<li>Virtual Greyhound Racing</li>
<li>Virtual Horse Racing</li>
<li>Virtual Football</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Other<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Boxing</li>
<li>UFC / MMA</li>
<li>Winter Sports</li>
<li>Darts</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- #BeginEditable "body" -->
<div class="container" class="first_body_element">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="sports%20betting.png" alt="sports betting" width="460" height="345">
</div>
<div class="item">
<a href="http://vegas.williamhill.com/http://vegas.williamhill.com/">
<img src="Vegas.png" alt="Vegas" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://macau.williamhill.com/#!/https://macau.williamhill.com/#!/">
<img src="Macau.png" alt="Macau" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://games.williamhill.com/#!/https://games.williamhill.com/#!/">
<img src="Games.png" alt="Games" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://scratchcards.williamhill.com/#!/https://scratchcards.williamhill.com/#!/">
<img src="Scratchcards.png" alt="Scratchcards" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://bingo.williamhill.com/http://bingo.williamhill.com/">
<img src="Bingo.png" alt="Bingo" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://poker.williamhill.com/http://poker.williamhill.com/">
<img src="Poker.png" alt="Poker" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://vegas.williamhill.com/live-casino/http://vegas.williamhill.com/live-casino/">
<img src="Roulette.png" alt="Roulette" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://vegas.williamhill.com/live-casino/http://vegas.williamhill.com/live-casino/">
<img src="Vegas%20Millions.png" alt="Vegas Millions" width="460" height="345">
</a>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- #EndEditable -->
<script>
function displayBar(){
document.getElementById("fixed-nav-bar2").style.display = "block";
document.getElementById("myCarousel").style.paddingTop = "50px";
}
</script>
<footer>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Terms and Conditions</li>
<li>Privacy Policy</li>
<li>Rules</li>
<li>Help</li>
<li>Contact us</li>
<li>William Hill Press Office</li>
</ul>
</div>
</nav>
</footer>
</body>
<!-- #EndTemplate -->
</html>
however with this code above i am unable to open my drop down menu which my desired link will be in.
the benchmarkDate() method runs end_date=new Date() 999 times in order to get the time, this cannot be changed