Thanks a lot Matt.
Your cues helped me a lot.
Here is my solution to this problem:
=========header.php===========
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>AXSyst</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Advanced Xpert Systems">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js";></script>
<![endif]-->
<script src="js/jquery.js"></script> <!--THIS NEEDS TO BE PLACED HERE
BECAUSE $(document).ready(function(){ WON'T WORK. ALL OTHER JS ARE LOCATED
IN _footer.php -->
</head>
<body>
<!--NavBar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.php">MySite</a>
<div class="nav-collapse">
<ul id=ul_nav class="nav">
<li id="li_home"><a href="index.php">Home</a></li>
<li id="li_about"><a href="about.php">About</a></li>
<li id="li_cont"><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--NavBar end -->
<script type="text/javascript">
function GetCurrentPageName() {
//method to get Current page name from url.
var PageURL = document.location.href;
var PageName = PageURL.substring(PageURL.lastIndexOf('/') + 1);
return PageName.toLowerCase() ;
}
$(document).ready(function(){
var CurrPage = GetCurrentPageName();
switch(CurrPage){
case 'index.php':
$('#li_home').addClass('active') ;
break;
case 'about.php':
$('#li_about').addClass('active') ;
break;
case 'contact.php':
$('#li_cont').addClass('active') ;
break;
}
});
</script>
======================================
Working this way, I don't need to manage navbar page selection in current
pages.
======================================
====== about.php =================
<?php
include("_header.php");
?>
<!--Container -->
<div class="container">
...
</div>
<!--Container end -->
<?php
include("_footer.php");
?>
======================================
I have also made a _footer.php file where I've put the footer, Bootstrap's
javascripts and body and html tags to simplify my other pages files. Maybe
I could have done an in-line verification of the current page in the <li>
tag but I didn't know how to do it, but still, its working fine...
Thanks again.
======================================
=======================================================
Le mercredi 1 août 2012 04:34:59 UTC-4, Matt Field a écrit :
>
> First thing, if you're loading your JS just before the end of the <body>
> tag, you don't need to wrap it in a document.ready listener. The DOM will
> already be built when the renderer reaches the end of the tag, so the
> document.ready is superfluous.
>
> Second, make sure your IDs on the <li>s have been wrapped in quotation
> marks (" "), unless you've correctly declared the HTML5 doctype. Do you get
> any console errors when you run your piece of jQuery?
>
> If those things fail, then you can grab the URL of your current page with
> JavaScript document.location.href, then use that to target the appropriate
> <li>. Open up your developer tools in whatever browser you're using, and
> type document.location.href into the console. You'll get your current pages
> URL returned. The alternative is to hard-code an addClass at the bottom of
> each page, like you've done in your example.
>
>
> On Tuesday, 31 July 2012 17:02:51 UTC+1, fled wrote:
>>
>> Thanks Joyrex.
>>
>> I could effectively do something like that with php, but I would like to
>> use a simplier JQuery approach.
>> Any idea?
>>
>> 2012/7/31 Joyrex
>>
>>> I'm not a PHP programmer myself, but if you have functions in PHP that
>>> tells you what the current page is, you can have it match the menu item's
>>> URL (I'm assuming you're populating the menu dynamically). In ColdFusion,
>>> this is how I do it:
>>>
>>> <li <cfif #GetFileFromPath(GetBaseTemplatePath())# EQ
>>> #ListLast(relativeURL,"/")#>class="active"</cfif>><a
>>> href="/#relativeURL#">#menuName#</a></li>
>>>
>>> What this is saying is, "if the current page (file) matches the URL, add
>>> the "class='active'" text to the LI tag. The text surrounded by # are CFML
>>> variables and functions. I'm outputting each LI dynamically so each time it
>>> creates an LI, it does this evaluation to see whether or not to put the
>>> active class on the LI in question.
>>>
>>> Hope that helps!
>>>
>>>
>>> On Tuesday, July 31, 2012 8:53:17 AM UTC-5, fled wrote:
>>>>
>>>> Hello to all.
>>>>
>>>> I'm using the navbar to navigate through my site. From what I see, I
>>>> need to put the navbar definition on all my pages with the "active class"
>>>> active on the selected page. If I'm right, it is redundant... What I'm
>>>> trying to do is to create a header.php file which would contain the
>>>> navbar.
>>>> This file would then be included "include("header.php")". All of this
>>>> currently works. The only problem I have is, how to activate the List item
>>>> representing the displayed page?
>>>>
>>>> Here is the code:
>>>>
>>>> =========header.php===========
>>>> <!--NavBar -->
>>>> <div class="navbar navbar-fixed-top">
>>>> <div class="navbar-inner">
>>>> <div class="container">
>>>> <a class="btn btn-navbar" data-toggle="collapse"
>>>> data-target=".nav-collapse">
>>>> <span class="icon-bar"></span>
>>>> <span class="icon-bar"></span>
>>>> <span class="icon-bar"></span>
>>>> </a>
>>>> <a class="brand" href="index.php">Mysite</a>
>>>> <div class="nav-collapse">
>>>> <ul id=ul_nav class="nav">
>>>> <li id=li_home><a href="index.php">Home</a></li>
>>>> <li id=li_about><a href="about.php">About</a></**li>
>>>> <li id=li_cont><a href="contact.php">Contact</a>**</li>
>>>> </ul>
>>>> </div>
>>>> </div>
>>>> </div>
>>>> </div>
>>>> <!--NavBar end -->
>>>>
>>>> ====== about.php =================
>>>> I've tried this in this file without success
>>>>
>>>> <body>
>>>> <?php
>>>> include("_header.php");
>>>> ?>
>>>> ...
>>>>
>>>> <!--At the end of the document -->
>>>> <script type="text/javascript">
>>>> $(document).ready(function(){
>>>> $('#li_about').addClass('**active') ;
>>>> });
>>>> </script>
>>>> </body>
>>>> </html>
>>>> Any help would be greatly appreciated.
>>>>
>>>> Thanks.
>>>>
>>>>
>>
>>
>> --
>>
>>
