Access single Drop Down list from multiple HTML files - javascript

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>

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>

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>

Bootstrap themed dropdown menu failing

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/

How to change the content of a file which is included in different scripts?

I am making a website for which I have to make the page active attributes on different lines for different pages. Now I put the whole common script inside a file header and include it in every script. Now how can I change the content of a line when including it on different pages?
The header is as follows:
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="islamic.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:400,300italic' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
html,body
{
height: 1500px;
}
.grey
{
background-color: #ccc;
padding: 20px;
}
</style>
</head>
<body>
<!-- We are going to make this page for navigation purpose -->
<nav class="navbar navbar-inverse navbar-fixed-top" role = "navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<a class="navbar-brand" href="index.php">ILM</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li >Home</li>
<li >Discuss</li>
<li >About Us</li>
<li >Contact</li>
<li class="dropdown">
Social <b class="caret"> </b>
<ul class="dropdown-menu">
<li> Facebook</li>
<li> Twitter</li>
<li> Linked IN</li>
<li> You Tube</li>
</ul>
</li>
</ul>
</div>
</nav>
I want to change the line
<li ><a href="index.php" >Home</a></li>
to
<li class="active">Home</li>
for home page.
Now I want to change the line
<li ><a href="aboutus.php" >About Us</a></li>
to
<li class="active">Home</li>
for about us page.
Is it possible in php?
you can try somethign like this
http://jsfiddle.net/habo/arjw2q6b/
Place this code at the end of your </body> tag.
Guessing your page Urls will have the anchor tags hrefs. one each page load after full document id read your script will check if the URL contains "index.php" or all other hrefs and if it does then it will call the function resetActiveTab that function will remove active class for all the list items (li) and add class=active for the current page
$(function(){
if(window.location.href.contains("index.php")){
resetActiveTab("index.php");
}
else if(window.location.href.contains("why.php")){
resetActiveTab("why.php");
}
else if(window.location.href.contains("aboutus.php")){
resetActiveTab("aboutus.php");
}
}
function resetActiveTab(mySelector){
$(".navbar-nav li").each(function( key, value ) {
//alert($(value).attr("class"));
$(value).removeClass("active");
if( $(value).find("a").attr("href") == mySelector){
$(value).addClass("active");
}
});
}

Categories