Results 1 to 10 of 10

Thread: Help With Javascript & Css Styles

  1. #1
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help With Javascript & Css Styles

    Hello All,

    I have a header w/ a navigation, and each navigation button is an <li>.
    Now based on which page you are on (lets say the Home page) that specififc <li> has a class on it
    I.E.: <li class="selected">Home</li>
    and if you are on the contact page the class will be on the contact <li> and not the home one

    so here is where it gets tricky

    using JavaScript (and a URL paramter), how would I get it to be where the JS will know what <li> to put the class on
    so basically I want 1 header file, and then 1 class to go between the <li>'s based on the page ur on and I can control which one has the class by a URL param

    I.E.:

    <a href="blah.html?button=contact"> then we would go to blah.html and the contact <li> would have the class on it (and no other li's would have the class).

    Another example:

    <a href="test.html?button=about"> then we would go to test.html and the about <li> would look like <li class="selected">about</li> (and no other li's would have a class).


    Any and all help would be VERY much apprecaited.

    Thank you in advance,
    LawMaker

  2. #2
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    to use: http://...?... you need PHP.
    However, this can be done with JavaScript. I haven't tested this, but it should work.
    Add the following to your stylesheet:
    Remove all copies of class="selected" and add this code to the <li>s:
    Code:
     id="contact"
    Add this in the <head> of your page:
    HTML Code:
    <script type="text/javascript">
    var place = window.location;
    then copy this however many times needed.
    Code:
    if (place == "http://www.mysite.com/contact.html") {
         var contact = '<a class="selected">Contact</a>'
         document.getElementById("contact").firstChild.nodeValue = contact;
    }
    then do:
    HTML Code:
    </script>
    It's the best I can do, it isn't valid markup (probably), it's not good structure, and it probably won't work. However, I did my best. I repeat, I doubt it'll work, and I haven't tested it.
    Last edited by techno_race; 04-12-2007 at 01:26 AM. Reason: because I said id instead of class in one place
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    menu_li.htm
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    li {
    display:block;
    float:left;
    width:5em;
    text-align:center;
    border:1px solid black;
    }
    .selected {
    font-weight:bold;
    background-color:yellow;
    }
    </style>
    <script type="text/javascript">
    function setClass(){
    var lis=document.getElementsByTagName('li');
    var regex=new RegExp(get('button'));
    for (var i_tem = 0; i_tem < lis.length; i_tem++)
    if(regex.test(lis[i_tem].innerHTML.toLowerCase()))
    lis[i_tem].className='selected';
    }
    function get(key_str) {
    var query = window.location.search.substr(1);
    var pairs = query.split("&");
    for(var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split("=");
    if(unescape(pair[0]) == key_str)
    return unescape(pair[1]);
    }
    return null;
    }
    if(get('button')){
    if ( typeof window.addEventListener != "undefined" )
        window.addEventListener( "load", setClass, false );
    else if ( typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", setClass );
    else {
        if ( window.onload != null ) {
            var oldOnload = window.onload;
            window.onload = function ( e ) {
                oldOnload( e );
                setClass();
            };
        }
        else
            window.onload = setClass;
    }
    }
    
    </script>
    </head>
    <body>
    <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    </ul>
    </body>
    </html>
    Link to the above page as:

    HTML Code:
    <a href="menu_li.htm?button=home">Home</a>
    <a href="menu_li.htm?button=about">About</a>
    <a href="menu_li.htm?button=contact">Contact</a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank You So Much

    John, This is PERFECT, thank you SO much.

    LawMaker

  5. #5
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Found a slight bug

    John,

    This does work perfectly but the slight bug is when I put an href around the name in the <li>

    I.E. <li><a href="contact.html">Contact</li>

    and i do the url menu_li.html?button=contact it doesnt work, but if I take the href's out it works again.

    Do you think its possible to get this to work with the href's?

  6. #6
    Join Date
    Apr 2006
    Posts
    190
    Thanks
    3
    Thanked 7 Times in 7 Posts

    Default

    Ryan
    Sevierville, TN

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It should work with anchor links. However, this:

    Code:
    <li><a href="contact.html">Contact</li>
    isn't an anchor link, it is invalid code. If you write a valid tag, it should work:

    Code:
    <li><a href="contact.html">Contact</a></li>
    Testing this locally though, I couldn't get it to not work but, that could be because my demo page has no other links on it and/or it could be browser specific. There could be other problems, depending upon just what you are doing in your code. If you continue to have problems, post a link to the problem page and let me know what browsers you are testing in. Do not test in an editor.

    Also, as I hope you are aware, this will only work in browsers with javascript enabled.

    One other thing, styles for the a tag on your page may be overriding the select class.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John,

    Im sorry there are </a> tags. here is exactly what I have for menu_li.html, If you notice the HOME works if the url is menu_li.html?button=home, but if I hcange the url to be something like menu_li.html?button=about, it doesnt work

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .nav_selected
    { background: url(../images/nav_bg_over.gif) repeat-x; font-family:Arial,Helvetica;font-size:12px;font-weight:bold;color:#ff0000;text-decoration: none; }
    .nav_selected A:link {color:#ff0000;text-decoration: none;}
    .nav_selected A:visited {color:#ff0000;text-decoration: none;}
    .nav_selected A:active {color:#ff0000;text-decoration: none;}
    .nav_selected A:hover {color:#ff0000;text-decoration: none;}


    #nav
    {
    margin: 0;
    font-family:Arial,Helvetica;font-size:12px;font-weight:bold;color:#22364D;text-decoration: none;
    background-color: #996;
    padding: 0px;
    width: 748px;
    height: 111px;
    background: url(../images/logo_top.gif) no-repeat;
    vertical-align: bottom; /* This fixes the IE5 Win gap! */
    }

    #nav li
    {
    display: inline;
    margin-top: 75px;
    float: left;
    list-style-type: none;
    padding-left: 0px;
    height: 31px;
    background: url(../images/nav_bg.gif) repeat-x;
    vertical-align: bottom; /* This fixes the IE5 Win gap! */
    }

    #nav a:link, #nav a:visited, #nav a:active
    {
    color: #123549;
    padding-top: 8px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    display: block;
    text-decoration: none;
    height: 31px;
    }

    #nav a:hover
    {
    color: #ffffff;
    float: left;
    background-color: #663;
    height: 31px;
    background: url(../images/nav_bg_over.gif) repeat-x;
    }
    </style>



    <script type="text/javascript">
    function setClass(){
    var lis=document.getElementsByTagName('li');
    var regex=new RegExp(get('button'));
    for (var i_tem = 0; i_tem < lis.length; i_tem++)
    if(regex.test(lis[i_tem].innerHTML.toLowerCase()))
    lis[i_tem].className='nav_selected';
    }
    function get(key_str) {
    var query = window.location.search.substr(1);
    var pairs = query.split("&");
    for(var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split("=");
    if(unescape(pair[0]) == key_str)
    return unescape(pair[1]);
    }
    return null;
    }
    if(get('button')){
    if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", setClass, false );
    else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", setClass );
    else {
    if ( window.onload != null ) {
    var oldOnload = window.onload;
    window.onload = function ( e ) {
    oldOnload( e );
    setClass();
    };
    }
    else
    window.onload = setClass;
    }
    }

    </script>
    </head>
    <body>

    <table width="748" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td height="111">
    <ul id="nav">
    <li>HOME</li>
    <li><img src="images/nav_div.gif" height="31" width="2" border="0" alt="" /></li>
    <li><a href="about.html">ABOUT</a></li>
    <li><img src="images/nav_div.gif" height="31" width="2" border="0" alt="" /></li>
    <li><a href="services.html">SERVICES</a></li>
    <li><img src="images/nav_div.gif" height="31" width="2" border="0" alt="" /></li>
    <li><a href="portfolio.html">PORTFOLIO</a></li>
    <li><img src="images/nav_div.gif" height="31" width="2" border="0" alt="" /></li>
    <li><a href="contact.html">CONTACT</a></li>
    <li><img src="images/nav_div.gif" height="31" width="2" border="0" alt="" /></li>
    </ul>

    </td>
    </tr>
    </table>

    <br><br><br><br><br><br><br><br>


    This is a test of other lists
    <ul>
    <li>test
    </ul>


    </body>
    </html>

  9. #9
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OMG, NXArmada's url worked perfectly,

    So simple yet I feel like such a brain dead moron right now =0(

    John, my appologies for all of this, your code is amazing, but it is so much easier then I ever thought possible.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's great if it works out for you. I found the problem with your other setup. You need to include the id as, otherwise id takes precedence over class:

    Code:
    #nav .nav_selected
    { background: url(../images/nav_bg_over.gif) repeat-x; font-family:Arial,Helvetica;font-size:12px;font-weight:bold;color:#ff0000;text-decoration: none; }
    #nav .nav_selected A:link {color:#ff0000;text-decoration: none;}
    #nav .nav_selected A:visited {color:#ff0000;text-decoration: none;}
    #nav .nav_selected A:active {color:#ff0000;text-decoration: none;}
    #nav .nav_selected A:hover {color:#ff0000;text-decoration: none;}
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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