Activating Menu

Hi,

I have a menu, when the user click on the menu it should get a background color to #a51d43

this is what i have and it's not working

#nav ul li a {
 /* margin:10px; */
    color:#FFF;
 /* padding:4px;
    font-size:20px;
    text-decoration:none; */
    }

#nav ul li a:hover {
    border-bottom:3px #FFF solid;
 	background-color:#000000;
    }

#nav ul li .active {
    border-bottom:3px #FFF solid;
 	background-color:#a51d43;
    }



    <menu id="nav">
    <ul class="categories" style="font-size:12px;color:#ffffff;">
      <li><a href="index.cfm" class="index" style="padding-left:-5px; padding-right:15px;color:#ffffff;font-weight:bold;">Home</a></li>
      <li><a href="#" class="VersionHist" style="color:#ffffff;font-weight:bold;">Version History</a></li>
      <li><a href="AddRule.cfm" class="AddRule" target="_self" style="color:#ffffff;font-weight:bold;">Add New Testing Rule</a></li>
    </ul>
    </menu>





$(document).ready(function () {
	$.ajaxSetup({ cache: false });
	
	var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

    // passes on every "a" tag 
    $("#nav ul li a").each(function() {
            // checks if its the same on the address bar
        if(url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) { 
            $(this).closest("li").addClass("active");
        }
		else if(url == "Index.cfm"){
			$(".Alert").closest("li").addClass("active");
		}
		else if(url == "AddRule.cfm"){
			$(".Alert").closest("li").addClass("active");
		}

		
    });

Open in new window

lulu50Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
Do you have javascript errors?

Because if the first regex execution doesn't find anything, getting the first item will throw an error.
var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

Open in new window

Check the dev tools to see if you have javascript errors.
0
lulu50Author Commented:
no I am not getting any error
0
Alexandre SimõesManager / Technology SpecialistCommented:
Ah, I just had a closer look at your CSS, I think you're not setting the active class correctly.
Should be:
#nav ul li.active {
    border-bottom:3px #FFF solid;
 	background-color:#a51d43;
    }

Open in new window

I removed the space between the li and the .active.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

lulu50Author Commented:
Alexandre

yes, that is correct that I had the active CSS wrong

but when I submit the form to itself I lose my active style

so when I click on the menu I do get the background changed, but when I submit the page to itself the background goes back to the default color.
0
lulu50Author Commented:
if the url is this -> AddRule.cfm -> it works fine

but

when I submit the page to itself

AddRule.cfm?id=51  -> now this does not work because it has id=51
0
Julian HansenCommented:
Where is your code showing the submit?
0
lulu50Author Commented:
oh it goes to SubmitRule.cfm for an insert than go back to the same page that's when I lose my menu.



<FORM id="UnitTestingFrm" NAME="UnitTestingFrm" METHOD="POST" ACTION="SubmitRule.cfm?id=<cfoutput>#PID#</cfoutput>">

   <button name="SubRule" id="SubRule" type="submit" style="border: 0; background: transparent;cursor:pointer;" >
    <img src="images/NextBtn.jpg" alt="Next" />
	</button>

</FORM>

Open in new window

0
Alexandre SimõesManager / Technology SpecialistCommented:
Let me see if I get it right:

So if you do Ctrl+F5 it highlights the menu but if you click that highlighted menu item, it refreshes the page but doesn't get highlighted back.

is that it?
0
lulu50Author Commented:
If I click on the menu it will highlights but if I add (id=51) in the URL and click on enter
it will not highlights.

AddRule.cfm?id=51 -> it will not highlights
0
Alexandre SimõesManager / Technology SpecialistCommented:
Ok, so what you need should be something like:
        if (url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) {
            $(this).closest("li").addClass("active");
        } else if (window.location.href.indexOf("Index.cfm") > 0) {
            $(".Alert").closest("li").addClass("active");
        } else if (window.location.href.indexOf("AddRule.cfm") > 0) {
            $(".Alert").closest("li").addClass("active");
        }

Open in new window

If it works it should still be optimized, but for the time being it's enough just to test.
0
Julian HansenCommented:
AddRule.cfm?id=51 -> it will not highlights
It won't - you are testing your URL against the href of the link

AddRule.cfm?id=51 is not equal to AddRule.cfm

Open in new window

You need to strip out the filename from the URL like so

  var UrlParts = window.location.pathname.split( '/' );
  var url = UrlParts[UrlParts.length -1];

Open in new window

Try that instead of
var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

Open in new window

0
lulu50Author Commented:
Alexandre   and  Julian  Thank you both for all your help

IT WORKS :-)  

THANK YOU THANK YOU AND ONE MORE THANK YOU

Thanks,
lulu
0
lulu50Author Commented:
one more time THANK YOU LOL
0
Julian HansenCommented:
You are most welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.