Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript define class

    I currently have a navigation bar with CSS. It sits by itself in a frame so it doesn't change with the other page turns. So I'm trying to figure out how to set each link class="active" since it always stays on the same page.

    I'm thinking javascript will be my friend.

    Is there an onclick function that can be defined? I'm not new to webpages but new to learning javascript, instead of borrow someone's code.

    I didn't know how to approach this code because I think I need it to say:

    If Onclick, then set to class="active", otherwise (then), set class="nothing" or anything to this regard.

    I was not sure how I could approach that code and how to fit into the UL/LI html code I currently have setup as well as the head code.

    Example code: (I have 3 frames called head, form, and body. Head is the nav bar where this code sits.)

    Code:
    <ul class="menu">
    <li><a href="choose.htm" class="active"><span>Home</span></a></li>
    <li><a href="search.htm" target="form" 
    onClick="top.body.location='http://www.google.com';"><Span>
    Google</span></a></li></ul>
    With my CSS code, the "menu" defines some colors/setup, as so does Span and class="active".

    As a bonus, if you could teach me instead of just help me, it would help me help others.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    I'm a little lost here.

    What is it you want to put the onclick into???

    OH! Wait! I get it. You want the last-clicked-on <li><a> to be "active" and all the other <li><a> to be "inactive" (or whatever)?

    Why isn't there an existing onclick in your first <li><a>? The "Home" item??? And not to ask a dumb question, but what's the point of the <span>s there?

    ANd how does your "google" menu item work??? As it sits now, if the user clicks on it, then yes, the top.body.location changes, but *SO ALSO* does the frame this code appears in change to "seach.htm"!!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You want the last-clicked-on <li><a> to be "active" and all the other <li><a> to be "inactive" (or whatever)?
    Exactly.

    Why isn't there an existing onclick in your first <li><a>?
    This was a free code on the internet. It was a free css navigation form. It didn't orignally come with one. I think the thought was to create the navigation form on top of every page, and the change the current page to "active" so that it will be highlighted. However, this doesn't work due to it being nested within a frame.

    what's the point of the <span>s there?
    I had mentioned that. The CSS code that I use defines the span to use a certain color combination. If I remove the SPAN, then the page becomes a plain looking text. I add the span to each word, and it makes it look purdy.

    ANd how does your "google" menu item work??? As it sits now, if the user clicks on it, then yes, the top.body.location changes, but *SO ALSO* does the frame this code appears in change to "seach.htm"!!
    Yes. I used google as the example but it is various search bars from various internal sites. This page has to be able to run from a desktop as it will not have access to server coding.

    However. I have a navigation bar. For this purpose, let's make up search engines as the links. Home | Google | Yahoo | MSN

    I have 3 frames setup. They are all rows as I didn't need something to the left or right. It's a tiny row, then a little larger row frame, and then the bigger body frame.

    Code:
    <head>
    <title>Search Tool</title>
    </head>
    
    <frameset rows="17, 50, *" border=0>
       <frame frameborder=0 scrolling="no" noresize="noresize" src="choose.htm" name="head" framespacing="0" border="0">
    
    <frame frameborder=0 scrolling="no" noresize="noresize" src="blank.htm" name="form" framespacing="0" border="0">
    
       <frame frameborder=0 noresize="noresize" src="blank.htm" name="body" framespacing="0" border="0">
    </frameset>
    When the user clicks the link, in this case Google, it loads the search portion from a various folder into the "form" frame. In addition to the same click, it also loads Google.com into the "body" frame. If the user was to click Yahoo, it would then load the Yahoo search bar, and also the yahoo page in both appropriate frames.

    What I am trying to do is find an Onclick function for those navigation links to see if it is possible to change each active clicked link to "active."

    For fun, here is the CSS Code:

    Code:
    body {margin:0px; padding:0px;}
    .menu{margin:0 left; padding:0; height:30px; width:100%; display:block; background:url("../images/topMenuImages.png") repeat-x;}
    .menu li{padding:0; margin:0; list-style:none; display:inline;}
    .menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url("../images/topMenuImages.png") 0px -30px no-repeat; outline:none;}
    .menu li a span{line-height:14px; float:left; display:block; padding-right:1px; background:url("../images/topMenuImages.png") 100% -30px no-repeat;}
    .menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
    .menu li a:hover span{background-position:100% -60px;}
    .menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("../images/topMenuImages.png") 0px -90px no-repeat; color:rgb(255,255,255);}
    .menu li a.active span, .menu li a.active:hover span{background:url("../images/topMenuImages.png") 100% -90px no-repeat;}

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Minor point: You could have applied the CSS for the spans to the CSS for the <a>s to get the same effect. But who cares. Yes, this makes sense.

    I think you missed my point about this line:
    Code:
    <a href="search.htm" target="form" onclick="top.body.location='http://www.google.com';"><span>Google</span></a>
    The onclick there will, indeed, change the URL of the body <frame>.

    EDIT: Oops...missed the target="form" so my comment is changed now.

    BUT... Because you did not *SUPPRESS* the normal action of the onclick of the <a> tag, the href specified there will *ALSO* happen, and the contents of "form" will be replaced with "search.htm". Is that intentional? Will that happen with all the menu items?

    And is the "HOME" menu item different? Do you *REALLY* want it to reload the current frame with "choose.htm"? Because that *IS* what will happen if it is clicked on.
    Last edited by Old Pedant; 02-16-2012 at 10:34 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    WIthout waiting for your answers, there are some assumptions in this code.

    Especially about the "home" link.

    What is supposed to go to the "form" frame when the "home" link is clicked on?

    What is supposed to go to the "body" frame, ditto?

    But anyway...

    We find the <ul> by using its id (newly assigned by me...change name is fine).

    And then we as to get all the <a> elements that are contained within that <ul>...</ul> range.

    And we simply loop through *all* of them, changing their class names to blank.

    But then finally we use the reference to the clicked on link (which was passed via the this keyword) and change that one clicked on link to "active" class name.

    I move the assignment to the top.body.location into the function for convenience and compactness of code.

    I am doing return true so that the normal action of the <a> tag is *NOT* suppressed. Just in case.

    Code:
    <script type="text/javascript">
    function chose(link,url)
    {
        top.body.location.href = url;
        var links = document.getElementById("themenu").getElementsByClassName("a");
        for ( var a = 0; a < links.length; ++a )
        {
            links[a].className = "";
        }
        link.className = "active";
        return true;
    }
    </script>
    ...
    <ul id="themenu" class="menu">
    <li><a href="choose.htm" target="form" class="active" onclick="return chose(this,'home.htm');">
            <span>Home</span></a></li>
    <li><a href="search.htm" target="form" onclick="return chose(this,'http://www.google.com');">
            <span>Google</span></a></li>
    <li><a href="search.htm" target="form" onclick="return chose(this,'http://www.yahoo.com');">
            <span>Yahoo</span></a></li>
    <li><a href="search.htm" target="form" onclick="return chose(this,'http://www.bing.com');">
            <span>Bing</span></a></li>
    </ul>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OIC! I'm sorry for the confusion. I didn't understand what you meant until now.

    the href specified there will *ALSO* happen, and the contents of "form" will be replaced with "search.htm". Is that intentional? Will that happen with all the menu items?
    Yeah, I did this so 2 links could click at once. Instead of clicking once for the search bar in "form" frame, then doing a search in the form frame to open up the Body, I went ahead and made them open up both the search bar and the main page to the internal site to make it flush looking.

    I forgot there was an onclick already in there, but I think you know what I mean based on your reply.

    And the home function is the nav bar, so it's not really needed. I just threw it in there while rough editing to test for functionality and appearance. Nothing is supposed to happen with it. I just have it as a link to itself. Could that be an issue?

    Head frame is the nav bar, form frame is the search bar that loads for each internal site, and the body frame is the actual site that is linked to that search bar. Some sites require you to login, so by loading it upfront, it can let the user login before using the search bar. I hope this makes sense.

    So I am not sure if it makes a difference but each "search.htm" is a different file, but if that doesn't make a difference, you're right, this code did work the same as the other code I was using. However, I did exactly as requested, but I don't have the function of the class=active. Do I need to add a class="" to each link? When I currently click on each link, it does put the correct pages in the correct places, but it acts as just a link, and doesn't do anything else.

    You could have applied the CSS for the spans to the CSS for the <a>s to get the same effect.
    Also, you're right. I'm learning on the fly with css, and I pretty much borrowed a pre-made one for my purpose so I really didn't try to modify this nav bar other than to make it smaller and flush with top left of my screen. It was wildly scattered for what I needed.

    I appreciate your help so far, just let me know what you think I can do about the SPAN = Active deal.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    I just have it as a link to itself. Could that be an issue?
    Yes. That will cause the page to be reloaded. Probably not a huge deal, but also probably worth just doing nothing when HOME is clicked on.

    Not sure this is what you mean/want, but see the difference:
    Code:
    <li><a href="#" class="active" onclick="chose(this,'home.htm');return false;">
            <span>Home</span></a></li>
    That return false will cause the normal action of the <a> tag to be suppressed, so ONLY the action performed in the choose( ) function will be done.

    Re each "search.htm" being different: Fine. Just specify the right URL in each case. Should work right.

    ***********

    MEA MAXIMA CULPA!

    The bug about "active" not being turned off is mine. I just made a typo. I knew what I *meant* to do, I just didn't do it.

    This line:
    Code:
        var links = document.getElementById("themenu").getElementsByClassName("a");
    should be
    Code:
        var links = document.getElementById("themenu").getElementsByTagName("a");
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome. That did work. Amazing how javascript can be a friend or an enemy.


  •  

    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
    •