Initially I had a bootstrap navbar, and I hard coded the navbar code into every one of my html files. I set the active class of the tab of whatever page the user was currently viewing manually like this:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>View Map</li>
<li>Submit Document<li>
<li>Contact</li>
</ul>
This worked fine, but I realized it was bad practice to repeat code like this, so I put the navbar code into a separate file, turned all my html files into php files, and used the php include statement to load the navbar in each page. I then used JavaScript in an attempt to dynamically set the active class. However, I can't get the active class to show at all when clicking on my tabs.
<head>
<link href="../css/navbar.css" type="text/css" rel="stylesheet" />
</head>
<!-- JAVASCRIPT TO TOGGLE ACTIVE CLASS-->
<script type="text/javascript">
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <!-- Mobile collapse-->
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a class="navbar-brand" href="homepage.html">
<img src="../images/pksoilogo.png" id="logo">
</a>
</div>
<div class="collapse navbar-collapse"> <!-- Mobile collapse/Dropdown-->
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>View Map</li>
<li>Submit Document<li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Any thoughts on how to correct the JavaScript to fix this?
EDIT - Sorry, I hadn't read the part about you wanting a Javascript fix. Hopefully someone can give a JS solution to your problem soon enough!
Here's one way to go about it.
<ul class="nav navbar-nav">
<li <?php if (basename($_SERVER['PHP_SELF']) == 'homepage.php') echo 'class="active"' ?>>Home</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'about.php') echo 'class="active"' ?>>About</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'map.php') echo 'class="active"' ?>>View Map</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'index.php') echo 'class="active"' ?>>Submit Document</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'contact.php') echo 'class="active"' ?>>Contact</li>
</ul>
Obviously that's not the cleanest of ways, but it's quite easy. You could also make a function that you could call to make it look a bit better.
Related
I've created two tabs, using PHP tab one is made to insert data to database and another to view the data from the database, someone suggested ajax, but i couldn't find the answer i want.
example code -
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="container tab-pane active">
<?php require("insert.php"); ?>
</div>
<div id="menu1" class="container tab-pane fade">
<?php require("view.php"); ?>
</div>
</div>
at tab one, i insert data (PHP) and tab two i view the data in table (PHP), so after inserting, i have to refresh the whole page to view the updated data on tab two.
So is it possible to refresh tab two right after i insert data on tab two, so i can view updated data without refreshing the whole page? if this is already solved, please comment answer links.
It may seem crude, but i made it work using JavaScript.
$(document).ready(function(){
$(".t1").load("insert.php");
$(".t2").load("view.php");
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
if(target=='#home')
{
$(".t1").load("insert.php");
}
else if(target=='#profile')
{
$(".t2").load("view.php");
}
});
});
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Menu 1</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="container tab-pane active t1">
</div>
<div id="profile" class="container tab-pane fade t2">
</div>
</div>
I've been trying to figure out why my bootstrap navbar wont display while other bootstrap class will.
So in my code this works fine. The button displays fine which is proof that bootstrap works:
index.php
<?php
echo '<div class="btn btn-lg btn-success">Test Button</div>';
?>
But if I try to display the navbar on the same index.php it fails miserably and I don't get it. Any idea?
<?php
echo '<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>';
?>
EDIT
<!-- bootstrap javascript, jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- bootstrap css stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
After doing research and intensively reading Bootstrap documentation and testing codes here in W3School Online Editor I realized that I wasn't doing nothing wrong.
Since they've migrated to Bootstrap 4, they've dropped a lot of their old features such as Glyphicon and how navbar displays.
<!DOCTYPE html>
<html>
<?php
include 'includes/head.php';
?>
<body>
<?php
include 'includes/header.php';
?>
head.php:-
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>AIT Project</title>
</head>
header.php:-
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
As soon as I reduce my display size the bootstrap navbar goes into responsive mode. When I click the button the whole menu drops down but doesn't climb back up.
responsive navbar
Also on dropping down in responsive mode my carousel gets hidden by the navbar
the carousel
There is a typo/blank space in header.php row 4: data- target="#myNavbar"
...should be data-target="#myNavbar"
When fixing that your code is working, see
https://plnkr.co/edit/gbdhAqbgfvj57BqHzMdV?p=preview A click on the "hamburger menu" to left expands the menu; one more click it collapse. Is this what you want/expect?
I just need to include an html file (that has my navigation bars for all my pages).
I've tried: <?php htmlentities(file_get_contents("include/navigation.html")); ?>
But nothing shows up at all.
I've checked other questions like this and the code above is always the answer. So why is it not working for me?
Here's my navigation file if needed:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="index.html">[ ] Advanced Web Development</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 navbar-right">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Résume
</li>
<li>
Blog
</li>
<li>
Projects
</li>
<li>
Contact
</li>
<!--
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>
1 Column Portfolio
</li>
<li>
2 Column Portfolio
</li>
<li>
3 Column Portfolio
</li>
<li>
4 Column Portfolio
</li>
<li>
Single Portfolio Item
</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Blog Home 1
</li>
<li>
Blog Home 2
</li>
<li>
Blog Post
</li>
</ul>
</li>
<li class="dropdown">
Other Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Full Width Page
</li>
<li>
Sidebar Page
</li>
<li>
FAQ
</li>
<li>
404
</li>
<li>
Pricing Table
</li>
</ul>
</li>
-->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
In your above example, php is creating a string from the file, but doing nothing with it. In order to make your code work, you would need to add an echo:
<?php echo htmlentities(file_get_contents("include/navigation.html"));
This is because there are generally three ways that functions can affect things:
Returning a value (what htmlentities does)
Modifying (a) value(s) passed into them (take a look at passing by reference
Echoing something directly or to the output buffer
Since htmlentities returns a value, nothing is sent to output. You would have to either save it to a variable for output later, or echo/print it to the output now.
Alternatively, you could include it as suggested by #David.
While using the echo on your normal code would be sufficent, if you want people to be able to access the HTML, you can include it in a php file itself, anywhere except inside the <?php ?> tag.
htmlentities() does not output to the browser. You still need to echo() or otherwise output.
<?php echo htmlentities(file_get_contents("include/navigation.html")); ?>
Or as suggested in the comments use include() to embed the entire file. PHP will attempt to process the file, so make sure it is error free if it contains any PHP code.
<?php include( "include/navigation.html" ); ?>
try:
<?php
$file = htmlentities(file_get_contents("include/navigation.html"));
echo $file;
?>
Hey so I have a problem, one I cant figure out. I cant seem to make it so only one sub menu to show up. Ex: When on About.php it has a constant submenu based on the code below. So when I click on Info for another submenu to pop up I want it to close the constant submenu and open the new. Not just write me another submenu below it. I do not care really what form it is in, javascript or php. Just would like it simple for me to do, and if you need my js file: JS FILE
CODE:
<div id="div_2" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>
</ul>
</div>
</div>
<div id="div_3" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</div>';
if ($sub == 'gallery')
echo '<div id="div_1" style="display:none"></div>
<div id="div_2">
<div id="sub-menu">
<ul class="menu">
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>
</ul>
</div>
</div>
<div id="div_3" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</div>';
if ($sub == 'about')
echo '
<div id="div_1"></div>
<div id="div_2" style="display:none">
<div id="sub-menu">
<ul class="menu">
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>
</ul>
</div>
</div>
<div id="div_3">
<div id="sub-menu">
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</div>';
?>
<?php
if ($bar == 'about')
echo '
<li>ABOUT</li>
<li>CONTACT</li>';
if ($bar == 'gallery')
echo '
<li>VIDEOS</li>
<li>PHOTOS</li>
<li>UPLOAD</li>
<li>FILES</li>';
?>
You're repeating id="sub-menu" in your HTML.
ID is supposed to be unique to ONE element.
CLASS can be repeated/reused on multiple elements.
Looking at your JS file...you're attempting to engage at least 2 or 3 elements simultaneously by using getElementById(elemId) - I've not tried running your code, but I'm betting it throws an error.
In your HTML - set a unique ID to one of your sub menus (id="sub_menu_1"). Then use that same ID in your JS getElementById('sub_menu_1'), and see if your situation improves.
you have to change this line like this
<a id="a_title_3" onclick="SetCurrent(3);return false;"><span>INFO</span></a>
there are two "a_title_2" id named objects.
<a id="a_title_2" onclick="SetCurrent(2);return false;" href="#" class=""><span>GALLERY</span></a>
<a id="a_title_2" onclick="SetCurrent(3);return false;" class="current"><span>INFO</span></a>
it will work fine when you change it to '3'.