scriptygoddess RSS Feed
 
 
 
 

How to get your navigation to know where you are…

Lets say your site has three areas: blog - about - links. When you're on the blog page, you want the link "blog" to be bold (or a different color, or a different image, etc.) but you're using an include for the navigation, (and besides, customizing it for each page is a pain). Again, probably more ways to do this… here's one way in Javascript:

It's kind of clunky but you need an "identifier" on each page. A javascript variable that you can later check on it's value to find out what page you're on.

So for example, on the blog page, you'd have this:

<script language="Javascript">
var thisPage = "blog";
</script>

on the about page that "var thisPage line would look like:

var thisPage = "about";

etc. etc.

THEN, on your navigation include - you show the link/buttons depending on which page you're on:

<script language="Javascript">
//write blog link..
if (thisPage == "blog") {
// we're on the blog page, so let's write blog bold and without a link:
document.write("<b>blog</b>");
} else {
//we're not on the blog page, so let's write it normal:
document.write("<a href=\"/blog.php\">blog</a>");

document.write(" | "); //writing in a little "visual" seperator

//write about link
if (thisPage == "about") {
document.write("<\b>about</b>");
} else {
document.write("<a href=\"/about.php\">about</a>");
}

document.write(" | "); //"visual" seperator

//write links link
if (thisPage == "links") {
document.write("<b>links</b>");
} else {
document.write("<a href=\"/links.php\">links</a>");
}
</script>

additional notes: anywhere you place that script that checks that "thisPage" variable will need the definition of that varible ON THAT PAGE. Otherwise you'll get a javascript error.

16 Responses to “How to get your navigation to know where you are…”

  1. 1
    Lynda:

    I think Jade just did something similar to this in her redesign using PHP, although I have no idea how. (She's a mighty-mighty cool scriptygoddess herself).

    This javascript looks like it could be easily converted to PHP though. Just change the var to make thisPage a variable and all the document.writes to echos, no?

    I always favor PHP to javascript because it's server side rather than client side.

  2. 2
    Lynda:

    Woot!! I converted it to PHP! :)
    This also works in PHP, doing it this way (otherwise same as above):

    <?
    $thisPage = "blog";
    ?>

    <?
    if ($thisPage == "blog") {
    echo "<b>blog</b>";
    } else {
    echo "<a href=\"/blog.php\">blog</a>";
    }

    echo " | ";

    if ($thisPage == "about") {
    echo "<\b>about</b>";
    } else {
    echo "<a href=\"/about.php\">about</a>";
    }

    echo " | ";

    if ($thisPage == "links") {
    echo "<b>links</b>";
    } else {
    echo "<a href=\"/links.php\">links</a>";
    }
    ?>

  3. 3
    Lynda:

    That being said, Jenn, you didn't escape the quotation marks in the javascript above (for the links). Not sure if such stuff needs to be escaped in javascript, as I know little about it.

  4. 4
    Jennifer:

    yup… my bad…
    I'll fix it in the post so it doesn't get confusing.

  5. 5
    Jennifer:

    Also, Lynda - have you had much success with comparing strings like that?
    if (vairable == "string")

    I've only gotten things to work right if I do it this way:
    if (strcasecmp($variable, "string"))
    or
    if (strcmp($varialbe, "string"))

  6. 6
    Lynda:

    I use:

    if ($variable == "word")

    all over my journal and photo section for various things. If that's what you're talking about. It's never given me any problems..

    Is that what you're talking about?

  7. 7
    Shelagh:

    I'm going to love this blog!!! I've long wanted to learn php and have a weighty tome that puts me to sleep in seconds! It's not that I don't understand it but I find it hard to think of practical applications for it - the examples in the book aren't projects I have any use for. The ways that you're using php I can see a use for. The thing I've struggled with, with php, is not so much the how but the why and the where. Thank you very much :D

  8. 8
    Jennifer:

    Lynda - yeah… that's weird… wonder why it's unpredictable for me. (probably just ME! LOL!)

  9. 9
    Row:

    Shelagh! That's exactly my problem! I have this php book which I'm sure is great, but it says nothing about how to use it in ways I really want to.

  10. 10
    Susanna:

    Quite a good idea… I haven't thought of this one before!

  11. 11
    Jade:

    Regarding Lynda's comment above.. yes, I have done the same kind of thing in php, but in a very different way. My navigation is a php include and the query string added onto the end of the include's url is what identifies where you are. Happy to share if anyone wants.

  12. 12
    Jennifer:

    Jade - Please do share!! :D
    (maybe post it on this thread that is talking about doing this with PHP.)

  13. 13
    Phillip:

    I would like to manage this in frames but it does not seem to work. I'm using the title to keep my value…
    the whole thing is: parent.frame.document.title but I get "undefined". any ideas?

  14. 14
    Jennifer:

    Phillip - The only solution I can think of to do that would be with PHP - where you always link to the "framset" page, passing it a) the variable which you'll use to determine the content page, and b) the variable you'll use to determine which navigation should be shown.

    … I'll look at it tonight (unless someone else comes up with a better solution)

  15. 15
    brian:

    hello, i need some help with adding a address

    index.php?page=blah

    script and then it will do

    <? php include('blah.php') ?>

    can anyone fowerd me a search for this?

  16. 16
    Carl:

    Brian:

    To make the variable of "page" the name of your included file, use:

    <?php include("$page.php") ?>

    Then, if you went to index.php?page=about, about.php would be the include.

Bookmarks

WordPress Resources

Meta

Random Stuff