Hi Dain.
It is a nice approach, but I will still need to modify all my other pages
to add <body class="watever">.
What is nice with my approach is that everything is happening in the
_header.php file. No other files today and in the futur to modify...
Thanks anyway
Le mercredi 1 août 2012 15:15:57 UTC-4, Dain Kennison a écrit :
>
> 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 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>
>
>
