I just want to ask if what would I do to transfer the class attribute "active" based on the page I visit on my site.
For example [Bootstrap snippet]:
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
So if I visit profile, the class is transferred into the <li> tag of Profile.
Try this
<ul class="nav nav-pills">
<li <?php if($_SERVER['REQUEST_URI']=='/index.php'){ ?> class="active" <?php } ?>>Home</li>
<li <?php if($_SERVER['REQUEST_URI']=='/profile.php'){ ?> class="active" <?php } ?>>Profile</li>
<li <?php if($_SERVER['REQUEST_URI']=='/message.php'){ ?> class="active" <?php } ?>>Messages</li>
</ul>
//we are taking demo php file like index.php,profile.php,message.php. you can use your own
Hope it will help
If you don't mind using Javascript on your site, Bootstrap has some built-in functionality to do this for you. Just make sure you have targets with resolvable id's (such as <div id="home">).
The biggest issue I run into with this design is that all of your "pages" are rendered at load. I find myself having to use a lot of AJAX if I am building anything that changes based on user input.
From the bootstrap site:
Markup
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.
<ul class="nav nav-tabs">
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
Related
I have written some code that will highlight a link in the header based on: class="active". The class is connected to some CSS code to style it.
I am currently adding the class="active" the specified link for each page. However, since I want to move my header into it's own file and include it on each page, I will lose the ability to set the class for each page. I could of course add a variable that will allow me to sort of do the same thing.
What I wish to know is if there is a better and secure way to automatically set the class="active" to the page that I am on. I have seen some posts that suggest using: ($_SERVER['PHP_SELF'] but I have read that it could cause some security issues.
Lastly the main problem that I have is that I need to set two links to
class="active" if I am viewing a page that is in the portfolio list item. For instance, if games.html is currently viewed, both the games and the portfolio page should have the code: class="active".
(All of my .html files are read as .php)
Here is the html code I have so far:
<ul>
<li>Home</li>
<li><a class="active" href="portfolio.html">Portfolio</a>
<ul>
<li><a class="active" href="games.html">Games</a></li>
<li>2D Art</li>
<li>3D Models</li>
<li>Particles</li>
<li>Shaders</li>
<li>Environments</li>
<li>Programming</li>
<li>Substance Designer</li>
<li>Music</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
Any help will be appreciated!
PHP_SELF is safe when you only use it to compare values and don't directly use it in your html:
The portfolio menu can be made active by nested all related pages in a folder called portfolio and checking if the path starts with that folder.
<?php
$currentPage = $_SERVER['PHP_SELF'];
$portfolioFolder = 'portfolio/';
$isPortfolioFolder = substr($currentPage, 0, strlen($portfolioFolder)) == $portfolioFolder);
?>
<ul>
<li>Home</li>
<li><a class="<?= $isPortfolioPage ? 'active' : '' ?>" href="portfolio.html">Portfolio</a>
<ul>
<li>Games</li>
<li>2D Art</li>
<li>3D Models</li>
<li>Particles</li>
<li>Shaders</li>
<li>Environments</li>
<li>Programming</li>
<li>Substance Designer</li>
<li>Music</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
Hello i recently just got my web server to run all .html files as .php files which now allows me to use the php include function, which is very useful.
However i have multiple sub directories with multiple files in each.
Homepage
--banners
--banner2.html
--banner2.html
--signs
--sign1.html
and so on. The problem here is im trying to use include for my top nav bar. when i include the bar in the sub files, for example banner2.html it wont correctly link.
nav.php
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Login
</li>
<li>
Logout
</li>
<li>
<img src="images/Cart.gif" style="height: 20px; width:20px;"> Cart
</li>
</ul>
in the nav bar is a link to about.html normally i would do the
about
however i cant do that when every file is going to share the same navigation bar.
How can I fix this?
I have answered my own quest and feel silly for even asking the question. I just used absoulte paths
nav.php
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Login
</li>
<li>
Logout
</li>
<li>
<img src="images/Cart.gif" style="height: 20px; width:20px;"> Cart
</li>
</ul>
There are some ways to fix this, one of them is:
Use $_SERVER["DOCUMENT_ROOT"] – We can use this variable to make all our includes relative to the server root directory, instead of the current working directory(script’s directory). Then we would use something like this for all our includes:
`about`
Also you should check this post.
You could use the relative path to the root directory which is /file.ext
Example:
About
I'm stucked in my own solution — it's THE real problem what I wanted to solve. I defined my <base> URL in my PHP project, now all the hashed links
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active">
Tab Handle
</li>
</ul>
are taking me to the base. It's not just the tab, it's everything: If I provide a hashed <nav> element, it's also taking me to the base URL (home URL).
And that's taking a page refresh so, which is another awkward situation.
How can I solve this?
Okay, I got a solution. Thanks to #Adam.
<base href="http://localhost/project/">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active">
Tab Handle <!-- it'll work like a hash link -->
</li>
</ul>
My colleague and I are working on a WordPress-Plugin that generated posts using a custom post type. It all work's fine until You look at the posts. The generated pages look good and use the Themes single.php template. The only problem is, that the menu, that works on all other pages of the site is empty on the pages generated by the plugin.
By empty I mean that the structure including links is there, just the text inside the <a> tags.
The generated menu on a post generated by the plugin looks like this
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<li class="page_item page-item-1763">
</li>
<li class="page_item page-item-1761">
</li>
[...]
</ul>
</div>
</nav>
For all other pages, the menu looks like this:
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<li class="page_item page-item-1763">
About
</li>
<li class="page_item page-item-1761">
Galerie
</li>
[...]
</ul>
</div>
</nav>
As You can see, the only difference is that there is no text between the <a> and </a> tags, which makes the menu unusable.
We really have no idea of how the plugin / custom-post-type creates this issue, as we tried this with different themes, and they all behave the same - so it is not an issue with the theme.
Any comment or hint that points in the right direction is greatly appreciated.
I'm using Bootstrap nav-tabs/dropdown menus component as my primary navigation bar but I cant figure out how to set the active menu based on an incoming URI.
There are a lot of different examples/posts on the net that use nav-tabs for hiding and displaying specific div content or working with the # symbol but I just want to read the incoming URI using PHP, the _SERVER["REQUEST_URI"] variable and set a tab active. Be it a nested location in the navigation or not is also a problem.
Here what I've been trying:
<ul class="nav nav-tabs" id="supernav">
<li class="active"><i class="icon-home" style="margin-top:4px;"></i> Page 1</li>
<li class="dropdown">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Home</li>
<li class="divider"></li>
<li>Page 2.2</li>
<li>Page 2.3</li>
</ul>
</li>
<li class="dropdown">
Page 3 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Home</li>
<li class="divider"></li>
<li class="dropdown-submenu">
Page 3.2
<ul class="dropdown-menu">
<li>Page 3.2.1</li>
<li>Page 3.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Page 4</li>
</ul>
<script>
window.onload=function (e) {
e.preventDefault();
$('#supernav a[href="<?=$_SERVER["REQUEST_URI"];?>"]').tab('show');
};
</script>
Here are a couple URI examples:
http://abc.com/page1.html
http://abc.com/page2.3.html
http://abc.com/page3.2.2.html
Can anyone point me to a good example of how to accomplish this or am I just asking too much from this component?
NOTE: I've preloaded all the bootstrap and jquery resources in my header.
I'm a little late to the party but just came across this post and I figured I'd add my extra 2 cents...
Basically, the best method I've found to set the active bootstrap's tab/pill is by using Javascript/jQuery to match the current url to the href of the active link.
So if your menu is set up as the following:
<ul class="nav nav-tabs">
<li>Page 1</li>
<li>Page 2</li>
</ul>
Your jQuery will be:
$(document).ready(function() {
$('.nav-tabs a[href="'+location.href+'"]').parents('li').addClass('active');
});
This assumes absoulte path for the link's href, but that could be easily overriden by something like:
$(document).ready(function() {
var url_parts = location.href.split('/');
var last_segment = url_parts[url_parts.length-1];
$('.nav-tabs a[href="' + last_segment + '"]').parents('li').addClass('active');
});
Hope this helps somebody in the universe! :)
Cheers!
I've solved my own problem, here is a recap of the goal and what it took to accomplish.
Goals:
I wanted to use the bootstrap nav-tabs component for my navigation
bar because I liked the look/feel of it better.
I wanted to be able to set the 'active' class by parsing the
incoming URI.
I wanted sub-navigation to work as well.
New code based on first post:
<ul class="nav nav-tabs" id="supernav">
<li id="page1"><i class="icon-home" style="margin-top:4px;"></i> Page 1</li>
<li class="dropdown" id="page2">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li id="page2_home">Home</li>
<li class="divider"></li>
<li id="page2_2">Page 2.2</li>
<li id="page2_3">Page 2.3</li>
</ul>
</li>
<li class="dropdown" id="page3">
Page 3 <b class="caret"></b>
<ul class="dropdown-menu">
<li id="page3_home">Home</li>
<li class="divider"></li>
<li class="dropdown-submenu" id="page3_2">
Page 3.2
<ul class="dropdown-menu">
<li id="page3_2_1">Page 3.2.1</li>
<li id="page3_2_2">Page 3.2.2</li>
</ul>
</li>
</ul>
</li>
<li id="page4">Page 4</li>
</ul>
Notice in the code above that there are no
class="active"
or
data-toggle="tab"
set anywhere.
Because I wanted to make my nav on a static template which is used as a header for all templates I couldn't add any dynamically generated code based on incoming URI's but it turns out not to be necessary.
I added the following Javascript code to bottom of each template a visitor calls to help tell the nav-list which items to be marked as 'active'.
I used this script at the bottom of my /page1.html
<script type="text/javascript">
window.onload=function () {
$('#page1').addClass('active');
};
</script>
To set /page3.2.2.html as the active page and all the nav lvls above it I did this
<script type="text/javascript">
window.onload=function () {
$('#page3').addClass('active');
$('#page3_2').addClass('active');
$('#page3_2_2').addClass('active');
};
</script>
Now when a user comes to my site the nav gets loaded from a static file and the rest of the page contains the dynamic JavaScript that sets what components I want set active.
I also found it necessary to make this one little modification to my custom css in order to make sure no line appeared under my 'active' tab, just a visual thing probably needed because of my font settings.
.nav-tabs > li { margin-bottom: -3px; }
I would have posted some SS's but my 'rep' isn't above 10 yet, ha ha ha. Hopefully this helps someone else, god help us all when version 3 of bootstrap comes out and we have to figure this all out again. 8^)P
Tab is set active on the client-side, not on the server. This is because, usually all the contents of each tab are actually there already in the document on page load. Clicking on a tab simple hides one tab and then shows the tab having the id which the anchor element links to.
Here's what the simplest implementation of Bootstrap's tab looks like:
<!-- tab navigation -->
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>...</li>
<li>...</li>
</ul>
<!-- tab contents are inside -->
<div class="tab-content">
<!-- content of each tab is put inside a tab-pane or tab-pill -->
<div class="tab-pane active" id="tab1">
<p>content of tab 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>content of tab 2</p>
</div>
<div class="tab-pane" id="tab2">
<p>content of tab 3</p>
</div>
</div>
That's not all, you still need to activate tabbing using JS like this:
$('ul.nav.nav-tabs > li > a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
Based on how your question is constructed, I think you should go have a better look at what each Bootstrap component stands for, and try to understand what are their appropriate use-case.
If your aim was to show a specific tab in response to a request. Simply add the 'active' class to the div element that wraps its content.
And then make it show by doing this:
$('tab-pane active').tab('show');
Note: all you have to do is add active in the right place each time.
For you case specifically, the problem is in your jQuery. Here's the correct way to write it:
$('#supernav active').tab('show');
I was facing similar problem while I had few page urls like : www.somedomain.com/pages/xyz/abc/samplepage.html
This code worked in my case like magic.
$(document).ready(function() {
var permalink_nodomain = window.location.pathname;
$('.nav-tabs a[href="' + permalink_nodomain + '"]').parents('li').addClass('active');
});
May be someone is still looking for this solution just like me :)
Using PHP to set the active isn't the ideal way as PHP is server-side code and the bootstrap is a client-side UI. I recently had a project using bootstrap and found the same issue quite annoying given how powerful bootstrap is and truly hope they fix this in the upcoming 3.0 release.
The way I fixed it was to use jquery to reference a unique id on the link tag and update the active tab value based on that.
So really all the jquery did was remove the active class and assign it to the current clicked link.
If you still want to use the URL path than I'd suggest you use javascript/jquery over PHP. Check out this article on how to do just that. http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
Hope that helps.
Using Bootstrap 4
Given (HAML)
%nav.nav.nav-pills.flex-column
%a.nav-link.active{href: '#users', 'data-toggle'=>'pill', role: 'tab'} Users
%a.nav-link{href: '#deals', 'data-toggle'=>'pill', role: 'tab'} Deals
%a.nav-link{href: '#facilitators', 'data-toggle'=>'pill', role: 'tab'} Facilitators
This is reduced to (Coffeescript)
if location.hash
$('nav.nav-pills a[href="'+location.hash+'"]').tab('show')
Doc: http://v4-alpha.getbootstrap.com/components/navs/#via-javascript