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>
Related
Published
Unpublished
My Navbar went missing i use Laravel and the function blade
Bootstrap is working seeing that the Jumbotron is activated
Can someone help?
Here is the navigation Code
<!DOCTYPE html>
<html>
<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>#yield('title')</title>
<!-- Bootstrap Core Css -->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Sweet Alert Css -->
<link href="plugins/sweetalert/sweetalert.css" rel="stylesheet" />
<!-- Design Css -->
<link href="plugins/pagecss/front_master.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
<img id = "brnd" style="float:left;margin-top: 0.7em;margin-right: 1em;" alt="Brand" src="../images/index.jpg"> <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="/">i-Kasal</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="#">Home</li>
<li><div class="fb-share-button" data-
href="https://ikasal.uphero.com" data-layout="button_count" data-
size="small" data-mobile-iframe="true"><a
class="fb-xfbml-parse-ignore" target="_blank"
href="https://www.facebook.com/sharer/sharer.php?
u=https%3A%2F%2Fikasal.uphero.com%2F&src=sdkpreparse"><button
id = "sharebtn" class="btn btn-primary navbar-btn">Share
#Facebook</button></a></div></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "#yield('Signup')"><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li class = "#yield('Login')"><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!-- Jquery Core Js -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="plugins/tether-master/dist/js/tether.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Jquery Validation Plugin Css -->
<script src="plugins/jquery-validation/jquery.validate.js"></script>
<!-- Sweet Alert Plugin Js -->
<script src="plugins/sweetalert/sweetalert.min.js"></script>
#yield('body')
</body>
</html>
And here is the welcome page code
#extends('layout.main.front_master')
#section('title','iKasal')
#section('body')
<!-- Design Css -->
<link href="../../../plugins/pagecss/welcome.css" rel="stylesheet" />
<div class="jumbotron" style = "padding-top:100px;">
<div class="container">
<h1 style="font-size:200px;">i-Kasal</h1>
<p style="font-size:80px;">Welcome to iKasal</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button"
style="font-size:50px;width: 25%">Learn more</a></p>
</div>
</div>
#endsection
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
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>
I'm new to bootstrap and try to implement the NavBar sample on a website, It works great on bigs screen but when yuo try to see it on small-screen devices, the navbar options disappear.
Here is a picture from my desktop:
Here is a picture of the small screen device:
When I click on the collapse menu on the right nothing happens.
I made the link to the css and js on my html header as follows:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
And implement the nav var with the sample code from Bootstrap site, I test it Chrome and Firefox.
<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">
<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" 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-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You need to include JQuery before Bootstrap in the header since bootstrap requires JQuery in order to work correctly.
<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>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
Otherwise you'll get an error since Bootstrap is referencing a function that does not exist in that point in time.
hope that helps.