[RESOLVED] Navigation Highlithing with CSS

ibnuasad

I am still VERY VERY new to php...and I decided to give a try on making my own personal site using SOME php codings....

Now I have a problem. Well, its a problem to me :bemused:

I will try my best to explain my problem...

First, Here is part of my css code:

.navitab {
padding: 4px 8px 4px 8px;
margin: 0 0 4px 0;
text-decoration: none;
letter-spacing: 1px;
background: #e0e0e0 url(images/corner.gif) top right no-repeat;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
}

.activenavitab {
padding: 4px 8px 5px 8px;
color: #ffffff;
margin: 0 0 5px 0;
text-decoration: none;
background: #505050 url(images/corner.gif) top right no-repeat;
}

And my navigation bar at http://ibnuasad.org

<div id="navitabs">
<h2 class="hide">Site menu:</h2>
<a class="activenavitab" href="index.html">Welcome</a><span class="hide"> | </span>
<a class="navitab" href="bio.html">Bio</a><span class="hide"> | </span>
<a class="navitab" href="contact-page.html">Contact Me</a><span class="hide"> | </span>
<a class="navitab" href="#">Downloads</a><span class="hide"> | </span>
<a class="navitab" href="gallery.html">Gallery</a><span class="hide"> | </span>
<a class="navitab" href="#">Tour</a><span class="hide"> | </span>
<a class="navitab" href="#">Merchandise</a><span class="hide"> | </span>
<a class="navitab" href="#">Interviews</a>
</div>

The navigation code is located at index.html. I want to move the code to a separate file called navigation.php and I would place <?php include("navigation.php") ?> in my index.html file.

Here's the problem:
I want to make something like when I go to index.html I want the "Welcome" text to use the activenavitab style. But when I go to downloads.html I want the "Downloads" text to use the style activenavitab and make the "Welcome" text use the "navitab" style.

Note that I will also be using the code <?php include("navigation.php") ?> in the downloads.html file

Anyone knows how to this?

vaaaska

// you will need to strip out everything after the last '/'
// i'm feeling lazy now so i'm not going to do it
// you'll probably need to strip out any php references as well...
$current page = $_SERVER['REQUEST_URI'];

function getLocation($string,$current_page)
{
    return ($string == $current_page) ? 'activenavitab' : 'navitab';
}

// usage - not the most elegant method but it will work
<a class="<?php echo getLocation('bio.html',$current_page); ?>" href="bio.html">Bio</a><span class="hide"> | </span>

ibnuasad

I have placed the following code to navigation.php and included it in http://ibnuasad.org/bio.html

<?php $current_page = $_SERVER['REQUEST_URI'];

function getLocation($string,$current_page)
{
    return ($string == $current_page) ? 'activenavitab' : 'navitab';
}
?>
<a class="<?php echo getLocation('index.html',$current_page); ?>" href="index.html">Welcome</a><span class="hide"> | </span>
<a class="<?php echo getLocation('bio.html',$current_page); ?>" href="bio.html">Bio</a><span class="hide"> | </span>
<a class="<?php echo getLocation('contact-page.html',$current_page); ?>" href="contact-page.html">Contact Me<span class="hide"> | </span>
<a class="<?php echo getLocation('gallery.html',$current_page); ?>" href="gallery.html">Gallery</a><span class="hide"> | </span>

But It did not show the activenavitab styles on Bio

vaaaska

Yes, but you didn't catch my note about grabbing everything after the last '/'.
Give it a try now with the change.

Are your pages really '.html' pages? Your server parses html as php?

<?php $current_page = $_SERVER['REQUEST_URI'];
$current_page = array_pop(explode('/',$current_page)); // addition

function getLocation($string,$current_page)
{
    return ($string == $current_page) ? 'activenavitab' : 'navitab';
}
?>
<a class="<?php echo getLocation('index.html',$current_page); ?>" href="index.html">Welcome</a><span class="hide"> | </span>
<a class="<?php echo getLocation('bio.html',$current_page); ?>" href="bio.html">Bio</a><span class="hide"> | </span>
<a class="<?php echo getLocation('contact-page.html',$current_page); ?>" href="contact-page.html">Contact Me<span class="hide"> | </span>
<a class="<?php echo getLocation('gallery.html',$current_page); ?>" href="gallery.html">Gallery</a><span class="hide"> | </span>

ibnuasad

Oh..now I get it....

It WORKS...it WORKS! And, yeah...the server parses HTML as PHP

Ok, I dont mean to sound picky but I just gotta ask......

At http://ibnuasad.org/gallery.html the Gallery is using the activenavitab styles but if the url is http://ibnuasad.org/gallery.html?dp=index.php&folder=/ the Gallery will stop using the activenavitab style....is there something that can be done?

vaaaska

Yes, as I mentioned in the beginning...you need to strip out anything beginning and including ?. But, I think you can do this...go for it.

😉

ibnuasad

So the new code would be

<?php $current_page = $_SERVER['REQUEST_URI'];

$current_page = array_pop(explode('/',$current_page)); // addition
$current_page = array_pop(explode('?',$current_page));

function getLocation($string,$current_page)
{
    return ($string == $current_page) ? 'activenavitab' : 'navitab';
}
?>
<a class="<?php echo getLocation('index.html',$current_page); ?>" href="index.html">Welcome</a><span class="hide"> | </span>
<a class="<?php echo getLocation('bio.html',$current_page); ?>" href="bio.html">Bio</a><span class="hide"> | </span>
<a class="<?php echo getLocation('contact-page.html',$current_page); ?>" href="contact-page.html">Contact Me<span class="hide"> | </span>
<a class="<?php echo getLocation('gallery.html',$current_page); ?>" href="gallery.html">Gallery</a><span class="hide"> | </span>

right?

ClarkF1

Does it work if you use

$current_page = explode("/",$_SERVER['SCRIPT_NAME']);
$current_page = $current_page[count($current_page) - 1];

You won't need the two lines using array_pop or the $current_page = $_SERVER['REQUEST_URI']; and it'll work whether you have a ? in the URL or not.

ibnuasad

Yeah! It works 😃 Here's the code that I used:

<?php

$current_page = explode("/",$_SERVER['SCRIPT_NAME']);
$current_page = $current_page[count($current_page) - 1];

function getLocation($string,$current_page)
{
    return ($string == $current_page) ? 'activenavitab' : 'navitab';
}
?>
<a class="<?php echo getLocation('index.html',$current_page); ?>" href="index.html">Welcome</a><span class="hide"> | </span>
<a class="<?php echo getLocation('bio.html',$current_page); ?>" href="bio.html">Bio</a><span class="hide"> | </span>
<a class="<?php echo getLocation('contact-page.html',$current_page); ?>" href="contact-page.html">Contact Me<span class="hide"> | </span>
<a class="<?php echo getLocation('gallery.html',$current_page); ?>" href="gallery.html">Gallery</a><span class="hide"> | </span>

Thanks for helping me, vaaaska and ClarkF1

ClarkF1

I can make it even simpler:

Replace

$current_page = explode("/",$_SERVER['SCRIPT_NAME']);
$current_page = $current_page[count($current_page) - 1];

with

$current_page = basename($_SERVER['SCRIPT_NAME']);

ibnuasad

That works too 🙂 Could you tell me the difference between those two codes?

vaaaska

I think you should get used to looking things up in the manual. It's the best way to learn:

http://be2.php.net/basename
http://be2.php.net/manual/en/reserved.variables.php#reserved.variables.server

Clark's is more better nicer cooler efficient. 😉