Help getting scripting to identify which tab corresponds to the current page.

[euphoriastudio]

Ok this is the pervious thread I posted in the CSS area
http://www.dynamicdrive.com/forums/s...d=1#post125189

I have now transfered my navigation to a PHP file, but now I need to get the correct tab to highlight when you visit that tabs page.

Thanks to BLiZZaRD this is all I need help with:

Now your trick is to make the page report to PHP and tell it which page has been chosen. That will then tell the menu to show which tab is "active"

Any ideas?

[alexjewell]

Ok, you may try getting it from the query string, like so:

menu.php

<?php 

if(isset($_GET['page'])){
$page = $_GET['page'];}
else{
$page = 'home';}

$home = '';
$faq = '';
$analysis = '';
$test = '';
$contact = '';
$current = ' id="current"';

if($page == 'home' || $page == 'faq' || $page == 'analysis' || $page == 'test' || $page == 'contact'){
$$page = $current;}
else{
$home = $current;} ?>

<div id="Layer1" style="z-index: 1; left: 10px; height: 140px; position: absolute; top: 0px">
<img height="140" src="http://euphoriastudio.freehostia.com/header1.png" width="800" /> 
</div>
<div id="tabs" style="z-index: 5; left: 0px; position: absolute; top: 109px; height: 31px;">
  <ul>
    <li<?=$home?>><a href="http://euphoriastudio.freehostia.com/tmst.shtml" title="Home"><span>Home</span></a></li>
    <li<?=$faq?>><a href="http://euphoriastudio.freehostia.com/test.shtml" title="FAQ"><span>FAQ</span></a></li>
    <li<?=$analysis?>><a href="http://euphoriastudio.freehostia.com/test.shtml" title="Analysis"><span>Analysis</span></a></li>
    <li<?=$test?>><a href="http://euphoriastudio.freehostia.com/test.shtml" title="Testimonials"><span>Testimonials</span></a></li>
    <li<?=$contact?>><a href="http://euphoriastudio.freehostia.com/test.shtml" title="Contact Us"><span>Contact Us</span></a></li>
  </ul>
</div>

Now, when you link to a cerain page that you wish to display a particular tab as highlighted/current, you would do this, say for the FAQ page:

faq.php?page=faq

What the code does is it pulls what page equals from the query string (the url). If page does not exist, it defaults to the page being home. So, for the Home page you can just leave the page=home part out since that's what it will show anyway. Next, we create the variables we'll be using later. Then, we make sure that if page does equal something, that it equals one of the pages that exist. If it does, we set that page's variable to $current, which equals the id 'current'. Thus, each variable we originally created still equals nothing and the one that was specified in the url as page will be highlighted as the current page.

There may be a more correct way, maybe even easier way, to do this. But this way isn't too difficult and it should work. If you have any problems or need any more help, let me know.

[euphoriastudio]

ok so heres what i got so far, I was able to get the Home tab to highlight thanks to alexjewell, but now its the only tab that highlights.

<?php 

if(isset($_GET['page'])){
$page = $_GET['page'];}
else{
$page = 'home';}

$home = '';
$faq = '';
$analysis = '';
$test = '';
$contact = '';
$current = ' id="current"';

if($page == 'home' || $page == 'faq' || $page == 'analysis' || $page == 'test' || $page == 'contact'){
$$page = $current;}
else{
$home = $current;} ?>

<div id="Layer1" style="z-index: 1; left: 10px; height: 140px; position: absolute; top: 0px">
<img height="140" src="http://euphoriastudio.freehostia.com/header1.png" width="800" /> 
</div>
<div id="tabs" style="z-index: 5; left: 0px; position: absolute; top: 109px; height: 31px;">
  <ul>
    <li<?=$home?>><a href="http://euphoriastudio.freehostia.com/tmst.php" title="Home"><span>Home</span></a></li>
    <li<?=$faq?>><a href="http://euphoriastudio.freehostia.com/" title="FAQ"><span>FAQ</span></a></li>
    <li<?=$analysis?>><a href="http://euphoriastudio.freehostia.com" title="Analysis"><span>Analysis</span></a></li>
    <li<?=$test?>><a href="http://euphoriastudio.freehostia.com/test.php" title="Testimonials"><span>Testimonials</span></a></li>
    <li<?=$contact?>><a href="http://euphoriastudio.freehostia.com" title="Contact Us"><span>Contact Us</span></a></li>
  </ul>
</div>

so now i need to get the other pages to have their tabs highlight when they are visited. keep in mind this menu will be linked into all the other pages. where do i put the test.php?page=test so the test page will now highlight? I know absolutely no PHP...lol i'm such a noob! thanks for all the help guys.

[alexjewell]

Hmmm, "test" should work, ironically, because that's what I called it to shorten "testimonials"

Let me test this script out myself and see.

[alexjewell]

I just tested it on my site. None of the images showed up, just to let you know. But here's the page:

http://alexjewell2.com/dd/6jan08/index.php

Try the following and notice how the links are changed to "current" :

http://alexjewell2.com/dd/6jan08/index.php?page=faq
http://alexjewell2.com/dd/6jan08/ind...?page=analysis
http://alexjewell2.com/dd/6jan08/index.php?page=test
http://alexjewell2.com/dd/6jan08/index.php?page=contact

Now, also realize that the links themselves must also be changed. For example:

<li<?=$faq?>><a href="http://euphoriastudio.freehostia.com/test.php?page=faq" title="FAQ"><span>FAQ</span></a></li>

That way when someone clicks the link, that link will carry the information to the page that the FAQ <li> should be "current"

Hope this helps

[euphoriastudio]

Holy cow it works! Thanks SO much. I really can't tell you how much I appreciate the time you took to work on this for me. Haha, I need some serious lessons in PHP I was thinking I had to rename my pages "index.php?page=test" and so on, then I realized that the last part is just the code communicating with that link. See. Serious noob when it comes to PHP lol! Thanks again!

[alexjewell]

We all have to start somewhere and with every project, we get more comfortable with the techniques and language(s).
Good luck