Bootstrap themed dropdown menu failing - javascript

I am trying to build a simple app using jQuery and Bootstrap. I'm having trouble adding dropdown menus. I've been trying to use the example code from http://getbootstrap.com/examples/theme/ but it doesn't look like it works. Here's the code pretty much exactly the way it appears in the example:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Dropdown Theme Fail</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/theme/theme.css" rel="stylesheet">
<!-- jQuery 2.2.3 -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Dropdown menus</h1>
</div>
<div class="dropdown theme-dropdown clearfix">
<a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="active">Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div> <!-- /container -->
</body>
</html>
You can see that, when you run this, all you get is the expanded dropdown list sitting on the page. No button, no activity, etc. Am I the only one that is seeing this behavior? Why doesn't this work as expected?

I assume because the code was being used on a display page they were showing how it looks instead of functions. Removing "theme-dropdown clearfix" from <div class="dropdown theme-dropdown clearfix"> and removing the "sr-only" on <a> tag it can work as its coded now.
There is also an example on w3schools using a button and may be easier to get going. w3schools dropdown
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Dropdown Theme Fail</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/theme/theme.css" rel="stylesheet">
<!-- jQuery 2.2.3 -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Dropdown menus</h1>
</div>
<div class="dropdown">
<a id="dropdownMenu1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="active">Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div> <!-- /container -->
</body>
</html>

Your Dropdown button doesn't appear because it has the "sr-only" class on it. This means it is strictly for screen readers.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Dropdown Theme Fail</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/theme/theme.css" rel="stylesheet">
<!-- jQuery 2.2.3 -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Dropdown menus</h1>
</div>
<div class="dropdown theme-dropdown clearfix">
<a id="dropdownMenu1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="active">Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div> <!-- /container -->
</body>
</html>

I have tried with this markup and works.
<div class="dropdown">
<a id="dropdownMenu1" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="active">Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
https://jsfiddle.net/gvrrj47z/

Related

Issue with Navbar that works on hover on desktop screen and works on click on mobile

i have setup a bootstrap navbar with javascript program that works on hover on Desktop screen and works on click on mobile and tablet screen. but i have an issue that whenever on desktop screen i click on any navbar any button it start toggling. so i have to refresh the page again to make it work normally.
$(document).ready(function(){
if($(window).width() < 768) {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
} else {
$(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
});
}
});
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li 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">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Try mynavbar framework _nel, they make hover on the desktop and click on mobile
http://getnel.github.io

Bootstrap 3 button dropdown displays list items

I'm trying to implement a Bootstrap button dropdown. I followed the directions from the docs:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
The dropdown displays the list items on my page:
Any ideas what I'm doing wrong?
working fine when i include all the boostrap files, May be you missed some css
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootply snippet - Bootply Bootstrap Preview</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- CSS code from Bootply.com editor -->
</head>
<!-- HTML code from Bootply.com editor -->
<body >
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li>Action</li> <li>Another action</li> <li>Something else here</li> <li role="separator" class="divider"></li> <li>Separated link</li> </ul></div>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

why this jquery image slider not working with laravel #extends('layouts.app') and #section('content')

I am using jquery image slider in laravel. it is working with this scripts as well
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="jQuery Logo Slider Ticker by webdesignandsuch.com">
<meta name="viewport" content="width=device-width, initial-scale=1"<script src="{{('http://code.jquery.com/jquery-latest.js')}}"></script>
<script src="{{asset('js/jquery.bxSlider.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
});
</script>
<link href="{{asset('css/style.css')}}" rel="stylesheet">
</head>
<i><h2>Paper Articals</h2></i>
<div class="slider-container">
<ul id="slider">
<li><a href="#"><p>kkkkkkk</p></li>
<li><img src="{{asset('/imgs/2.jpg')}}"></li>
<li><img src="{{asset('/imgs/3.jpg')}}"></li>
<li><img src="{{asset('/imgs/4.jpg')}}"></li>
<li><img src="{{asset('/imgs/5.jpg')}}"></li>
<li><img src="{{asset('/imgs/6.jpg')}}"></li>
<li><img src="{{asset('/imgs/7.jpg')}}"></li>
<li><img src="{{asset('/imgs/8.jpg')}}"></li>
</ul>
</div><!-- /slider -->
</html>
but is is not working with this #extends('layouts.app')
#section('content') in laravel I am using 5.2
#extends('layouts.app')
#section('content')
//above code here
#endsection
not error but not moving slider hold it? how can fix it???
updated app.blade.php
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{{asset('favicon.ico')}}">
<title>Wealth </title>
<!-- Bootstrap core CSS -->
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{asset('css/ie10-viewport-bug-workaround.css')}}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="{{asset('js/ie-emulation-modes-warning.js')}}"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="{{asset('css/carousel.css')}}" rel="stylesheet">
<link href="{{asset('css/style.css')}}" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-default
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href=""><img src="{{asset('/imgs/logo.png')}}"></a>
{{-- <a class="navbar-brand" href="#">WEALTH LANKA MANAGEMENT</a>--}}
</div>
<div id="navbar" class="navbar-collapse collapse">
{{-- <ul class="nav navbar-nav">--}}
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Boad of Ditectors</li>
<li>Senior Team</li>
{{-- <li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>--}}
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
#yield('content')
<script src="{{('http://code.jquery.com/jquery-latest.js')}}"></script>
<script src="{{asset('js/jquery.bxSlider.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="{{asset('js/vendor/holder.min.js')}}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{asset('js/ie10-viewport-bug-workaround.js')}}"></script>
</body>
</html>
app.blade.php
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{{asset('favicon.ico')}}">
<title>Wealth </title>
<!-- Bootstrap core CSS -->
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{asset('css/ie10-viewport-bug-workaround.css')}}" rel="stylesheet">
<script src="{{asset('js/ie-emulation-modes-warning.js')}}"></script>
<!-- Custom styles for this template -->
<link href="{{asset('css/carousel.css')}}" rel="stylesheet">
<!-- BxSlider css from library -->
<link href="{{asset('css/jquery.bxslider.css')}}" rel="stylesheet">
<link href="{{asset('css/style.css')}}" rel="stylesheet">
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href=""><img src="{{asset('/imgs/logo.png')}}"></a>
{{-- <a class="navbar-brand" href="#">WEALTH LANKA MANAGEMENT</a>--}}
</div>
<div id="navbar" class="navbar-collapse collapse">
{{-- <ul class="nav navbar-nav">--}}
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Boad of Ditectors</li>
<li>Senior Team</li>
{{-- <li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>--}}
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Content goes here -->
#yield('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="{{asset('js/jquery.bxSlider.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($('#slider').length > 0) {
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
}
});
</script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="{{asset('js/vendor/holder.min.js')}}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{asset('js/ie10-viewport-bug-workaround.js')}}"></script>
</body>
</html>
otherpage.blade.php
#extends('layouts.app')
#section('content')
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
#endsection

