www.webdeveloper.com
Results 1 to 8 of 8

Thread: using document.title to identify current page

Hybrid View

  1. #1
    Join Date
    Jan 2011
    Posts
    2

    using document.title to identify current page

    I'm designing a website and I would like to add a certain class to a navigation element based on the document title. I currently have the following javascript. The nav elements have separate ids (the About Us nav element has the id="about" and so on)


    <code>
    window.onload=function(){
    var docTitle = document.title;
    var about = document.getElementById("about");
    var advising = document.getElementById("advising")


    if (docTitle = "About Us") {
    about.setAttribute("class", "current");
    about.setAttribute("className", "current"); // for IE which does not recognize "class"
    return;
    }
    else {
    about.setAttribute("class", "top_link");
    about.setAttribute("className", "top_link"); // for IE which does not recognize "class"
    }


    if (docTitle = "Career Advising") {
    advising.setAttribute("class", "current");
    advising.setAttribute("className", "current"); // for IE which does not recognize "class"
    return;
    }
    else {
    advising.setAttribute("class", "top_link");
    advising.setAttribute("className", "top_link"); // for IE which does not recognize "class"
    }



    }
    </code>

    The class change works
    The problem seems to be that the if statement is true whether or not the document.title ="about" or anything else, (if I remove the return, both about us and advising elements have their class changed.

    Thank you in advance

  2. #2
    Join Date
    Mar 2009
    Posts
    493
    I think you're failing to get the text that is contained with the title tags, which I assume is what you are really after. Try:

    Code:
    var v = document.getElementsByTagName('title');
    var x =v[0].innerHTML;
    alert(x); //this is the text within the TITLE tags
    This does ASSUME that there is only one set of TITLE tags in your HTML document. (don't laugh, I've seen stranger things before)

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there njlyell,

    also note that your if statements are incorrect.

    They should be like this...
    Code:
    if (docTitle =="About Us") {
    coothead

  4. #4
    Join Date
    Jan 2011
    Posts
    2
    Thanks both of you, it worked.

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    No problem, you're very welcome.

  6. #6
    Join Date
    Aug 2009
    Posts
    593
    Just specifying the className attribute should work for all major browsers:

    Code:
    //about.setAttribute("class", "current");
    about.setAttribute("className", "current");
    Or even just:

    Code:
    about.className = 'current';

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by thraddash View Post
    Just specifying the className attribute should work for all major browsers:

    Code:
    //about.setAttribute("class", "current");
    about.setAttribute("className", "current");
    No, this won't work in all the browsers.
    Quote Originally Posted by thraddash View Post
    Or even just:

    Code:
    about.className = 'current';
    Yes. This DOM level 0 syntax is crossbrowser.

  8. #8
    Join Date
    Jan 2011
    Posts
    117
    Quote Originally Posted by njlyell View Post
    Thank you in advance

    I might be the newest member at this moment.
    So, -Greetings to every one!

    I do JavaScript since the summer of 1996, and I think I've learned some good coding practices during these years, that I'd like to share.

    To the topic:
    -Assuming that, "About Us" is a different page from the "Advising..." one, and that your Top Links are using "top_link" class as default , -the only thing you need to do would be to accent the current link one leaving others undisturbed.

    Also, (assuming that) your naming principle is as precise as seen here, I propose you try something like this (following script and approach).

    Code:
    window.onload=function(){
         var docTitle = document.title.split(" ")[0];
         var current = document.getElementById(docTitle);
              current.className="current"
              }
    Regards, to all.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles