Not sure what your configuration is, but if you have access to your css
file you dont need any extra javascript. Add a class to your body like
<body class="about">, then add ".about #li_about" to the active style...
sorta like..
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.home #li_home,
.about #li_about,
.contact #li_contact {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
}
then it will just apply whatever styles it normally uses for active state
on those elements just on those pages...
On Wed, Aug 1, 2012 at 8:29 AM, fled <[email protected]> wrote:
> 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('**activ**e') ;
>>>>> });
>>>>> </script>
>>>>> </body>
>>>>> </html>
>>>>> Any help would be greatly appreciated.
>>>>>
>>>>> Thanks.
>>>>>
>>>>>
>>>
>>>
>>> --
>>>
>>>
--
*Dain Kennison* @dainbrain <http://twitter.com/dainbrain>
UX Lead | (mt) Media Temple
www.mediatemple.com | @mediatemple <http://twitter.com/mediatemple>
