ansaurus

Question

Answer 1

+1 A:

You should assign the ID (which should be a class, semantically speaking, IMHO) using PHP whilst generating the page. Using JS is not only troublesome (you have to go and check your location, probably match a regexp, etc), but also inelegant.

Júlio Santos 2010-10-31 19:12:17

how would I do that using PHP. For example, in my PHP page that contains my navbar, how would I know which page is calling it?

zPesk 2010-10-31 19:13:29

You use GET parameters, for instance. `http://your.domain/whatever?page=pagename`

Júlio Santos 2010-10-31 19:46:15

Answer 2

+1 A:

I'd say that in common coding for javascript where you want a particular element to be 'active' or 'highlighted' or 'enabled', make use of the class attribute. Your id attribute implies a static attribute of the data being used.

malckier 2010-10-31 19:13:26

Answer 3

+2 A:

hello,

as said in comment, PHP will be a better way.

You can simple doing it like this :

<?php

$header = file_get_content('header.html');

$page = 'about.php';

$header = str_replace('<li><a href="'.$page.'">', '<li id="active"><a href="#">', $header);

G. Qyy 2010-10-31 19:18:52

how would I load it as a string?

zPesk 2010-10-31 19:20:30

In your PHP, how do you retrieve your menu ?

G. Qyy 2010-10-31 19:21:29

require("modular/header.php");

zPesk 2010-10-31 19:23:45

Ok, can you edit your question and put the code of header.php into please ?

G. Qyy 2010-10-31 19:24:47

Just did, thanks for your help

zPesk 2010-10-31 19:26:53

I have edited my response. Your header is not a PHP file, so rename it in header.html (even if it's not a proper HTML file, but it's an other problem : you should find a better way for your templates), then, just echo $header.

G. Qyy 2010-10-31 19:32:21

Consider using a complete and without content HTML file with pseudo variables inside you can replace with str_replace() after loading it with file_get_content()

G. Qyy 2010-10-31 19:35:54

Answer 4

A:

While it may be possible (I haven't actually tried it), you would not typically change the id of an element in the page. Instead, it would be a better approach to use class="active" instead of id="active".

Also, you probably want to generate the appropriate html for it on the server-side, as you're building the rest of the page. Something like this would work (though there are many different ways to build this code, depending on your server's implementation):

<ul id="navlist">
    <li class="<?php echo (($currentPage=='Home')?'active':''); ?>"><a href="#">Home</a></li>
    <li class="<?php echo (($currentPage=='About')?'active':''); ?>"><a href="about.php">About</a></li>
    <li class="<?php echo (($currentPage=='News')?'active':''); ?>"><a href="news.php">News</a></li>
    <li class="<?php echo (($currentPage=='Applying')?'active':''); ?>"><a href="applying.php">Applying</a></li>
    <li class="<?php echo (($currentPage=='Residents')?'active':''); ?>"><a href="current.php">Current <br />Residents</a></li>
    <li class="<?php echo (($currentPage=='Alumni')?'active':''); ?>"><a href="alumni.php">Alumni</a></li>
    <li class="<?php echo (($currentPage=='Contact')?'active':''); ?>"><a href="contact.php">Contact</a></li>
</ul>

Note: I've also removed the id="current" attribute from the anchor (<a ...>), because I'm assuming that this would change depending on the current page as well, and it's unnecessary, because you can build CSS selectors to address the anchor, without giving it its own special id or class.

Here's what your CSS might look like:

#navlist li.active {
  /* css rules for the active LI */
}
#navlist li.active a {
  /* css rules for the active (a.k.a. "current") anchor inside the active LI */
}

hope this helps.

[edit] As I said above, it all depends on the architecture of your php code. But assuming that you have a bunch of php pages (eg: "Home.php", "About.php", "News.php", etc.); and each of those pages includes your nav code using something like: require("nav.php");. Then you can just do the following in each of your main php files:

<?php
/* $currentPage, declared here, will be available to php code inside nav.php */
$currentPage = strtolower(basename(__FILE__));
require("nav.php");
?>

Just be sure that you set $currentPage, in each page's main script, somewhere prior to including your nav code (ie. before you call require(...)). The nav code will then be able to "see" $currentPage and use it.

