I have a bootstrap navbar. And it is being used on many pages. So I have created one navbar.php and It contains the elements of the navbar.
I am including it on all the pages. But the dropdown part of the navbar is not functioning properly. It is not taking me to the desired page. All the links that are refering to home.php is working. The dropdown for login also works. But when I click on it it does not take me to the login.php or masterlogin.php
What could be the problem?
navbar.php
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="assets/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home.php"><img src="logo3.png" alt="Home"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content4</li>
<li>Content5</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LOGIN</li>
<li>MASTER LOGIN</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
home.php
<!--At the top-->
<?php
include_once "navbar.php";
?>
<!-- Followed by rest of the code for home.php-->
replace your css js
<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>
it's working in your code
Related
On my webpage the menu doesn't work on phones. It collapses fine but doesn't do anything when I click it.
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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 hoa_label" onclick="newPage('m_page1','page1')">Wedding Event</a>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active" id="m_page1"><a onclick="newPage('m_page1','page1')">Home</a></li>
<li id="m_page2"><a onclick="newPage('m_page2','page2')">Photos</a></li>
<li id="m_page3"><a onclick="newPage('m_page3','page3')">RSVP</a></li>
<li id="m_page4"><a onclick="newPage('m_page4','page4')">Gift Registry</a></li>
<li id="m_page5"><a onclick="newPage('m_page5','page5')">Hotel Information</a></li>
<li id="m_page6"><a onclick="newPage('m_page6','page6')">Wedding Contacts</a></li>
<li class="dropdown">
Event Information<span class="caret"></span>
<ul class="dropdown-menu">
<li>Venue</li>
<li>Live Streaming</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Here is the section that loads the java. It won't let me post any more code into this post. It's forcing me to 'add' details, so hopefully this is enough. It's just the standard * Bootstrap v3.3.7 (http://getbootstrap.com) with absolutely no changes. The only custom java script is a little toggle to check a cookie to turn on and off the help prompts.
<!--Javascript Load Files-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!--QTip Start-->
<script>
$(function ()
{
$(document).tooltip(
{
track: true
});
} );
</script>
<!--QTip End-->
<script src="js/singleAppFunc.js"></script>
Whenever I click over the item that has the drop down, it doesnt work... does anyone know why? It is my first time using php and I am trying to do an inventory system... but i have no idea what could be the problem
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Servicio de Manejo de Inventarios</title>
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css">
<!-- bootstrap theme -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap-theme.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.min.css">
<!-- custom css -->
<link rel="stylesheet" type="text/css" href="custom/css/custom.css">
<!-- DataTables-->
<script type="text/javascript" scr="assets/plugins/datatables/datatables.min.css"></script>
<!-- file input -->
<script type="text/javascript" scr="assets/plugins/fileinput/css/fileinput.min.css"></script>
<!-- jquery -->
<script type="text/javascript" scr="assets/jquery/jquery.min.js"></script>
<!-- jqueryui -->
<link rel="stylesheet" type="text/css" href="assets/jquery-ui/jquery-ui.min.css">
<script type="text/javascript" scr="assets/jquery-ui/jquery-ui.min.js"></script>
<!-- bootstrap js -->
<script type="text/javascript" scr="assets/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-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="#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 id="navDashboard"> <i class="glyphicon glyphicon-list-alt"></i> Dashboard </li>
<li id="navBrand"> <i class="glyphicon glyphicon-btc"></i> Marca </li>
<li id="navCategories"> <i class="glyphicon glyphicon-th-list"></i> Categoria </li>
<li class="dropdown" id="navOrder">
<i class="glyphicon glyphicon-shopping-cart"> </i> Ordenes <span class="caret"></span>
<ul class="dropdown-menu">
<li id="topNavAddOrder"><i class="glyphicon glyphicon-plus"> </i>Agregar orden</li>
<li id="topNavManageOrder"> <i class="glyphicon glyphicon-edit"> </i>Administrar ordenes</li>
</ul>
</li>
<li id="navReport"> <i class="glyphicon glyphicon-check"></i> Reporte </li>
</ul>
<ul class="nav navbar-nav navbar-right" id="navSetting">
<li class="dropdown">
<i class="glyphicon glyphicon-user"></i> <span class="caret"></span>
<ul class="dropdown-menu">
<li id="topNavSetting"><i class="glyphicon glyphicon-wrench"></i>Setting</li>
<li id="topNavLogout"><i class="glyphicon glyphicon-log-out"></i>Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- file input -->
<script type="text/javascript" scr="assets/plugins/fileinput/js/plugins/piexif.min.js"></script> <!--se supone que va "canvas-to-blog.min.js" -->
<script type="text/javascript" scr="assets/plugins/fileinput/js/plugins/srotable.min.js"></script>
<script type="text/javascript" scr="assets/plugins/fileinput/js/plugins/purify.min.js"></script>
<script type="text/javascript" scr="assets/plugins/fileinput/js/fileinput.min.js"></script>
<!-- datatables js-->
<script type="text/javascript" scr="assets/plugins/datatables/datatables.min.js"></script>
</body>
</html>
Because the href attribute of the elements that has dropdown is set to "#". To resolve the issue, just give it a valid link for example <i class="glyphicon glyphicon-user"></i> <span class="caret"></span>
I've written a script and it worked until this morning. Script runs perfectly on a remote server but not on a local server(XAMPP).
Code:
<?php>
require_once ("../functions/query.php");
if(sessioncheck()==true) {
?>
<HTML>
<head>
<title>Admin Control Panel</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="css/admin.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src='js/functions.js'></script>
</head>
<body>
<div class="container">
<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="index.php">LojraMe</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>Lojrat</li>
<li>Kategorite</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Kerko">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<?php
} //this one is line 55
else {
header("Location:/index.php");
}
?>
Look at my code above to the 55th line on my code.It says:
"Parse error: syntax error, unexpected '}' in E:\xampp2\htdocs\LojraV2\Lojra\admin\menu.php on line 55"
Checked if sessions are working but they seem to be okay.
It seems you are including the menu.php file, and the error is located within this file. Have you checked the 55th line in menu.php?
The error is on line 1.
<?php>
should be
<?php
You are closing this tag immediately, which won't work.
You should consider using an IDE that shows you coding errors on the fly - copying your code into NetBeans immediately flagged the issue.
I am trying to create a simple cms, with the ability to allow users to change the body background colour when a img is clicked, however I am unable to get the background colour to change? I am using php and GET variables to pass colour id info and sessions to save user input. I keep getting this error: "Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /Applications/MAMP/htdocs/CMS/index.php:1) in /Applications/MAMP/htdocs/CMS/header.php on line 2" yet nothing is sent before session start? And how can I make my css body background colour change depending on which image is clicked? Can someone please shed some wisdom?
thanks in advance
The code:
<?php
session_start();
if(isset($_GET['colour'])) {
$colour = $_GET['colour'];
$_SESSION['colour'] = $colour;
}
$colour_session = $_SESSION['colour'];
echo "bgcolour = $colour_session";
?>
<!DOCTYPE html>
<html>
<head>
<title>CMS</title>
<meta charset="UTF-8">
<link type='text/css' rel='stylesheet' href='css/bootstrap.min.css'/>
<link type='text/css' rel='stylesheet' href='css/main.css'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user- scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<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="#navbar-collapse" 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="index.php"><span class="glyphicon glyphicon-home"></span> CMS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Login <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> User</li>
<li role="separator" class="divider"></li>
<li><i class="fa fa-user-plus"></i> Admin </li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="conatiner-fluid">
<div class="col-md-12">
<div class="col-md-4 col-md-offset-4 text-center bgColour">
<p>Choose Background Colour:</p>
<img src="images/grey.jpg">
<img src="images/white.jpg">
<img src="images/pink.jpg">
<img src="images/blue.jpg">
<img src="images/purple.jpg">
<img src="images/green.jpg">
<img src="images/yellow.jpg">
<img src="images/orange.jpg">
<img src="images/red.jpg">
</div>
</div>
</div>
**body and html tags are closed by 'require 'footer.php'
<body bgcolor='<?php echo $colour_session; ?>'>
just add this in your code to set the bgcolor of body
Here is the code, I am trying to add a dropdown for login. Here is the header:
<head>
<title>Forms Generator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css"
href="<?php echo $path . 'css/main.css'; ?>" />
</head>
<body>
<div id="page">
<header class="navbar-inverse" role="banner">
<nav class="navbar navbar-inverse">
<div class="container">
<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="#">Forms Generator</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">Home <span class="sr-only">(current)</span></li>
<li class="active">Create Form<span class="sr-only">(current)</span></li>
<li class="active">View Surveys<span class="sr-only">(current)</span></li>
<li class="active">View Statistics<span class="sr-only">(current)</span></li>
</ul>
<!-- Working on dropdown here -->
<ul class="nav navbar-nav navbar-right">
<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>
<!-- END DROPDOWN WORK-->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
</header>
<p>Interactive Forms Generation</p>
<p>Enter links/buttons to create survey/take survey, etc here.</p>
</div>
</div>
Here's the code for the footer:
<div id="footer">
<p class="copyright">
© <?php echo date("Y"); ?>
</p>
</div>
</div>
</div><!-- end page -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
So basically the dropdown that I'm attempting to add to the end of the navbar isn't dropping down. Why is it not doing so?
EDIT: I am running XAMPP and using Chrome.
Check your html document at https://validator.w3.org/nu/
Take a look at the (error) console of your browser
try it with
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
just put your jquery file before bootstrap.js file
<script src="script/jquery-3.2.0.js" type="text/javascript"></script>
<script src="script/bootstrap.js" type="text/javascript"></script>