dropdown menu bootstrap active

I'm trying to make a dropdown menu on my homepage but the dropdown menu is always active. I'm using this code. What is wrong with it?
This is the part of the drop down code I'm using:
<li class="dropdown" class="" itemprop="name" >
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</li>
It's always active when I open the page and not when I click it to drop down.
Here full code.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Admin
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

Access single Drop Down list from multiple HTML files

I have created a drop down list in the top right corner to list various options for a user when he/she logs into a website. Currently to display the drop down list in the top right corner of every webpage i'm writing the HTML code in every HTML file.
I'm trying to implement a system where I can call this code from every HTMl webpage in the website and changes made once in a single file are applied for all webpages..I can't figure out how to implement it..Please help...
HTML 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">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="909447696017-ka0dc75ts261cua6d2ho5mvb7uuo9njc.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>My Friends</title>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystore.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="main">
<div class="collapse navbar-collapse" id="myNavbar1">
<ul class="nav navbar-nav navbar-right" id="navbar1right">
<li class="dropdown" id="subheader">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span id="salutation"></span> <span class="caret"> </span>
</a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-phone"></span>Postings </li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-heart-empty"></span>WishList </li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-inbox"></span>Incoming Requests </li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-gift"></span>Leased Out Items </li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span>Leased In Items </li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-user"></span>Friends </li>
<li role="separator" class="divider"></li>
<li id="logoutoptionmenu"><span class="glyphicon glyphicon-log-out"></span> Logout </li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Screen-shot of how it looks on UI..
EDIT 1:
As mentioned by user #DelightedD0D I removed the unordered list code and added in a seperate .inc file in the same folder as the html file. I edited code in my body tag accordingly and added the Following jquery code in the head section
$(function(){
$.get("menu.inc", function(response) {
$('#myNavbar1').html(response);
applyDynamicBindings('#myNavbar1');
});
});
function applyDynamicBindings(container_selector){
var $container=$(container_selector);
$container.find("ul").click(function(){
alert('triggered function bound to dynamic element');
});
}
Somehow the code is not able to enter the get method as the alert inside it is not getting displayed. Even the button is not getting displayed in the browser.
You could use a simple template. Write the html for your menu and save it in a separate file named menu.inc (use any non standard extension you want) then call the below on any page where you need the menu to appear:
$.get('path_to/menu.inc', function(response) {
$('#myNavbar1').html(response);
});
Now if you ever need to edit the menu, you can do so in one place and have the changes automatically affect all including pages.
So in your pages do something like this:
<!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">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="909447696017-ka0dc75ts261cua6d2ho5mvb7uuo9njc.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>My Friends</title>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystore.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<script>
$(function(){
$.get('path_to/menu.inc', function(response) {
$('#myNavbar1').html(response);
applyDynamicBindings('#myNavbar1');
});
});
function applyDynamicBindings(container_selector){
var $container=$(container_selector);
$container.find('.some-menu-item').click(function(){
alert('triggered function bound to dynamic element');
});
}
</script>
</head>
<body>
<div id="main">
<div class="collapse navbar-collapse" id="myNavbar1">
</div>
</div>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In menu.inc have just this:
<ul class="nav navbar-nav navbar-right" id="navbar1right">
<li class="dropdown" id="subheader">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span id="salutation"></span> <span class="caret"> </span>
</a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-phone"></span>Postings </li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-heart-empty"></span>WishList </li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-inbox"></span>Incoming Requests </li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-gift"></span>Leased Out Items </li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span>Leased In Items </li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-user"></span>Friends </li>
<li role="separator" class="divider"></li>
<li id="logoutoptionmenu"><span class="glyphicon glyphicon-log-out"></span> Logout </li>
</ul>
</li>
</ul>

Categories