So, for example, if the above code is executed in a file called "About.php", then $currentPage will be set to "about.php" (filename gets converted to all lowercase by the call to strtolower(...)). Then, when "nav.php" gets included, it will be able to access $currentPage and "see" that we're on the 'about' page.

You can change my example above, as follows, to use values of $currentPage that were generated from the filename using the approach I've described here.

<ul id="navlist">
    <li class="<?php echo (($currentPage=='home.php')?'active':''); ?>"><a href="#">Home</a></li>
    <li class="<?php echo (($currentPage=='about.php')?'active':''); ?>"><a href="about.php">About</a></li>
    <li class="<?php echo (($currentPage=='news.php')?'active':''); ?>"><a href="news.php">News</a></li>
    <li class="<?php echo (($currentPage=='applying.php')?'active':''); ?>"><a href="applying.php">Applying</a></li>
    <li class="<?php echo (($currentPage=='residents.php')?'active':''); ?>"><a href="current.php">Current <br />Residents</a></li>
    <li class="<?php echo (($currentPage=='alumni.php')?'active':''); ?>"><a href="alumni.php">Alumni</a></li>
    <li class="<?php echo (($currentPage=='contact.php')?'active':''); ?>"><a href="contact.php">Contact</a></li>
</ul>

Lee 2010-10-31 19:22:35

what is $currentPage and how to you get the value of it?

zPesk 2010-10-31 19:28:24

@zPesk - I just edited my answer to include the details you requested. please see above.

Lee 2010-10-31 19:51:16

Answer 5

+1 A:

I suggest using PHP for this instead, since you're serving pages from the server anyway.

If you're hardcoding the navigation links it can be repetitive to decide which link to add the ID to on page load by going through every link manually.

What I do for my site's navigation is store my links in an array, then loop through that and echo links. For your case it'll be pretty simple (you may have to modify according to your own PHP code):

$nav_links = array(
    'home', 
    'about', 
    'news', 
    'applying', 
    'current', 
    'alumni', 
    'contact'
);

foreach ($nav_links as $link) {
    if ($_SERVER['SCRIPT_NAME'] == $link . '.php')
        $li = '<li id="active"><a href="#" id="current">%2$s</a></li>';
    else
        $li = '<li><a href="%1$s.php">%2$s</a></li>';

    printf($li, $link, ucfirst($link));
}

Since you are including the header HTML into your main page scripts, $_SERVER['SCRIPT_NAME'] should correspond to the page being currently requested.

There's one limitation to this approach though, Home will probably be index.php and not home.php, but it should be trivial to deal with that case.

See the PHP manual on how printf() and friends work.

BoltClock 2010-10-31 19:25:42

Answer 6

+1 A:

Hey,

I think this will do what you want.

<ul id="navlist">
<li id="home"> <a href="#" id="current">Home</a></li>
<li id="about"> <a href="about.php">About</a></li>
<li id="news"> <a href="news.php">News</a></li>
<li id="applying"> <a href="applying.php">Applying</a></li>
<li id="currentResidents"> <a href="current.php">Current <br/>Residents</a></li>
<li id="alumni"> <a href="alumni.php">Alumni</a></li>
<li id="contact"> <a href="contact.php">Contact</a></li>
</ul>

<script type="text/javascript">

    var pagePath = window.location.pathname;
    var pageName = pagePath.substring(pagePath.lastIndexOf('/') + 1);
    var currentActive;

    function setActivePage(page)
    {
        if(currentActive)
            document.getElementById(currentActive).removeAttribute("class");

        document.getElementById(page).setAttribute("class", "active");
        currentActive = page;
    }


    if(pageName == "about.html")
        setActivePage("about");
    else if(pageName == "otherpage.html")
        setActivePage("otherpage");
    // Etc...

</script>

If you were using jQuery this may have been done in a better and lesscode way... but I assume you're not using it.

Hope it helps :)

The Devil 2010-10-31 19:28:12

You should use four spaces per line to indent your code. Not only does this display it in a neat code box, but it allows this site to syntax highlight it.

BoltClock 2010-10-31 19:44:00

Yeah.. I'm in process of trying to learn how that's done :) Usually I posted such codes in forums and I used [code][/code] but here it's a bit different. I'll do some research on how things are being done here. :)

The Devil 2010-10-31 20:24:29

ansaurus

tags:

views:

answers:

Changing element ID with javascript

related questions